@databricks/design-system 1.8.0 → 1.9.1

package/dist/development.js

@@ -0,0 +1,789 @@
+import { useTheme, css } from '@emotion/react';
+import { useContext, createContext, forwardRef } from 'react';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { u as useDesignSystemTheme$1, T as Typography, S as SortAscendingIcon, n as SortDescendingIcon, o as SortUnsortedIcon, C as Checkbox } from './Typography-84a00e02.js';
+import * as RadixSlider from '@radix-ui/react-slider';
+import 'antd';
+import 'classnames';
+import chroma from 'chroma-js';
+import '@ant-design/icons';
+import 'lodash/isNil';
+import 'lodash/endsWith';
+import 'lodash/isBoolean';
+import 'lodash/isNumber';
+import 'lodash/isString';
+import 'lodash/mapValues';
+import '@emotion/unitless';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+// For performance, these styles are defined outside of the component so they are not redefined on every render.
+// We're also using CSS Variables rather than any dynamic styles so that the style object remains static.
+const tableStyles = {
+  row: process.env.NODE_ENV === "production" ? {
+    name: "q4mdqg",
+    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-border);.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{[role=\"cell\"]{background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}"
+  } : {
+    name: "1218dqd-row",
+    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-border);.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{[role=\"cell\"]{background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;};label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  cell: process.env.NODE_ENV === "production" ? {
+    name: "1844uvd",
+    styles: "display:inline-grid;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;padding:6px 8px;&[role=\"columnheader\"]{padding:8px;}"
+  } : {
+    name: "oqyg7z-cell",
+    styles: "display:inline-grid;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;padding:6px 8px;&[role=\"columnheader\"]{padding:8px;};label:cell;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  cellSmall: process.env.NODE_ENV === "production" ? {
+    name: "t4u7cz",
+    styles: "padding:4px 8px;&[role=\"columnheader\"]{padding:4px 8px;}"
+  } : {
+    name: "1cnl65h-cellSmall",
+    styles: "padding:4px 8px;&[role=\"columnheader\"]{padding:4px 8px;};label:cellSmall;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  header: process.env.NODE_ENV === "production" ? {
+    name: "1kkin30",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}[role=\"img\"]{margin-left:4px;}"
+  } : {
+    name: "a29sg0-header",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}[role=\"img\"]{margin-left:4px;};label:header;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  headerButtonTarget: process.env.NODE_ENV === "production" ? {
+    name: "16jw3zf",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%"
+  } : {
+    name: "1xje8dv-headerButtonTarget",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;label:headerButtonTarget;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  checkboxCell: process.env.NODE_ENV === "production" ? {
+    name: "yjqp7o",
+    styles: "padding:0 0 0 8px;display:flex;align-items:center;flex:0"
+  } : {
+    name: "177274n-checkboxCell",
+    styles: "padding:0 0 0 8px;display:flex;align-items:center;flex:0;label:checkboxCell;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  }
+};
+const TableContext = /*#__PURE__*/createContext({
+  size: 'default'
+});
+const Table = _ref => {
+  let {
+    children,
+    size = 'default',
+    someRowsSelected
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme$1();
+  return jsx(TableContext.Provider, {
+    value: {
+      size,
+      someRowsSelected
+    },
+    children: jsx("div", {
+      role: "table" // This is a performance optimization; we want to statically create the styles for the table,
+      // but for the dynamic theme values, we need to use CSS variables.
+      // See: https://emotion.sh/docs/best-practices#advanced-css-variables-with-style
+      ,
+      style: {
+        ['--table-border']: theme.colors.tableBorder,
+        ['--table-row-hover']: theme.colors.tableRowHover
+      },
+      children: children
+    })
+  });
+};
+const TableRowContext = /*#__PURE__*/createContext({
+  isHeader: false
+});
+const TableRow = _ref2 => {
+  let {
+    children,
+    isHeader = false,
+    verticalAlignment = 'top'
+  } = _ref2;
+  return jsx(TableRowContext.Provider, {
+    value: {
+      isHeader
+    },
+    children: jsx("div", {
+      css: tableStyles.row,
+      role: "row",
+      style: {
+        ['--table-row-vertical-alignment']: verticalAlignment === 'top' ? 'flex-start' : 'center'
+      },
+      children: children
+    })
+  });
+};
+const TableCell = _ref3 => {
+  let {
+    children,
+    ellipsis = false
+  } = _ref3;
+  const {
+    size
+  } = useContext(TableContext);
+  let typographySize = 'md';
+  if (size === 'small') {
+    typographySize = 'sm';
+  }
+  return jsx("div", {
+    css: [tableStyles.cell, size === 'small' && tableStyles.cellSmall, process.env.NODE_ENV === "production" ? "" : ";label:TableCell;"],
+    role: "cell",
+    children: jsx(Typography.Text, {
+      ellipsis: ellipsis,
+      size: typographySize,
+      title: ellipsis && typeof children === 'string' && children || undefined,
+      children: children
+    })
+  });
+};
+const TableHeader = _ref4 => {
+  let {
+    children,
+    ellipsis = false,
+    sortable,
+    sortDirection,
+    onToggleSort
+  } = _ref4;
+  const {
+    theme
+  } = useDesignSystemTheme$1();
+  const {
+    size
+  } = useContext(TableContext);
+  const {
+    isHeader
+  } = useContext(TableRowContext);
+  if (!isHeader) {
+    throw new Error('`TableHeader` must be used within a `TableRow` with `isHeader` set to true.');
+  }
+  let sortIcon = jsx(Fragment, {});
+  // While most libaries use `asc` and `desc` for the sort value, the ARIA spec
+  // uses `ascending` and `descending`.
+  let ariaSort;
+  if (sortable) {
+    if (sortDirection === 'asc') {
+      sortIcon = jsx(SortAscendingIcon, {});
+      ariaSort = 'ascending';
+    } else if (sortDirection === 'desc') {
+      sortIcon = jsx(SortDescendingIcon, {});
+      ariaSort = 'descending';
+    } else if (sortDirection === 'none') {
+      sortIcon = jsx(SortUnsortedIcon, {});
+      ariaSort = 'none';
+    }
+  }
+  let typographySize = 'md';
+  if (size === 'small') {
+    typographySize = 'sm';
+  }
+  const textContents = jsx(Typography.Text, {
+    // If sortable, we must use ellipsis to prevent wrapping and misalignment.
+    ellipsis: ellipsis || sortable,
+    size: typographySize,
+    title: ellipsis && typeof children === 'string' && children || undefined,
+    children: children
+  });
+  return jsx("div", {
+    css: [tableStyles.cell, tableStyles.header, size === 'small' && tableStyles.cellSmall, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
+    role: "columnheader",
+    "aria-sort": sortable && ariaSort || undefined,
+    children: sortable ? jsxs("div", {
+      css: [tableStyles.headerButtonTarget, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
+      role: "button",
+      tabIndex: 0,
+      onClick: onToggleSort,
+      onKeyDown: event => {
+        if (sortable && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          return onToggleSort === null || onToggleSort === void 0 ? void 0 : onToggleSort(event);
+        }
+      },
+      children: [textContents, jsx("span", {
+        style: {
+          color: theme.colors.textSecondary
+        },
+        children: sortIcon
+      })]
+    }) : textContents
+  });
+};
+const TableRowSelectCell = _ref5 => {
+  let {
+    onChange,
+    checked,
+    indeterminate,
+    noCheckbox
+  } = _ref5;
+  const {
+    isHeader
+  } = useContext(TableRowContext);
+  const {
+    someRowsSelected
+  } = useContext(TableContext);
+  if (typeof someRowsSelected === 'undefined') {
+    throw new Error('`TableRowSelectCell` cannot be used unless `someRowsSelected` has been provided to the `Table` component, see documentation.');
+  }
+  if (!isHeader && indeterminate) {
+    throw new Error('`TableRowSelectCell` cannot be used with `indeterminate` in a non-header row.');
+  }
+  return jsx("div", {
+    css: tableStyles.checkboxCell,
+    style: {
+      paddingLeft: 8,
+      paddingTop: 0,
+      paddingBottom: 0,
+      flex: 0,
+      minWidth: 16,
+      maxWidth: 16,
+      ['--row-checkbox-opacity']: someRowsSelected ? 1 : 0
+    },
+    role: isHeader ? 'columnheader' : 'cell'
+    // TODO: Ideally we shouldn't need to specify this `className`, but it allows for row-hovering to reveal
+    // the checkbox in `TableRow`'s CSS without extra JS pointerin/out events.
+    ,
+    className: "table-row-select-cell",
+    children: !noCheckbox && jsx(Checkbox, {
+      isChecked: checked || indeterminate && null,
+      onChange: (_checked, event) => onChange === null || onChange === void 0 ? void 0 : onChange(event.nativeEvent)
+    })
+  });
+};
+
+// Border variables
+const borders = {
+  borderRadiusMd: 4
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var borders$1 = {
+  ...borders
+};
+
+// Exported from go/designsystem/colorsheet
+const colorPalettePrimary = {
+  primary: '#2272B4',
+  blue100: '#F0F8FF',
+  blue200: '#D7EDFE',
+  blue300: '#BAE1FC',
+  blue400: '#8ACAFF',
+  blue500: '#4299E0',
+  blue600: '#2272B4',
+  blue700: '#0E538B',
+  blue800: '#04355D',
+  green100: '#F3FCF6',
+  green200: '#D4F7DF',
+  green300: '#B1ECC5',
+  green400: '#8DDDA8',
+  green500: '#3CAA60',
+  green600: '#277C43',
+  green700: '#115026',
+  green800: '#093919',
+  white: '#FFFFFF',
+  grey100: '#F2F5F7',
+  grey200: '#E4ECF1',
+  grey300: '#CDDAE5',
+  grey400: '#BDCDDB',
+  grey500: '#8196A7',
+  grey600: '#5D7283',
+  grey700: '#44535F',
+  grey800: '#1F272D',
+  red100: '#FFF5F7',
+  red200: '#FDE2E8',
+  red300: '#FBD0D8',
+  red400: '#F792A6',
+  red500: '#E65B77',
+  red600: '#C82D4C',
+  red700: '#9E102C',
+  red800: '#630316',
+  yellow100: '#FFF9EB',
+  yellow200: '#FCEACA',
+  yellow300: '#F8D4A5',
+  yellow400: '#F2BE88',
+  yellow500: '#DE7921',
+  yellow600: '#BE501E',
+  yellow700: '#93320B',
+  yellow800: '#5F1B02'
+};
+const colorPaletteSecondary = {
+  brown: '#A6630C',
+  coral: '#C83243',
+  charcoal: '#5D7283',
+  indigo: '#434A93',
+  lemon: '#FACB66',
+  lime: '#308613',
+  pink: '#B45091',
+  purple: '#8A63BF',
+  teal: '#04867D',
+  turquoise: '#157CBC'
+};
+
+// Colors taken from figma designs but not part of official list (yet)
+const unstableColors = {
+  textValidationInfo: '#64727D',
+  backgroundValidationDanger: colorPalettePrimary.red100,
+  backgroundValidationSuccess: colorPalettePrimary.blue100,
+  backgroundValidationWarning: colorPalettePrimary.yellow100,
+  borderValidationDanger: colorPalettePrimary.red300,
+  borderValidationSuccess: colorPalettePrimary.blue300,
+  borderValidationWarning: colorPalettePrimary.yellow300
+};
+const lightColorList = {
+  backgroundPrimary: colorPalettePrimary.white,
+  actionDangerPrimaryBackgroundDefault: colorPalettePrimary.red600,
+  actionDangerPrimaryBackgroundHover: colorPalettePrimary.red700,
+  actionDangerPrimaryBackgroundPress: colorPalettePrimary.red800,
+  actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red600).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red600).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red600).alpha(0.16).hex(),
+  actionDangerDefaultBorderDefault: colorPalettePrimary.red600,
+  actionDangerDefaultBorderHover: colorPalettePrimary.red700,
+  actionDangerDefaultBorderPress: colorPalettePrimary.red800,
+  actionDangerDefaultTextDefault: colorPalettePrimary.red600,
+  actionDangerDefaultTextHover: colorPalettePrimary.red700,
+  actionDangerDefaultTextPress: colorPalettePrimary.red800,
+  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue800).alpha(0).hex(),
+  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
+  actionDefaultBorderDefault: colorPalettePrimary.grey300,
+  actionDefaultBorderFocus: colorPalettePrimary.blue600,
+  actionDefaultBorderHover: colorPalettePrimary.blue700,
+  actionDefaultBorderPress: colorPalettePrimary.blue800,
+  actionDefaultTextDefault: colorPalettePrimary.grey800,
+  actionDefaultTextHover: colorPalettePrimary.blue700,
+  actionDefaultTextPress: colorPalettePrimary.blue800,
+  actionDisabledBackground: colorPalettePrimary.grey200,
+  actionDisabledText: colorPalettePrimary.grey400,
+  actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,
+  actionPrimaryBackgroundHover: colorPalettePrimary.blue700,
+  actionPrimaryBackgroundPress: colorPalettePrimary.blue800,
+  actionPrimaryTextDefault: colorPalettePrimary.white,
+  actionPrimaryTextHover: colorPalettePrimary.white,
+  actionPrimaryTextPress: colorPalettePrimary.white,
+  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue600).alpha(0).hex(),
+  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
+  actionTertiaryTextDefault: colorPalettePrimary.blue600,
+  actionTertiaryTextHover: colorPalettePrimary.blue700,
+  actionTertiaryTextPress: colorPalettePrimary.blue800,
+  backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
+  backgroundSecondary: colorPalettePrimary.grey100,
+  backgroundWarning: chroma(colorPalettePrimary.yellow100).alpha(0.08).hex(),
+  border: colorPalettePrimary.grey300,
+  borderDecorative: colorPalettePrimary.grey300,
+  textPrimary: colorPalettePrimary.grey800,
+  textSecondary: colorPalettePrimary.grey600,
+  textPlaceholder: colorPalettePrimary.grey400,
+  textValidationDanger: colorPalettePrimary.red600,
+  textValidationSuccess: colorPalettePrimary.green600,
+  textValidationWarning: colorPalettePrimary.yellow600,
+  overlayOverlay: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
+  // Tags
+  tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
+  tagBrown: colorPaletteSecondary.brown,
+  tagCoral: colorPaletteSecondary.coral,
+  tagCharcoal: colorPalettePrimary.grey600,
+  tagIndigo: colorPaletteSecondary.indigo,
+  tagLemon: colorPaletteSecondary.lemon,
+  tagLime: colorPaletteSecondary.lime,
+  tagPink: colorPaletteSecondary.pink,
+  tagPurple: colorPaletteSecondary.purple,
+  tagTeal: colorPaletteSecondary.teal,
+  tagTurquoise: colorPaletteSecondary.turquoise,
+  tagText: colorPalettePrimary.white,
+  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
+  // Table
+  tableBorder: colorPalettePrimary.grey200,
+  tableRowHover: chroma(colorPalettePrimary.grey600).alpha(0.04).hex(),
+  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
+  ...unstableColors
+};
+const darkColorList = {
+  actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
+  actionDangerPrimaryBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerPrimaryBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.16).hex(),
+  actionDangerDefaultBorderDefault: colorPalettePrimary.red400,
+  actionDangerDefaultBorderHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultBorderPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultTextDefault: colorPalettePrimary.red400,
+  actionDangerDefaultTextHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultTextPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
+  actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),
+  actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionPrimaryTextDefault: colorPalettePrimary.grey800,
+  actionPrimaryTextHover: colorPalettePrimary.grey800,
+  actionPrimaryTextPress: colorPalettePrimary.grey800,
+  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  backgroundPrimary: colorPalettePrimary.grey800,
+  backgroundSecondary: chroma(colorPalettePrimary.white).alpha(0.04).hex(),
+  border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
+  borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
+  textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),
+  textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
+  textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),
+  textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),
+  overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
+  // Tags
+  tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
+  tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
+  tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
+  tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
+  tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
+  tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
+  tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
+  tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),
+  tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),
+  tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),
+  tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
+  tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
+  // Table
+  tableBorder: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  tableRowHover: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
+  tooltipBackgroundTooltip: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
+  // Missing in list
+  backgroundDanger: 'rgba(200,45,76,0.08)',
+  backgroundWarning: 'rgba(222,121,33,0.08)',
+  // Missing in light list
+  // "background-validation-danger": "rgba(229,110,134,0)",
+  // "background-validation-warning": "rgba(252,234,202,0)",
+  ...unstableColors
+};
+const darkColors = {
+  ...darkColorList,
+  ...colorPalettePrimary,
+  ...colorPaletteSecondary
+};
+const lightColors = {
+  ...lightColorList,
+  ...colorPalettePrimary,
+  ...colorPaletteSecondary
+};
+function getSemanticColors(theme) {
+  switch (theme) {
+    case 'dark':
+      return {
+        ...darkColors
+      };
+    default:
+      return {
+        ...lightColors
+      };
+  }
+}
+
+// TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
+/*
+Colors that need to be replaced by semantic colors.
+ */
+const deprecatedColors = {
+  // Radio Colors
+  radioInteractiveAvailable: colorPalettePrimary.primary,
+  radioInteractiveHover: '#186099',
+  radioInteractivePress: '#0D4F85',
+  radioDisabled: '#A2AEB8',
+  radioDefaultBorder: '#64727D',
+  radioDefaultBackground: '#FFFFFF',
+  radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
+  // Fade of Interactive Available
+  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
+};
+
+function getColors(theme) {
+  return {
+    ...deprecatedColors,
+    ...getSemanticColors(theme)
+  };
+}
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var antdVars = {
+  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
+  'ant-prefix': 'du-bois'
+};
+const DEFAULT_SPACING_UNIT = 8;
+const MODAL_PADDING = 40;
+const spacing = {
+  xs: DEFAULT_SPACING_UNIT / 2,
+  sm: DEFAULT_SPACING_UNIT,
+  md: DEFAULT_SPACING_UNIT * 2,
+  lg: DEFAULT_SPACING_UNIT * 3
+};
+
+// Less variables that are used by AntD
+({
+  defaultPaddingLg: spacing.lg,
+  defaultPaddingMd: spacing.md,
+  defaultPaddingSm: spacing.sm,
+  defaultPaddingXs: spacing.sm,
+  defaultPaddingXss: spacing.xs,
+  paddingLg: spacing.md,
+  // TODO: Check if there is a better alternative with team
+  paddingMd: spacing.sm,
+  paddingSm: spacing.sm,
+  paddingXs: spacing.xs,
+  paddingXss: 0,
+  marginSm: 12,
+  marginLg: spacing.lg,
+  // Button
+  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
+  // Input
+  inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingVertical: spacing.xs + 1,
+  inputPaddingVerticalBase: spacing.xs + 1,
+  inputPaddingVerticalSm: spacing.xs + 1,
+  inputPaddingVerticalLg: spacing.xs + 1,
+  // Modal
+  modalPadding: MODAL_PADDING,
+  modalLessPadding: MODAL_PADDING - 20,
+  modalHeaderPadding: "".concat(MODAL_PADDING, "px ").concat(MODAL_PADDING, "px ").concat(MODAL_PADDING - 20, "px"),
+  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
+  modalHeaderBorderWidth: 0,
+  modalBodyPadding: "0 ".concat(MODAL_PADDING, "px"),
+  modalFooterPaddingVertical: 0,
+  modalFooterPaddingHorizontal: 0,
+  modalFooterBorderWidth: 0,
+  // Switch
+  switchPadding: 0,
+  switchHeight: 16,
+  switchMinWidth: 28,
+  switchPinSize: 14
+});
+var spacing$1 = spacing;
+const heightBase = 40;
+const borderWidth = 1;
+const antdGeneralVariables = {
+  classnamePrefix: antdVars['ant-prefix'],
+  iconfontCssPrefix: 'anticon',
+  borderRadiusBase: 4,
+  borderWidth: borderWidth,
+  heightSm: 32,
+  heightBase: heightBase,
+  iconSize: 24,
+  // TODO (FEINF-1545): Update with icon overhaul to 16px
+  iconFontSize: 13,
+  iconFontSizeNew: 16,
+  buttonHeight: heightBase,
+  // Height available within button (for label and icon). Same for middle and small buttons.
+  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
+};
+var generalVariables = antdGeneralVariables;
+const FONT_SIZE_BASE = 13;
+
+// Less variables that are used by AntD
+const antdTypography = {
+  fontSizeSm: 12,
+  fontSizeBase: FONT_SIZE_BASE,
+  fontSizeMd: FONT_SIZE_BASE,
+  fontSizeLg: 18,
+  fontSizeXl: 22,
+  fontSizeXxl: 32,
+  lineHeightSm: '16px',
+  lineHeightBase: '20px',
+  lineHeightMd: '20px',
+  lineHeightLg: '24px',
+  lineHeightXl: '28px',
+  lineHeightXxl: '40px',
+  typographyBoldFontWeight: 600
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var typography = {
+  ...antdTypography
+};
+
+// TODO(giles): fix this
+// eslint-disable-next-line import/no-named-as-default
+
+const defaultOptions = {
+  enableAnimation: false,
+  zIndexBase: 1000
+};
+
+// Function to get variables for a certain theme.
+// End users should use useDesignSystemTheme instead.
+function getTheme(themeName) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  return {
+    colors: getColors(themeName),
+    spacing: spacing$1,
+    general: generalVariables,
+    typography,
+    borders: borders$1,
+    themeName,
+    options
+  };
+}
+const themeNameToAntdName = {
+  dark: 'dark',
+  default: 'light'
+};
+function getClassNamePrefix(theme) {
+  const antdThemeName = themeNameToAntdName[theme.themeName];
+  return "".concat(theme.general.classnamePrefix, "-").concat(antdThemeName);
+}
+function getPrefixedClassNameFromTheme(theme, className) {
+  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
+}
+function useDesignSystemTheme() {
+  const emotionTheme = useTheme();
+  // Graceful fallback to default theme in case a test or developer forgot context.
+  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme('default');
+  return {
+    theme: theme,
+    classNamePrefix: getClassNamePrefix(theme),
+    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
+  };
+}
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1tciq3q",
+  styles: "position:relative;display:flex;align-items:center;&[data-orientation=\"vertical\"]{flex-direction:column;width:20px;height:100px;}&[data-orientation=\"horizontal\"]{height:20px;width:200px;}"
+} : {
+  name: "18im58f-getRootStyles",
+  styles: "position:relative;display:flex;align-items:center;&[data-orientation=\"vertical\"]{flex-direction:column;width:20px;height:100px;}&[data-orientation=\"horizontal\"]{height:20px;width:200px;};label:getRootStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const getRootStyles = () => {
+  return _ref;
+};
+const Root = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixSlider.Root, {
+    css: getRootStyles(),
+    ...props,
+    ref: ref
+  });
+});
+const getTrackStyles = theme => {
+  return /*#__PURE__*/css({
+    backgroundColor: theme.colors.grey100,
+    position: 'relative',
+    flexGrow: 1,
+    borderRadius: 9999,
+    '&[data-orientation="vertical"]': {
+      width: 3
+    },
+    '&[data-orientation="horizontal"]': {
+      height: 3
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTrackStyles;");
+};
+const Track = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Track, {
+    css: getTrackStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+const getRangeStyles = theme => {
+  return /*#__PURE__*/css({
+    backgroundColor: theme.colors.primary,
+    position: 'absolute',
+    borderRadius: 9999,
+    height: '100%',
+    '&[data-disabled]': {
+      backgroundColor: theme.colors.grey100
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRangeStyles;");
+};
+const Range = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Range, {
+    css: getRangeStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+const getThumbStyles = theme => {
+  return /*#__PURE__*/css({
+    display: 'block',
+    width: 20,
+    height: 20,
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    boxShadow: "0 2px 4px 0 ".concat(theme.colors.grey400),
+    borderRadius: 10,
+    outline: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundHover
+    },
+    '&:focus': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundPress
+    },
+    '&[data-disabled]': {
+      backgroundColor: theme.colors.grey200,
+      boxShadow: 'none'
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getThumbStyles;");
+};
+const Thumb = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Thumb, {
+    css: getThumbStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+
+var Slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Root: Root,
+  Track: Track,
+  Range: Range,
+  Thumb: Thumb
+});
+
+export { Slider, Table, TableCell, TableHeader, TableRow, TableRowSelectCell };
+//# sourceMappingURL=development.js.map