@jobber/components 4.44.0 → 4.45.1

package/dist/DataList/index.js

@@ -5,47 +5,47 @@ 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-e7ed0974.js');
+var Text = require('../Text-59bde58c.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var noop = require('lodash/noop');
 var reactRouterDom = require('react-router-dom');
-var Button = require('../Button-fd8413b2.js');
+var Button = require('../Button-d89f2271.js');
 var design = require('@jobber/design');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 var ReactDOM = require('react-dom');
-var Tooltip = require('../Tooltip-bf67fe6e.js');
+var Tooltip = require('../Tooltip-59dbab5b.js');
 require('react-popper');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var foundation = require('@jobber/design/foundation');
 var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var InlineLabel = require('../InlineLabel-3d461632.js');
 var styles$f = require('@jobber/components/DataList/DataList.css');
 require('uuid');
 require('react-hook-form');
-var Checkbox = require('../Checkbox-3bccf65c.js');
+var Checkbox = require('../Checkbox-eac63b7f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-a1191b15.js');
+var Heading = require('../Heading-4562900a.js');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var useInView = require('@jobber/hooks/useInView');
-var Icon = require('../Icon-405a216c.js');
-var Popover = require('../Popover-bbfc6aa1.js');
+var Popover = require('../Popover-d401fb54.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-4916a642.js');
+var Chip = require('../Chip-4d8e6370.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-1aa30ee1.js');
 require('color');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-d1a52550.js');
+var InputText = require('../InputText-5ac5cfe0.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('../ButtonDismiss-82680c7d.js');
+var Icon = require('../Icon-405a216c.js');
+require('../ButtonDismiss-250840a4.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
-require('../FormField-d6138b7f.js');
-require('../InputValidation-b5a3d92c.js');
+require('../FormField-bef41ec9.js');
+require('../InputValidation-4e809bdd.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -111,35 +111,10 @@ var css_248z$b = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n
 var styles$b = {"menu":"jHcHGQ-HDbk-"};
 styleInject_es.styleInject(css_248z$b);
 
-var css_248z$a = ".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$a = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
+var css_248z$a = ".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$a = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
 styleInject_es.styleInject(css_248z$a);
 
-function DataListAction(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
-    const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$a.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$a.label }, label))));
-    function handleClick() {
-        if (item) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(item);
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }
-}
-
-var css_248z$9 = ".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$9 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$9);
-
 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";
@@ -171,8 +146,8 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     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 },
-        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$9.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
-        React__default["default"].createElement("button", { className: styles$9.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+        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$a.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React__default["default"].createElement("button", { className: styles$a.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
     function getPositionCssVars() {
         const { posX, posY } = getPosition();
         return {
@@ -183,7 +158,7 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     function getPosition() {
         const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
         const { width = 0, height = 0 } = rect || {};
-        const { x = 0, y = 0 } = position;
+        const { x, y } = position;
         const xIsOffScreen = x + width > window.innerWidth;
         const yIsOffScreen = y + height > window.innerHeight;
         const xOffSet = x + width - window.innerWidth + foundation.tokens["space-base"];
@@ -194,13 +169,13 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     }
 }
 
-function DataListItemActionsOverflow({ item, actions, }) {
+function DataListItemActionsOverflow({ actions, }) {
     const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
     const [showMenu, setShowMenu] = React.useState(false);
     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 })),
-        actions && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item }))))))));
+        actions && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions))));
     function handleMoreClick(event) {
         setShowMenu(true);
         const rect = event.currentTarget.getBoundingClientRect();
@@ -213,9 +188,9 @@ function DataListItemActionsOverflow({ item, actions, }) {
     }
 }
 
-var css_248z$8 = ".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}\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$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$8);
+var css_248z$9 = ".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}\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$9 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$9);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -235,10 +210,10 @@ 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$8.tags, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$9.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$8.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$9.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -267,22 +242,22 @@ function buildIntersectionThreshold(items) {
     return thresholds;
 }
 
-var css_248z$7 = ".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$7 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$7);
+var css_248z$8 = ".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$8 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$8);
 
-var css_248z$6 = ".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$6 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$6);
+var css_248z$7 = ".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$7 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject_es.styleInject(css_248z$7);
 
 const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$6.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+    return (React__default["default"].createElement("div", { className: styles$7.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$6.active : styles$6.inactive;
+        return order === targetOrder ? styles$7.active : styles$7.inactive;
     }
 }
 
@@ -291,8 +266,8 @@ 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$7.headerLabel, {
-            [styles$7.sortable]: isSortable,
+    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$8.headerLabel, {
+            [styles$8.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 }))));
@@ -411,7 +386,7 @@ function InternalDataListItemActions({ item, }) {
             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: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, item); }, type: "secondary", variation: "subtle" })));
         }),
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
+        Boolean(childrenArray.length) && (React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray }))));
 }
 function handleContextMenu(event) {
     event.stopPropagation();
@@ -489,8 +464,7 @@ function DataListItem({ item, layout, }) {
                 React__default["default"].createElement(DataListItemClickable, null, layout.props.children(generatedItem))),
             React__default["default"].createElement(framerMotion.AnimatePresence, null,
                 showMenu && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
-                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
-                    React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item })))))))));
+                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions)))));
     function handleShowMenu() {
         setShowMenu(true);
     }
@@ -552,21 +526,21 @@ function DataListItems({ layouts, mediaMatches, data, }) {
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 
-var css_248z$5 = ".jbBRoxlZlNI- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n  display: grid;\n  overflow-x: auto;\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- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: 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: 0;\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
-var styles$5 = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$6 = ".jbBRoxlZlNI- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n  display: grid;\n  overflow-x: auto;\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- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: 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: 0;\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
+var styles$6 = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z$6);
 
 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$5.fadeContainer, {
-            [styles$5.overflowLeft]: !isLeftVisible,
-            [styles$5.overflowRight]: !isRightVisible,
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$6.fadeContainer, {
+            [styles$6.overflowLeft]: !isLeftVisible,
+            [styles$6.overflowRight]: !isRightVisible,
         }) },
-        React__default["default"].createElement("div", { className: styles$5.overflowGrid },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$5.overflowTrigger }),
+        React__default["default"].createElement("div", { className: styles$6.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$6.overflowTrigger }),
             children,
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$6.overflowTrigger }))));
 }
 
 // This component is meant to capture the props of the DataList.BulkActions
@@ -778,9 +752,9 @@ function InternalDataListFilters() {
         showSortButton && React__default["default"].createElement(DataListSort, null)));
 }
 
-var css_248z$4 = ".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$4 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z$4);
+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);
 
 function DataListStickyHeader({ children }) {
     const [isStuck, setIsStuck] = React.useState(false);
@@ -795,12 +769,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$4.header, { [styles$4.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
-var css_248z$3 = ".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$3 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$3);
+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);
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
 // This component is meant to capture the props of the DataList.Search
@@ -820,13 +794,13 @@ function InternalDataListSearch() {
         return null;
     const { placeholder } = searchComponent.props;
     return (React__default["default"].createElement("div", { className: classnames__default["default"]({
-            [styles$3.withNoFilters]: !filterComponent && !sorting,
+            [styles$4.withNoFilters]: !filterComponent && !sorting,
         }) },
-        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$3.searchInput, {
-                [styles$3.searchInputVisible]: visible,
+        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, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
-        React__default["default"].createElement("div", { className: styles$3.searchButton },
+        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)
@@ -844,9 +818,9 @@ function InternalDataListSearch() {
     }
 }
 
-var css_248z$2 = ".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$2 = {"emptyStateWrapper":"zg3w9nQga-M-"};
-styleInject_es.styleInject(css_248z$2);
+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(_) {
@@ -855,7 +829,7 @@ function DataListEmptyState(_) {
 function InternalDataListEmptyState() {
     const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
     const { message, action } = getMessages();
-    return (React__default["default"].createElement("div", { className: styles$2.emptyStateWrapper },
+    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
         React__default["default"].createElement(Text.Text, { align: "center" }, message),
         renderButton(action)));
     function getMessages() {
@@ -889,9 +863,9 @@ function getEmptyStates(components) {
     return { defaultEmptyState, filteredEmptyState };
 }
 
-var css_248z$1 = ".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$1 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
-styleInject_es.styleInject(css_248z$1);
+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();
@@ -899,7 +873,7 @@ function DataListLoadMoreTrigger() {
     React.useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);
-    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$1.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$2.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
 }
 
 const MAX_DATA_COUNT = 50;
@@ -908,12 +882,33 @@ function DataListLoadMore({ onBackToTop }) {
     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$1.loadingMore },
+        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$1.backToTop },
+        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  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);
+
+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))));
+    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);
@@ -921,7 +916,6 @@ styleInject_es.styleInject(css_248z);
 function DataListLayoutActions() {
     const { itemActionComponent } = useDataListContext();
     const { setHasInLayoutActions } = useDataListLayoutContext();
-    const { activeItem } = useDataListLayoutActionsContext();
     const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
     const actions = React.Children.toArray(actionsChildren);
     const hasActions = actions.length > 0;
@@ -934,7 +928,7 @@ function DataListLayoutActions() {
     if (!hasActions)
         return null;
     return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions, item: activeItem })));
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions })));
 }
 function DataListLayoutActionsWrapper({ children }) {
     const { isInLayoutProvider } = useDataListLayoutContext();

package/dist/DataTable/index.js

@@ -9,20 +9,20 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-b903e7ac.js');
-var Button = require('../Button-fd8413b2.js');
-var Text = require('../Text-e7ed0974.js');
+var Option = require('../Option-9f4a65da.js');
+var Button = require('../Button-d89f2271.js');
+var Text = require('../Text-59bde58c.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-d6138b7f.js');
+require('../FormField-bef41ec9.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-b5a3d92c.js');
+require('../InputValidation-4e809bdd.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-router-dom');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-b31baae4.js');
+var DatePicker = require('../DatePicker-39d2dc8b.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{DatePicker-b31baae4.js → DatePicker-39d2dc8b.js}

@@ -5,8 +5,8 @@ var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Typography = require('./Typography-fd6f932a.js');
-var Button = require('./Button-fd8413b2.js');
+var Typography = require('./Typography-9bff9c91.js');
+var Button = require('./Button-d89f2271.js');
 var omit = require('lodash/omit');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/DescriptionList/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Disclosure/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 require('@jobber/design');
 require('classnames');
 

package/dist/Drawer/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-a1191b15.js');
-var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+var Heading = require('../Heading-4562900a.js');
+var ButtonDismiss = require('../ButtonDismiss-250840a4.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Emphasis/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-76a10790.js');
+var Emphasis = require('../Emphasis-cc3456ac.js');
 require('react');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 

package/dist/{Emphasis-76a10790.js → Emphasis-cc3456ac.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-fd6f932a.js');
+var Typography = require('./Typography-9bff9c91.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/FeatureSwitch/index.js

@@ -6,14 +6,14 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-a1191b15.js');
-var Text = require('../Text-e7ed0974.js');
+var Heading = require('../Heading-4562900a.js');
+var Text = require('../Text-59bde58c.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Switch = require('../Switch-e75145cc.js');
-var Button = require('../Button-fd8413b2.js');
-var Emphasis = require('../Emphasis-76a10790.js');
-var Markdown = require('../Markdown-f6748dcb.js');
-require('../Typography-fd6f932a.js');
+var Switch = require('../Switch-165f01e3.js');
+var Button = require('../Button-d89f2271.js');
+var Emphasis = require('../Emphasis-cc3456ac.js');
+var Markdown = require('../Markdown-b37cf9ec.js');
+require('../Typography-9bff9c91.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/FormField/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-d6138b7f.js');
+var FormField = require('../FormField-bef41ec9.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-fd8413b2.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fd6f932a.js');
-require('../Text-e7ed0974.js');
-require('../InputValidation-b5a3d92c.js');
+require('../Typography-9bff9c91.js');
+require('../Text-59bde58c.js');
+require('../InputValidation-4e809bdd.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');