@databricks/design-system 1.11.0 → 1.12.0

package/dist/development.js

@@ -1,1315 +1,9 @@
 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, a as useDesignSystemFlags, 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 'lodash/isNil';
-import 'lodash/endsWith';
-import 'lodash/isBoolean';
-import 'lodash/isNumber';
-import 'lodash/isString';
-import 'lodash/mapValues';
-import '@emotion/unitless';
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { u as useDesignSystemTheme } from './useDesignSystemTheme-6e6f5867.js';
 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: "1ezm0qn",
-    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-separator-color);&:has([role=\"columnheader\"]){background-color:var(--table-header-background-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: "eawneg-row",
-    styles: "display:flex;border-bottom:1px solid;border-color:var(--table-separator-color);&:has([role=\"columnheader\"]){background-color:var(--table-header-background-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: "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: "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
-  },
-  rowMenuContainer: process.env.NODE_ENV === "production" ? {
-    name: "1o9y8zx",
-    styles: "padding-left:var(--table-spacing-xs);padding-right:var(--table-spacing-xs)"
-  } : {
-    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: "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: "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: "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: "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: "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: "55zery",
-    styles: "width:1px;background:var(--table-resize-handle-color)"
-  } : {
-    name: "1ot7jju-resizeHandle",
-    styles: "width:1px;background:var(--table-resize-handle-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
-  }
-};
-const TableContext = /*#__PURE__*/createContext({
-  size: 'default'
-});
-const Table = _ref => {
-  let {
-    children,
-    size = 'default',
-    someRowsSelected,
-    style,
-    pagination,
-    empty
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const flags = useDesignSystemFlags();
-  return jsx(TableContext.Provider, {
-    value: {
-      size,
-      someRowsSelected
-    },
-    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: {
-        ...style,
-        ['--table-header-active-color']: theme.colors.actionDefaultTextPress,
-        // This hex is pulled directly from the old table as a temporary style-matching measure.
-        ['--table-header-background-color']: flags.USE_UPDATED_TABLE_STYLES ? 'transparent' : '#F2F5F7',
-        ['--table-header-focus-color']: theme.colors.actionDefaultTextHover,
-        ['--table-header-sort-icon-color']: theme.colors.textSecondary,
-        ['--table-header-text-color']: theme.colors.actionDefaultTextDefault,
-        ['--table-row-hover']: theme.colors.tableRowHover,
-        ['--table-separator-color']: theme.colors.tableSeparatorColor,
-        ['--table-resize-handle-color']: flags.USE_UPDATED_TABLE_STYLES ? theme.colors.tableSeparatorColor : theme.colors.grey400,
-        ['--table-spacing-md']: "".concat(theme.spacing.md, "px"),
-        ['--table-spacing-sm']: "".concat(theme.spacing.sm, "px"),
-        ['--table-spacing-xs']: "".concat(theme.spacing.xs, "px")
-      },
-      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
-      })]
-    })
-  });
-};
-const TableRowContext = /*#__PURE__*/createContext({
-  isHeader: false
-});
-const TableRow = _ref2 => {
-  let {
-    children,
-    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, 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
-    })
-  });
-};
-const TableCell = _ref3 => {
-  let {
-    children,
-    ellipsis = false,
-    style
-  } = _ref3;
-  const {
-    size
-  } = useContext(TableContext);
-  let typographySize = 'md';
-  if (size === 'small') {
-    typographySize = 'sm';
-  }
-  return jsx("div", {
-    css: [tableStyles.cell, process.env.NODE_ENV === "production" ? "" : ";label:TableCell;"],
-    role: "cell",
-    style: style,
-    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,
-    style
-  } = _ref4;
-  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, {
-    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, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
-    role: "columnheader",
-    "aria-sort": sortable && ariaSort || undefined,
-    onClick: onToggleSort,
-    style: {
-      ...style
-    },
-    children: sortable ? jsxs("div", {
-      css: [tableStyles.headerButtonTarget, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
-      role: "button",
-      tabIndex: 0,
-      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", {
-        className: "table-header-icon-container",
-        style: {
-          marginLeft: 4
-        },
-        children: sortIcon
-      })]
-    }) : textContents
-  });
-};
-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
-  } = _ref6;
-  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: {
-      ['--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)
-    })
-  });
-};
-const TableRowMenuContainer = _ref7 => {
-  let {
-    children,
-    style
-  } = _ref7;
-  return jsx("div", {
-    css: tableStyles.rowMenuContainer,
-    style: style,
-    children: children
-  });
-};
-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
-  }
-};
-const TableSkeleton = _ref8 => {
-  let {
-    lines = 1,
-    seed = '',
-    style
-  } = _ref8;
-  const {
-    theme
-  } = useDesignSystemTheme();
-
-  // 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);
-
-    // 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;
-  }
-
-  // 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;
-  }
-
-  // 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 _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" ? {
@@ -1381,7 +75,7 @@ const getThumbStyles = theme => {
     width: 20,
     height: 20,
     backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-    boxShadow: "0 2px 4px 0 ".concat(theme.colors.grey400),
+    boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,
     borderRadius: 10,
     outline: 'none',
     '&:hover': {
@@ -1415,5 +109,5 @@ var Slider = /*#__PURE__*/Object.freeze({
   Thumb: Thumb
 });
 
-export { Filter, FilterButtonContainer, FilterContent, FilterCountBadge, FilterLoadingSpinner, FilterOptionControlledList, FilterOptionList, FilterOptionListCheckboxItem, FilterOptionListSearch, FilterOptionListSelectItem, FilterSectionHeader, FilterSeparator, FilterTrigger, Slider, Table, TableCell, TableHeader, TableHeaderResizeHandle, TableRow, TableRowMenuContainer, TableRowSelectCell, TableSkeleton };
+export { Slider };
 //# sourceMappingURL=development.js.map