@databricks/design-system 1.9.2 → 1.10.0

package/dist/development.js

@@ -1,12 +1,11 @@
 import { css } from '@emotion/react';
-import { useContext, createContext, forwardRef } from 'react';
-import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
-import { u as useDesignSystemTheme, T as Typography, S as SortAscendingIcon, n as SortDescendingIcon, o as SortUnsortedIcon, C as Checkbox } from './Typography-74e19785.js';
+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-js';
-import '@ant-design/icons';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
@@ -14,65 +13,943 @@ 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 (!isControlled) {
+      setSelectedValue(value);
+    }
+  }, [value, isControlled]);
+  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([]);
+    } 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: "ky51lg",
-    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{[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: "1d4iyc6-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{[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: "f9sm18",
-    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;padding:6px 8px;box-sizing:border-box;&[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: "10m9yho-cell",
-    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;padding:6px 8px;box-sizing:border-box;&[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: "177274n-checkboxCell",
-    styles: "padding:0 0 0 8px;display:flex;align-items:center;flex:0;label:checkboxCell;",
+    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: 8,
-    bottom: 8,
-    width: 8,
+    top: 'var(--table-spacing-sm)',
+    bottom: 'var(--table-spacing-sm)',
+    width: 'var(--table-spacing-sm)',
     display: 'flex',
     justifyContent: 'center',
     cursor: 'col-resize',
@@ -87,6 +964,14 @@ const tableStyles = {
     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
   }
 };
 const TableContext = /*#__PURE__*/createContext({
@@ -97,7 +982,9 @@ const Table = _ref => {
     children,
     size = 'default',
     someRowsSelected,
-    style
+    style,
+    pagination,
+    empty
   } = _ref;
   const {
     theme
@@ -107,18 +994,30 @@ const Table = _ref => {
       size,
       someRowsSelected
     },
-    children: jsx("div", {
-      role: "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: {
         ...style,
         ['--table-separator-color']: theme.colors.tableSeparatorColor,
-        ['--table-row-hover']: theme.colors.tableRowHover
+        ['--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
+      })]
     })
   });
 };
@@ -131,14 +1030,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
@@ -159,7 +1076,7 @@ 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, {
@@ -212,22 +1129,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,
-    style: style,
+    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();
@@ -235,8 +1160,9 @@ const TableHeader = _ref4 => {
         }
       },
       children: [textContents, jsx("span", {
+        className: "table-header-icon-container",
         style: {
-          color: theme.colors.textSecondary
+          marginLeft: 4
         },
         children: sortIcon
       })]
@@ -286,12 +1212,6 @@ const TableRowSelectCell = _ref6 => {
   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'
@@ -305,6 +1225,86 @@ const TableRowSelectCell = _ref6 => {
     })
   });
 };
+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" ? {
@@ -410,5 +1410,5 @@ var Slider = /*#__PURE__*/Object.freeze({
   Thumb: Thumb
 });
 
-export { Slider, Table, TableCell, TableHeader, TableHeaderResizeHandle, 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