@jobber/components 4.92.0 → 5.0.1

package/dist/DataList/index.js

@@ -1,1346 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-754e2961.js');
-var React = require('react');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-94b5c2e5.js');
-var Glimmer = require('../Glimmer-84dee1ed.js');
-var noop = require('lodash/noop');
-var design = require('@jobber/design');
-var framerMotion = require('framer-motion');
-var classnames = require('classnames');
-var Tooltip = require('../Tooltip-b9de6e57.js');
-var Button = require('../Button-0c831b03.js');
-var useInView = require('@jobber/hooks/useInView');
-var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-79098f71.js');
-var useFocusTrap = require('@jobber/hooks/useFocusTrap');
-var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
-var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Icon = require('../Icon-405a216c.js');
-var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-ffc87a2a.js');
-var ReactDOM = require('react-dom');
-var useIsMounted = require('@jobber/hooks/useIsMounted');
-var Checkbox = require('../Checkbox-67a8c60f.js');
-var reactRouterDom = require('react-router-dom');
-var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-2f357a96.js');
-var Chip = require('../Chip-6395df79.js');
-var debounce = require('lodash/debounce');
-var InputText = require('../InputText-375a415c.js');
-var Spinner = require('../Spinner-9d8fc7ff.js');
-var Typography = require('../Typography-8c397b84.js');
-require('../Content-e3f7b6fc.js');
-require('@jobber/hooks/useSafeLayoutEffect');
-require('react-popper');
-require('../useAtlantisConfig-ed0bee66.js');
-require('react-hook-form');
-require('../AnimatedPresence-20a02aaa.js');
-require('../Flex-d490c4db.js');
-require('@jobber/hooks/useAssert');
-require('../Avatar-76a799fa.js');
-require('color');
-require('../FormField-cea3a4f7.js');
-require('@jobber/hooks/useShowClear');
-require('../InputValidation-ba5f81cb.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-
-var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n  display: none;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
-var styles$g = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
-styleInject_es.styleInject(css_248z$g);
-
-var css_248z$f = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$f = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$f);
-
-const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
-function DataListTotalCount({ totalCount, loading, }) {
-    if (totalCount === undefined)
-        return null;
-    let output = null;
-    if (totalCount === null && loading) {
-        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
-    }
-    if (typeof totalCount === "number") {
-        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
-            "(",
-            totalCount.toLocaleString(),
-            " results)"));
-    }
-    return (React__default["default"].createElement("div", { className: styles$f.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
-}
-
-const defaultValues$1 = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-    layoutBreakpoints: [],
-    layouts: {
-        xs: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
-        sm: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
-        md: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
-        lg: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
-        xl: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
-    },
-    registerLayout: noop__default["default"],
-};
-const DataListContext = React.createContext(defaultValues$1);
-function useDataListContext() {
-    return React.useContext(DataListContext);
-}
-
-const mediaQueryStore = {
-    subscribe(onChange, query) {
-        const matchMedia = window.matchMedia(query);
-        matchMedia.addEventListener("change", onChange);
-        return () => {
-            matchMedia.removeEventListener("change", onChange);
-        };
-    },
-    getSnapshot(query) {
-        return () => window.matchMedia(query).matches;
-    },
-};
-function useMediaQuery(query) {
-    /**
-     * matchMedia have had full support for browsers since 2012 but jest, being a
-     * lite version of a DOM, doesn't support it.
-     *
-     * Instead of the consumers mocking matchMedia on every usage of DataList,
-     * we can just return true to mimic the largest screen we support.
-     *
-     * In the event that the consumer wants to test the DataList on different
-     * screen sizes, they can use the `mockViewportWidth` function from
-     * `@jobber/components/useBreakpoints`.
-     */
-    if (typeof window === "undefined" ||
-        typeof window.matchMedia === "undefined") {
-        return true;
-    }
-    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
-    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
-    return matches;
-}
-
-const EMPTY_RESULTS_MESSAGE = "List is looking empty";
-const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
-const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
-/**
- * Breakpoints that we support
- */
-const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
-const BREAKPOINT_SIZES = {
-    xs: 0,
-    sm: 490,
-    md: 768,
-    lg: 1080,
-    xl: 1440,
-};
-const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
-const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
-const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
-const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
-const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
-const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
-const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
-
-function useResponsiveSizing() {
-    // This was originally written to look for "min-width: 0" which would always
-    // return true no matter what.
-    // So, instead of running media query on it, just set it to true.
-    const xs = true;
-    const sm = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.sm}px)`);
-    const md = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.md}px)`);
-    const lg = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.lg}px)`);
-    const xl = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.xl}px)`);
-    return { xs, sm, md, lg, xl };
-}
-
-function useActiveLayout() {
-    const { layoutBreakpoints, layouts } = useDataListContext();
-    const breakpoints = useResponsiveSizing();
-    const reversedLayoutBreakpoints = [...layoutBreakpoints].reverse();
-    const activeBreakpoint = reversedLayoutBreakpoints.find(key => breakpoints[key]) ||
-        layoutBreakpoints[0];
-    const layout = layouts[activeBreakpoint];
-    return { layout, activeBreakpoint };
-}
-
-var css_248z$e = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
-var styles$e = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
-styleInject_es.styleInject(css_248z$e);
-
-const LOADING_STATE_LIMIT_ITEMS = 10;
-const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-function DataListLoadingState() {
-    const { headers } = useDataListContext();
-    const { layout, activeBreakpoint } = useActiveLayout();
-    if (!layout)
-        return null;
-    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
-    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$e.glimmer },
-            React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
-    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
-    return (React__default["default"].createElement("div", { className: styles$e.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$e.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
-}
-
-const defaultValues = {
-    isInLayoutProvider: false,
-    hasInLayoutActions: false,
-    setHasInLayoutActions: noop__default["default"],
-};
-const DataListLayoutContext = React.createContext(defaultValues);
-function useDataListLayoutContext() {
-    return React.useContext(DataListLayoutContext);
-}
-
-var css_248z$d = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .jHcHGQ-HDbk- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n";
-var styles$d = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$d);
-
-const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
-
-var css_248z$c = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.P6uJ-vHfKrM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
-var styles$c = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
-styleInject_es.styleInject(css_248z$c);
-
-function DataListOverflowFade({ children }) {
-    const [leftRef, isLeftVisible] = useInView.useInView();
-    const [rightRef, isRightVisible] = useInView.useInView();
-    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$c.fadeContainer, {
-            [styles$c.overflowLeft]: !isLeftVisible,
-            [styles$c.overflowRight]: !isRightVisible,
-        }) },
-        React__default["default"].createElement("div", { className: styles$c.overflowGrid },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$c.overflowTrigger }),
-            React__default["default"].createElement("div", { className: styles$c.overflowItems }, children),
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$c.overflowTrigger }))));
-}
-
-var css_248z$b = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$b = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$b);
-
-function DataListTags({ items }) {
-    const ref = React.useRef(null);
-    const [visibleIndex, setVisibleIndex] = React.useState([]);
-    const visibleItems = visibleIndex.filter(Boolean).length;
-    const shouldShowTagCount = Boolean(visibleItems);
-    React.useEffect(() => {
-        var _a;
-        if (!window.IntersectionObserver)
-            return;
-        setVisibleIndex([]);
-        const observer = new IntersectionObserver(handleIntersection, {
-            root: ref.current,
-            threshold: buildIntersectionThreshold(items),
-        });
-        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
-        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
-        return () => {
-            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
-        };
-    }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$b.tagWrapper, ref: ref },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$b.tags, {
-                [styles$b.tagsMask]: shouldShowTagCount,
-            }) }, items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
-            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag))))),
-        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$b.tagCount },
-            React__default["default"].createElement(Text.Text, null,
-                "+",
-                visibleItems)))));
-    function handleIntersection(...[entries]) {
-        entries.forEach(entry => {
-            const index = entry.target.getAttribute("data-tag-element");
-            const indexNumber = Number(index);
-            if (!index || isNaN(indexNumber))
-                return;
-            setVisibleIndex(prevState => {
-                const newState = [...prevState];
-                newState[indexNumber] = entry.intersectionRatio !== 1;
-                return newState;
-            });
-        });
-    }
-}
-function buildIntersectionThreshold(items) {
-    const thresholds = [];
-    const totalItems = items.length;
-    for (let i = 1.0; i <= totalItems; i++) {
-        const ratio = i / totalItems;
-        thresholds.push(ratio);
-    }
-    thresholds.push(0);
-    return thresholds;
-}
-
-var css_248z$a = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
-var styles$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$a);
-
-var css_248z$9 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n";
-var styles$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$9);
-
-const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
-function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$9.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
-        React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
-            React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
-    function getActiveClassName(targetOrder) {
-        return order === targetOrder ? styles$9.active : styles$9.inactive;
-    }
-}
-
-var css_248z$8 = ".thBUfVNaigs- {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  max-width: var(--popover--width);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 4);\n  margin-top: var(--space-smaller);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n  display: -ms-flexbox;\n  display: flex;\n  min-width: calc((16px * 3) * 3.5);\n  min-width: calc(calc(16px * 3) * 3.5);\n  min-width: calc(var(--space-largest) * 3.5);\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 500;\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .QaXuqbVjG04-,\n.jobber-retheme .thBUfVNaigs- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$8 = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
-styleInject_es.styleInject(css_248z$8);
-
-function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    React.useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map(option => (React__default["default"].createElement("li", { className: styles$8.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
-        option.label,
-        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
-    function handleKeyDown(event, option) {
-        if (event.key === "Enter") {
-            onSelectChange(option);
-        }
-    }
-    function handleClickOutside(event) {
-        var _a, _b;
-        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
-            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
-        if (!isClickInside) {
-            onClose();
-        }
-    }
-}
-
-/* eslint-disable max-statements */
-function DataListHeaderTile({ headers, headerKey, visible = false, }) {
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const { sorting } = useDataListContext();
-    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
-    const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
-    const dataListHeaderTileRef = React.useRef(null);
-    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
-    const isSortable = Boolean(sortableItem);
-    const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
-    const Tag = isSortable ? "button" : "div";
-    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
-            [styles$a.sortable]: isSortable,
-        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
-        React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
-        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
-        isSortable && (React__default["default"].createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
-    function toggleSorting(newSortingKey, newId, newLabel) {
-        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
-        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
-        if (isSameKey && isDescending) {
-            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
-            return;
-        }
-        const sortingOrder = isSameKey ? "desc" : "asc";
-        setSorting(newSortingKey, newId, newLabel, sortingOrder);
-    }
-    function setSorting(newSortingKey, newId, newLabel, newOrder) {
-        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
-            key: newSortingKey,
-            id: newId,
-            label: newLabel,
-            order: newOrder,
-        });
-    }
-    function handleOnClick() {
-        var _a, _b;
-        if (!isSortable)
-            return;
-        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
-            setIsDropDownOpen(!isDropDownOpen);
-        }
-        else {
-            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
-            toggleSorting(id, headerKey, headers[headerKey]);
-        }
-    }
-    function handleSelectChange(newSortOption) {
-        if (sortableItem) {
-            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
-        }
-        setIsDropDownOpen(true);
-    }
-}
-
-/**
- * Return the child component that matches the `type` provided
- */
-function getCompoundComponent(children, type) {
-    const childrenArray = React.Children.toArray(children);
-    const element = childrenArray.find(child => React.isValidElement(child) && child.type === type);
-    // Comply with the return type without casting it
-    return React.isValidElement(element) ? element : undefined;
-}
-/**
- * Return all instances child component that matches the `type` provided
- */
-function getCompoundComponents(children, type) {
-    const childrenArray = React.Children.toArray(children);
-    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
-    return elements;
-}
-/**
- * Generate the default element the DataList would use on the data provided.
- */
-function generateListItemElement(item) {
-    return Object.keys(item).reduce((acc, key) => {
-        const currentItem = item[key];
-        if (!currentItem) {
-            return acc;
-        }
-        if (key === "tags" && Array.isArray(currentItem)) {
-            acc[key] = React__default["default"].createElement(DataListTags, { items: currentItem });
-        }
-        else if (key === "label" && typeof currentItem === "string") {
-            acc[key] = React__default["default"].createElement(Heading.Heading, { level: 5 }, currentItem);
-        }
-        else if (React.isValidElement(currentItem)) {
-            acc[key] = currentItem;
-        }
-        else if (currentItem instanceof Date) {
-            acc[key] = (React__default["default"].createElement(Text.Text, null,
-                React__default["default"].createElement(FormatDate.FormatDate, { date: currentItem })));
-        }
-        else {
-            acc[key] = React__default["default"].createElement(Text.Text, null, currentItem);
-        }
-        return acc;
-    }, {});
-}
-/**
- * Generate the header elements with the default styling
- */
-function generateHeaderElements(headers) {
-    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key, visible: true }) })), {});
-    return isEmpty__default["default"](headerElements) ? undefined : headerElements;
-}
-function sortBreakpoints(sizeProp) {
-    return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
-}
-function getExposedActions(childrenArray, childCount = 2) {
-    const firstNChildren = childrenArray.slice(0, childCount);
-    return firstNChildren.reduce((result, child, i) => {
-        const hasIcon = Boolean(child.props.icon);
-        if (!hasIcon)
-            return result; // If the child does not have an icon, continue.
-        const isLastChildAdded = result.length === i;
-        // If it's the first child or if the previous child was added, then add this child.
-        if (i === 0 || (i < childCount && isLastChildAdded)) {
-            return [...result, child];
-        }
-        return result;
-    }, []);
-}
-
-const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
-function useDataListLayoutActionsContext() {
-    return React.useContext(DataListLayoutActionsContext);
-}
-
-var css_248z$7 = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.jobber-retheme .aokwZU8jbWU- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: calc(6 - 1);\n  z-index: calc(var(--elevation-menu) - 1);\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n";
-var styles$7 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$7);
-
-const variants$1 = {
-    hidden: { opacity: 0, y: -10 },
-    visible: { opacity: 1, y: 0 },
-};
-function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
-    const [ref, setRef] = React.useState();
-    const mounted = useIsMounted.useIsMounted();
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
-    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    const actionsMenu = (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef, onClick: handleClick },
-        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$7.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
-        React__default["default"].createElement("button", { type: "button", className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))));
-    return mounted.current
-        ? ReactDOM.createPortal(actionsMenu, document.body)
-        : actionsMenu;
-    function handleClick(event) {
-        // Prevent menu from firing the parent's onClick event when it is nested
-        // within a clickable list item
-        event.stopPropagation();
-    }
-    function getPositionCssVars() {
-        const { posX, posY } = getPosition();
-        return {
-            "--actions-menu-x": `${posX}px`,
-            "--actions-menu-y": `${posY}px`,
-        };
-    }
-    function getPosition() {
-        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
-        const { width = 0, height = 0 } = rect || {};
-        const { x, y } = position;
-        const xIsOffScreen = x + width > window.innerWidth;
-        const yIsOffScreen = y + height > window.innerHeight;
-        const xOffSet = x + width - window.innerWidth + design.tokens["space-base"];
-        const yOffSet = y + height - window.innerHeight;
-        const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
-        const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
-        return { posX: newPosX, posY: newPosY };
-    }
-}
-
-function DataListItemActionsOverflow({ actions, }) {
-    const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
-    const [showMenu, setShowMenu] = React.useState(false);
-    if (actions.length === 0)
-        return null;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip.Tooltip, { message: "More actions" },
-            React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
-        React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
-    function handleMoreClick(event) {
-        // Prevent firing the parent's onClick event when it is nested
-        // within a clickable list item
-        event.stopPropagation();
-        // Prevent navigating to the parent's href event when it is nested within a
-        // linked list item
-        event.preventDefault();
-        setShowMenu(true);
-        const rect = event.currentTarget.getBoundingClientRect();
-        const posX = rect.x;
-        const posY = rect.y + rect.height;
-        setMenuPosition({ x: posX, y: posY });
-    }
-    function handleClose() {
-        setShowMenu(false);
-    }
-}
-
-function DataListActions({ children, itemsToExpose = 2, }) {
-    const { activeItem } = useDataListLayoutActionsContext();
-    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
-    const exposedActions = getExposedActions(childrenArray, itemsToExpose);
-    childrenArray.splice(0, exposedActions.length);
-    return (React__default["default"].createElement(DataListOverflowFade, null,
-        exposedActions.map(({ props }) => {
-            if (props.visible && !props.visible(activeItem))
-                return null;
-            if (!props.icon)
-                return null;
-            function getActionLabel() {
-                if (typeof props.label === "string") {
-                    return props.label;
-                }
-                if (activeItem) {
-                    return props.label(activeItem);
-                }
-            }
-            const actionLabel = getActionLabel();
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
-                        var _a, _b;
-                        if (activeItem) {
-                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
-                        }
-                        else {
-                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
-                        }
-                    }, type: "secondary", variation: "subtle" })));
-        }),
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray })));
-}
-
-// This component is meant to capture the props of the DataList.ItemActions
-function DataListItemActions(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-const variants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0 },
-};
-function InternalDataListItemActions({ actions, }) {
-    return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
-            duration: TRANSITION_DURATION_IN_SECONDS,
-            delay: TRANSITION_DELAY_IN_SECONDS,
-        }, className: styles$d.menu, onContextMenu: handleContextMenu },
-        React__default["default"].createElement(DataListActions, null, actions)));
-}
-function handleContextMenu(event) {
-    event.stopPropagation();
-}
-
-function useBatchSelect() {
-    const { selected, onSelect, onSelectAll } = useDataListContext();
-    const isArray = Array.isArray(selected);
-    const selectedIDs = getIDs(selected);
-    const isSelectAll = !isArray;
-    return {
-        canSelect: Boolean(selected && onSelect),
-        canSelectAll: Boolean(onSelect && onSelectAll),
-        hasAtLeastOneSelected: isSelectAll || selectedIDs.length > 0,
-        isSelectAll,
-        isSelectSome: isArray,
-        selectedCount: getSelectedCount(selected),
-        selectedIDs,
-        selected,
-        onSelect,
-        onSelectAll,
-    };
-}
-function getIDs(selected) {
-    if (Array.isArray(selected))
-        return selected;
-    if (selected === undefined)
-        return [];
-    return selected.unselected;
-}
-function getSelectedCount(selected) {
-    if (Array.isArray(selected))
-        return selected.length;
-    if (selected === undefined)
-        return 0;
-    return selected.totalCount - selected.unselected.length;
-}
-
-function DataListItemInternal({ children, item, }) {
-    const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
-    if (!canSelect)
-        return children;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectable, {
-            [styles$g.selected]: hasAtLeastOneSelected,
-        }) },
-        children,
-        React__default["default"].createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
-    function getIsChecked() {
-        const isItemInSelectedIDs = selectedIDs.includes(item.id);
-        // If we're in a "select all" state, the selectedID's becomes a list of
-        // unchecked ID's.
-        if (isSelectAll)
-            return !isItemInSelectedIDs;
-        // Otherwise, we're in a "select some" state, so we can just check if the
-        // item is in the selectedIDs list.
-        return isItemInSelectedIDs;
-    }
-    function handleChange() {
-        if (isSelectAll)
-            return handleSelectAllChange();
-        return handleSelectSomeChange();
-    }
-    function handleSelectAllChange() {
-        if (!selected || Array.isArray(selected))
-            return;
-        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id) }));
-        }
-        else if (selectedIDs) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: [...selectedIDs, item.id] }));
-        }
-    }
-    function handleSelectSomeChange() {
-        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id));
-        }
-        else if (selectedIDs) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedIDs, item.id]);
-        }
-    }
-}
-
-function DataListItemClickableInternal({ onClick, url, to, children, }) {
-    const { activeItem } = useDataListLayoutActionsContext();
-    if (!activeItem)
-        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    if (to) {
-        const computedTo = typeof to === "string" ? to : to(activeItem);
-        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$g.listItemClickable, to: computedTo, onClick: handleClick }, children));
-    }
-    if (url) {
-        const href = typeof url === "string" ? url : url(activeItem);
-        return (React__default["default"].createElement("a", { className: styles$g.listItemClickable, href: href, onClick: handleClick }, children));
-    }
-    if (onClick) {
-        return (
-        // A button can be nested within the list item. To prevent a button inside
-        // button error, we need to manually declare a div to be a button
-        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$g.listItemClickable, onClick: handleClick, onKeyDown: e => {
-                if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleClick();
-                }
-            } }, children));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    function handleClick() {
-        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
-    }
-}
-
-function DataListItemClickable({ children }) {
-    const { itemActionComponent } = useDataListContext();
-    if (itemActionComponent) {
-        const props = itemActionComponent.props;
-        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-}
-
-function useGetItemActions(item) {
-    const { itemActionComponent } = useDataListContext();
-    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
-    const actionsArray = React.Children.toArray(itemActions);
-    const actions = React.useMemo(() => {
-        return actionsArray.filter(action => {
-            if (React.isValidElement(action) && action.props.visible) {
-                return action.props.visible(item);
-            }
-            return true;
-        });
-    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
-    return {
-        actions: actions,
-        hasActions: Boolean(actions.length),
-    };
-}
-
-// eslint-disable-next-line max-statements
-function DataListItem({ item, layout, }) {
-    const { hasInLayoutActions } = useDataListLayoutContext();
-    const [showMenu, setShowMenu] = React.useState(false);
-    const [contextPosition, setContextPosition] = React.useState();
-    const generatedItem = React.useMemo(() => generateListItemElement(item), [item]);
-    const { actions, hasActions } = useGetItemActions(item);
-    const isContextMenuVisible = Boolean(contextPosition);
-    const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
-    return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$g.listItem, {
-                [styles$g.active]: showMenu && isContextMenuVisible,
-            }), key: item.id },
-            React__default["default"].createElement(DataListItemInternal, { item: item },
-                React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
-            React__default["default"].createElement(framerMotion.AnimatePresence, null,
-                showMenu && hasActions && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { actions: actions })),
-                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
-    function handleShowMenu() {
-        setShowMenu(true);
-    }
-    function handleHideMenu() {
-        setShowMenu(false);
-    }
-    function handleContextMenu(event) {
-        if (!hasActions || isContextMenuVisible)
-            return;
-        event.preventDefault();
-        setContextPosition({
-            x: event.clientX,
-            y: event.clientY,
-        });
-    }
-}
-
-function DataListItems({ size = "xs", }) {
-    const { data, layouts } = useDataListContext();
-    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
-    const layout = layouts[size];
-    if (!layout)
-        return null;
-    return (React__default["default"].createElement(DataListLayoutContext.Provider, { value: {
-            isInLayoutProvider: true,
-            hasInLayoutActions,
-            setHasInLayoutActions,
-        } }, data.map((child, i) => (React__default["default"].createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
-}
-
-function DataListLayout({ children, size = "xs", }) {
-    const { registerLayout, loadingState } = useDataListContext();
-    const { activeBreakpoint } = useActiveLayout();
-    React.useEffect(() => {
-        registerLayout(size, children);
-    }, [size, children]);
-    const shouldRenderList = size === activeBreakpoint;
-    if (loadingState !== "initial" && shouldRenderList) {
-        return React__default["default"].createElement(DataListItems, { size: size });
-    }
-    return null;
-}
-
-var css_248z$6 = ".v-GrdlFpBLk- {\n  /* Offset the button's padding so the height of the header bar doesn't change */\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n";
-var styles$6 = {"bulkActions":"v-GrdlFpBLk-"};
-styleInject_es.styleInject(css_248z$6);
-
-// This component is meant to capture the props of the DataList.BulkActions
-function DataListBulkActions(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-function InternalDataListBulkActions() {
-    const { bulkActionsComponent } = useDataListContext();
-    if (!bulkActionsComponent)
-        return null;
-    const { children } = bulkActionsComponent.props;
-    const { sm } = useResponsiveSizing();
-    // Collapse all actions under "More actions" when breakpoint is smaller than sm
-    const itemsToExpose = sm ? 3 : 0;
-    return (React__default["default"].createElement("div", { className: styles$6.bulkActions },
-        React__default["default"].createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
-}
-
-function DataListHeaderCheckbox({ children }) {
-    const { sm } = useResponsiveSizing();
-    const { data, totalCount } = useDataListContext();
-    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
-    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
-    if (!canSelectAll)
-        return children;
-    const deselectText = sm ? "Deselect All" : "Deselect";
-    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
-    return (React__default["default"].createElement("div", { className: styles$g.selectable },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectAllCheckbox, {
-                [styles$g.visible]: canSelectAll,
-            }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
-                React__default["default"].createElement("div", { className: styles$g.srOnly }, selectedLabel))),
-        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$g.batchSelectContainer },
-                React__default["default"].createElement("div", { className: styles$g.headerBatchSelect },
-                    Boolean(selectedCount) && React__default["default"].createElement(Text.Text, null,
-                        selectedCount,
-                        " selected"),
-                    React__default["default"].createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React__default["default"].createElement(InternalDataListBulkActions, null)) })));
-    function isIndeterminate() {
-        if (isSelectAll)
-            return selectedIDs.length > 0;
-        return selectedCount > 0 && !isAllSelected();
-    }
-    function isAllSelected() {
-        if (isSelectAll)
-            return true;
-        // If there's a totalCount, we can use that to accurately determine if the
-        // user have "selected all".
-        if (totalCount) {
-            return totalCount === selectedCount;
-        }
-        // Otherwise, we'll use the total count of data. This is not as reliable, as
-        // it's possible that the would select all loaded data while we're
-        // loading more. It's still hard to get to that state as the load more
-        // triggers before you see the last item.
-        return data.length > 0 && selectedCount >= data.length;
-    }
-    function handleSelectAll() {
-        if (isAllSelected()) {
-            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
-        }
-        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
-    }
-    function getTotalCount() {
-        if (selected && "totalCount" in selected)
-            return selected.totalCount;
-        if (totalCount)
-            return totalCount;
-        return 0;
-    }
-}
-
-function DataListHeader() {
-    const breakpoints = useResponsiveSizing();
-    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
-    const { hasAtLeastOneSelected } = useBatchSelect();
-    const size = getVisibleSize();
-    const { layout } = useActiveLayout();
-    const visible = headerVisibility[size];
-    if ((!visible && !hasAtLeastOneSelected) || !layout)
-        return null;
-    const headerData = generateHeaderElements(headers);
-    if (!headerData)
-        return null;
-    return (React__default["default"].createElement("div", { className: styles$g.headerTitles },
-        React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
-    function getVisibleSize() {
-        const visibilityKeys = Object.keys(headerVisibility);
-        const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();
-        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
-        return visibleHeaderSize || layoutBreakpoints[0];
-    }
-}
-
-function DataListSort() {
-    const { sorting, headers } = useDataListContext();
-    if (!sorting)
-        return null;
-    const { sortable, state, onSort } = sorting;
-    const sortByOptions = getSortByOptions();
-    return (React__default["default"].createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
-            {
-                id: getSelectedSortID(),
-                label: (state === null || state === void 0 ? void 0 : state.order) || "",
-            },
-        ] },
-        React__default["default"].createElement(Combobox.Combobox.Activator, null,
-            React__default["default"].createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default["default"].createElement(Chip.Chip.Suffix, null,
-                React__default["default"].createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
-        sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
-    function getSortByOptions() {
-        const options = sortable.reduce((acc, sort) => {
-            const label = headers[sort.key];
-            if (!label)
-                return acc;
-            const customOptions = sort.options;
-            if (customOptions) {
-                customOptions.forEach(option => {
-                    acc.push({
-                        label: option.label || "",
-                        value: JSON.stringify({
-                            key: sort.key,
-                            order: option.order,
-                            label: option.label,
-                            id: option.id,
-                        }),
-                    });
-                });
-                return acc;
-            }
-            acc.push({
-                label: `${label} (A-Z)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "asc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            acc.push({
-                label: `${label} (Z-A)`,
-                value: JSON.stringify({
-                    key: sort.key,
-                    order: "desc",
-                    label: label,
-                    id: sort.key,
-                }),
-            });
-            return acc;
-        }, []);
-        // Inject a none option as the first option
-        options.unshift({ label: "None", value: "none" });
-        return options;
-    }
-    function getButtonLabel() {
-        const selectedOption = sortByOptions.find(option => option.value === getSelectedSortID());
-        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
-    }
-    function handleKeyChange(value) {
-        if (value && value !== "none") {
-            const { key, order, label, id } = JSON.parse(value);
-            onSort({ key, order: order, label, id });
-            return;
-        }
-        onSort(undefined);
-    }
-    function getSelectedSortID() {
-        const selectedSortID = {
-            key: state === null || state === void 0 ? void 0 : state.key,
-            order: state === null || state === void 0 ? void 0 : state.order,
-            label: state === null || state === void 0 ? void 0 : state.label,
-            id: state === null || state === void 0 ? void 0 : state.id,
-        };
-        return JSON.stringify(selectedSortID);
-    }
-}
-
-function useShowHeader() {
-    const { headerVisibility } = useDataListContext();
-    if (headerVisibility === undefined)
-        return true;
-    const sizes = useResponsiveSizing();
-    const sizeKeys = Object.keys(sizes);
-    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
-        const isHeaderVisible = headerVisibility[breakpoint] || false;
-        const isBreakpointTriggered = sizes[breakpoint];
-        return previous || (isBreakpointTriggered && isHeaderVisible);
-    }, false);
-    return showHeader;
-}
-
-// This component is meant to capture the props of the DataList.Filters
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListFilters(_) {
-    return null;
-}
-/**
- * Renders the DataList.Filters component
- */
-function InternalDataListFilters() {
-    const { children: parentChildren } = useDataListContext();
-    const showHeader = useShowHeader();
-    const showSortButton = !showHeader;
-    const component = getCompoundComponent(parentChildren, DataListFilters);
-    if (!showSortButton && !component)
-        return null;
-    const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return (React__default["default"].createElement(DataListOverflowFade, null,
-        children && children,
-        showSortButton && React__default["default"].createElement(DataListSort, null)));
-}
-
-var css_248z$5 = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
-var styles$5 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z$5);
-
-function DataListStickyHeader({ children }) {
-    const [isStuck, setIsStuck] = React.useState(false);
-    const ref = React.useRef(null);
-    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
-    React.useEffect(() => {
-        if (!window.IntersectionObserver)
-            return;
-        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
-        ref.current && observer.observe(ref.current);
-        return () => {
-            ref.current && observer.unobserve(ref.current);
-        };
-    }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
-}
-
-var css_248z$4 = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc((16px * 3) - (16px / 4));\n  right: calc(calc(16px * 3) - calc(16px / 4));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: calc(16px / 4) 0;\n  padding: var(--space-smaller) 0;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
-var styles$4 = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$4);
-
-const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
-// This component is meant to capture the props of the DataList.Search
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListSearch(_) {
-    return null;
-}
-/**
- * Renders the DataList.Search component.
- */
-function InternalDataListSearch() {
-    const inputRef = React.useRef(null);
-    const [visible, setVisible] = React.useState(false);
-    const { searchComponent, filterComponent, sorting, title } = useDataListContext();
-    const debouncedSearch = React.useCallback(debounce__default["default"]((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
-    if (!searchComponent)
-        return null;
-    const { placeholder, initialValue } = searchComponent.props;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.wrapper, {
-            [styles$4.withNoFilters]: !filterComponent && !sorting,
-        }) },
-        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$4.searchInput, {
-                [styles$4.searchInputVisible]: visible,
-            }) },
-            React__default["default"].createElement(InputText.InputText
-            // If the initial value changes, reset the input.
-            , { 
-                // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
-        React__default["default"].createElement("div", { className: styles$4.searchButton },
-            React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
-    function getPlaceholder() {
-        if (placeholder)
-            return placeholder;
-        if (title)
-            return `Search ${title}...`;
-        return `Search...`;
-    }
-    function toggleSearch() {
-        const visibility = !visible;
-        setVisible(visibility);
-        if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
-        }
-    }
-}
-
-var css_248z$3 = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
-var styles$3 = {"emptyStateWrapper":"zg3w9nQga-M-"};
-styleInject_es.styleInject(css_248z$3);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListEmptyState(_) {
-    return null;
-}
-function InternalDataListEmptyState() {
-    const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
-    const { message, action } = getMessages();
-    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
-        React__default["default"].createElement(Text.Text, { align: "center" }, message),
-        renderButton(action)));
-    function getMessages() {
-        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
-        if (filtered) {
-            return {
-                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || EMPTY_FILTER_RESULTS_MESSAGE,
-                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
-            };
-        }
-        return {
-            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || EMPTY_RESULTS_MESSAGE,
-            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
-        };
-    }
-}
-function renderButton(action) {
-    if (action) {
-        if (action.type === Button.Button) {
-            return React.cloneElement(action, {
-                variation: action.props.variation || "subtle",
-            });
-        }
-        throw new Error(EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
-    }
-    return;
-}
-function getEmptyStates(components) {
-    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
-    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
-    return { defaultEmptyState, filteredEmptyState };
-}
-
-var css_248z$2 = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-var styles$2 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
-styleInject_es.styleInject(css_248z$2);
-
-function DataListLoadMoreTrigger() {
-    const { onLoadMore } = useDataListContext();
-    const [inViewRef, isInView] = useInView.useInView();
-    React.useEffect(() => {
-        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
-    }, [isInView]);
-    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$2.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
-}
-
-const MAX_DATA_COUNT = 50;
-function DataListLoadMore({ onBackToTop }) {
-    const { loadingState, data } = useDataListContext();
-    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
-        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$2.loadingMore },
-            React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
-        showBackToTop && (React__default["default"].createElement("div", { className: styles$2.backToTop },
-            React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
-}
-
-var css_248z$1 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n  outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
-var styles$1 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$1);
-
-function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
-    const { activeItem } = useDataListLayoutActionsContext();
-    // Don't render if the item is not visible
-    if (activeItem && !visible(activeItem)) {
-        return null;
-    }
-    const color = destructive ? "critical" : "heading";
-    function getActionLabel() {
-        if (typeof label === "string") {
-            return label;
-        }
-        if (activeItem) {
-            return label(activeItem);
-        }
-    }
-    return (React__default["default"].createElement("button", { type: "button", className: styles$1.action, onClick: handleClick },
-        React__default["default"].createElement(Typography.Typography, { textColor: color },
-            React__default["default"].createElement("span", { className: styles$1.label }, getActionLabel())),
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color })));
-    function handleClick() {
-        if (activeItem) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }
-}
-
-var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
-var styles = {"hidden":"_0m75bgCVBhk-"};
-styleInject_es.styleInject(css_248z);
-
-function DataListLayoutActions() {
-    const { itemActionComponent, loadingState } = useDataListContext();
-    const { setHasInLayoutActions } = useDataListLayoutContext();
-    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
-    const actions = React.Children.toArray(actionsChildren);
-    const hasActions = actions.length > 0;
-    React.useEffect(() => {
-        setHasInLayoutActions(hasActions);
-        return () => {
-            setHasInLayoutActions(false);
-        };
-    }, []);
-    if (loadingState === "initial") {
-        return React__default["default"].createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
-    }
-    if (!hasActions)
-        return null;
-    return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions })));
-}
-function DataListLayoutActionsWrapper({ children }) {
-    const { isInLayoutProvider } = useDataListLayoutContext();
-    if (isInLayoutProvider)
-        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    return React__default["default"].createElement("div", { className: styles.hidden }, children);
-}
-
-// This component is meant to capture the props of the DataList.Filters
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DataListStatusBar(_) {
-    return null;
-}
-/**
- * Renders the DataList.StatusBar component
- */
-function InternalDataListStatusBar() {
-    const { children: parentChildren } = useDataListContext();
-    const component = getCompoundComponent(parentChildren, DataListStatusBar);
-    if (!component)
-        return null;
-    const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-}
-
-function DataList(_a) {
-    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
-    const [layouts, setLayouts] = React.useState({});
-    const layoutBreakpoints = React.useMemo(() => sortBreakpoints(Object.keys(layouts)), [layouts]);
-    const searchComponent = getCompoundComponent(props.children, DataListSearch);
-    const filterComponent = getCompoundComponent(props.children, DataListFilters);
-    const layoutComponents = getCompoundComponents(props.children, DataListLayout);
-    const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
-    const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
-    const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
-    const headerCount = Object.keys(props.headers).length;
-    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
-    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
-            filterComponent,
-            layoutComponents,
-            emptyStateComponents,
-            itemActionComponent,
-            bulkActionsComponent,
-            layoutBreakpoints,
-            layouts,
-            registerLayout }, props), { selected, 
-            // T !== DataListObject
-            sorting: sorting }) },
-        React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
-    function registerLayout(size, children) {
-        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
-    }
-}
-function InternalDataList({ shouldRenderStickyHeader, }) {
-    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
-    const backToTopRef = React.useRef(null);
-    const initialLoading = loadingState === "initial";
-    const showEmptyState = !initialLoading && data.length === 0;
-    const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$g.wrapper },
-        React__default["default"].createElement("div", { className: styles$g.titleContainer },
-            title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
-            React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
-        React__default["default"].createElement("div", { ref: backToTopRef }),
-        shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
-            React__default["default"].createElement("div", { className: styles$g.headerFilters },
-                React__default["default"].createElement(InternalDataListFilters, null),
-                React__default["default"].createElement(InternalDataListSearch, null)),
-            React__default["default"].createElement(InternalDataListStatusBar, null),
-            React__default["default"].createElement(DataListHeader, null))),
-        initialLoading && React__default["default"].createElement(DataListLoadingState, null),
-        showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
-        layoutComponents,
-        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$g.filtering },
-            React__default["default"].createElement("div", { className: styles$g.filteringSpinner },
-                React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
-        shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
-    function handleBackToTop() {
-        var _a;
-        // For testing purposes since jest doesn't know scrollIntoView.
-        // This prevents consumer's tests from needing to mock scrollIntoView.
-        if (!window.HTMLElement.prototype.scrollIntoView)
-            return;
-        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-    }
-}
-/**
- * Sets the layout that the DataList item and header will use.
- */
-DataList.Layout = DataListLayout;
-/**
- * By using this component, we can render the actions anywhere in the layout
- * instead of being added automatically on hover.
- */
-DataList.LayoutActions = DataListLayoutActions;
-/**
- * When the DataList is either empty and/or filtered, this component will be
- * rendered.
- */
-DataList.EmptyState = DataListEmptyState;
-/**
- * Adds the filter components of your choosing to the DataList.
- */
-DataList.Filters = DataListFilters;
-/**
- * Enables the search functionality of the DataList.
- *
- * Since the debounce is implemented within the component, it can only be an
- * uncontrolled component. Thus the lack of a `value` prop.
- */
-DataList.Search = DataListSearch;
-/**
- * Defines the group actions you could do on a single DataList item.
- */
-DataList.ItemActions = DataListItemActions;
-/**
- * Defines the action in a DataList. This should be used inside the
- * DataListItemActions component.
- */
-DataList.ItemAction = DataListAction;
-/**
- * Defines the group actions you could do on multiple DataList items.
- */
-DataList.BatchActions = DataListBulkActions;
-/**
- * Defines the batch action in a DataList. This should be used inside the
- * DataListBatchActions component.
- */
-DataList.BatchAction = function DataListBatchAction(props) {
-    return React__default["default"].createElement(DataListAction, Object.assign({}, props));
-};
-/**
- * Defines a status bar that is rendered between the filters and the header.
- */
-DataList.StatusBar = DataListStatusBar;
-
-exports.DataList = DataList;