npm - @databricks/design-system - Versions diffs - 1.9.1 → 1.9.2 - Mend

@databricks/design-system 1.9.1 → 1.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/dist/development.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"development.js","sources":["../src/development/TableUI/index.tsx","Typography-84a00e02.js","../src/development/Slider/Slider.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport React, { createContext, useContext } from 'react';\n\nimport { Checkbox, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon } from '../../design-system';\nimport { useDesignSystemTheme } from '../../design-system/Hooks';\nimport { Typography } from '../../design-system/Typography';\nimport type { TextProps } from '../../design-system/Typography/Text';\n\n// For performance, these styles are defined outside of the component so they are not redefined on every render.\n// We're also using CSS Variables rather than any dynamic styles so that the style object remains static.\nconst tableStyles = {\n row: css({\n display: 'flex',\n borderBottom: '1px solid',\n borderColor: 'var(--table-border)',\n\n // Note: Next-sibling selector is necessary for Ant Checkboxes; if we move away\n // from those in the future we would need to adjust these styles.\n '.table-row-select-cell input[type=\"checkbox\"] ~ ': {\n opacity: 'var(--row-checkbox-opacity, 0)',\n },\n\n '&:hover': {\n '[role=\"cell\"]': {\n backgroundColor: 'var(--table-row-hover)',\n },\n\n '.table-row-select-cell input[type=\"checkbox\"] ~ ': {\n opacity: 1,\n },\n },\n\n '.table-row-select-cell input[type=\"checkbox\"]:focus ~ ': {\n opacity: 1,\n },\n }),\n\n cell: css({\n display: 'inline-grid',\n alignItems: 'var(--table-row-vertical-alignment, flex-start)',\n flex: 1,\n lineHeight: 'initial',\n padding: '6px 8px',\n\n '&[role=\"columnheader\"]': {\n padding: '8px',\n },\n }),\n\n cellSmall: css({\n padding: '4px 8px',\n '&[role=\"columnheader\"]': {\n padding: '4px 8px',\n },\n }),\n\n header: css({\n fontWeight: 'bold',\n alignItems: 'flex-end',\n display: 'flex',\n overflow: 'hidden',\n\n '&[aria-sort]': {\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n '[role=\"img\"]': {\n marginLeft: '4px',\n },\n }),\n\n headerButtonTarget: css({\n alignItems: 'flex-end',\n display: 'flex',\n overflow: 'hidden',\n width: '100%',\n }),\n\n checkboxCell: css({\n padding: '0 0 0 8px',\n display: 'flex',\n alignItems: 'center',\n flex: 0,\n }),\n};\n\nconst TableContext = createContext<{\n size: 'default' \| 'small';\n someRowsSelected?: boolean;\n}>({\n size: 'default',\n});\n\ninterface TableProps {\n size?: 'default' \| 'small';\n /* Are any rows currently selected? You must specify this if using `TableRowSelectCell` in your table. /\n someRowsSelected?: boolean;\n}\n\nexport const Table: React.FC<TableProps> = ({ children, size = 'default', someRowsSelected }): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return (\n <TableContext.Provider value={{ size, someRowsSelected }}>\n <div\n role=\"table\" // This is a performance optimization; we want to statically create the styles for the table,\n // but for the dynamic theme values, we need to use CSS variables.\n // See: https://emotion.sh/docs/best-practices#advanced-css-variables-with-style\n style={{\n ['--table-border' as any]: theme.colors.tableBorder,\n ['--table-row-hover' as any]: theme.colors.tableRowHover,\n }}\n >\n {children}\n </div>\n </TableContext.Provider>\n );\n};\n\nconst TableRowContext = createContext<{\n isHeader: boolean;\n}>({\n isHeader: false,\n});\n\ninterface TableRowProps {\n isHeader?: boolean;\n /* Vertical alignment of the row's cells. /\n verticalAlignment?: 'top' \| 'center';\n}\n\nexport const TableRow: React.FC<TableRowProps> = ({ children, isHeader = false, verticalAlignment = 'top' }) => {\n return (\n <TableRowContext.Provider value={{ isHeader }}>\n <div\n css={tableStyles.row}\n role=\"row\"\n style={{\n ['--table-row-vertical-alignment' as any]: verticalAlignment === 'top' ? 'flex-start' : 'center',\n }}\n >\n {children}\n </div>\n </TableRowContext.Provider>\n );\n};\n\ninterface TableCellProps {\n /* Enables single-line ellipsis truncation /\n ellipsis?: boolean;\n}\n\nexport const TableCell: React.FC<TableCellProps> = ({ children, ellipsis = false }) => {\n const { size } = useContext(TableContext);\n\n let typographySize: TextProps['size'] = 'md';\n\n if (size === 'small') {\n typographySize = 'sm';\n }\n\n return (\n <div css={[tableStyles.cell, size === 'small' && tableStyles.cellSmall]} role=\"cell\">\n <Typography.Text\n ellipsis={ellipsis}\n size={typographySize}\n title={(ellipsis && typeof children === 'string' && children) \|\| undefined}\n >\n {children}\n </Typography.Text>\n </div>\n );\n};\n\ninterface TableHeaderProps {\n /* Enables single-line ellipsis truncation /\n ellipsis?: boolean;\n /* Is this column sortable? /\n sortable?: boolean;\n /* The current sort direction for this column /\n sortDirection?: 'asc' \| 'desc' \| 'none';\n /* Callback for when the user requests to toggle `sortDirection` /\n onToggleSort?: (event: unknown) => void;\n}\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n children,\n ellipsis = false,\n sortable,\n sortDirection,\n onToggleSort,\n}) => {\n const { theme } = useDesignSystemTheme();\n const { size } = useContext(TableContext);\n const { isHeader } = useContext(TableRowContext);\n\n if (!isHeader) {\n throw new Error('`TableHeader` must be used within a `TableRow` with `isHeader` set to true.');\n }\n\n let sortIcon = <></>;\n // While most libaries use `asc` and `desc` for the sort value, the ARIA spec\n // uses `ascending` and `descending`.\n let ariaSort: React.AriaAttributes['aria-sort'];\n\n if (sortable) {\n if (sortDirection === 'asc') {\n sortIcon = <SortAscendingIcon />;\n ariaSort = 'ascending';\n } else if (sortDirection === 'desc') {\n sortIcon = <SortDescendingIcon />;\n ariaSort = 'descending';\n } else if (sortDirection === 'none') {\n sortIcon = <SortUnsortedIcon />;\n ariaSort = 'none';\n }\n }\n\n let typographySize: TextProps['size'] = 'md';\n\n if (size === 'small') {\n typographySize = 'sm';\n }\n\n const textContents = (\n <Typography.Text\n // If sortable, we must use ellipsis to prevent wrapping and misalignment.\n ellipsis={ellipsis \|\| sortable}\n size={typographySize}\n title={(ellipsis && typeof children === 'string' && children) \|\| undefined}\n >\n {children}\n </Typography.Text>\n );\n\n return (\n <div\n css={[tableStyles.cell, tableStyles.header, size === 'small' && tableStyles.cellSmall]}\n role=\"columnheader\"\n aria-sort={(sortable && ariaSort) \|\| undefined}\n >\n {sortable ? (\n <div\n css={[tableStyles.headerButtonTarget]}\n role=\"button\"\n tabIndex={0}\n onClick={onToggleSort}\n onKeyDown={(event) => {\n if (sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n return onToggleSort?.(event);\n }\n }}\n >\n {textContents}\n <span style={{ color: theme.colors.textSecondary }}>{sortIcon}</span>\n </div>\n ) : (\n textContents\n )}\n </div>\n );\n};\n\ntype TableRowSelectCellProps = {\n /* Called when the checkbox is clicked /\n onChange?: (event: unknown) => void;\n /* Whether the checkbox is checked /\n checked?: boolean;\n /* Whether the row is indeterminate. Should only be used in header rows. /\n indeterminate?: boolean;\n /* Don't render a checkbox; used for providing spacing in header if you don't want \"Select All\" functionality /\n noCheckbox?: boolean;\n};\n\nexport const TableRowSelectCell: React.FC<TableRowSelectCellProps> = ({\n onChange,\n checked,\n indeterminate,\n noCheckbox,\n}) => {\n const { isHeader } = useContext(TableRowContext);\n const { someRowsSelected } = useContext(TableContext);\n\n if (typeof someRowsSelected === 'undefined') {\n throw new Error(\n '`TableRowSelectCell` cannot be used unless `someRowsSelected` has been provided to the `Table` component, see documentation.'\n );\n }\n\n if (!isHeader && indeterminate) {\n throw new Error('`TableRowSelectCell` cannot be used with `indeterminate` in a non-header row.');\n }\n\n return (\n <div\n css={tableStyles.checkboxCell}\n style={{\n paddingLeft: 8,\n paddingTop: 0,\n paddingBottom: 0,\n flex: 0,\n minWidth: 16,\n maxWidth: 16,\n ['--row-checkbox-opacity' as any]: someRowsSelected ? 1 : 0,\n }}\n role={isHeader ? 'columnheader' : 'cell'}\n // TODO: Ideally we shouldn't need to specify this `className`, but it allows for row-hovering to reveal\n // the checkbox in `TableRow`'s CSS without extra JS pointerin/out events.\n className=\"table-row-select-cell\"\n >\n {!noCheckbox && (\n <Checkbox\n isChecked={checked \|\| (indeterminate && null)}\n onChange={(_checked, event) => onChange?.(event.nativeEvent)}\n />\n )}\n </div>\n );\n};\n","import React__default, { createContext, useMemo, useEffect, useContext, forwardRef } from 'react';\nimport { jsx, jsxs } from '@emotion/react/jsx-runtime';\nimport { useTheme, ThemeProvider, css } from '@emotion/react';\nimport { notification, ConfigProvider, Checkbox as Checkbox$1, Typography as Typography$1 } from 'antd';\nimport classnames from 'classnames';\nimport chroma from 'chroma-js';\nimport AntDIcon from '@ant-design/icons';\nimport _isNil from 'lodash/isNil';\nimport _endsWith from 'lodash/endsWith';\nimport _isBoolean from 'lodash/isBoolean';\nimport _isNumber from 'lodash/isNumber';\nimport _isString from 'lodash/isString';\nimport _mapValues from 'lodash/mapValues';\nimport unitless from '@emotion/unitless';\n\n// Border variables\nconst borders = {\n borderRadiusMd: 4\n};\n\n// eslint-disable-next-line import/no-anonymous-default-export\nvar borders$1 = {\n ...borders\n};\n\n// Exported from go/designsystem/colorsheet\nconst colorPalettePrimary = {\n primary: '#2272B4',\n blue100: '#F0F8FF',\n blue200: '#D7EDFE',\n blue300: '#BAE1FC',\n blue400: '#8ACAFF',\n blue500: '#4299E0',\n blue600: '#2272B4',\n blue700: '#0E538B',\n blue800: '#04355D',\n green100: '#F3FCF6',\n green200: '#D4F7DF',\n green300: '#B1ECC5',\n green400: '#8DDDA8',\n green500: '#3CAA60',\n green600: '#277C43',\n green700: '#115026',\n green800: '#093919',\n white: '#FFFFFF',\n grey100: '#F2F5F7',\n grey200: '#E4ECF1',\n grey300: '#CDDAE5',\n grey400: '#BDCDDB',\n grey500: '#8196A7',\n grey600: '#5D7283',\n grey700: '#44535F',\n grey800: '#1F272D',\n red100: '#FFF5F7',\n red200: '#FDE2E8',\n red300: '#FBD0D8',\n red400: '#F792A6',\n red500: '#E65B77',\n red600: '#C82D4C',\n red700: '#9E102C',\n red800: '#630316',\n yellow100: '#FFF9EB',\n yellow200: '#FCEACA',\n yellow300: '#F8D4A5',\n yellow400: '#F2BE88',\n yellow500: '#DE7921',\n yellow600: '#BE501E',\n yellow700: '#93320B',\n yellow800: '#5F1B02'\n};\nconst colorPaletteSecondary = {\n brown: '#A6630C',\n coral: '#C83243',\n charcoal: '#5D7283',\n indigo: '#434A93',\n lemon: '#FACB66',\n lime: '#308613',\n pink: '#B45091',\n purple: '#8A63BF',\n teal: '#04867D',\n turquoise: '#157CBC'\n};\n\n// Colors taken from figma designs but not part of official list (yet)\nconst unstableColors = {\n textValidationInfo: '#64727D',\n backgroundValidationDanger: colorPalettePrimary.red100,\n backgroundValidationSuccess: colorPalettePrimary.blue100,\n backgroundValidationWarning: colorPalettePrimary.yellow100,\n borderValidationDanger: colorPalettePrimary.red300,\n borderValidationSuccess: colorPalettePrimary.blue300,\n borderValidationWarning: colorPalettePrimary.yellow300\n};\nconst lightColorList = {\n backgroundPrimary: colorPalettePrimary.white,\n actionDangerPrimaryBackgroundDefault: colorPalettePrimary.red600,\n actionDangerPrimaryBackgroundHover: colorPalettePrimary.red700,\n actionDangerPrimaryBackgroundPress: colorPalettePrimary.red800,\n actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red600).alpha(0).hex(),\n actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red600).alpha(0.08).hex(),\n actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red600).alpha(0.16).hex(),\n actionDangerDefaultBorderDefault: colorPalettePrimary.red600,\n actionDangerDefaultBorderHover: colorPalettePrimary.red700,\n actionDangerDefaultBorderPress: colorPalettePrimary.red800,\n actionDangerDefaultTextDefault: colorPalettePrimary.red600,\n actionDangerDefaultTextHover: colorPalettePrimary.red700,\n actionDangerDefaultTextPress: colorPalettePrimary.red800,\n actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue800).alpha(0).hex(),\n actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),\n actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),\n actionDefaultBorderDefault: colorPalettePrimary.grey300,\n actionDefaultBorderFocus: colorPalettePrimary.blue600,\n actionDefaultBorderHover: colorPalettePrimary.blue700,\n actionDefaultBorderPress: colorPalettePrimary.blue800,\n actionDefaultTextDefault: colorPalettePrimary.grey800,\n actionDefaultTextHover: colorPalettePrimary.blue700,\n actionDefaultTextPress: colorPalettePrimary.blue800,\n actionDisabledBackground: colorPalettePrimary.grey200,\n actionDisabledText: colorPalettePrimary.grey400,\n actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,\n actionPrimaryBackgroundHover: colorPalettePrimary.blue700,\n actionPrimaryBackgroundPress: colorPalettePrimary.blue800,\n actionPrimaryTextDefault: colorPalettePrimary.white,\n actionPrimaryTextHover: colorPalettePrimary.white,\n actionPrimaryTextPress: colorPalettePrimary.white,\n actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue600).alpha(0).hex(),\n actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),\n actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),\n actionTertiaryTextDefault: colorPalettePrimary.blue600,\n actionTertiaryTextHover: colorPalettePrimary.blue700,\n actionTertiaryTextPress: colorPalettePrimary.blue800,\n backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),\n backgroundSecondary: colorPalettePrimary.grey100,\n backgroundWarning: chroma(colorPalettePrimary.yellow100).alpha(0.08).hex(),\n border: colorPalettePrimary.grey300,\n borderDecorative: colorPalettePrimary.grey300,\n textPrimary: colorPalettePrimary.grey800,\n textSecondary: colorPalettePrimary.grey600,\n textPlaceholder: colorPalettePrimary.grey400,\n textValidationDanger: colorPalettePrimary.red600,\n textValidationSuccess: colorPalettePrimary.green600,\n textValidationWarning: colorPalettePrimary.yellow600,\n overlayOverlay: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),\n // Tags\n tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),\n tagBrown: colorPaletteSecondary.brown,\n tagCoral: colorPaletteSecondary.coral,\n tagCharcoal: colorPalettePrimary.grey600,\n tagIndigo: colorPaletteSecondary.indigo,\n tagLemon: colorPaletteSecondary.lemon,\n tagLime: colorPaletteSecondary.lime,\n tagPink: colorPaletteSecondary.pink,\n tagPurple: colorPaletteSecondary.purple,\n tagTeal: colorPaletteSecondary.teal,\n tagTurquoise: colorPaletteSecondary.turquoise,\n tagText: colorPalettePrimary.white,\n tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),\n tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),\n tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),\n tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),\n // Typography\n typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),\n // Table\n tableBorder: colorPalettePrimary.grey200,\n tableRowHover: chroma(colorPalettePrimary.grey600).alpha(0.04).hex(),\n tooltipBackgroundTooltip: colorPalettePrimary.grey800,\n ...unstableColors\n};\nconst darkColorList = {\n actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),\n actionDangerPrimaryBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),\n actionDangerPrimaryBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),\n actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0).hex(),\n actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.08).hex(),\n actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.16).hex(),\n actionDangerDefaultBorderDefault: colorPalettePrimary.red400,\n actionDangerDefaultBorderHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),\n actionDangerDefaultBorderPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),\n actionDangerDefaultTextDefault: colorPalettePrimary.red400,\n actionDangerDefaultTextHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),\n actionDangerDefaultTextPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),\n actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),\n actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),\n actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),\n actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),\n actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),\n actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),\n actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),\n actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),\n actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),\n actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),\n actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),\n actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),\n actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),\n actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),\n actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),\n actionPrimaryTextDefault: colorPalettePrimary.grey800,\n actionPrimaryTextHover: colorPalettePrimary.grey800,\n actionPrimaryTextPress: colorPalettePrimary.grey800,\n actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),\n actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),\n actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),\n actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),\n actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),\n actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),\n backgroundPrimary: colorPalettePrimary.grey800,\n backgroundSecondary: chroma(colorPalettePrimary.white).alpha(0.04).hex(),\n border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),\n borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),\n textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),\n textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),\n textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),\n textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),\n textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),\n textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),\n overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),\n // Tags\n tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),\n tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),\n tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),\n tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),\n tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),\n tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),\n tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),\n tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),\n tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),\n tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),\n tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),\n tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),\n tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),\n tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),\n tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),\n tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),\n // Typography\n typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),\n // Table\n tableBorder: chroma(colorPalettePrimary.white).alpha(0.24).hex(),\n tableRowHover: chroma(colorPalettePrimary.white).alpha(0.16).hex(),\n tooltipBackgroundTooltip: chroma(colorPalettePrimary.white).alpha(0.6).hex(),\n // Missing in list\n backgroundDanger: 'rgba(200,45,76,0.08)',\n backgroundWarning: 'rgba(222,121,33,0.08)',\n // Missing in light list\n // \"background-validation-danger\": \"rgba(229,110,134,0)\",\n // \"background-validation-warning\": \"rgba(252,234,202,0)\",\n ...unstableColors\n};\n\nconst darkColors = {\n ...darkColorList,\n ...colorPalettePrimary,\n ...colorPaletteSecondary\n};\nconst lightColors = {\n ...lightColorList,\n ...colorPalettePrimary,\n ...colorPaletteSecondary\n};\nfunction getSemanticColors(theme) {\n switch (theme) {\n case 'dark':\n return {\n ...darkColors\n };\n default:\n return {\n ...lightColors\n };\n }\n}\n\n// TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES\n/\nColors that need to be replaced by semantic colors.\n /\nconst deprecatedColors = {\n // Radio Colors\n radioInteractiveAvailable: colorPalettePrimary.primary,\n radioInteractiveHover: '#186099',\n radioInteractivePress: '#0D4F85',\n radioDisabled: '#A2AEB8',\n radioDefaultBorder: '#64727D',\n radioDefaultBackground: '#FFFFFF',\n radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',\n // Fade of Interactive Available\n radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available\n};\n\nfunction getColors(theme) {\n return {\n ...deprecatedColors,\n ...getSemanticColors(theme)\n };\n}\n\n// eslint-disable-next-line import/no-anonymous-default-export\nvar antdVars = {\n // IMPORTANT: Do not read this directly from components. Use `React.useContext`.\n 'ant-prefix': 'du-bois'\n};\n\nconst DEFAULT_SPACING_UNIT = 8;\nconst MODAL_PADDING = 40;\nconst spacing = {\n xs: DEFAULT_SPACING_UNIT / 2,\n sm: DEFAULT_SPACING_UNIT,\n md: DEFAULT_SPACING_UNIT 2,\n lg: DEFAULT_SPACING_UNIT * 3\n};\n\n// Less variables that are used by AntD\n({\n defaultPaddingLg: spacing.lg,\n defaultPaddingMd: spacing.md,\n defaultPaddingSm: spacing.sm,\n defaultPaddingXs: spacing.sm,\n defaultPaddingXss: spacing.xs,\n paddingLg: spacing.md,\n // TODO: Check if there is a better alternative with team\n paddingMd: spacing.sm,\n paddingSm: spacing.sm,\n paddingXs: spacing.xs,\n paddingXss: 0,\n marginSm: 12,\n marginLg: spacing.lg,\n // Button\n btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,\n btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,\n btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,\n // Input\n inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,\n inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,\n inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,\n inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,\n inputPaddingVertical: spacing.xs + 1,\n inputPaddingVerticalBase: spacing.xs + 1,\n inputPaddingVerticalSm: spacing.xs + 1,\n inputPaddingVerticalLg: spacing.xs + 1,\n // Modal\n modalPadding: MODAL_PADDING,\n modalLessPadding: MODAL_PADDING - 20,\n modalHeaderPadding: \"\".concat(MODAL_PADDING, \"px \").concat(MODAL_PADDING, \"px \").concat(MODAL_PADDING - 20, \"px\"),\n modalHeaderCloseSize: MODAL_PADDING * 2 + 22,\n modalHeaderBorderWidth: 0,\n modalBodyPadding: \"0 \".concat(MODAL_PADDING, \"px\"),\n modalFooterPaddingVertical: 0,\n modalFooterPaddingHorizontal: 0,\n modalFooterBorderWidth: 0,\n // Switch\n switchPadding: 0,\n switchHeight: 16,\n switchMinWidth: 28,\n switchPinSize: 14\n});\nvar spacing$1 = spacing;\n\nconst heightBase = 40;\nconst borderWidth = 1;\nconst antdGeneralVariables = {\n classnamePrefix: antdVars['ant-prefix'],\n iconfontCssPrefix: 'anticon',\n borderRadiusBase: 4,\n borderWidth: borderWidth,\n heightSm: 32,\n heightBase: heightBase,\n iconSize: 24,\n // TODO (FEINF-1545): Update with icon overhaul to 16px\n iconFontSize: 13,\n iconFontSizeNew: 16,\n buttonHeight: heightBase,\n // Height available within button (for label and icon). Same for middle and small buttons.\n buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2\n};\nvar generalVariables = antdGeneralVariables;\n\nconst FONT_SIZE_BASE = 13;\n\n// Less variables that are used by AntD\nconst antdTypography = {\n fontSizeSm: 12,\n fontSizeBase: FONT_SIZE_BASE,\n fontSizeMd: FONT_SIZE_BASE,\n fontSizeLg: 18,\n fontSizeXl: 22,\n fontSizeXxl: 32,\n lineHeightSm: '16px',\n lineHeightBase: '20px',\n lineHeightMd: '20px',\n lineHeightLg: '24px',\n lineHeightXl: '28px',\n lineHeightXxl: '40px',\n typographyBoldFontWeight: 600\n};\n\n// eslint-disable-next-line import/no-anonymous-default-export\nvar typography = {\n ...antdTypography\n};\n\n// TODO(giles): fix this\n// eslint-disable-next-line import/no-named-as-default\n\nconst defaultOptions = {\n enableAnimation: false,\n zIndexBase: 1000\n};\n\n// Function to get variables for a certain theme.\n// End users should use useDesignSystemTheme instead.\nfunction getTheme(themeName) {\n let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;\n return {\n colors: getColors(themeName),\n spacing: spacing$1,\n general: generalVariables,\n typography,\n borders: borders$1,\n themeName,\n options\n };\n}\n\nconst themeNameToAntdName = {\n dark: 'dark',\n default: 'light'\n};\nfunction getClassNamePrefix(theme) {\n const antdThemeName = themeNameToAntdName[theme.themeName];\n return \"\".concat(theme.general.classnamePrefix, \"-\").concat(antdThemeName);\n}\nfunction getPrefixedClassNameFromTheme(theme, className) {\n return [getClassNamePrefix(theme), className].filter(Boolean).join('-');\n}\nfunction useDesignSystemTheme() {\n const emotionTheme = useTheme();\n // Graceful fallback to default theme in case a test or developer forgot context.\n const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme('default');\n return {\n theme: theme,\n classNamePrefix: getClassNamePrefix(theme),\n getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)\n };\n}\n// This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.\nfunction WithDesignSystemThemeHoc(Component) {\n return function WrappedWithDesignSystemTheme(props) {\n const themeValues = useDesignSystemTheme();\n return jsx(Component, {\n ...props,\n designSystemThemeApi: themeValues\n });\n };\n}\n\nconst DuboisContextDefaults = {\n enableAnimation: false,\n theme: 'default',\n // Prefer to use useDesignSystemTheme.getPrefixedClassName instead\n getPrefixCls: suffix => suffix ? \"du-bois-\".concat(suffix) : 'du-bois',\n flags: {}\n};\nconst DesignSystemContext = /#__PURE__/createContext(DuboisContextDefaults);\nconst DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';\nfunction getAnimationCss(enableAnimation) {\n const disableAnimationCss = {\n animationDuration: '0s !important',\n transition: 'none !important'\n };\n return enableAnimation ? {} : {\n // Apply to the current element\n ...disableAnimationCss,\n '&::before': disableAnimationCss,\n '&::after': disableAnimationCss,\n // Also apply to all child elements with a class that starts with our prefix\n [\"[class=du-bois]:not(.\".concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, \", .\").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, \" )\")]: {\n ...disableAnimationCss,\n // Also target any pseudo-elements associated with those elements, since these can also be animated.\n '&::before': disableAnimationCss,\n '&::after': disableAnimationCss\n }\n };\n}\nconst DesignSystemProviderPropsContext = /#__PURE__/React__default.createContext(null);\nconst AntDConfigProviderPropsContext = /#__PURE__/React__default.createContext(null);\nconst DesignSystemProvider = _ref => {\n let {\n children,\n theme: themeName,\n enableAnimation = false,\n zIndexBase = 1000,\n getPopupContainer,\n flags = {}\n } = _ref;\n const theme = useMemo(() => getTheme(themeName \|\| 'default', {\n enableAnimation,\n zIndexBase\n }),\n // TODO: revisit this\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [themeName, zIndexBase]);\n const providerPropsContext = useMemo(() => ({\n theme: themeName,\n enableAnimation,\n zIndexBase,\n getPopupContainer,\n flags\n }), [themeName, enableAnimation, zIndexBase, getPopupContainer, flags]);\n const classNamePrefix = getClassNamePrefix(theme);\n const value = useMemo(() => {\n return {\n enableAnimation,\n theme: theme.themeName,\n getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),\n getPopupContainer,\n flags\n };\n }, [enableAnimation, theme, getPopupContainer, flags]);\n useEffect(() => {\n return () => {\n // when the design system context is unmounted, make sure the notification cache is also cleaned up\n notification.destroy();\n };\n }, []);\n return jsx(DesignSystemProviderPropsContext.Provider, {\n value: providerPropsContext,\n children: jsx(ThemeProvider, {\n theme: theme,\n children: jsx(AntDConfigProviderPropsContext.Provider, {\n value: {\n prefixCls: classNamePrefix,\n getPopupContainer\n },\n children: jsx(DesignSystemContext.Provider, {\n value: value,\n children: children\n })\n })\n })\n });\n};\nconst ApplyDesignSystemContextOverrides = _ref2 => {\n let {\n theme,\n enableAnimation,\n zIndexBase,\n getPopupContainer,\n flags,\n children\n } = _ref2;\n const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);\n if (parentDesignSystemProviderProps === null) {\n throw new Error(\"ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context\");\n }\n const newProps = useMemo(() => ({\n ...parentDesignSystemProviderProps,\n theme: theme !== null && theme !== void 0 ? theme : parentDesignSystemProviderProps.theme,\n enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,\n zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,\n getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,\n flags: {\n ...parentDesignSystemProviderProps.flags,\n ...flags\n }\n }), [parentDesignSystemProviderProps, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);\n return jsx(DesignSystemProvider, {\n ...newProps,\n children: children\n });\n};\n\n// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.\nconst ApplyDesignSystemFlags = _ref3 => {\n let {\n flags,\n children\n } = _ref3;\n const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);\n if (parentDesignSystemProviderProps === null) {\n throw new Error(\"ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context\");\n }\n const newProps = useMemo(() => ({\n ...parentDesignSystemProviderProps,\n flags: {\n ...parentDesignSystemProviderProps.flags,\n ...flags\n }\n }), [parentDesignSystemProviderProps, flags]);\n return jsx(DesignSystemProvider, {\n ...newProps,\n children: children\n });\n};\nconst DesignSystemAntDConfigProvider = _ref4 => {\n let {\n children\n } = _ref4;\n const antdContext = useAntDConfigProviderContext();\n return jsx(ConfigProvider, {\n ...antdContext,\n children: children\n });\n};\nconst useAntDConfigProviderContext = () => {\n var _useContext;\n return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {\n prefixCls: undefined\n };\n};\n\n/*\n When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),\n * we don't want Design System's prefix class to override them.\n \n Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,\n * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.\n /\nconst RestoreAntDDefaultClsPrefix = _ref5 => {\n let {\n children\n } = _ref5;\n return jsx(ConfigProvider, {\n prefixCls: \"ant\",\n children: children\n });\n};\n\nfunction useDesignSystemContext() {\n return useContext(DesignSystemContext);\n}\n\nfunction useDesignSystemFlags() {\n const context = useDesignSystemContext();\n return context.flags;\n}\n\nconst getIconEmotionStyles = (theme, useNewIcons) => {\n return /#__PURE__/css({\n ...(useNewIcons && {\n fontSize: theme.general.iconFontSizeNew\n })\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getIconEmotionStyles;\");\n};\nconst getIconValidationColor = (theme, color) => {\n switch (color) {\n case 'success':\n return theme.colors.textValidationSuccess;\n case 'warning':\n return theme.colors.textValidationWarning;\n case 'danger':\n return theme.colors.textValidationDanger;\n default:\n return color;\n }\n};\nconst Icon = props => {\n const {\n component: Component,\n dangerouslySetAntdProps,\n color,\n style,\n ...otherProps\n } = props;\n const {\n theme\n } = useDesignSystemTheme();\n const {\n USE_NEW_ICONS\n } = useDesignSystemFlags();\n const MemoizedComponent = useMemo(() => Component ? _ref => {\n let {\n fill,\n ...iconProps\n } = _ref;\n return (\n // We don't rely on top-level fills for our colors. Fills are specified\n // with \"currentColor\" on children of the top-most svg.\n jsx(Component, {\n fill: \"none\",\n ...iconProps\n })\n );\n } : undefined, [Component]);\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(AntDIcon, {\n css: getIconEmotionStyles(theme, USE_NEW_ICONS),\n component: MemoizedComponent,\n style: {\n color: getIconValidationColor(theme, color),\n ...style\n },\n ...otherProps,\n ...dangerouslySetAntdProps\n })\n });\n};\n\nfunction SvgNewWindowIconV1(props) {\n return jsx(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ...props,\n children: jsx(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M5 18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-5c0-.55.45-1 1-1s1 .45 1 1v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5a2 2 0 012-2h6c.55 0 1 .45 1 1s-.45 1-1 1H6c-.55 0-1 .45-1 1v12zM15 5c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1s-1-.45-1-1V6.41l-9.13 9.13a.996.996 0 11-1.41-1.41L17.59 5H15z\",\n fill: \"currentColor\"\n })\n });\n}\nfunction SvgNewWindowIconV2(props) {\n return jsxs(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ...props,\n children: [jsx(\"path\", {\n d: \"M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1z\",\n fill: \"currentColor\"\n }), jsx(\"path\", {\n d: \"M1 2.75A.75.75 0 011.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 01-.75.75H1.75a.75.75 0 01-.75-.75V2.75z\",\n fill: \"currentColor\"\n })]\n });\n}\nfunction NewWindowIcon(props) {\n const {\n USE_NEW_ICONS\n } = useDesignSystemFlags();\n const component = USE_NEW_ICONS ? SvgNewWindowIconV2 : SvgNewWindowIconV1;\n return jsx(Icon, {\n ...props,\n component: component\n });\n}\n\nfunction SvgSortAscendingIcon(props) {\n return jsx(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ...props,\n children: jsx(\"path\", {\n d: \"M11.5.94l4.03 4.03-1.06 1.06-2.22-2.22V10h-1.5V3.81L8.53 6.03 7.47 4.97 11.5.94zM1 4.5h4V6H1V4.5zM1 12.5h10V14H1v-1.5zM8 8.5H1V10h7V8.5z\",\n fill: \"currentColor\"\n })\n });\n}\nfunction SortAscendingIcon(props) {\n return jsx(Icon, {\n ...props,\n component: SvgSortAscendingIcon\n });\n}\n\nfunction SvgSortDescendingIcon(props) {\n return jsx(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ...props,\n children: jsx(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M1 3.5h10V2H1v1.5zm0 8h4V10H1v1.5zm7-4H1V6h7v1.5zm3.5 7.56l4.03-4.03-1.06-1.06-2.22 2.22V6h-1.5v6.19L8.53 9.97l-1.06 1.06 4.03 4.03z\",\n fill: \"currentColor\"\n })\n });\n}\nfunction SortDescendingIcon(props) {\n return jsx(Icon, {\n ...props,\n component: SvgSortDescendingIcon\n });\n}\n\nfunction SvgSortUnsortedIcon(props) {\n return jsx(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ...props,\n children: jsx(\"path\", {\n d: \"M11.5.94L7.47 4.97l1.06 1.06 2.22-2.22v8.38L8.53 9.97l-1.06 1.06 4.03 4.03 4.03-4.03-1.06-1.06-2.22 2.22V3.81l2.22 2.22 1.06-1.06L11.5.94zM6 3.5H1V5h5V3.5zM6 11.5H1V13h5v-1.5zM1 7.5h5V9H1V7.5z\",\n fill: \"currentColor\"\n })\n });\n}\nfunction SortUnsortedIcon(props) {\n return jsx(Icon, {\n ...props,\n component: SvgSortUnsortedIcon\n });\n}\n\nconst ColorVars = {\n primary: 'textPrimary',\n secondary: 'textSecondary',\n info: 'textValidationInfo',\n error: 'textValidationDanger',\n success: 'textValidationSuccess',\n warning: 'textValidationWarning'\n};\n\n/\n Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.\n * Used to ensure that we always override Ant styles, without worrying about selector precedence.\n /\nfunction importantify(obj) {\n return _mapValues(obj, (value, key) => {\n if (_isString(value) \|\| _isNumber(value) \|\| _isBoolean(value)) {\n // Make sure we don't double-append important\n if (_isString(value) && _endsWith(value, '!important')) {\n return value;\n }\n if (_isNumber(value)) {\n if (unitless[key]) {\n return \"\".concat(value, \"!important\");\n }\n return \"\".concat(value, \"px!important\");\n }\n return \"\".concat(value, \"!important\");\n }\n if (_isNil(value)) {\n return value;\n }\n return importantify(value);\n });\n}\n\n/\n Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary\n * @param theme\n * @param key - key of TypographyColor\n * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline\n /\nfunction getTypographyColor(theme, key, fallbackColor) {\n if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {\n return theme.colors[ColorVars[key]];\n }\n return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;\n}\n\n/\n Returns validation color based on state, has default validation colors if params are not provided\n * @param theme\n * @param validationState\n * @param errorColor\n * @param warningColor\n * @param successColor\n /\nfunction getValidationStateColor(theme, validationState) {\n let {\n errorColor,\n warningColor,\n successColor\n } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n switch (validationState) {\n case 'error':\n return errorColor \|\| theme.colors.actionDangerPrimaryBackgroundDefault;\n case 'warning':\n return warningColor \|\| theme.colors.textValidationWarning;\n case 'success':\n return successColor \|\| theme.colors.textValidationSuccess;\n default:\n return undefined;\n }\n}\n\nfunction getCheckboxEmotionStyles(clsPrefix, theme) {\n let isHorizontal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n let useNewCheckboxStyles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;\n const classInput = \".\".concat(clsPrefix, \"-input\");\n const classInner = \".\".concat(clsPrefix, \"-inner\");\n const classIndeterminate = \".\".concat(clsPrefix, \"-indeterminate\");\n const classChecked = \".\".concat(clsPrefix, \"-checked\");\n const classDisabled = \".\".concat(clsPrefix, \"-disabled\");\n const classDisabledWrapper = \".\".concat(clsPrefix, \"-wrapper-disabled\");\n const classContainer = \".\".concat(clsPrefix, \"-group\");\n const classWrapper = \".\".concat(clsPrefix, \"-wrapper\");\n const defaultSelector = \"\".concat(classInput, \" + \").concat(classInner);\n const hoverSelector = \"\".concat(classInput, \":hover + \").concat(classInner);\n const pressSelector = \"\".concat(classInput, \":active + \").concat(classInner);\n const styles = {\n ...(useNewCheckboxStyles && {\n [\".\".concat(clsPrefix)]: {\n top: 'unset',\n lineHeight: theme.typography.lineHeightBase\n },\n [\"&\".concat(classWrapper, \", \").concat(classWrapper)]: {\n alignItems: 'center',\n lineHeight: theme.typography.lineHeightBase\n }\n }),\n // Top level styles are for the unchecked state\n [classInner]: {\n borderColor: theme.colors.actionDefaultBorderDefault\n },\n // Layout styling\n [\"&\".concat(classContainer)]: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: theme.spacing.sm,\n columnGap: 0\n },\n ...(isHorizontal && {\n [\"&\".concat(classContainer)]: {\n display: 'flex',\n flexDirection: 'row',\n columnGap: theme.spacing.sm,\n rowGap: 0,\n [\"& > \".concat(classContainer, \"-item\")]: {\n marginRight: 0\n }\n }\n }),\n // Keyboard focus\n [\"\".concat(classInput, \":focus-visible + \").concat(classInner)]: {\n outlineWidth: '2px',\n outlineColor: theme.colors.primary,\n outlineOffset: '4px',\n outlineStyle: 'solid'\n },\n // Hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionDefaultBackgroundHover,\n borderColor: theme.colors.actionPrimaryBackgroundHover\n },\n // Mouse pressed\n [pressSelector]: {\n backgroundColor: theme.colors.actionDefaultBackgroundPress,\n borderColor: theme.colors.actionPrimaryBackgroundPress\n },\n // Checked state\n [classChecked]: {\n '&::after': {\n border: 'none'\n },\n [defaultSelector]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n borderColor: 'transparent'\n },\n // Checked hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n borderColor: 'transparent'\n },\n // Checked and mouse pressed\n [pressSelector]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundPress,\n borderColor: 'transparent'\n }\n },\n // Indeterminate\n [classIndeterminate]: {\n [classInner]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n borderColor: theme.colors.actionPrimaryBackgroundDefault,\n // The after pseudo-element is used for the check image itself\n '&:after': {\n backgroundColor: theme.colors.white,\n height: '3px',\n width: '8px',\n borderRadius: '4px'\n }\n },\n // Indeterminate hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n borderColor: 'transparent'\n },\n // Indeterminate and mouse pressed\n [pressSelector]: {\n backgroundColor: theme.colors.actionPrimaryBackgroundPress\n }\n },\n // Disabled state\n [\"&\".concat(classDisabledWrapper)]: {\n [classDisabled]: {\n // Disabled Checked\n [\"&\".concat(classChecked)]: {\n [classInner]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground\n },\n // Disabled checked hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground\n }\n },\n // Disabled indeterminate\n [\"&\".concat(classIndeterminate)]: {\n [classInner]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground\n },\n // Disabled indeterminate hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground\n }\n },\n // Disabled unchecked\n [classInner]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground,\n // The after pseudo-element is used for the check image itself\n '&:after': {\n borderColor: theme.colors.white\n }\n },\n // Disabled hover\n [hoverSelector]: {\n backgroundColor: theme.colors.actionDisabledBackground,\n borderColor: theme.colors.actionDisabledBackground\n },\n '& + span': {\n color: theme.colors.actionDisabledText\n }\n }\n },\n // Animation\n ...getAnimationCss(theme.options.enableAnimation)\n };\n return styles;\n}\nconst getWrapperStyle = _ref => {\n let {\n clsPrefix,\n theme,\n wrapperStyle = {},\n useNewStyles\n } = _ref;\n const styles = {\n ...(useNewStyles && {\n [\"&& + .\".concat(clsPrefix, \"-hint, && + .\").concat(clsPrefix, \"-form-message\")]: {\n paddingLeft: theme.spacing.lg,\n marginTop: 0\n }\n }),\n ...wrapperStyle\n };\n return /#__PURE__/css(styles, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getWrapperStyle;\");\n};\nconst DuboisCheckbox = /#__PURE__/forwardRef(function Checkbox(_ref2, ref) {\n let {\n isChecked,\n onChange,\n children,\n isDisabled = false,\n style,\n wrapperStyle,\n dangerouslySetAntdProps,\n className,\n ...restProps\n } = _ref2;\n const {\n theme,\n classNamePrefix,\n getPrefixedClassName\n } = useDesignSystemTheme();\n const {\n USE_NEW_CHECKBOX_STYLES\n } = useDesignSystemFlags();\n const clsPrefix = getPrefixedClassName('checkbox');\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(\"div\", {\n className: classnames(className, \"\".concat(clsPrefix, \"-container\")),\n css: getWrapperStyle({\n clsPrefix: classNamePrefix,\n theme,\n wrapperStyle,\n useNewStyles: USE_NEW_CHECKBOX_STYLES\n }),\n children: jsx(Checkbox$1, {\n checked: isChecked === null ? undefined : isChecked,\n ref: ref,\n onChange: onChange ? event => {\n onChange(event.target.checked, event);\n } : undefined,\n disabled: isDisabled,\n indeterminate: isChecked === null\n // Individual checkboxes don't depend on isHorizontal flag, orientation and spacing is handled by end users\n ,\n css: /#__PURE__/css(importantify(getCheckboxEmotionStyles(clsPrefix, theme, false, USE_NEW_CHECKBOX_STYLES)), process.env.NODE_ENV === \"production\" ? \"\" : \";label:DuboisCheckbox;\"),\n style: style,\n \"aria-checked\": isChecked === null ? 'mixed' : isChecked,\n ...restProps,\n ...dangerouslySetAntdProps,\n children: children\n })\n })\n });\n});\nconst CheckboxGroup = /#__PURE__/forwardRef(function CheckboxGroup(_ref3, ref) {\n let {\n layout = 'vertical',\n ...props\n } = _ref3;\n const {\n theme,\n getPrefixedClassName\n } = useDesignSystemTheme();\n const clsPrefix = getPrefixedClassName('checkbox');\n const {\n USE_NEW_CHECKBOX_STYLES\n } = useDesignSystemFlags();\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(Checkbox$1.Group, {\n ref: ref,\n ...props,\n css: getCheckboxEmotionStyles(clsPrefix, theme, layout === 'horizontal', USE_NEW_CHECKBOX_STYLES)\n })\n });\n});\nconst CheckboxNamespace = / #__PURE__ /Object.assign(DuboisCheckbox, {\n Group: CheckboxGroup\n});\nconst Checkbox = CheckboxNamespace;\n\n// TODO: I'm doing this to support storybook's docgen;\n// We should remove this once we have a better storybook integration,\n// since these will be exposed in the library's exports.\nconst __INTERNAL_DO_NOT_USE__Group = CheckboxGroup;\n\nconst getLinkStyles = (theme, clsPrefix, useNewIcons) => {\n const classTypography = \".\".concat(clsPrefix, \"-typography\");\n const styles = {\n [\"&\".concat(classTypography, \", &\").concat(classTypography, \":focus\")]: {\n color: theme.colors.actionTertiaryTextDefault\n },\n [\"&\".concat(classTypography, \":hover, &\").concat(classTypography, \":hover .anticon\")]: {\n color: theme.colors.actionTertiaryTextHover,\n textDecoration: 'underline'\n },\n [\"&\".concat(classTypography, \":active, &\").concat(classTypography, \":active .anticon\")]: {\n color: theme.colors.actionTertiaryTextPress,\n textDecoration: 'underline'\n },\n [\"&\".concat(classTypography, \":focus-visible\")]: {\n textDecoration: 'underline'\n },\n ...(useNewIcons && {\n '.anticon': {\n fontSize: 12\n }\n })\n };\n return /#__PURE__/css(styles, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getLinkStyles;\");\n};\nconst getEllipsisNewTabLinkStyles = () => {\n const styles = {\n paddingRight: 'calc(2px + 1em)',\n // 1em for icon\n position: 'relative'\n };\n return /#__PURE__/css(styles, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getEllipsisNewTabLinkStyles;\");\n};\nconst getIconStyles = theme => {\n const styles = {\n marginLeft: 2,\n color: theme.colors.actionTertiaryTextDefault\n };\n return /#__PURE__/css(styles, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getIconStyles;\");\n};\nconst getEllipsisIconStyles = useNewIcons => {\n const styles = {\n position: 'absolute',\n right: 0,\n bottom: 0,\n top: 0,\n display: 'flex',\n alignItems: 'center',\n ...(useNewIcons && {\n fontSize: 12\n })\n };\n return /#__PURE__/css(styles, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getEllipsisIconStyles;\");\n};\nfunction Link(_ref) {\n let {\n dangerouslySetAntdProps,\n ...props\n } = _ref;\n const {\n children,\n openInNewTab,\n ...restProps\n } = props;\n const {\n theme,\n classNamePrefix\n } = useDesignSystemTheme();\n const {\n USE_NEW_ICONS: useNewIcons\n } = useDesignSystemFlags();\n const newTabProps = {\n rel: 'noopener noreferrer',\n target: '_blank'\n };\n const linkProps = openInNewTab ? {\n ...restProps,\n ...newTabProps\n } : {\n ...restProps\n };\n const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix, useNewIcons), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix, useNewIcons);\n const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsxs(Typography$1.Link, {\n css: linkStyles,\n ...linkProps,\n ...dangerouslySetAntdProps,\n children: [children, openInNewTab ? jsx(NewWindowIcon, {\n css: iconStyles,\n ...newTabProps\n }) : null]\n })\n });\n}\n\nconst {\n Paragraph: AntDParagraph\n} = Typography$1;\nfunction getParagraphEmotionStyles(theme, props) {\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeBase,\n lineHeight: theme.typography.lineHeightBase,\n color: getTypographyColor(theme, props.color, theme.colors.textPrimary)\n }\n }, props.disabled && {\n '&&': {\n color: theme.colors.actionDisabledText\n }\n }, props.withoutMargins && {\n '&&': {\n marginTop: 0,\n marginBottom: 0\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getParagraphEmotionStyles;\");\n}\nfunction Paragraph(userProps) {\n const {\n dangerouslySetAntdProps,\n withoutMargins,\n color,\n ...props\n } = userProps;\n const {\n theme\n } = useDesignSystemTheme();\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(AntDParagraph, {\n ...props,\n className: props.className,\n css: getParagraphEmotionStyles(theme, userProps),\n ...dangerouslySetAntdProps\n })\n });\n}\n\nconst {\n Text: AntDText\n} = Typography$1;\nfunction getTextEmotionStyles(theme, props) {\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeBase,\n lineHeight: theme.typography.lineHeightBase,\n color: getTypographyColor(theme, props.color, theme.colors.textPrimary)\n }\n }, props.disabled && {\n '&&': {\n color: theme.colors.actionDisabledText\n }\n }, props.hint && {\n '&&': {\n fontSize: theme.typography.fontSizeSm,\n lineHeight: theme.typography.lineHeightSm\n }\n }, props.bold && {\n '&&': {\n fontSize: theme.typography.fontSizeBase,\n fontWeight: theme.typography.typographyBoldFontWeight,\n lineHeight: theme.typography.lineHeightBase\n }\n }, props.code && {\n '&& > code': {\n fontSize: theme.typography.fontSizeBase,\n lineHeight: theme.typography.lineHeightBase,\n fontWeight: theme.typography.typographyBoldFontWeight,\n background: theme.colors.typographyCodeBg,\n fontFamily: 'monospace',\n borderRadius: theme.borders.borderRadiusMd,\n padding: '2px 4px',\n border: 'unset',\n margin: 0\n }\n }, props.size && {\n '&&': (() => {\n switch (props.size) {\n case 'xxl':\n return {\n fontSize: theme.typography.fontSizeXxl,\n lineHeight: theme.typography.lineHeightXxl\n };\n case 'xl':\n return {\n fontSize: theme.typography.fontSizeXl,\n lineHeight: theme.typography.lineHeightXl\n };\n case 'lg':\n return {\n fontSize: theme.typography.fontSizeLg,\n lineHeight: theme.typography.lineHeightLg\n };\n case 'sm':\n return {\n fontSize: theme.typography.fontSizeSm,\n lineHeight: theme.typography.lineHeightSm\n };\n default:\n return {\n fontSize: theme.typography.fontSizeMd,\n lineHeight: theme.typography.lineHeightMd\n };\n }\n })()\n }, props.withoutMargins && {\n '&&': {\n marginTop: 0,\n marginBottom: 0\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getTextEmotionStyles;\");\n}\nfunction Text(userProps) {\n // Omit props that are not supported by `antd`\n const {\n dangerouslySetAntdProps,\n bold,\n hint,\n withoutMargins,\n color,\n ...props\n } = userProps;\n const {\n theme\n } = useDesignSystemTheme();\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(AntDText, {\n ...props,\n className: props.className,\n css: getTextEmotionStyles(theme, userProps),\n ...dangerouslySetAntdProps\n })\n });\n}\n\nconst {\n Title: AntDTitle\n} = Typography$1;\nfunction getLevelStyles(theme, props) {\n switch (props.level) {\n case 1:\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeXxl,\n lineHeight: theme.typography.lineHeightXxl,\n fontWeight: theme.typography.typographyBoldFontWeight\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getLevelStyles;\");\n case 2:\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeXl,\n lineHeight: theme.typography.lineHeightXl,\n fontWeight: theme.typography.typographyBoldFontWeight\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getLevelStyles;\");\n case 3:\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeLg,\n lineHeight: theme.typography.lineHeightLg,\n fontWeight: theme.typography.typographyBoldFontWeight\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getLevelStyles;\");\n case 4:\n default:\n return /#__PURE__/css({\n '&&': {\n fontSize: theme.typography.fontSizeMd,\n lineHeight: theme.typography.lineHeightMd,\n fontWeight: theme.typography.typographyBoldFontWeight\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getLevelStyles;\");\n }\n}\nfunction getTitleEmotionStyles(theme, props) {\n return /#__PURE__/css(getLevelStyles(theme, props), {\n '&&': {\n color: getTypographyColor(theme, props.color, theme.colors.textPrimary)\n }\n }, props.withoutMargins && {\n '&&': {\n marginTop: '0 !important',\n // override general styling\n marginBottom: '0 !important' // override general styling\n }\n }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:getTitleEmotionStyles;\");\n}\nfunction Title(userProps) {\n const {\n dangerouslySetAntdProps,\n withoutMargins,\n color,\n ...props\n } = userProps;\n const {\n theme\n } = useDesignSystemTheme();\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(AntDTitle, {\n ...props,\n className: props.className,\n css: getTitleEmotionStyles(theme, userProps),\n ...dangerouslySetAntdProps\n })\n });\n}\n\nconst Typography = / #__PURE__ /(() => {\n function Typography(_ref) {\n let {\n dangerouslySetAntdProps,\n ...props\n } = _ref;\n return jsx(DesignSystemAntDConfigProvider, {\n children: jsx(Typography$1, {\n ...props,\n ...dangerouslySetAntdProps\n })\n });\n }\n Typography.Text = Text;\n Typography.Title = Title;\n Typography.Paragraph = Paragraph;\n Typography.Link = Link;\n return Typography;\n})();\n\nexport { ApplyDesignSystemContextOverrides as A, Checkbox as C, DesignSystemAntDConfigProvider as D, Icon as I, NewWindowIcon as N, RestoreAntDDefaultClsPrefix as R, SortAscendingIcon as S, Typography as T, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE__Group as _, useDesignSystemFlags as a, useDesignSystemContext as b, getValidationStateColor as c, Title as d, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as e, getWrapperStyle as f, getAnimationCss as g, DesignSystemContext as h, importantify as i, DesignSystemProvider as j, ApplyDesignSystemFlags as k, lightColorList as l, useAntDConfigProviderContext as m, SortDescendingIcon as n, SortUnsortedIcon as o, useDesignSystemTheme as u };\n//# sourceMappingURL=Typography-84a00e02.js.map\n","import { useDesignSystemTheme } from '@databricks/design-system';\n\nimport { css } from '@emotion/react';\nimport as RadixSlider from '@radix-ui/react-slider';\nimport { forwardRef } from 'react';\n\nimport type { Theme } from '../../theme';\n\nexport type SliderRootProps = Omit<RadixSlider.SliderProps, 'orientation'>;\nexport type SliderTrackProps = RadixSlider.SliderTrackProps;\nexport type SliderRangeProps = RadixSlider.SliderRangeProps;\nexport type SliderThumbProps = RadixSlider.SliderThumbProps;\n\nconst getRootStyles = () => {\n return css({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: 20,\n height: 100,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: 20,\n width: 200,\n },\n });\n};\n\nexport const Root = forwardRef<HTMLElement, SliderRootProps>((props: SliderRootProps, ref): JSX.Element => {\n return <RadixSlider.Root css={getRootStyles()} {...props} ref={ref} />;\n});\n\nconst getTrackStyles = (theme: Theme) => {\n return css({\n backgroundColor: theme.colors.grey100,\n position: 'relative',\n flexGrow: 1,\n borderRadius: 9999,\n\n '&[data-orientation=\"vertical\"]': {\n width: 3,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: 3,\n },\n });\n};\n\nexport const Track = forwardRef<HTMLElement, SliderTrackProps>((props: SliderTrackProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Track css={getTrackStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getRangeStyles = (theme: Theme) => {\n return css({\n backgroundColor: theme.colors.primary,\n position: 'absolute',\n borderRadius: 9999,\n height: '100%',\n\n '&[data-disabled]': {\n backgroundColor: theme.colors.grey100,\n },\n });\n};\n\nexport const Range = forwardRef<HTMLElement, SliderRangeProps>((props: SliderRangeProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Range css={getRangeStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getThumbStyles = (theme: Theme) => {\n return css({\n display: 'block',\n width: 20,\n height: 20,\n backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,\n borderRadius: 10,\n outline: 'none',\n\n '&:hover': {\n backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n },\n\n '&:focus': {\n backgroundColor: theme.colors.actionPrimaryBackgroundPress,\n },\n\n '&[data-disabled]': {\n backgroundColor: theme.colors.grey200,\n boxShadow: 'none',\n },\n });\n};\n\nexport const Thumb = forwardRef<HTMLElement, SliderThumbProps>((props: SliderThumbProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Thumb css={getThumbStyles(theme)} {...props} ref={ref} />;\n});\n"],"names":["tableStyles","row","cell","cellSmall","header","headerButtonTarget","checkboxCell","TableContext","createContext","size","Table","children","someRowsSelected","theme","useDesignSystemTheme","_jsx","colors","tableBorder","tableRowHover","TableRowContext","isHeader","TableRow","verticalAlignment","TableCell","ellipsis","useContext","typographySize","undefined","TableHeader","sortable","sortDirection","onToggleSort","Error","sortIcon","ariaSort","textContents","_jsxs","event","key","preventDefault","color","textSecondary","TableRowSelectCell","onChange","checked","indeterminate","noCheckbox","paddingLeft","paddingTop","paddingBottom","flex","minWidth","maxWidth","_checked","nativeEvent","borders","borderRadiusMd","getRootStyles","Root","forwardRef","props","ref","getTrackStyles","css","backgroundColor","grey100","position","flexGrow","borderRadius","width","height","Track","getRangeStyles","primary","Range","getThumbStyles","display","actionPrimaryBackgroundDefault","boxShadow","grey400","outline","actionPrimaryBackgroundHover","actionPrimaryBackgroundPress","grey200","Thumb"],"mappings":";;;;;;;;;;;;;;;;;;AAQA;AACA;AACA,MAAMA,WAAW,GAAG;EAClBC,GAAG;IAAA;IAAA;;IAAA;IAAA;IAAA;GAwBD;EAEFC,IAAI;IAAA;IAAA;;IAAA;IAAA;IAAA;GAUF;EAEFC,SAAS;IAAA;IAAA;;IAAA;IAAA;IAAA;GAKP;EAEFC,MAAM;IAAA;IAAA;;IAAA;IAAA;IAAA;GAcJ;EAEFC,kBAAkB;IAAA;IAAA;;IAAA;IAAA;IAAA;GAKhB;EAEFC,YAAY;IAAA;IAAA;;IAAA;IAAA;IAAA;;AAMd,CAAC;AAED,MAAMC,YAAY,gBAAGC,aAAa,CAG/B;EACDC,IAAI,EAAE;AACR,CAAC,CAAC;MAQWC,KAA2B,GAAG,QAAmE;EAAA,IAAlE;IAAEC,QAAQ;IAAEF,IAAI,GAAG,SAAS;IAAEG;GAAkB;EAC1F,MAAM;IAAEC;GAAO,GAAGC,sBAAoB,EAAE;EAExC,OACEC,IAAC,YAAY,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEN,IAAI;MAAEG;KAAmB;IAAA,UACvDG;MACE,IAAI,EAAC,OAAO;;;;MAGZ,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAUF,KAAK,CAACG,MAAM,CAACC,WAAW;QACnD,CAAC,mBAAmB,GAAUJ,KAAK,CAACG,MAAM,CAACE;OAC3C;MAAA,UAEDP;;IAEmB;AAE5B;AAEA,MAAMQ,eAAe,gBAAGX,aAAa,CAElC;EACDY,QAAQ,EAAE;AACZ,CAAC,CAAC;MAQWC,QAAiC,GAAG,SAA+D;EAAA,IAA9D;IAAEV,QAAQ;IAAES,QAAQ,GAAG,KAAK;IAAEE,iBAAiB,GAAG;GAAO;EACzG,OACEP,IAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEK;KAAW;IAAA,UAC5CL;MACE,GAAG,EAAEf,WAAW,CAACC,GAAI;MACrB,IAAI,EAAC,KAAK;MACV,KAAK,EAAE;QACL,CAAC,gCAAgC,GAAUqB,iBAAiB,KAAK,KAAK,GAAG,YAAY,GAAG;OACxF;MAAA,UAEDX;;IAEsB;AAE/B;MAOaY,SAAmC,GAAG,SAAoC;EAAA,IAAnC;IAAEZ,QAAQ;IAAEa,QAAQ,GAAG;GAAO;EAChF,MAAM;IAAEf;GAAM,GAAGgB,UAAU,CAAClB,YAAY,CAAC;EAEzC,IAAImB,cAAiC,GAAG,IAAI;EAE5C,IAAIjB,IAAI,KAAK,OAAO,EAAE;IACpBiB,cAAc,GAAG,IAAI;;EAGvB,OACEX;IAAK,GAAG,GAAGf,WAAW,CAACE,IAAI,EAAEO,IAAI,KAAK,OAAO,IAAIT,WAAW,CAACG,SAAS,mEAAE;IAAC,IAAI,EAAC,MAAM;IAAA,UAClFY,IAAC,UAAU,CAAC,IAAI;MACd,QAAQ,EAAES,QAAS;MACnB,IAAI,EAAEE,cAAe;MACrB,KAAK,EAAGF,QAAQ,IAAI,OAAOb,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,IAAKgB,SAAU;MAAA,UAE1EhB;;IAEC;AAEV;MAaaiB,WAAuC,GAAG,SAMjD;EAAA,IANkD;IACtDjB,QAAQ;IACRa,QAAQ,GAAG,KAAK;IAChBK,QAAQ;IACRC,aAAa;IACbC;GACD;EACC,MAAM;IAAElB;GAAO,GAAGC,sBAAoB,EAAE;EACxC,MAAM;IAAEL;GAAM,GAAGgB,UAAU,CAAClB,YAAY,CAAC;EACzC,MAAM;IAAEa;GAAU,GAAGK,UAAU,CAACN,eAAe,CAAC;EAEhD,IAAI,CAACC,QAAQ,EAAE;IACb,MAAM,IAAIY,KAAK,CAAC,6EAA6E,CAAC;;EAGhG,IAAIC,QAAQ,GAAGlB,iBAAK;;;EAGpB,IAAImB,QAA2C;EAE/C,IAAIL,QAAQ,EAAE;IACZ,IAAIC,aAAa,KAAK,KAAK,EAAE;MAC3BG,QAAQ,GAAGlB,IAAC,iBAAiB,KAAG;MAChCmB,QAAQ,GAAG,WAAW;KACvB,MAAM,IAAIJ,aAAa,KAAK,MAAM,EAAE;MACnCG,QAAQ,GAAGlB,IAAC,kBAAkB,KAAG;MACjCmB,QAAQ,GAAG,YAAY;KACxB,MAAM,IAAIJ,aAAa,KAAK,MAAM,EAAE;MACnCG,QAAQ,GAAGlB,IAAC,gBAAgB,KAAG;MAC/BmB,QAAQ,GAAG,MAAM;;;EAIrB,IAAIR,cAAiC,GAAG,IAAI;EAE5C,IAAIjB,IAAI,KAAK,OAAO,EAAE;IACpBiB,cAAc,GAAG,IAAI;;EAGvB,MAAMS,YAAY,GAChBpB,IAAC,UAAU,CAAC,IAAI;;IAEd,QAAQ,EAAES,QAAQ,IAAIK,QAAS;IAC/B,IAAI,EAAEH,cAAe;IACrB,KAAK,EAAGF,QAAQ,IAAI,OAAOb,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,IAAKgB,SAAU;IAAA,UAE1EhB;IAEJ;EAED,OACEI;IACE,GAAG,GAAGf,WAAW,CAACE,IAAI,EAAEF,WAAW,CAACI,MAAM,EAAEK,IAAI,KAAK,OAAO,IAAIT,WAAW,CAACG,SAAS,qEAAE;IACvF,IAAI,EAAC,cAAc;IACnB,aAAY0B,QAAQ,IAAIK,QAAQ,IAAKP,SAAU;IAAA,UAE9CE,QAAQ,GACPO;MACE,GAAG,GAAGpC,WAAW,CAACK,kBAAkB,qEAAE;MACtC,IAAI,EAAC,QAAQ;MACb,QAAQ,EAAE,CAAE;MACZ,OAAO,EAAE0B,YAAa;MACtB,SAAS,EAAGM,KAAK,IAAK;QACpB,IAAIR,QAAQ,KAAKQ,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,CAAC,EAAE;UAC5DD,KAAK,CAACE,cAAc,EAAE;UACtB,OAAOR,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGM,KAAK,CAAC;;OAE9B;MAAA,WAEDF,YAAY,EACbpB;QAAM,KAAK,EAAE;UAAEyB,KAAK,EAAE3B,KAAK,CAACG,MAAM,CAACyB;SAAgB;QAAA,UAAER;QAAgB;MACjE,GAENE;IAEE;AAEV;MAaaO,kBAAqD,GAAG,SAK/D;EAAA,IALgE;IACpEC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC;GACD;EACC,MAAM;IAAE1B;GAAU,GAAGK,UAAU,CAACN,eAAe,CAAC;EAChD,MAAM;IAAEP;GAAkB,GAAGa,UAAU,CAAClB,YAAY,CAAC;EAErD,IAAI,OAAOK,gBAAgB,KAAK,WAAW,EAAE;IAC3C,MAAM,IAAIoB,KAAK,CACb,8HAA8H,CAC/H;;EAGH,IAAI,CAACZ,QAAQ,IAAIyB,aAAa,EAAE;IAC9B,MAAM,IAAIb,KAAK,CAAC,+EAA+E,CAAC;;EAGlG,OACEjB;IACE,GAAG,EAAEf,WAAW,CAACM,YAAa;IAC9B,KAAK,EAAE;MACLyC,WAAW,EAAE,CAAC;MACdC,UAAU,EAAE,CAAC;MACbC,aAAa,EAAE,CAAC;MAChBC,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,EAAE;MACZC,QAAQ,EAAE,EAAE;MACZ,CAAC,wBAAwB,GAAUxC,gBAAgB,GAAG,CAAC,GAAG;KAC1D;IACF,IAAI,EAAEQ,QAAQ,GAAG,cAAc,GAAG;;;;IAGlC,SAAS,EAAC,uBAAuB;IAAA,UAEhC,CAAC0B,UAAU,IACV/B,IAAC,QAAQ;MACP,SAAS,EAAE6B,OAAO,IAAKC,aAAa,IAAI,IAAM;MAC9C,QAAQ,EAAE,CAACQ,QAAQ,EAAEhB,KAAK,KAAKM,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGN,KAAK,CAACiB,WAAW;;IAG3D;AAEV;;AChUA;AACO,MAAMC,OAAO,GAAG;EACrBC,cAAc,EAAE;AAClB,CAAC;;AAED;AACA,gBAAe;EACb,GAAGD;AACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACJkC;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;AASnC,MAAME,aAAa,GAAG,MAAM;EAC1B;AAgBF,CAAC;AAEM,MAAMC,IAAI,gBAAGC,UAAU,CAA+B,CAACC,KAAsB,EAAEC,GAAG,KAAkB;EACzG,OAAO9C,IAAC,WAAW,CAAC,IAAI;IAAC,GAAG,EAAE0C,aAAa,EAAG;IAAA,GAAKG,KAAK;IAAE,GAAG,EAAEC;IAAO;AACxE,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAIjD,KAAY,IAAK;EACvC,oBAAOkD,GAAG,CAAC;IACTC,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACiD,OAAO;IACrCC,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE,CAAC;IACXC,YAAY,EAAE,IAAI;IAElB,gCAAgC,EAAE;MAChCC,KAAK,EAAE;KACR;IAED,kCAAkC,EAAE;MAClCC,MAAM,EAAE;;GAEX,wEAAC;AACJ,CAAC;AAEM,MAAMC,KAAK,gBAAGZ,UAAU,CAAgC,CAACC,KAAuB,EAAEC,GAAG,KAAkB;EAC5G,MAAM;IAAEhD;GAAO,GAAGC,oBAAoB,EAAE;EAExC,OAAOC,IAAC,WAAW,CAAC,KAAK;IAAC,GAAG,EAAE+C,cAAc,CAACjD,KAAK,CAAE;IAAA,GAAK+C,KAAK;IAAE,GAAG,EAAEC;IAAO;AAC/E,CAAC,CAAC;AAEF,MAAMW,cAAc,GAAI3D,KAAY,IAAK;EACvC,oBAAOkD,GAAG,CAAC;IACTC,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACyD,OAAO;IACrCP,QAAQ,EAAE,UAAU;IACpBE,YAAY,EAAE,IAAI;IAClBE,MAAM,EAAE,MAAM;IAEd,kBAAkB,EAAE;MAClBN,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACiD;;GAEjC,wEAAC;AACJ,CAAC;AAEM,MAAMS,KAAK,gBAAGf,UAAU,CAAgC,CAACC,KAAuB,EAAEC,GAAG,KAAkB;EAC5G,MAAM;IAAEhD;GAAO,GAAGC,oBAAoB,EAAE;EAExC,OAAOC,IAAC,WAAW,CAAC,KAAK;IAAC,GAAG,EAAEyD,cAAc,CAAC3D,KAAK,CAAE;IAAA,GAAK+C,KAAK;IAAE,GAAG,EAAEC;IAAO;AAC/E,CAAC,CAAC;AAEF,MAAMc,cAAc,GAAI9D,KAAY,IAAK;EACvC,oBAAOkD,GAAG,CAAC;IACTa,OAAO,EAAE,OAAO;IAChBP,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAAC6D,8BAA8B;IAC5DC,SAAS,wBAAiBjE,KAAK,CAACG,MAAM,CAAC+D,OAAO,CAAE;IAChDX,YAAY,EAAE,EAAE;IAChBY,OAAO,EAAE,MAAM;IAEf,SAAS,EAAE;MACThB,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACiE;KAC/B;IAED,SAAS,EAAE;MACTjB,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACkE;KAC/B;IAED,kBAAkB,EAAE;MAClBlB,eAAe,EAAEnD,KAAK,CAACG,MAAM,CAACmE,OAAO;MACrCL,SAAS,EAAE;;GAEd,wEAAC;AACJ,CAAC;AAEM,MAAMM,KAAK,gBAAGzB,UAAU,CAAgC,CAACC,KAAuB,EAAEC,GAAG,KAAkB;EAC5G,MAAM;IAAEhD;GAAO,GAAGC,oBAAoB,EAAE;EAExC,OAAOC,IAAC,WAAW,CAAC,KAAK;IAAC,GAAG,EAAE4D,cAAc,CAAC9D,KAAK,CAAE;IAAA,GAAK+C,KAAK;IAAE,GAAG,EAAEC;IAAO;AAC/E,CAAC,CAAC;;;;;;;;;;;;"}
1	+ {"version":3,"file":"development.js","sources":["../src/development/TableUI/index.tsx","../src/development/Slider/Slider.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport type { CSSProperties } from 'react';\nimport React, { createContext, useContext } from 'react';\n\nimport { Checkbox, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon } from '../../design-system';\nimport { useDesignSystemTheme } from '../../design-system/Hooks';\nimport { Typography } from '../../design-system/Typography';\nimport type { TextProps } from '../../design-system/Typography/Text';\n\n// For performance, these styles are defined outside of the component so they are not redefined on every render.\n// We're also using CSS Variables rather than any dynamic styles so that the style object remains static.\nconst tableStyles = {\n row: css({\n display: 'flex',\n borderBottom: '1px solid',\n borderColor: 'var(--table-separator-color)',\n\n // Note: Next-sibling selector is necessary for Ant Checkboxes; if we move away\n // from those in the future we would need to adjust these styles.\n '.table-row-select-cell input[type=\"checkbox\"] ~ ': {\n opacity: 'var(--row-checkbox-opacity, 0)',\n },\n\n '&:hover': {\n '[role=\"cell\"]': {\n backgroundColor: 'var(--table-row-hover)',\n },\n\n '.table-row-select-cell input[type=\"checkbox\"] ~ ': {\n opacity: 1,\n },\n },\n\n '.table-row-select-cell input[type=\"checkbox\"]:focus ~ ': {\n opacity: 1,\n },\n }),\n\n cell: css({\n display: 'inline-grid',\n position: 'relative',\n alignItems: 'var(--table-row-vertical-alignment, flex-start)',\n flex: 1,\n lineHeight: 'initial',\n padding: '6px 8px',\n boxSizing: 'border-box',\n\n '&[role=\"columnheader\"]': {\n padding: 8,\n },\n }),\n\n cellSmall: css({\n padding: '4px 8px',\n '&[role=\"columnheader\"]': {\n padding: '4px 8px',\n },\n }),\n\n header: css({\n fontWeight: 'bold',\n alignItems: 'flex-end',\n display: 'flex',\n overflow: 'hidden',\n\n '&[aria-sort]': {\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n '[role=\"img\"]': {\n marginLeft: '4px',\n },\n }),\n\n headerButtonTarget: css({\n alignItems: 'flex-end',\n display: 'flex',\n overflow: 'hidden',\n width: '100%',\n }),\n\n checkboxCell: css({\n padding: '0 0 0 8px',\n display: 'flex',\n alignItems: 'center',\n flex: 0,\n }),\n\n resizeHandleContainer: css({\n position: 'absolute',\n right: -3,\n top: 8,\n bottom: 8,\n width: 8,\n display: 'flex',\n justifyContent: 'center',\n cursor: 'col-resize',\n userSelect: 'none',\n touchAction: 'none',\n zIndex: 1,\n }),\n\n resizeHandle: css({\n width: 1,\n background: 'var(--table-separator-color)',\n }),\n};\n\nconst TableContext = createContext<{\n size: 'default' \| 'small';\n someRowsSelected?: boolean;\n}>({\n size: 'default',\n});\n\ninterface TableProps {\n size?: 'default' \| 'small';\n /* Are any rows currently selected? You must specify this if using `TableRowSelectCell` in your table. /\n someRowsSelected?: boolean;\n /* Style property /\n style?: CSSProperties;\n}\n\nexport const Table: React.FC<TableProps> = ({ children, size = 'default', someRowsSelected, style }): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return (\n <TableContext.Provider value={{ size, someRowsSelected }}>\n <div\n role=\"table\"\n // This is a performance optimization; we want to statically create the styles for the table,\n // but for the dynamic theme values, we need to use CSS variables.\n // See: https://emotion.sh/docs/best-practices#advanced-css-variables-with-style\n style={{\n ...style,\n ['--table-separator-color' as any]: theme.colors.tableSeparatorColor,\n ['--table-row-hover' as any]: theme.colors.tableRowHover,\n }}\n >\n {children}\n </div>\n </TableContext.Provider>\n );\n};\n\nconst TableRowContext = createContext<{\n isHeader: boolean;\n}>({\n isHeader: false,\n});\n\ninterface TableRowProps {\n isHeader?: boolean;\n /* Vertical alignment of the row's cells. /\n verticalAlignment?: 'top' \| 'center';\n}\n\nexport const TableRow: React.FC<TableRowProps> = ({ children, isHeader = false, verticalAlignment = 'top' }) => {\n return (\n <TableRowContext.Provider value={{ isHeader }}>\n <div\n css={tableStyles.row}\n role=\"row\"\n style={{\n ['--table-row-vertical-alignment' as any]: verticalAlignment === 'top' ? 'flex-start' : 'center',\n }}\n >\n {children}\n </div>\n </TableRowContext.Provider>\n );\n};\n\ninterface TableCellProps {\n /* Enables single-line ellipsis truncation /\n ellipsis?: boolean;\n /* Style property /\n style?: CSSProperties;\n}\n\nexport const TableCell: React.FC<TableCellProps> = ({ children, ellipsis = false, style }) => {\n const { size } = useContext(TableContext);\n\n let typographySize: TextProps['size'] = 'md';\n\n if (size === 'small') {\n typographySize = 'sm';\n }\n\n return (\n <div css={[tableStyles.cell, size === 'small' && tableStyles.cellSmall]} role=\"cell\" style={style}>\n <Typography.Text\n ellipsis={ellipsis}\n size={typographySize}\n title={(ellipsis && typeof children === 'string' && children) \|\| undefined}\n >\n {children}\n </Typography.Text>\n </div>\n );\n};\n\ninterface TableHeaderProps {\n /* Enables single-line ellipsis truncation /\n ellipsis?: boolean;\n /* Is this column sortable? /\n sortable?: boolean;\n /* The current sort direction for this column /\n sortDirection?: 'asc' \| 'desc' \| 'none';\n /* Callback for when the user requests to toggle `sortDirection` /\n onToggleSort?: (event: unknown) => void;\n /* Style property /\n style?: CSSProperties;\n}\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n children,\n ellipsis = false,\n sortable,\n sortDirection,\n onToggleSort,\n style,\n}) => {\n const { theme } = useDesignSystemTheme();\n const { size } = useContext(TableContext);\n const { isHeader } = useContext(TableRowContext);\n\n if (!isHeader) {\n throw new Error('`TableHeader` must be used within a `TableRow` with `isHeader` set to true.');\n }\n\n let sortIcon = <></>;\n // While most libaries use `asc` and `desc` for the sort value, the ARIA spec\n // uses `ascending` and `descending`.\n let ariaSort: React.AriaAttributes['aria-sort'];\n\n if (sortable) {\n if (sortDirection === 'asc') {\n sortIcon = <SortAscendingIcon />;\n ariaSort = 'ascending';\n } else if (sortDirection === 'desc') {\n sortIcon = <SortDescendingIcon />;\n ariaSort = 'descending';\n } else if (sortDirection === 'none') {\n sortIcon = <SortUnsortedIcon />;\n ariaSort = 'none';\n }\n }\n\n let typographySize: TextProps['size'] = 'md';\n\n if (size === 'small') {\n typographySize = 'sm';\n }\n\n const textContents = (\n <Typography.Text\n // If sortable, we must use ellipsis to prevent wrapping and misalignment.\n ellipsis={ellipsis \|\| sortable}\n size={typographySize}\n title={(ellipsis && typeof children === 'string' && children) \|\| undefined}\n >\n {children}\n </Typography.Text>\n );\n\n return (\n <div\n css={[tableStyles.cell, tableStyles.header, size === 'small' && tableStyles.cellSmall]}\n role=\"columnheader\"\n aria-sort={(sortable && ariaSort) \|\| undefined}\n style={style}\n >\n {sortable ? (\n <div\n css={[tableStyles.headerButtonTarget]}\n role=\"button\"\n tabIndex={0}\n onClick={onToggleSort}\n onKeyDown={(event) => {\n if (sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n return onToggleSort?.(event);\n }\n }}\n >\n {textContents}\n <span style={{ color: theme.colors.textSecondary }}>{sortIcon}</span>\n </div>\n ) : (\n textContents\n )}\n </div>\n );\n};\n\ninterface TableHeaderResizeHandleProps {\n /* Style property /\n style?: CSSProperties;\n /* Pass a handler to be called on touchStart /\n resizeHandler?: (event: unknown) => void;\n}\n\nexport const TableHeaderResizeHandle: React.FC<TableHeaderResizeHandleProps> = ({ style, resizeHandler }) => {\n const { isHeader } = useContext(TableRowContext);\n\n if (!isHeader) {\n throw new Error('`TableHeaderResizeHandle` must be used within a `TableRow` with `isHeader` set to true.');\n }\n\n return (\n <div onMouseDown={resizeHandler} onTouchStart={resizeHandler} css={tableStyles.resizeHandleContainer} style={style}>\n <div css={tableStyles.resizeHandle} />\n </div>\n );\n};\n\ntype TableRowSelectCellProps = {\n /* Called when the checkbox is clicked /\n onChange?: (event: unknown) => void;\n /* Whether the checkbox is checked /\n checked?: boolean;\n /* Whether the row is indeterminate. Should only be used in header rows. /\n indeterminate?: boolean;\n /* Don't render a checkbox; used for providing spacing in header if you don't want \"Select All\" functionality /\n noCheckbox?: boolean;\n};\n\nexport const TableRowSelectCell: React.FC<TableRowSelectCellProps> = ({\n onChange,\n checked,\n indeterminate,\n noCheckbox,\n}) => {\n const { isHeader } = useContext(TableRowContext);\n const { someRowsSelected } = useContext(TableContext);\n\n if (typeof someRowsSelected === 'undefined') {\n throw new Error(\n '`TableRowSelectCell` cannot be used unless `someRowsSelected` has been provided to the `Table` component, see documentation.'\n );\n }\n\n if (!isHeader && indeterminate) {\n throw new Error('`TableRowSelectCell` cannot be used with `indeterminate` in a non-header row.');\n }\n\n return (\n <div\n css={tableStyles.checkboxCell}\n style={{\n paddingLeft: 8,\n paddingTop: 0,\n paddingBottom: 0,\n flex: 0,\n minWidth: 16,\n maxWidth: 16,\n ['--row-checkbox-opacity' as any]: someRowsSelected ? 1 : 0,\n }}\n role={isHeader ? 'columnheader' : 'cell'}\n // TODO: Ideally we shouldn't need to specify this `className`, but it allows for row-hovering to reveal\n // the checkbox in `TableRow`'s CSS without extra JS pointerin/out events.\n className=\"table-row-select-cell\"\n >\n {!noCheckbox && (\n <Checkbox\n isChecked={checked \|\| (indeterminate && null)}\n onChange={(_checked, event) => onChange?.(event.nativeEvent)}\n />\n )}\n </div>\n );\n};\n","import { css } from '@emotion/react';\nimport as RadixSlider from '@radix-ui/react-slider';\nimport { forwardRef } from 'react';\n\nimport { useDesignSystemTheme } from '../../design-system/Hooks';\nimport type { Theme } from '../../theme';\n\nexport type SliderRootProps = Omit<RadixSlider.SliderProps, 'orientation'>;\nexport type SliderTrackProps = RadixSlider.SliderTrackProps;\nexport type SliderRangeProps = RadixSlider.SliderRangeProps;\nexport type SliderThumbProps = RadixSlider.SliderThumbProps;\n\nconst getRootStyles = () => {\n return css({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: 20,\n height: 100,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: 20,\n width: 200,\n },\n });\n};\n\nexport const Root = forwardRef<HTMLElement, SliderRootProps>((props: SliderRootProps, ref): JSX.Element => {\n return <RadixSlider.Root css={getRootStyles()} {...props} ref={ref} />;\n});\n\nconst getTrackStyles = (theme: Theme) => {\n return css({\n backgroundColor: theme.colors.grey100,\n position: 'relative',\n flexGrow: 1,\n borderRadius: 9999,\n\n '&[data-orientation=\"vertical\"]': {\n width: 3,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: 3,\n },\n });\n};\n\nexport const Track = forwardRef<HTMLElement, SliderTrackProps>((props: SliderTrackProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Track css={getTrackStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getRangeStyles = (theme: Theme) => {\n return css({\n backgroundColor: theme.colors.primary,\n position: 'absolute',\n borderRadius: 9999,\n height: '100%',\n\n '&[data-disabled]': {\n backgroundColor: theme.colors.grey100,\n },\n });\n};\n\nexport const Range = forwardRef<HTMLElement, SliderRangeProps>((props: SliderRangeProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Range css={getRangeStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getThumbStyles = (theme: Theme) => {\n return css({\n display: 'block',\n width: 20,\n height: 20,\n backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,\n borderRadius: 10,\n outline: 'none',\n\n '&:hover': {\n backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n },\n\n '&:focus': {\n backgroundColor: theme.colors.actionPrimaryBackgroundPress,\n },\n\n '&[data-disabled]': {\n backgroundColor: theme.colors.grey200,\n boxShadow: 'none',\n },\n });\n};\n\nexport const Thumb = forwardRef<HTMLElement, SliderThumbProps>((props: SliderThumbProps, ref): JSX.Element => {\n const { theme } = useDesignSystemTheme();\n\n return <RadixSlider.Thumb css={getThumbStyles(theme)} {...props} ref={ref} />;\n});\n"],"names":["tableStyles","row","cell","cellSmall","header","headerButtonTarget","checkboxCell","resizeHandleContainer","css","position","right","top","bottom","width","display","justifyContent","cursor","userSelect","touchAction","zIndex","resizeHandle","TableContext","createContext","size","Table","children","someRowsSelected","style","theme","useDesignSystemTheme","_jsx","colors","tableSeparatorColor","tableRowHover","TableRowContext","isHeader","TableRow","verticalAlignment","TableCell","ellipsis","useContext","typographySize","undefined","TableHeader","sortable","sortDirection","onToggleSort","Error","sortIcon","ariaSort","textContents","_jsxs","event","key","preventDefault","color","textSecondary","TableHeaderResizeHandle","resizeHandler","TableRowSelectCell","onChange","checked","indeterminate","noCheckbox","paddingLeft","paddingTop","paddingBottom","flex","minWidth","maxWidth","_checked","nativeEvent","getRootStyles","Root","forwardRef","props","ref","getTrackStyles","backgroundColor","grey100","flexGrow","borderRadius","height","Track","getRangeStyles","primary","Range","getThumbStyles","actionPrimaryBackgroundDefault","boxShadow","grey400","outline","actionPrimaryBackgroundHover","actionPrimaryBackgroundPress","grey200","Thumb"],"mappings":"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"}

package/dist/index-dark.css CHANGED Viewed

@@ -18882,6 +18882,7 @@ div.du-bois-dark-typography-edit-content.du-bois-dark-typography-rtl {
 }
 .du-bois-dark-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .du-bois-dark-notification-notice .du-bois-dark-notification-notice-icon {
   font-size: 16px;

package/dist/index-mfe-dark.css CHANGED Viewed

@@ -17487,6 +17487,7 @@
 }
 .mfe-root .du-bois-dark-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .mfe-root .du-bois-dark-notification-notice .du-bois-dark-notification-notice-icon {
   font-size: 16px;

package/dist/index-mfe.css CHANGED Viewed

@@ -17149,6 +17149,7 @@
 }
 .mfe-root .du-bois-light-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .mfe-root .du-bois-light-notification-notice .du-bois-light-notification-notice-icon {
   font-size: 16px;

package/dist/index.css CHANGED Viewed

@@ -18511,6 +18511,7 @@ div.du-bois-light-typography-edit-content.du-bois-light-typography-rtl {
 }
 .du-bois-light-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .du-bois-light-notification-notice .du-bois-light-notification-notice-icon {
   font-size: 16px;