\n {backButton}\n
\n {slides.map((val) => ( onSlideDotClick(val)} className={val === activeSlide ? controllerActiveDotStyles : controllerStyles.controllerDot}>))}\n
\n {nextButton}\n
);\n}\n","import { css } from \"@emotion/css\";\nimport { borderWidth, space, text, themeTokens } from \"@octopusdeploy/design-system-tokens\";\nconst tableBorder = `${borderWidth[1]} solid ${themeTokens.color.border.primary}`;\nexport const tableStyles = css({\n width: \"100%\",\n backgroundColor: themeTokens.color.background.primary.default,\n borderSpacing: 0,\n th: {\n padding: `${space[12]} ${space[16]}`,\n textAlign: \"left\",\n font: text.table.cell.default.medium,\n position: \"relative\",\n \":not(:last-child)\": {\n \":after\": {\n content: \"''\",\n position: \"absolute\",\n height: \"50%\",\n right: 0,\n top: \"25%\",\n borderRight: tableBorder,\n },\n },\n },\n td: {\n borderTop: tableBorder,\n font: text.table.cell.default.base,\n padding: `${space[8]} ${space[12]}`,\n verticalAlign: \"middle\",\n },\n});\nexport const tableMobileStyles = css({\n display: \"block\",\n overflowX: \"auto\",\n});\n","import { css, cx } from \"@emotion/css\";\nimport type { ReactNode } from \"react\";\nimport React from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { tableMobileStyles, tableStyles } from \"./styles\";\nexport const columnSizes = [\"x-small\", \"small\", \"medium\", \"large\", \"x-large\"] as const;\nexport type ColumnSize = (typeof columnSizes)[number];\nexport interface DataTableColumn