@databricks/design-system 1.9.1 → 1.9.3

package/dist/development.js

@@ -1,12 +1,11 @@
-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 { css } from '@emotion/react';
+import React__default, { createContext, useContext, useState, useEffect, forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { u as useDesignSystemTheme, S as Spinner, c as useDesignSystemContext, i as importantify, j as Checkbox, h as Input, x as SearchIcon, d as CheckIcon, X as XCircleFillIcon, C as ChevronDownIcon, e as Tooltip, B as Button, b as CloseIcon, T as Typography, y as SortAscendingIcon, z as SortDescendingIcon, E as SortUnsortedIcon } from './Spinner-140f57ac.js';
+import * as Popover from '@radix-ui/react-popover';
 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';
@@ -14,57 +13,968 @@ import 'lodash/isNumber';
 import 'lodash/isString';
 import 'lodash/mapValues';
 import '@emotion/unitless';
+import 'chroma-js';
+import '@ant-design/icons';
+
+const filterContextDefaults = {
+  label: '',
+  value: [],
+  isInsideFilter: false,
+  multiSelect: false,
+  setValue: () => {},
+  setIsControlled: () => {}
+};
+const FilterContext = /*#__PURE__*/createContext(filterContextDefaults);
+const FilterContextProvider = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return jsx(FilterContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+const useFilterContext = () => {
+  return useContext(FilterContext);
+};
+
+const Filter = _ref => {
+  let {
+    children,
+    label,
+    value = [],
+    ...props
+  } = _ref;
+  // Used to avoid infinite loop when value is controlled from within the component (FilterOptionControlledList)
+  // We can't remove setValue altogether because uncontrolled component users need to be able to set the value from root for trigger to update
+  const [isControlled, setIsControlled] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(value);
+  useEffect(() => {
+    if ((!Array.isArray(selectedValue) || !Array.isArray(value)) && selectedValue !== value || selectedValue && value && selectedValue.length === value.length && selectedValue.every((v, i) => v === value[i])) {
+      return;
+    }
+    if (!isControlled) {
+      setSelectedValue(value);
+    }
+  }, [value, isControlled, selectedValue]);
+  return jsx(FilterContextProvider, {
+    value: {
+      label,
+      value: selectedValue,
+      setValue: setSelectedValue,
+      setIsControlled,
+      isInsideFilter: true,
+      multiSelect: props.multiSelect
+    },
+    children: jsx(Root$1, {
+      ...props,
+      children: children
+    })
+  });
+};
+const Root$1 = props => {
+  const {
+    children,
+    stayOpenOnSelection,
+    open,
+    multiSelect,
+    ...restProps
+  } = props;
+  const {
+    value
+  } = useFilterContext();
+  const [isOpen, setIsOpen] = useState(!!open);
+  const handleOpenChange = open => {
+    setIsOpen(open);
+  };
+  useEffect(() => {
+    if (!stayOpenOnSelection && (typeof stayOpenOnSelection === 'boolean' || !multiSelect)) {
+      setIsOpen(false);
+    }
+  }, [value, stayOpenOnSelection, multiSelect]);
+  return jsx(Popover.Root, {
+    open: open !== undefined ? open : isOpen,
+    onOpenChange: handleOpenChange,
+    ...restProps,
+    children: children
+  });
+};
+
+const getFilterButtonContainerStyles = theme => {
+  return /*#__PURE__*/css({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    padding: "".concat(theme.spacing.sm, "px ").concat(theme.spacing.lg / 2, "px ").concat(theme.spacing.sm, "px ").concat(theme.spacing.lg / 2, "px"),
+    gap: theme.spacing.sm,
+    alignSelf: 'stretch'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFilterButtonContainerStyles;");
+};
+const FilterButtonContainer = _ref => {
+  let {
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilter
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterButtonContainer` must be used within `Filter`');
+  }
+  return jsx("div", {
+    ...restProps,
+    css: getFilterButtonContainerStyles(theme),
+    children: children
+  });
+};
+
+const FilterLoadingSpinner = props => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Spinner, {
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      alignSelf: 'center',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: theme.general.heightSm,
+      width: theme.general.heightSm,
+      '> span': {
+        fontSize: 20
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:FilterLoadingSpinner;"),
+    ...props
+  });
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { 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)."; }
+const getContentWrapperStyles = (theme, _ref) => {
+  let {
+    maxHeight = '100vh',
+    maxWidth = '100vw',
+    minHeight = 0,
+    minWidth = 0
+  } = _ref;
+  return /*#__PURE__*/css({
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    background: theme.colors.backgroundPrimary,
+    color: theme.colors.textPrimary,
+    overflow: 'auto',
+    // Making sure the content popover overlaps the remove button when opens to the right
+    zIndex: theme.options.zIndexBase + 10,
+    boxSizing: 'border-box',
+    padding: "".concat(theme.spacing.xs, "px 0"),
+    border: "1px solid ".concat(theme.colors.border),
+    boxShadow: theme.general.shadowLow,
+    borderRadius: 4,
+    colorScheme: theme.isDarkMode ? 'dark' : 'light'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getContentWrapperStyles;");
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1ij1o5n",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center"
+} : {
+  name: "qbojwf-FilterContent",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center;label:FilterContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+};
+const FilterContent = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+  let {
+    children,
+    loading,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth = 240,
+    align = 'start',
+    side = 'bottom',
+    sideOffset = 4,
+    ...restProps
+  } = _ref2;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    label,
+    isInsideFilter
+  } = useFilterContext();
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterContent` must be used within `Filter`');
+  }
+  return jsx(Popover.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(Popover.Content, {
+      "aria-label": "".concat(label, " filter options"),
+      "aria-busy": loading,
+      css: getContentWrapperStyles(theme, {
+        maxHeight,
+        maxWidth,
+        minHeight,
+        minWidth
+      }),
+      align: align,
+      side: side,
+      sideOffset: sideOffset,
+      ...restProps,
+      ref: forwardedRef,
+      children: jsx("div", {
+        css: _ref3,
+        children: loading ? jsx(FilterLoadingSpinner, {
+          "aria-label": "Loading",
+          alt: "Loading spinner"
+        }) : children
+      })
+    })
+  });
+});
+
+const getCountBadgeStyles = theme => /*#__PURE__*/css(importantify({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.xs, "px"),
+  background: theme.colors.tagDefault,
+  borderRadius: theme.general.borderRadiusBase,
+  fontWeight: theme.typography.typographyBoldFontWeight,
+  fontSize: theme.typography.fontSizeSm,
+  height: 20
+}), process.env.NODE_ENV === "production" ? "" : ";label:getCountBadgeStyles;");
+const FilterCountBadge = props => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    value
+  } = useFilterContext();
+  return jsx("div", {
+    ...props,
+    css: getCountBadgeStyles(theme),
+    children: Array.isArray(value) ? value.length : value ? 1 : 0
+  });
+};
+
+const FilterOptionListContext = /*#__PURE__*/createContext({});
+const FilterOptionListContextProvider = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return jsx(FilterOptionListContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+const useFilterOptionListContext = () => {
+  return useContext(FilterOptionListContext);
+};
+
+const getFilterOptionItemWrapperStyles = theme => {
+  return /*#__PURE__*/css(importantify({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    alignSelf: 'stretch',
+    padding: '6px 32px 6px 12px',
+    lineHeight: theme.typography.lineHeightBase,
+    height: theme.typography.lineHeightBase,
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&:hover': {
+      background: theme.colors.actionTertiaryBackgroundHover
+    }
+  }), process.env.NODE_ENV === "production" ? "" : ";label:getFilterOptionItemWrapperStyles;");
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { 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 _ref2$3 = process.env.NODE_ENV === "production" ? {
+  name: "je8g23",
+  styles: "pointer-events:none"
+} : {
+  name: "1v7dgvu-FilterOptionListCheckboxItem",
+  styles: "pointer-events:none;label:FilterOptionListCheckboxItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+};
+const FilterOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    checked,
+    indeterminate,
+    onChange,
+    children,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilterOptionList
+  } = useFilterOptionListContext();
+  if (!isInsideFilterOptionList) {
+    throw new Error('`FilterOptionListCheckboxItem` must be used within `FilterOptionList`');
+  }
+  const handleSelect = () => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  return jsx("div", {
+    ref: ref,
+    role: "option"
+    // Using aria-selected instead of aria-checked because the parent listbox
+    ,
+    "aria-selected": indeterminate ? false : checked,
+    css: [getFilterOptionItemWrapperStyles(theme), process.env.NODE_ENV === "production" ? "" : ";label:FilterOptionListCheckboxItem;"],
+    onClick: handleSelect,
+    ...props,
+    children: jsx(Checkbox, {
+      isChecked: indeterminate ? null : checked,
+      css: _ref2$3
+      // Needed because Antd handles keyboard inputs as clicks
+      ,
+      onClick: e => {
+        e.stopPropagation();
+        handleSelect();
+      },
+      children: children !== null && children !== void 0 ? children : value
+    })
+  });
+});
+
+const filterChildren = (children, searchValue) => {
+  var _React$Children$map;
+  return (_React$Children$map = React__default.Children.map(children, child => {
+    if (child !== null && child !== void 0 && child.props.value.toLowerCase().includes(searchValue)) {
+      return child;
+    }
+    return null;
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child);
+};
+const FilterOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  var _filteredChildren, _filteredChildren$pro, _filteredChildren2;
+  let {
+    onChange,
+    children,
+    hasWrapper,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilterOptionList
+  } = useFilterOptionListContext();
+  const [searchValue, setSearchValue] = React__default.useState();
+  if (!isInsideFilterOptionList) {
+    throw new Error('`FilterOptionListSearch` must be used within `FilterOptionList`');
+  }
+  const handleOnChange = event => {
+    setSearchValue(event.target.value.toLowerCase());
+  };
+  let filteredChildren = children;
+  if (searchValue) {
+    filteredChildren = filterChildren(hasWrapper ? children.props.children : children, searchValue);
+    if (hasWrapper) {
+      filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
+    }
+  }
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      css: /*#__PURE__*/css({
+        padding: "".concat(theme.spacing.sm, "px ").concat(theme.spacing.lg / 2, "px ").concat(theme.spacing.sm, "px"),
+        width: '100%',
+        boxSizing: 'border-box'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:FilterOptionListSearch;"),
+      children: jsx(Input, {
+        ref: forwardedRef,
+        prefix: jsx(SearchIcon, {}),
+        placeholder: "Search",
+        onChange: handleOnChange,
+        value: searchValue,
+        ...restProps
+      })
+    }), hasWrapper && (_filteredChildren = filteredChildren) !== null && _filteredChildren !== void 0 && (_filteredChildren$pro = _filteredChildren.props.children) !== null && _filteredChildren$pro !== void 0 && _filteredChildren$pro.length || !hasWrapper && (_filteredChildren2 = filteredChildren) !== null && _filteredChildren2 !== void 0 && _filteredChildren2.length ? filteredChildren : jsx("div", {
+      css: /*#__PURE__*/css({
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        padding: '6px 32px 6px 12px',
+        width: '100%',
+        boxSizing: 'border-box'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:FilterOptionListSearch;"),
+      children: "No results found"
+    })]
+  });
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { 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 _ref2$2 = process.env.NODE_ENV === "production" ? {
+  name: "1cjitc6",
+  styles: "width:16px"
+} : {
+  name: "1lwu3su-FilterOptionListSelectItem",
+  styles: "width:16px;label:FilterOptionListSelectItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+};
+const FilterOptionListSelectItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    checked,
+    onChange,
+    children,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilterOptionList
+  } = useFilterOptionListContext();
+  if (!isInsideFilterOptionList) {
+    throw new Error('`FilterOptionListSelectItem` must be used within `FilterOptionList`');
+  }
+  const handleSelect = () => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  return jsxs("div", {
+    ref: ref,
+    css: [getFilterOptionItemWrapperStyles(theme), {
+      '&:focus': {
+        background: theme.colors.actionTertiaryBackgroundHover,
+        outline: 'none'
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:FilterOptionListSelectItem;"],
+    ...props,
+    onClick: handleSelect,
+    tabIndex: 0,
+    onKeyDown: e => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          const nextSibling = e.currentTarget.nextElementSibling;
+          nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.focus();
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          const previousSibling = e.currentTarget.previousElementSibling;
+          previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.focus();
+          break;
+        case ' ':
+        case 'Enter':
+          e.preventDefault();
+          handleSelect();
+          break;
+      }
+    },
+    role: "option",
+    "aria-selected": checked,
+    children: [checked ? jsx(CheckIcon, {}) : jsx("div", {
+      css: _ref2$2
+    }), jsx("label", {
+      style: {
+        marginLeft: theme.spacing.sm,
+        cursor: 'pointer'
+      },
+      children: children !== null && children !== void 0 ? children : value
+    })]
+  });
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { 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 _ref2$1 = process.env.NODE_ENV === "production" ? {
+  name: "6kz1wu",
+  styles: "display:flex;flex-direction:column;align-items:flex-start"
+} : {
+  name: "160mr8t-FilterOptionControlledList",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;label:FilterOptionControlledList;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+};
+const FilterOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    options,
+    onChange,
+    loading,
+    withProgressiveLoading,
+    withSearch,
+    showSelectAndClearAll,
+    ...restProps
+  } = _ref;
+  const {
+    isInsideFilter,
+    multiSelect,
+    value,
+    setValue,
+    setIsControlled
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterOptionControlledList` must be used within `Filter`');
+  }
+  const isOptionChecked = options.reduce((acc, option) => {
+    acc[option] = value === null || value === void 0 ? void 0 : value.includes(option);
+    return acc;
+  }, {});
+  const handleUpdate = updatedValue => {
+    setIsControlled(true);
+    let newValue = [];
+    if (multiSelect) {
+      if (value.find(item => item === updatedValue)) {
+        newValue = value.filter(item => item !== updatedValue);
+      } else {
+        newValue = [...value, updatedValue];
+      }
+    } else {
+      newValue = [updatedValue];
+    }
+    setValue(newValue);
+    isOptionChecked[updatedValue] = !isOptionChecked[updatedValue];
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  const handleSelectAll = () => {
+    setIsControlled(true);
+    if (value.length === options.length) {
+      setValue([]);
+      options.forEach(option => {
+        isOptionChecked[option] = false;
+      });
+      if (onChange) {
+        onChange([]);
+      }
+    } else {
+      setValue(options);
+      options.forEach(option => {
+        isOptionChecked[option] = true;
+      });
+      if (onChange) {
+        onChange(options);
+      }
+    }
+  };
+  const renderedOptions = jsxs(Fragment, {
+    children: [showSelectAndClearAll && multiSelect && jsx(FilterOptionListCheckboxItem, {
+      value: "all",
+      onChange: handleSelectAll,
+      checked: value.length === options.length,
+      indeterminate: !!value.length && value.length !== options.length,
+      children: value.length === options.length ? 'Clear all' : 'Select all'
+    }), options === null || options === void 0 ? void 0 : options.map((option, key) => multiSelect ? jsx(FilterOptionListCheckboxItem, {
+      value: option,
+      checked: isOptionChecked[option],
+      onChange: handleUpdate,
+      children: option
+    }, key) : jsx(FilterOptionListSelectItem, {
+      value: option,
+      checked: isOptionChecked[option],
+      onChange: handleUpdate,
+      children: option
+    }, key))]
+  });
+  return jsx("div", {
+    ref: forwardedRef,
+    "aria-busy": loading,
+    css: _ref2$1,
+    ...restProps,
+    children: jsx(FilterOptionListContextProvider, {
+      value: {
+        isInsideFilterOptionList: true
+      },
+      children: jsx(Fragment, {
+        children: loading ? withProgressiveLoading ? jsxs(Fragment, {
+          children: [withSearch ? jsx(FilterOptionListSearch, {
+            hasWrapper: true,
+            children: renderedOptions
+          }) : renderedOptions, jsx(FilterLoadingSpinner, {
+            "aria-label": "Loading",
+            alt: "Loading spinner"
+          })]
+        }) : jsx(FilterLoadingSpinner, {
+          "aria-label": "Loading",
+          alt: "Loading spinner"
+        }) : withSearch ? jsx(FilterOptionListSearch, {
+          hasWrapper: true,
+          children: renderedOptions
+        }) : renderedOptions
+      })
+    })
+  });
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { 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 _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1pgv7dg",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%"
+} : {
+  name: "s7a3b7-FilterOptionList",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%;label:FilterOptionList;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+};
+const FilterOptionList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    children,
+    onChange,
+    loading,
+    withProgressiveLoading,
+    ...restProps
+  } = _ref;
+  const {
+    isInsideFilter,
+    value
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterOptionList` must be used within `Filter`');
+  }
+  useEffect(() => {
+    if (onChange) {
+      onChange(value);
+    }
+  }, [value, onChange]);
+  return jsx("div", {
+    ref: forwardedRef,
+    "aria-busy": loading,
+    role: "list",
+    css: _ref2,
+    ...restProps,
+    children: jsx(FilterOptionListContextProvider, {
+      value: {
+        isInsideFilterOptionList: true
+      },
+      children: loading ? withProgressiveLoading ? jsxs(Fragment, {
+        children: [children, jsx(FilterLoadingSpinner, {
+          "aria-label": "Loading",
+          alt: "Loading spinner"
+        })]
+      }) : jsx(FilterLoadingSpinner, {
+        "aria-label": "Loading",
+        alt: "Loading spinner"
+      }) : children
+    })
+  });
+});
+
+const FilterSectionHeader = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilter
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterSectionHeader` must be used within `Filter`');
+  }
+  return jsx("div", {
+    ...props,
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.lg / 2, "px"),
+      alignSelf: 'stretch',
+      fontWeight: 400,
+      color: theme.colors.textSecondary
+    }, process.env.NODE_ENV === "production" ? "" : ";label:FilterSectionHeader;"),
+    children: children
+  });
+};
+
+const FilterSeparator = props => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideFilter
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterSeparator` must be used within `Filter`');
+  }
+  return jsx("div", {
+    ...props,
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      margin: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.lg / 2, "px"),
+      border: "1px solid ".concat(theme.colors.borderDecorative),
+      borderBottom: 0,
+      alignSelf: 'stretch'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:FilterSeparator;")
+  });
+};
+
+const getTriggerWrapperStyles = removable => /*#__PURE__*/css(importantify({
+  display: 'inline-flex',
+  alignItems: 'center',
+  ...(removable && {
+    '& > button:last-of-type': importantify({
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0,
+      marginLeft: -1
+    })
+  })
+}), process.env.NODE_ENV === "production" ? "" : ";label:getTriggerWrapperStyles;");
+const getTriggerStyles = (theme, maxWidth, removable) => {
+  const removeButtonInteractionStyles = {
+    ...(removable && {
+      zIndex: theme.options.zIndexBase + 2,
+      '&& + button': {
+        marginLeft: -1,
+        zIndex: theme.options.zIndexBase + 1
+      }
+    })
+  };
+  return /*#__PURE__*/css(importantify({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    maxWidth: maxWidth,
+    justifyContent: 'center',
+    background: 'transparent',
+    padding: '6px 8px 6px 12px',
+    boxSizing: 'border-box',
+    height: theme.general.heightSm,
+    border: "1px solid ".concat(theme.colors.actionDefaultBorderDefault),
+    borderRadius: 4,
+    color: theme.colors.textPrimary,
+    lineHeight: theme.typography.lineHeightBase,
+    cursor: 'pointer',
+    ...(removable && {
+      borderBottomRightRadius: 0,
+      borderTopRightRadius: 0,
+      borderRightColor: 'transparent'
+    }),
+    '&:hover': {
+      background: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover,
+      ...removeButtonInteractionStyles
+    },
+    '&:focus': {
+      borderColor: theme.colors.actionDefaultBorderFocus,
+      ...removeButtonInteractionStyles
+    }
+  }), process.env.NODE_ENV === "production" ? "" : ";label:getTriggerStyles;");
+};
+const FilterTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    removable = false,
+    onRemove,
+    children,
+    maxWidth = 9999,
+    withCountBadge,
+    showBadgeAfterValueCount = 3,
+    allowClear = true,
+    controlled,
+    onClear,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    label,
+    value,
+    isInsideFilter,
+    multiSelect,
+    setValue
+  } = useFilterContext();
+  if (!isInsideFilter) {
+    throw new Error('`FilterTrigger` must be used within `Filter`');
+  }
+  const handleRemove = () => {
+    if (!onRemove) {
+      console.warn('Filter.Trigger: Attempted remove without providing onRemove handler');
+    } else {
+      onRemove();
+    }
+  };
+  const handleClear = e => {
+    e.stopPropagation();
+    if (controlled) {
+      setValue([]);
+      onClear === null || onClear === void 0 ? void 0 : onClear();
+    } else if (!onClear) {
+      console.warn('Filter.Trigger: Attempted clear without providing onClear handler');
+    } else {
+      onClear();
+    }
+  };
+  const [showTooltip, setShowTooltip] = React__default.useState();
+  const triggerContentRef = React__default.useRef(null);
+  useEffect(() => {
+    if ((value === null || value === void 0 ? void 0 : value.length) > showBadgeAfterValueCount) {
+      setShowTooltip(true);
+    } else if (triggerContentRef.current) {
+      const {
+        clientWidth,
+        scrollWidth
+      } = triggerContentRef.current;
+      setShowTooltip(clientWidth < scrollWidth);
+    }
+  }, [showBadgeAfterValueCount, value]);
+  const concatenatedValues = Array.isArray(value) ? value.join(', ') : value;
+  const displayedValues = jsx("span", {
+    children: concatenatedValues
+  });
+  let ariaLabel = "".concat(label, " filter");
+  if (value !== null && value !== void 0 && value.length) {
+    ariaLabel += multiSelect ? ", multiselectable, ".concat(value.length, " options selected: ").concat(concatenatedValues) : ", selected option: ".concat(concatenatedValues);
+  } else {
+    ariaLabel += multiSelect ? ', multiselectable, 0 options selected' : ', no option selected';
+  }
+  const triggerContent = children !== null && children !== void 0 ? children : jsxs(Popover.Trigger, {
+    "aria-label": ariaLabel,
+    ref: forwardedRef,
+    ...restProps,
+    css: getTriggerStyles(theme, maxWidth, removable),
+    role: "listbox",
+    "aria-multiselectable": multiSelect,
+    children: [jsxs("span", {
+      css: /*#__PURE__*/css({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        height: theme.typography.lineHeightBase
+      }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
+      ref: triggerContentRef,
+      children: [jsx("span", {
+        css: /*#__PURE__*/css({
+          marginRight: theme.spacing.xs,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
+        children: label
+      }), withCountBadge || (value === null || value === void 0 ? void 0 : value.length) > showBadgeAfterValueCount ? jsx(FilterCountBadge, {
+        role: "status",
+        "aria-label": "Filter options selected count"
+      }) : displayedValues]
+    }), allowClear && value !== null && value !== void 0 && value.length ? jsx(XCircleFillIcon, {
+      onClick: handleClear,
+      css: /*#__PURE__*/css({
+        color: theme.colors.textPlaceholder,
+        fontSize: theme.typography.fontSizeSm,
+        marginLeft: theme.spacing.xs,
+        ':hover': {
+          color: theme.colors.actionTertiaryTextHover
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;")
+    }) : null, jsx(ChevronDownIcon, {
+      css: /*#__PURE__*/css({
+        color: theme.colors.textSecondary,
+        marginLeft: 4
+      }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;")
+    })]
+  });
+  return jsxs("div", {
+    css: getTriggerWrapperStyles(removable),
+    children: [showTooltip && value !== null && value !== void 0 && value.length ? jsx(Tooltip, {
+      title: displayedValues,
+      children: triggerContent
+    }) : triggerContent, removable && jsx(Button, {
+      "aria-label": "Remove ".concat(label, " filters"),
+      onClick: handleRemove,
+      dangerouslySetForceIconStyles: true,
+      children: jsx(CloseIcon, {})
+    })]
+  });
+});
 
 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: "v9xe5f",
+    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-separator-color);.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{> *{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;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);}"
   } : {
-    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;",
+    name: "19eijcc-row",
+    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-separator-color);.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{> *{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;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);};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: "11nbh8q",
+    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden"
   } : {
-    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;",
+    name: "pezdmp-cell",
+    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden;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;}"
+  rowMenuContainer: process.env.NODE_ENV === "production" ? {
+    name: "1o9y8zx",
+    styles: "padding-left:var(--table-spacing-xs);padding-right:var(--table-spacing-xs)"
   } : {
-    name: "1cnl65h-cellSmall",
-    styles: "padding:4px 8px;&[role=\"columnheader\"]{padding:4px 8px;};label:cellSmall;",
+    name: "1gopnk4-rowMenuContainer",
+    styles: "padding-left:var(--table-spacing-xs);padding-right:var(--table-spacing-xs);label:rowMenuContainer;",
     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: "753xvu",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}}"
   } : {
-    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;",
+    name: "1shmncy-header",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}};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: "dpqgee",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}"
   } : {
-    name: "1xje8dv-headerButtonTarget",
-    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;label:headerButtonTarget;",
+    name: "s60l4r-headerButtonTarget",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}};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: "mozdib",
+    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md)"
+  } : {
+    name: "101mdic-checkboxCell",
+    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md);label:checkboxCell;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  resizeHandleContainer: /*#__PURE__*/css({
+    position: 'absolute',
+    right: -3,
+    top: 'var(--table-spacing-sm)',
+    bottom: 'var(--table-spacing-sm)',
+    width: 'var(--table-spacing-sm)',
+    display: 'flex',
+    justifyContent: 'center',
+    cursor: 'col-resize',
+    userSelect: 'none',
+    touchAction: 'none',
+    zIndex: 1
+  }, process.env.NODE_ENV === "production" ? "" : ";label:resizeHandleContainer;"),
+  resizeHandle: process.env.NODE_ENV === "production" ? {
+    name: "gpjshw",
+    styles: "width:1px;background:var(--table-separator-color)"
   } : {
-    name: "177274n-checkboxCell",
-    styles: "padding:0 0 0 8px;display:flex;align-items:center;flex:0;label:checkboxCell;",
+    name: "1n6mwr7-resizeHandle",
+    styles: "width:1px;background:var(--table-separator-color);label:resizeHandle;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  paginationContainer: process.env.NODE_ENV === "production" ? {
+    name: "eb4gqw",
+    styles: "display:flex;justify-content:flex-end;margin-top:var(--table-spacing-sm)"
+  } : {
+    name: "e4q60i-paginationContainer",
+    styles: "display:flex;justify-content:flex-end;margin-top:var(--table-spacing-sm);label:paginationContainer;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   }
 };
@@ -75,26 +985,43 @@ const Table = _ref => {
   let {
     children,
     size = 'default',
-    someRowsSelected
+    someRowsSelected,
+    style,
+    pagination,
+    empty
   } = _ref;
   const {
     theme
-  } = useDesignSystemTheme$1();
+  } = useDesignSystemTheme();
   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,
+    children: jsxs("div", {
+      // 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
+        ...style,
+        ['--table-separator-color']: theme.colors.tableSeparatorColor,
+        ['--table-row-hover']: theme.colors.tableRowHover,
+        ['--table-spacing-xs']: "".concat(theme.spacing.xs, "px"),
+        ['--table-spacing-sm']: "".concat(theme.spacing.sm, "px"),
+        ['--table-spacing-md']: "".concat(theme.spacing.md, "px")
       },
-      children: children
+      children: [jsxs("div", {
+        role: "table",
+        children: [children, empty && jsx("div", {
+          css: /*#__PURE__*/css({
+            padding: theme.spacing.lg
+          }, process.env.NODE_ENV === "production" ? "" : ";label:Table;"),
+          children: empty
+        })]
+      }), !empty && pagination && jsx("div", {
+        css: tableStyles.paginationContainer,
+        children: pagination
+      })]
     })
   });
 };
@@ -107,14 +1034,32 @@ const TableRow = _ref2 => {
     isHeader = false,
     verticalAlignment = 'top'
   } = _ref2;
+  const {
+    size
+  } = useContext(TableContext);
+  const {
+    theme
+  } = useDesignSystemTheme();
+
+  // Vertical only be larger if the row is a header AND size is large.
+  const shouldUseLargeVerticalPadding = isHeader && size === 'default';
+  let rowPadding;
+  if (shouldUseLargeVerticalPadding) {
+    rowPadding = theme.spacing.sm;
+  } else if (size === 'default') {
+    rowPadding = 6;
+  } else {
+    rowPadding = theme.spacing.xs;
+  }
   return jsx(TableRowContext.Provider, {
     value: {
       isHeader
     },
     children: jsx("div", {
-      css: tableStyles.row,
+      css: [tableStyles.row, process.env.NODE_ENV === "production" ? "" : ";label:TableRow;"],
       role: "row",
       style: {
+        ['--table-row-vertical-padding']: "".concat(rowPadding, "px"),
         ['--table-row-vertical-alignment']: verticalAlignment === 'top' ? 'flex-start' : 'center'
       },
       children: children
@@ -124,7 +1069,8 @@ const TableRow = _ref2 => {
 const TableCell = _ref3 => {
   let {
     children,
-    ellipsis = false
+    ellipsis = false,
+    style
   } = _ref3;
   const {
     size
@@ -134,8 +1080,9 @@ const TableCell = _ref3 => {
     typographySize = 'sm';
   }
   return jsx("div", {
-    css: [tableStyles.cell, size === 'small' && tableStyles.cellSmall, process.env.NODE_ENV === "production" ? "" : ";label:TableCell;"],
+    css: [tableStyles.cell, process.env.NODE_ENV === "production" ? "" : ";label:TableCell;"],
     role: "cell",
+    style: style,
     children: jsx(Typography.Text, {
       ellipsis: ellipsis,
       size: typographySize,
@@ -150,11 +1097,12 @@ const TableHeader = _ref4 => {
     ellipsis = false,
     sortable,
     sortDirection,
-    onToggleSort
+    onToggleSort,
+    style
   } = _ref4;
   const {
     theme
-  } = useDesignSystemTheme$1();
+  } = useDesignSystemTheme();
   const {
     size
   } = useContext(TableContext);
@@ -185,21 +1133,30 @@ const TableHeader = _ref4 => {
     typographySize = 'sm';
   }
   const textContents = jsx(Typography.Text, {
+    className: "table-header-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;"],
+    css: [tableStyles.cell, tableStyles.header, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
     role: "columnheader",
     "aria-sort": sortable && ariaSort || undefined,
+    onClick: onToggleSort,
+    style: {
+      ...style,
+      ['--table-header-text-color']: theme.colors.actionDefaultTextDefault,
+      ['--table-header-focus-color']: theme.colors.actionDefaultTextHover,
+      ['--table-header-active-color']: theme.colors.actionDefaultTextPress,
+      ['--table-header-sort-icon-color']: theme.colors.textSecondary
+    },
     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();
@@ -207,21 +1164,43 @@ const TableHeader = _ref4 => {
         }
       },
       children: [textContents, jsx("span", {
+        className: "table-header-icon-container",
         style: {
-          color: theme.colors.textSecondary
+          marginLeft: 4
         },
         children: sortIcon
       })]
     }) : textContents
   });
 };
-const TableRowSelectCell = _ref5 => {
+const TableHeaderResizeHandle = _ref5 => {
+  let {
+    style,
+    resizeHandler
+  } = _ref5;
+  const {
+    isHeader
+  } = useContext(TableRowContext);
+  if (!isHeader) {
+    throw new Error('`TableHeaderResizeHandle` must be used within a `TableRow` with `isHeader` set to true.');
+  }
+  return jsx("div", {
+    onMouseDown: resizeHandler,
+    onTouchStart: resizeHandler,
+    css: tableStyles.resizeHandleContainer,
+    style: style,
+    children: jsx("div", {
+      css: tableStyles.resizeHandle
+    })
+  });
+};
+const TableRowSelectCell = _ref6 => {
   let {
     onChange,
     checked,
     indeterminate,
     noCheckbox
-  } = _ref5;
+  } = _ref6;
   const {
     isHeader
   } = useContext(TableRowContext);
@@ -237,12 +1216,6 @@ const TableRowSelectCell = _ref5 => {
   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'
@@ -256,431 +1229,87 @@ const TableRowSelectCell = _ref5 => {
     })
   });
 };
-
-// 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'
+const TableRowMenuContainer = _ref7 => {
+  let {
+    children,
+    style
+  } = _ref7;
+  return jsx("div", {
+    css: tableStyles.rowMenuContainer,
+    style: style,
+    children: children
+  });
 };
-
-// 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
-      };
+const TableSkeletonStyles = {
+  container: process.env.NODE_ENV === "production" ? {
+    name: "uxqssl",
+    styles: "display:flex;flex-direction:column;align-items:flex-start;margin:6px 0;gap:12px"
+  } : {
+    name: "1zl9za-container",
+    styles: "display:flex;flex-direction:column;align-items:flex-start;margin:6px 0;gap:12px;label:container;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  },
+  cell: process.env.NODE_ENV === "production" ? {
+    name: "18wj7jq",
+    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color)"
+  } : {
+    name: "2md9en-cell",
+    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color);label:cell;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   }
-}
-
-// 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
 };
+const TableSkeleton = _ref8 => {
+  let {
+    lines = 1,
+    seed = '',
+    style
+  } = _ref8;
+  const {
+    theme
+  } = useDesignSystemTheme();
 
-// 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
-};
+  // This is a very simple PRNG that is seeded (so that the output is deterministic).
+  // We need this in order to produce a random ragged edge for the table skeleton.
+  function pseudoRandomNumberGeneratorFromSeed(seed) {
+    // This is a simple way to get a consistent number from a string;
+    // `charCodeAt` returns a number between 0 and 65535, and we then just add them all up.
+    const seedValue = seed.split('').map(char => char.charCodeAt(0)).reduce((prev, curr) => prev + curr, 0);
 
-// eslint-disable-next-line import/no-anonymous-default-export
-var typography = {
-  ...antdTypography
-};
+    // This is a simple sine wave function that will always return a number between 0 and 1.
+    // This produces a value akin to `Math.random()`, but has deterministic output.
+    // Of course, sine curves are not a perfectly random distribution between 0 and 1, but
+    // it's close enough for our purposes.
+    return Math.sin(seedValue) / 2 + 0.5;
+  }
 
-// TODO(giles): fix this
-// eslint-disable-next-line import/no-named-as-default
+  // This is a simple Fisher-Yates shuffler using the above PRNG.
+  function shuffleArray(arr, seed) {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(pseudoRandomNumberGeneratorFromSeed(seed + String(i)) * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+  }
 
-const defaultOptions = {
-  enableAnimation: false,
-  zIndexBase: 1000
+  // Finally, we shuffle a list off offsets to apply to the widths of the cells.
+  // This ensures that the cells are not all the same width, but that they are
+  // random to produce a more realistic looking skeleton.
+  const widths = shuffleArray([48, 24, 0], seed);
+  return jsx("div", {
+    css: TableSkeletonStyles.container,
+    style: {
+      ...style,
+      // TODO: Pull this from the themes; it's not currently available.
+      ['--table-skeleton-color']: theme.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(31, 38, 45, 0.1)'
+    },
+    children: [...Array(lines)].map((_, idx) => jsx("div", {
+      css: [TableSkeletonStyles.cell, {
+        width: "calc(100% - ".concat(widths[idx % widths.length], "px)")
+      }, process.env.NODE_ENV === "production" ? "" : ";label:TableSkeleton;"]
+    }, idx))
+  });
 };
 
-// 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",
@@ -785,5 +1414,5 @@ var Slider = /*#__PURE__*/Object.freeze({
   Thumb: Thumb
 });
 
-export { Slider, Table, TableCell, TableHeader, TableRow, TableRowSelectCell };
+export { Filter, FilterButtonContainer, FilterContent, FilterCountBadge, FilterLoadingSpinner, FilterOptionControlledList, FilterOptionList, FilterOptionListCheckboxItem, FilterOptionListSearch, FilterOptionListSelectItem, FilterSectionHeader, FilterSeparator, FilterTrigger, Slider, Table, TableCell, TableHeader, TableHeaderResizeHandle, TableRow, TableRowMenuContainer, TableRowSelectCell, TableSkeleton };
 //# sourceMappingURL=development.js.map