@jobber/components 4.59.0 → 4.59.1-st-spike-w.0

package/dist/DataList/index.js

@@ -1,65 +1,53 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var React = require('react');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-54334431.js');
-var Glimmer = require('../Glimmer-cfa92a88.js');
-var noop = require('lodash/noop');
-var design = require('@jobber/design');
-var framerMotion = require('framer-motion');
-var classnames = require('classnames');
-var Tooltip = require('../Tooltip-6b12f1c2.js');
-var Button = require('../Button-db6114a6.js');
-var useInView = require('@jobber/hooks/useInView');
-var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-a24706c4.js');
-var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-4cde9989.js');
-var useFocusTrap = require('@jobber/hooks/useFocusTrap');
-var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
-var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-bc4bc968.js');
-var reactRouterDom = require('react-router-dom');
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Popover = require('../Popover-7c966790.js');
-var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-4f12eec8.js');
-require('@jobber/hooks/useAssert');
-require('../Avatar-1aa30ee1.js');
-require('color');
-var Typography = require('../Typography-83915c54.js');
-require('react-popper');
-var debounce = require('lodash/debounce');
-var InputText = require('../InputText-ab237501.js');
-var Spinner = require('../Spinner-9d8fc7ff.js');
-var Icon = require('../Icon-405a216c.js');
-require('uuid');
-require('react-hook-form');
-require('../ButtonDismiss-1ccb84ec.js');
-require('lodash/sortBy');
-require('@jobber/hooks/useLiveAnnounce');
-require('../FormField-fa9254dc.js');
-require('../InputValidation-377d6c62.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);
+import { _ as __rest } from '../tslib.es6-5849cd88.js';
+import React, { createContext, useContext, useState, useEffect, useRef, Children, isValidElement, useMemo, useCallback, cloneElement } from 'react';
+import { s as styleInject } from '../style-inject.es-a0e1a0ba.js';
+import { T as Text } from '../Text-703e2c21.js';
+import { G as Glimmer } from '../Glimmer-d3be9219.js';
+import noop from 'lodash/noop';
+import { tokens } from '@jobber/design';
+import { AnimatePresence, motion } from 'framer-motion';
+import classnames from 'classnames';
+import { T as Tooltip } from '../Tooltip-c80b9fb7.js';
+import { B as Button } from '../Button-319d8fa0.js';
+import { useInView } from '@jobber/hooks/useInView';
+import isEmpty from 'lodash/isEmpty';
+import { I as InlineLabel } from '../InlineLabel-4df86867.js';
+import { F as FormatDate } from '../FormatDate-720b39cf.js';
+import { H as Heading } from '../Heading-04994667.js';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { createPortal } from 'react-dom';
+import { C as Checkbox } from '../Checkbox-e4733fb4.js';
+import { Link } from 'react-router-dom';
+import { A as AnimatedSwitcher } from '../AnimatedSwitcher-6ffd5003.js';
+import { P as Popover } from '../Popover-a93db92d.js';
+import { C as Content } from '../Content-3354c281.js';
+import { C as Chips, b as Chip } from '../Chip-12a64c38.js';
+import '@jobber/hooks/useAssert';
+import '../Avatar-b2e862de.js';
+import 'color';
+import { T as Typography } from '../Typography-09952a2f.js';
+import 'react-popper';
+import debounce from 'lodash/debounce';
+import { I as InputText } from '../InputText-6d262128.js';
+import { S as Spinner } from '../Spinner-5d8359b8.js';
+import { I as Icon } from '../Icon-22723fe6.js';
+import 'uuid';
+import 'react-hook-form';
+import '../ButtonDismiss-85986110.js';
+import 'lodash/sortBy';
+import '@jobber/hooks/useLiveAnnounce';
+import '../FormField-99918ed4.js';
+import '../InputValidation-b6adff05.js';
 
 var css_248z$f = ".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) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\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(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (max-width: 489.98px) {\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: calc(16px / 4);\n  gap: var(--space-smaller);\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(225, 225, 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--background);\n  background-color: rgb(244, 244, 244);\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$f = {"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$f);
+styleInject(css_248z$f);
 
 var css_248z$e = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
 var styles$e = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$e);
+styleInject(css_248z$e);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -67,15 +55,15 @@ function DataListTotalCount({ totalCount, loading, }) {
         return null;
     let output = null;
     if (totalCount === null && loading) {
-        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+        output = React.createElement(Glimmer, { size: "auto", shape: "rectangle" });
     }
     if (typeof totalCount === "number") {
-        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+        output = (React.createElement(Text, { variation: "subdued" },
             "(",
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$e.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return (React.createElement("div", { className: styles$e.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
 const defaultValues$1 = {
@@ -85,19 +73,19 @@ const defaultValues$1 = {
     children: [],
     selected: [],
     layoutBreakpoints: [],
-    registerLayoutBreakpoints: noop__default["default"],
+    registerLayoutBreakpoints: noop,
     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),
+        xs: children => React.createElement(React.Fragment, null, children),
+        sm: children => React.createElement(React.Fragment, null, children),
+        md: children => React.createElement(React.Fragment, null, children),
+        lg: children => React.createElement(React.Fragment, null, children),
+        xl: children => React.createElement(React.Fragment, null, children),
     },
-    registerLayout: noop__default["default"],
+    registerLayout: noop,
 };
-const DataListContext = React.createContext(defaultValues$1);
+const DataListContext = createContext(defaultValues$1);
 function useDataListContext() {
-    return React.useContext(DataListContext);
+    return useContext(DataListContext);
 }
 
 function useMediaQuery(CSSMediaQuery) {
@@ -114,8 +102,8 @@ function useMediaQuery(CSSMediaQuery) {
      */
     if (window.matchMedia === undefined)
         return true;
-    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
-    React.useEffect(() => {
+    const [matches, setMatches] = useState(window.matchMedia(CSSMediaQuery).matches);
+    useEffect(() => {
         const media = window.matchMedia(CSSMediaQuery);
         if (media.matches !== matches) {
             setMatches(media.matches);
@@ -141,12 +129,12 @@ const BREAKPOINT_SIZES = {
     lg: 1080,
     xl: 1440,
 };
-const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
+const SEARCH_DEBOUNCE_DELAY = 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 TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
-const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
+const TRANSITION_DURATION_IN_SECONDS = tokens["timing-base"] / 1000;
+const TRANSITION_DELAY_IN_SECONDS = tokens["timing-quick"] / 1000;
 
 function useResponsiveSizing() {
     const xs = useMediaQuery(`(width > ${BREAKPOINT_SIZES.xs}px)`);
@@ -169,7 +157,7 @@ function useActiveLayout() {
 
 var css_248z$d = "._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$d = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
-styleInject_es.styleInject(css_248z$d);
+styleInject(css_248z$d);
 
 const LOADING_STATE_LIMIT_ITEMS = 10;
 const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
@@ -179,54 +167,54 @@ function DataListLoadingState() {
     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$d.glimmer },
-            React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles$d.glimmer },
+            React.createElement(Glimmer, { size: glimmerSize }))) })), {});
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
-    return (React__default["default"].createElement("div", { className: styles$d.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$d.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+    return (React.createElement("div", { className: styles$d.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles$d.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
 }
 
 const defaultValues = {
     isInLayoutProvider: false,
     hasInLayoutActions: false,
-    setHasInLayoutActions: noop__default["default"],
+    setHasInLayoutActions: noop,
 };
-const DataListLayoutContext = React.createContext(defaultValues);
+const DataListLayoutContext = createContext(defaultValues);
 function useDataListLayoutContext() {
-    return React.useContext(DataListLayoutContext);
+    return useContext(DataListLayoutContext);
 }
 
 var css_248z$c = ".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(225, 225, 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";
 var styles$c = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$c);
+styleInject(css_248z$c);
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 
 var css_248z$b = ".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.MnN8qbS4hw4- {\n  display: grid;\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\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.MnN8qbS4hw4- > :not(:nth-last-child(2)):not(.b-5P7Z8eGO8-) {\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\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$b = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
-styleInject_es.styleInject(css_248z$b);
+styleInject(css_248z$b);
 
 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$b.fadeContainer, {
+    const [leftRef, isLeftVisible] = useInView();
+    const [rightRef, isRightVisible] = useInView();
+    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles$b.fadeContainer, {
             [styles$b.overflowLeft]: !isLeftVisible,
             [styles$b.overflowRight]: !isRightVisible,
         }) },
-        React__default["default"].createElement("div", { className: styles$b.overflowGrid },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
+        React.createElement("div", { className: styles$b.overflowGrid },
+            React.createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
             children,
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
+            React.createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
 }
 
 var css_248z$a = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  white-space: nowrap;\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
 var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$a);
+styleInject(css_248z$a);
 
 function DataListTags({ items }) {
-    const ref = React.useRef(null);
-    const [visibleIndex, setVisibleIndex] = React.useState([]);
+    const ref = useRef(null);
+    const [visibleIndex, setVisibleIndex] = useState([]);
     const visibleItems = visibleIndex.filter(Boolean).length;
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         if (!window.IntersectionObserver)
             return;
@@ -240,11 +228,11 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
-        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)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
-            React__default["default"].createElement(Text.Text, null,
+    return (React.createElement("div", { className: styles$a.tags, ref: ref },
+        items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
+            React.createElement(InlineLabel, null, tag)))),
+        Boolean(visibleItems) && (React.createElement("div", { className: styles$a.tagCount },
+            React.createElement(Text, null,
                 "+",
                 visibleItems)))));
     function handleIntersection(...[entries]) {
@@ -274,18 +262,18 @@ function buildIntersectionThreshold(items) {
 
 var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
 var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$9);
+styleInject(css_248z$9);
 
 var css_248z$8 = ".AN5egORYy-0- {\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\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-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
 var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$8);
+styleInject(css_248z$8);
 
 const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$8.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" }))));
+    return (React.createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.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.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$8.active : styles$8.inactive;
     }
@@ -296,11 +284,11 @@ function DataListHeaderTile({ headers, headerKey, }) {
     const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
     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$9.headerLabel, {
+    return (React.createElement(Tag, { className: classnames(styles$9.headerLabel, {
             [styles$9.sortable]: isSortable,
         }), onClick: handleOnClick },
-        React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
-        (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
+        React.createElement(Text, { maxLines: "single" }, headers[headerKey]),
+        (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React.createElement(DataListSortingArrows, { order: sortingState.order }))));
     function toggleSorting(sortingKey) {
         if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc") {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
@@ -322,17 +310,17 @@ function DataListHeaderTile({ headers, headerKey, }) {
  * 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);
+    const childrenArray = Children.toArray(children);
+    const element = childrenArray.find(child => isValidElement(child) && child.type === type);
     // Comply with the return type without casting it
-    return React.isValidElement(element) ? element : undefined;
+    return 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);
+    const childrenArray = Children.toArray(children);
+    const elements = childrenArray.filter((child) => isValidElement(child) && child.type === type);
     return elements;
 }
 /**
@@ -345,20 +333,20 @@ function generateListItemElement(item) {
             return acc;
         }
         if (key === "tags" && Array.isArray(currentItem)) {
-            acc[key] = React__default["default"].createElement(DataListTags, { items: currentItem });
+            acc[key] = React.createElement(DataListTags, { items: currentItem });
         }
         else if (key === "label" && typeof currentItem === "string") {
-            acc[key] = React__default["default"].createElement(Heading.Heading, { level: 5 }, currentItem);
+            acc[key] = React.createElement(Heading, { level: 5 }, currentItem);
         }
-        else if (React.isValidElement(currentItem)) {
+        else if (isValidElement(currentItem)) {
             acc[key] = currentItem;
         }
         else if (currentItem instanceof Date) {
-            acc[key] = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
-                React__default["default"].createElement(FormatDate.FormatDate, { date: currentItem })));
+            acc[key] = (React.createElement(Text, { variation: "subdued" },
+                React.createElement(FormatDate, { date: currentItem })));
         }
         else {
-            acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
+            acc[key] = React.createElement(Text, { variation: "subdued" }, currentItem);
         }
         return acc;
     }, {});
@@ -367,8 +355,8 @@ function generateListItemElement(item) {
  * 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 }) })), {});
-    return isEmpty__default["default"](headerElements) ? undefined : headerElements;
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React.createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
+    return isEmpty(headerElements) ? undefined : headerElements;
 }
 function sortBreakpoints(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
@@ -388,27 +376,27 @@ function getExposedActions(childrenArray, childCount = 2) {
     }, []);
 }
 
-const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+const DataListLayoutActionsContext = createContext({ activeItem: undefined });
 function useDataListLayoutActionsContext() {
-    return React.useContext(DataListLayoutActionsContext);
+    return 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(225, 225, 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.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);
+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();
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
-    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return ReactDOM.createPortal(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", { className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+    const [ref, setRef] = useState();
+    useRefocusOnActivator(visible);
+    const focusTrapRef = useFocusTrap(visible);
+    useOnKeyDown(onRequestClose, "Escape");
+    return createPortal(React.createElement(AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
+        React.createElement(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.createElement("button", { className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
     function handleClick(event) {
         // Prevent menu from firing the parent's onClick event when it is nested
         // within a clickable list item
@@ -427,7 +415,7 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
         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 xOffSet = x + width - window.innerWidth + 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);
@@ -436,14 +424,14 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
 }
 
 function DataListItemActionsOverflow({ actions, }) {
-    const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
-    const [showMenu, setShowMenu] = React.useState(false);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+    const [showMenu, setShowMenu] = 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)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { message: "More actions" },
+            React.createElement(Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
+        React.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
@@ -461,15 +449,15 @@ function DataListItemActionsOverflow({ actions, }) {
 
 function DataListActions({ children, itemsToExpose = 2, }) {
     const { activeItem } = useDataListLayoutActionsContext();
-    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const childrenArray = Children.toArray(children).filter(isValidElement);
     const exposedActions = getExposedActions(childrenArray, itemsToExpose);
     childrenArray.splice(0, exposedActions.length);
-    return (React__default["default"].createElement(DataListOverflowFade, null,
+    return (React.createElement(DataListOverflowFade, null,
         exposedActions.map(({ props }) => {
             if (!props.icon)
                 return null;
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => {
+            return (React.createElement(Tooltip, { key: props.label, message: props.label },
+                React.createElement(Button, { icon: props.icon, ariaLabel: props.label, onClick: () => {
                         var _a, _b;
                         if (activeItem) {
                             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
@@ -479,7 +467,7 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                         }
                     }, type: "secondary", variation: "subtle" })));
         }),
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray })));
+        React.createElement(DataListItemActionsOverflow, { actions: childrenArray })));
 }
 
 // This component is meant to capture the props of the DataList.ItemActions
@@ -499,11 +487,11 @@ function InternalDataListItemActions() {
     const { children } = itemActionComponent.props;
     if (!children)
         return null;
-    return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+    return (React.createElement(motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
         }, className: styles$c.menu, onContextMenu: handleContextMenu },
-        React__default["default"].createElement(DataListActions, null, children)));
+        React.createElement(DataListActions, null, children)));
 }
 function handleContextMenu(event) {
     event.stopPropagation();
@@ -512,11 +500,11 @@ function handleContextMenu(event) {
 function DataListItemInternal({ children, item, }) {
     const { selected, onSelect } = useDataListContext();
     if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
+        return (React.createElement("div", { className: classnames(styles$f.selectable, {
                 [styles$f.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
             }) },
             children,
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
+            React.createElement(Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
     }
     return children;
     function handleChange() {
@@ -532,27 +520,27 @@ function DataListItemInternal({ children, item, }) {
 function DataListItemClickableInternal({ onClick, url, to, children, }) {
     const { activeItem } = useDataListLayoutActionsContext();
     if (!activeItem)
-        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+        return React.createElement(React.Fragment, null, children);
     if (to) {
         const computedTo = typeof to === "string" ? to : to(activeItem);
-        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$f.listItemClickable, to: computedTo, onClick: handleClick }, children));
+        return (React.createElement(Link, { className: styles$f.listItemClickable, to: computedTo, onClick: handleClick }, children));
     }
     if (url) {
         const href = typeof url === "string" ? url : url(activeItem);
-        return (React__default["default"].createElement("a", { className: styles$f.listItemClickable, href: href, onClick: handleClick }, children));
+        return (React.createElement("a", { className: styles$f.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$f.listItemClickable, onClick: handleClick, onKeyDown: e => {
+        React.createElement("div", { role: "button", tabIndex: 0, className: styles$f.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);
+    return React.createElement(React.Fragment, null, children);
     function handleClick() {
         activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
     }
@@ -562,29 +550,29 @@ function DataListItemClickable({ children }) {
     const { itemActionComponent } = useDataListContext();
     if (itemActionComponent) {
         const props = itemActionComponent.props;
-        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+        return (React.createElement(DataListItemClickableInternal, Object.assign({}, props), children));
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 }
 
 function DataListItem({ item, layout, }) {
     const { itemActionComponent } = useDataListContext();
     const { hasInLayoutActions } = useDataListLayoutContext();
-    const [showMenu, setShowMenu] = React.useState(false);
-    const [contextPosition, setContextPosition] = React.useState();
-    const generatedItem = React.useMemo(() => generateListItemElement(item), [item]);
+    const [showMenu, setShowMenu] = useState(false);
+    const [contextPosition, setContextPosition] = useState();
+    const generatedItem = useMemo(() => generateListItemElement(item), [item]);
     const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
-    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$f.listItem, {
+    return (React.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
+        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles$f.listItem, {
                 [styles$f.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 && !hasInLayoutActions && React__default["default"].createElement(InternalDataListItemActions, null),
-                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions)))));
+            React.createElement(DataListItemInternal, { item: item },
+                React.createElement(DataListItemClickable, null, layout(generatedItem))),
+            React.createElement(AnimatePresence, null,
+                showMenu && !hasInLayoutActions && React.createElement(InternalDataListItemActions, null),
+                React.createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions)))));
     function handleShowMenu() {
         setShowMenu(true);
     }
@@ -604,38 +592,38 @@ function DataListItem({ item, layout, }) {
 
 function DataListItems({ size = "xs", }) {
     const { data, layouts } = useDataListContext();
-    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    const [hasInLayoutActions, setHasInLayoutActions] = useState(false);
     const layout = layouts[size];
     if (!layout)
         return null;
-    return (React__default["default"].createElement(DataListLayoutContext.Provider, { value: {
+    return (React.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 })))));
+        } }, data.map((child, i) => (React.createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
 }
 
 function DataListLayout({ children, size = "xs", }) {
     const { layoutBreakpoints, registerLayout, registerLayoutBreakpoints, loadingState, } = useDataListContext();
     const breakpoints = useResponsiveSizing();
-    React.useEffect(() => {
+    useEffect(() => {
         registerLayoutBreakpoints(size);
     }, [size]);
-    React.useEffect(() => {
+    useEffect(() => {
         registerLayout(size, children);
     }, [size, children]);
     const sizeIndex = layoutBreakpoints.indexOf(size);
     const nextAvailableSize = layoutBreakpoints[sizeIndex + 1];
     const shouldRenderList = breakpoints[size] && !breakpoints[nextAvailableSize];
     if (loadingState !== "initial" && shouldRenderList) {
-        return React__default["default"].createElement(DataListItems, { size: size });
+        return React.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);
+styleInject(css_248z$6);
 
 // This component is meant to capture the props of the DataList.BulkActions
 function DataListBulkActions(
@@ -651,8 +639,8 @@ function InternalDataListBulkActions() {
     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)));
+    return (React.createElement("div", { className: styles$6.bulkActions },
+        React.createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
 }
 
 function DataListHeaderCheckbox({ children }) {
@@ -663,19 +651,19 @@ function DataListHeaderCheckbox({ children }) {
     // Show "Deselect All" if breakpoint is sm or higher
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selected.length ? `${selected.length} selected` : "";
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable) },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectAllCheckbox, {
+    return (React.createElement("div", { className: classnames(styles$f.selectable) },
+        React.createElement("div", { className: classnames(styles$f.selectAllCheckbox, {
                 [styles$f.visible]: Boolean(onSelectAll),
             }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
-                React__default["default"].createElement("div", { className: styles$f.srOnly }, selectedLabel))),
-        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
-                React__default["default"].createElement("div", { className: styles$f.headerBatchSelect },
-                    React__default["default"].createElement(Text.Text, null,
+            React.createElement(Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
+                React.createElement("div", { className: styles$f.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React.createElement("div", { className: styles$f.batchSelectContainer },
+                React.createElement("div", { className: styles$f.headerBatchSelect },
+                    React.createElement(Text, null,
                         selected.length,
                         " 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)) })));
+                    React.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(InternalDataListBulkActions, null)) })));
     function isAllSelected() {
         // If there's a totalCount, we can use that to accurately determine if the
         // user have "selected all".
@@ -702,8 +690,8 @@ function DataListHeader() {
     const headerData = generateHeaderElements(headers);
     if (!headerData)
         return null;
-    return (React__default["default"].createElement("div", { className: styles$f.headerTitles },
-        React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    return (React.createElement("div", { className: styles$f.headerTitles },
+        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
     function getVisibleSize() {
         const visibilityKeys = Object.keys(headerVisibility);
         const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();
@@ -714,24 +702,24 @@ function DataListHeader() {
 
 function DataListSort() {
     const { sorting, headers } = useDataListContext();
-    const divRef = React.useRef(null);
-    const [showPopover, setShowPopover] = React.useState(false);
+    const divRef = useRef(null);
+    const [showPopover, setShowPopover] = useState(false);
     if (!sorting)
         return null;
     const { sortable, state, onSort } = sorting;
     const sortByOptions = getSortByOptions();
     const canChangeOrder = !(state === null || state === void 0 ? void 0 : state.key);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("span", { ref: divRef },
-            React__default["default"].createElement(Button.Button, Object.assign({}, (!state && { icon: "add", iconOnRight: true }), { label: getButtonLabel(), variation: "subtle", onClick: () => setShowPopover(!showPopover) }))),
-        React__default["default"].createElement(Popover.Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
-            React__default["default"].createElement(Content.Content, null,
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Sort by"),
-                React__default["default"].createElement(Chip.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value })))),
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Ordered by"),
-                React__default["default"].createElement(Chip.Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
-                    React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
-                    React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { ref: divRef },
+            React.createElement(Button, Object.assign({}, (!state && { icon: "add", iconOnRight: true }), { label: getButtonLabel(), variation: "subtle", onClick: () => setShowPopover(!showPopover) }))),
+        React.createElement(Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
+            React.createElement(Content, null,
+                React.createElement(Heading, { level: 5 }, "Sort by"),
+                React.createElement(Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React.createElement(Chip, { key: label, label: label, value: value })))),
+                React.createElement(Heading, { level: 5 }, "Ordered by"),
+                React.createElement(Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
+                    React.createElement(Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
+                    React.createElement(Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
             const label = headers[sort];
@@ -795,20 +783,20 @@ function InternalDataListFilters() {
     if (!showSortButton && !component)
         return null;
     const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return (React__default["default"].createElement(DataListOverflowFade, null,
+    return (React.createElement(DataListOverflowFade, null,
         children && children,
-        showSortButton && React__default["default"].createElement(DataListSort, null)));
+        showSortButton && React.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(225, 225, 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);
+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(() => {
+    const [isStuck, setIsStuck] = useState(false);
+    const ref = useRef(null);
+    const handleObserver = useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    useEffect(() => {
         if (!window.IntersectionObserver)
             return;
         const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
@@ -817,12 +805,12 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
+    return (React.createElement("div", { ref: ref, className: classnames(styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
 var css_248z$4 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) + 1px);\n  top: calc(calc(16px / 2) + 1px);\n  top: calc(var(--space-small) + 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\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    opacity: 1;\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    opacity: 1;\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 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$4);
+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
@@ -834,26 +822,26 @@ function DataListSearch(_) {
  * Renders the DataList.Search component.
  */
 function InternalDataListSearch() {
-    const inputRef = React.useRef(null);
-    const [visible, setVisible] = React.useState(false);
+    const inputRef = useRef(null);
+    const [visible, setVisible] = 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]);
+    const debouncedSearch = useCallback(debounce((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"]({
+    return (React.createElement("div", { className: classnames({
             [styles$4.withNoFilters]: !filterComponent && !sorting,
         }) },
-        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$4.searchInput, {
+        React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles$4.searchInput, {
                 [styles$4.searchInputVisible]: visible,
             }) },
-            React__default["default"].createElement(InputText.InputText
+            React.createElement(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" }, size: "small" })),
-        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 }) }))));
+        React.createElement("div", { className: styles$4.searchButton },
+            React.createElement(AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;
@@ -865,24 +853,24 @@ function InternalDataListSearch() {
         const visibility = !visible;
         setVisible(visibility);
         if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
+            setTimeout(inputRef.current.focus, 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);
+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 { emptyStateComponents: components, filtered } = 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),
+    return (React.createElement("div", { className: styles$3.emptyStateWrapper },
+        React.createElement(Text, { align: "center" }, message),
         renderButton(action)));
     function getMessages() {
         const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
@@ -900,8 +888,8 @@ function InternalDataListEmptyState() {
 }
 function renderButton(action) {
     if (action) {
-        if (action.type === Button.Button) {
-            return React.cloneElement(action, {
+        if (action.type === Button) {
+            return cloneElement(action, {
                 variation: action.props.variation || "subtle",
             });
         }
@@ -917,40 +905,40 @@ function getEmptyStates(components) {
 
 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);
+styleInject(css_248z$2);
 
 function DataListLoadMoreTrigger() {
     const { onLoadMore } = useDataListContext();
-    const [inViewRef, isInView] = useInView.useInView();
-    React.useEffect(() => {
+    const [inViewRef, isInView] = useInView();
+    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 }));
+    return (React.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" })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$2.loadingMore },
+            React.createElement(Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles$2.backToTop },
+            React.createElement(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  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  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
 var styles$1 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$1);
+styleInject(css_248z$1);
 
 function DataListAction({ label, icon, destructive, onClick, }) {
     const { activeItem } = useDataListLayoutActionsContext();
     const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$1.action, onClick: handleClick },
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
-        React__default["default"].createElement(Typography.Typography, { textColor: color },
-            React__default["default"].createElement("span", { className: styles$1.label }, label))));
+    return (React.createElement("button", { className: styles$1.action, onClick: handleClick },
+        icon && React.createElement(Icon, { name: icon, color: color }),
+        React.createElement(Typography, { textColor: color },
+            React.createElement("span", { className: styles$1.label }, label))));
     function handleClick() {
         if (activeItem) {
             onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
@@ -963,33 +951,33 @@ function DataListAction({ label, icon, destructive, onClick, }) {
 
 var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
 var styles = {"hidden":"_0m75bgCVBhk-"};
-styleInject_es.styleInject(css_248z);
+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 actions = Children.toArray(actionsChildren);
     const hasActions = actions.length > 0;
-    React.useEffect(() => {
+    useEffect(() => {
         setHasInLayoutActions(hasActions);
         return () => {
             setHasInLayoutActions(false);
         };
     }, []);
     if (loadingState === "initial") {
-        return React__default["default"].createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+        return React.createElement(Glimmer, { shape: "square", size: "large" });
     }
     if (!hasActions)
         return null;
-    return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions })));
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.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);
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
 }
 
 // This component is meant to capture the props of the DataList.Filters
@@ -1006,20 +994,20 @@ function InternalDataListStatusBar() {
     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);
+    return React.createElement(React.Fragment, null, children);
 }
 
 function DataList(_a) {
-    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
-    const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
-    const [layouts, setLayouts] = React.useState({});
+    var { selected = [], sorting } = _a, props = __rest(_a, ["selected", "sorting"]);
+    const [layoutBreakpoints, setLayoutBreakpoints] = useState([]);
+    const [layouts, setLayouts] = useState({});
     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);
-    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
+    return (React.createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
             emptyStateComponents,
@@ -1031,7 +1019,7 @@ function DataList(_a) {
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
-        React__default["default"].createElement(InternalDataList, null)));
+        React.createElement(InternalDataList, null)));
     function registerLayoutBreakpoints(size) {
         setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
     }
@@ -1041,28 +1029,28 @@ function DataList(_a) {
 }
 function InternalDataList() {
     const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
-    const backToTopRef = React.useRef(null);
+    const backToTopRef = useRef(null);
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$f.wrapper },
-        React__default["default"].createElement("div", { className: styles$f.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 }),
-        React__default["default"].createElement(DataListStickyHeader, null,
-            React__default["default"].createElement("div", { className: styles$f.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),
+    return (React.createElement("div", { className: styles$f.wrapper },
+        React.createElement("div", { className: styles$f.titleContainer },
+            title && React.createElement(Heading, { level: 3 }, title),
+            React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React.createElement("div", { ref: backToTopRef }),
+        React.createElement(DataListStickyHeader, null,
+            React.createElement("div", { className: styles$f.headerFilters },
+                React.createElement(InternalDataListFilters, null),
+                React.createElement(InternalDataListSearch, null)),
+            React.createElement(InternalDataListStatusBar, null),
+            React.createElement(DataListHeader, null)),
+        initialLoading && React.createElement(DataListLoadingState, null),
+        showEmptyState && React.createElement(InternalDataListEmptyState, null),
         layoutComponents,
-        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$f.filtering },
-            React__default["default"].createElement("div", { className: styles$f.filteringSpinner },
-                React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
-        shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
+        loadingState === "filtering" && (React.createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$f.filtering },
+            React.createElement("div", { className: styles$f.filteringSpinner },
+                React.createElement(Spinner, { size: "small" })))),
+        shouldRenderLoadMoreTrigger && (React.createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
     function handleBackToTop() {
         var _a;
         // For testing purposes since jest doesn't know scrollIntoView.
@@ -1119,11 +1107,11 @@ DataList.ItemAction = DataListAction;
  * DataListBulkActions component.
  */
 DataList.BatchAction = function DataListBatchAction(props) {
-    return React__default["default"].createElement(DataListAction, Object.assign({}, props));
+    return React.createElement(DataListAction, Object.assign({}, props));
 };
 /**
  * Defines a status bar that is rendered between the filters and the header.
  */
 DataList.StatusBar = DataListStatusBar;
 
-exports.DataList = DataList;
+export { DataList };