@jobber/components 6.26.0 → 6.26.2

package/dist/DataListFilters-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { D as DataListSort } from './DataListSort-es.js';
 import { D as DataListOverflowFade } from './DataListOverflowFade-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
@@ -35,9 +35,9 @@ function InternalDataListFilters() {
     if (!showSortButton && !component)
         return null;
     const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return (React.createElement(DataListOverflowFade, null,
+    return (React__default.createElement(DataListOverflowFade, null,
         children && children,
-        showSortButton && React.createElement(DataListSort, null)));
+        showSortButton && React__default.createElement(DataListSort, null)));
 }
 
 export { DataListFilters as D, InternalDataListFilters as I };

package/dist/DataListHeader-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-es.js';
 import { u as useResponsiveSizing } from './useResponsiveSizing-es.js';
@@ -21,19 +21,19 @@ function DataListHeaderCheckbox({ children }) {
         return children;
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
-    return (React.createElement("div", { className: styles.selectable },
-        React.createElement("div", { className: classnames(styles.selectAllCheckbox, {
+    return (React__default.createElement("div", { className: styles.selectable },
+        React__default.createElement("div", { className: classnames(styles.selectAllCheckbox, {
                 [styles.visible]: canSelectAll,
             }) },
-            React.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
-                React.createElement("div", { className: styles.srOnly }, selectedLabel))),
-        React.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: styles.batchSelectContainer },
-                React.createElement("div", { className: styles.headerBatchSelect },
-                    Boolean(selectedCount) && React.createElement(Text, null,
+            React__default.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+                React__default.createElement("div", { className: styles.srOnly }, selectedLabel))),
+        React__default.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default.createElement("div", { className: styles.batchSelectContainer },
+                React__default.createElement("div", { className: styles.headerBatchSelect },
+                    Boolean(selectedCount) && React__default.createElement(Text, null,
                         selectedCount,
                         " selected"),
-                    React.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React.createElement(InternalDataListBulkActions, null)) })));
+                    React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React__default.createElement(InternalDataListBulkActions, null)) })));
     function isIndeterminate() {
         if (isSelectAll)
             return selectedIDs.length > 0;
@@ -80,8 +80,8 @@ function DataListHeader() {
     const headerData = generateHeaderElements(headers);
     if (!headerData)
         return null;
-    return (React.createElement("div", { className: styles.headerTitles },
-        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    return (React__default.createElement("div", { className: styles.headerTitles },
+        React__default.createElement(DataListHeaderCheckbox, null, layout(headerData))));
     function getVisibleSize() {
         const visibilityKeys = Object.keys(headerVisibility);
         const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();

package/dist/DataListHeaderTile-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React__default, { useState, useRef } from 'react';
 import classnames from 'classnames';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
 import { D as DataListSortingOptions } from './DataListSortingOptions-es.js';
@@ -16,10 +16,10 @@ const SORT_ORDER_MAP = {
     none: "none",
 };
 function DataListSortingArrows({ headerKey, order, }) {
-    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID, "aria-label": `${headerKey} sort icon`, "aria-sort": order ? SORT_ORDER_MAP[order] : undefined },
-        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" }))));
+    return (React__default.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID, "aria-label": `${headerKey} sort icon`, "aria-sort": order ? SORT_ORDER_MAP[order] : undefined },
+        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__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.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.active : styles.inactive;
     }
@@ -35,12 +35,12 @@ function DataListHeaderTile({ headers, headerKey, }) {
     const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
     const Tag = isSortable ? "button" : "div";
-    return (React.createElement(Tag, { className: classnames(styles$1.headerLabel, {
+    return (React__default.createElement(Tag, { className: classnames(styles$1.headerLabel, {
             [styles$1.sortable]: isSortable,
         }), onClick: handleOnClick, ref: dataListHeaderTileRef },
-        React.createElement(Text, { maxLines: "single" }, headers[headerKey]),
-        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
-        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none", headerKey: headerKey }))));
+        React__default.createElement(Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (React__default.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none", headerKey: headerKey }))));
     function toggleSorting(newSortingKey, newId, newLabel) {
         var _a, _b;
         const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);

package/dist/DataListItem-es.js

@@ -1,4 +1,4 @@
-import React, { Children, useMemo, isValidElement, useState } from 'react';
+import React__default, { Children, useMemo, isValidElement, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import classnames from 'classnames';
 import { u as useDataListLayoutContext } from './DataListLayoutContext-es.js';
@@ -16,11 +16,11 @@ function DataListItemInternal({ children, item, }) {
     const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
     if (!canSelect)
         return children;
-    return (React.createElement("div", { className: classnames(styles.selectable, {
+    return (React__default.createElement("div", { className: classnames(styles.selectable, {
             [styles.selected]: hasAtLeastOneSelected,
         }) },
         children,
-        React.createElement(Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+        React__default.createElement(Checkbox, { checked: getIsChecked(), onChange: handleChange })));
     function getIsChecked() {
         const isItemInSelectedIDs = selectedIDs.includes(item.id);
         // If we're in a "select all" state, the selectedID's becomes a list of
@@ -83,15 +83,15 @@ function DataListItem({ item, layout, }) {
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     const shouldShowHoverMenu = showMenu && hasActions && !hasInLayoutActions && !shouldShowContextMenu;
-    return (React.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles.listItem, {
+    return (React__default.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
+        React__default.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles.listItem, {
                 [styles.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
-            React.createElement(DataListItemInternal, { item: item },
-                React.createElement(DataListItemClickable, null, layout(generatedItem))),
-            React.createElement(AnimatePresence, null,
-                shouldShowHoverMenu && (React.createElement(InternalDataListItemActions, { actions: actions })),
-                React.createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
+            React__default.createElement(DataListItemInternal, { item: item },
+                React__default.createElement(DataListItemClickable, null, layout(generatedItem))),
+            React__default.createElement(AnimatePresence, null,
+                shouldShowHoverMenu && (React__default.createElement(InternalDataListItemActions, { actions: actions })),
+                React__default.createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
     function handleShowMenu() {
         setShowMenu(true);
     }

package/dist/DataListItemActions-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { motion } from 'framer-motion';
 import { T as TRANSITION_DURATION_IN_SECONDS, e as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
 import { D as DataListActions } from './DataListActions-es.js';
@@ -16,11 +16,11 @@ const variants = {
     visible: { opacity: 1, y: 4 },
 };
 function InternalDataListItemActions({ actions, }) {
-    return (React.createElement(motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+    return (React__default.createElement(motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
         }, className: styles.menu, "data-elevation": "elevated", onContextMenu: handleContextMenu },
-        React.createElement(DataListActions, null, actions)));
+        React__default.createElement(DataListActions, null, actions)));
 }
 function handleContextMenu(event) {
     event.stopPropagation();

package/dist/DataListItemActionsOverflow-es.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { B as Button } from './Button-es.js';
 import 'classnames';
 import { T as Tooltip } from './Tooltip-es.js';
@@ -9,10 +9,10 @@ function DataListItemActionsOverflow({ actions, }) {
     const [showMenu, setShowMenu] = useState(false);
     if (actions.length === 0)
         return null;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { message: "More actions" },
-            React.createElement(Button, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
-        React.createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { message: "More actions" },
+            React__default.createElement(Button, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
+        React__default.createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
     function handleMoreClick(event) {
         // Prevent firing the parent's onClick event when it is nested
         // within a clickable list item

package/dist/DataListItemClickable-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { Link } from 'react-router-dom';
 import { s as styles } from './DataList.module-es.js';
@@ -7,27 +7,27 @@ import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-es
 function DataListItemClickableInternal({ onClick, url, to, children, }) {
     const { activeItem } = useDataListLayoutActionsContext();
     if (!activeItem)
-        return React.createElement(React.Fragment, null, children);
+        return React__default.createElement(React__default.Fragment, null, children);
     if (to) {
         const computedTo = typeof to === "string" ? to : to(activeItem);
-        return (React.createElement(Link, { className: styles.listItemClickable, to: computedTo, onClick: handleClick }, children));
+        return (React__default.createElement(Link, { className: styles.listItemClickable, to: computedTo, onClick: handleClick }, children));
     }
     if (url) {
         const href = typeof url === "string" ? url : url(activeItem);
-        return (React.createElement("a", { className: styles.listItemClickable, href: href, onClick: handleClick }, children));
+        return (React__default.createElement("a", { className: styles.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.createElement("div", { role: "button", tabIndex: 0, className: styles.listItemClickable, onClick: handleClick, onKeyDown: e => {
+        React__default.createElement("div", { role: "button", tabIndex: 0, className: styles.listItemClickable, onClick: handleClick, onKeyDown: e => {
                 if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     handleClick();
                 }
             } }, children));
     }
-    return React.createElement(React.Fragment, null, children);
+    return React__default.createElement(React__default.Fragment, null, children);
     function handleClick() {
         activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
     }
@@ -37,9 +37,9 @@ function DataListItemClickable({ children }) {
     const { itemActionComponent } = useDataListContext();
     if (itemActionComponent) {
         const props = itemActionComponent.props;
-        return (React.createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+        return (React__default.createElement(DataListItemClickableInternal, Object.assign({}, props), children));
     }
-    return React.createElement(React.Fragment, null, children);
+    return React__default.createElement(React__default.Fragment, null, children);
 }
 
 export { DataListItemClickable as D };

package/dist/DataListItems-es.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { D as DataListLayoutContext } from './DataListLayoutContext-es.js';
 import { D as DataListItem } from './DataListItem-es.js';
@@ -9,11 +9,11 @@ function DataListItems({ size = "xs", }) {
     const layout = layouts[size];
     if (!layout)
         return null;
-    return (React.createElement(DataListLayoutContext.Provider, { value: {
+    return (React__default.createElement(DataListLayoutContext.Provider, { value: {
             isInLayoutProvider: true,
             hasInLayoutActions,
             setHasInLayoutActions,
-        } }, data.map((child, i) => (React.createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+        } }, data.map((child, i) => (React__default.createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
 }
 
 export { DataListItems as D };

package/dist/DataListLayout-es.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { D as DataListItems } from './DataListItems-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { u as useActiveLayout } from './useActiveLayout-es.js';
@@ -11,7 +11,7 @@ function DataListLayout({ children, size = "xs", }) {
     }, [size, children]);
     const shouldRenderList = size === activeBreakpoint;
     if (loadingState !== "initial" && shouldRenderList) {
-        return React.createElement(DataListItems, { size: size });
+        return React__default.createElement(DataListItems, { size: size });
     }
     return null;
 }

package/dist/DataListLayoutActions-es.js

@@ -1,4 +1,4 @@
-import React, { Children, useEffect } from 'react';
+import React__default, { Children, useEffect } from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { u as useDataListLayoutContext } from './DataListLayoutContext-es.js';
 import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-es.js';
@@ -19,18 +19,18 @@ function DataListLayoutActions() {
         };
     }, []);
     if (loadingState === "initial") {
-        return React.createElement(Glimmer, { shape: "square", size: "large" });
+        return React__default.createElement(Glimmer, { shape: "square", size: "large" });
     }
     if (!hasActions)
         return null;
-    return (React.createElement(DataListLayoutActionsWrapper, null,
-        React.createElement(DataListItemActionsOverflow, { actions: actions })));
+    return (React__default.createElement(DataListLayoutActionsWrapper, null,
+        React__default.createElement(DataListItemActionsOverflow, { actions: actions })));
 }
 function DataListLayoutActionsWrapper({ children }) {
     const { isInLayoutProvider } = useDataListLayoutContext();
     if (isInLayoutProvider)
-        return React.createElement(React.Fragment, null, children);
-    return React.createElement("div", { className: styles.hidden }, children);
+        return React__default.createElement(React__default.Fragment, null, children);
+    return React__default.createElement("div", { className: styles.hidden }, children);
 }
 
 export { DataListLayoutActions as D };

package/dist/DataListLoadMore-es.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { u as useInView_2 } from './useInView-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { g as DATA_LOAD_MORE_TEST_ID, h as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-es.js';
@@ -14,19 +14,19 @@ function DataListLoadMoreTrigger() {
     useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);
-    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+    return (React__default.createElement("div", { ref: inViewRef, className: styles.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.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.loadingMore },
-            React.createElement(Spinner, { size: "small" }))),
-        showBackToTop && (React.createElement("div", { className: styles.backToTop },
-            React.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React__default.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React__default.createElement(Spinner, { size: "small" }))),
+        showBackToTop && (React__default.createElement("div", { className: styles.backToTop },
+            React__default.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
 export { DataListLoadMore as D, MAX_DATA_COUNT as M };

package/dist/DataListLoadingState-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { G as Glimmer } from './Glimmer-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { u as useActiveLayout } from './useActiveLayout-es.js';
@@ -13,10 +13,10 @@ 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.createElement("div", { className: styles.glimmer },
-            React.createElement(Glimmer, { size: glimmerSize }))) })), {});
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default.createElement("div", { className: styles.glimmer },
+            React__default.createElement(Glimmer, { size: glimmerSize }))) })), {});
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
-    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+    return (React__default.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React__default.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
 }
 
 export { DATALIST_LOADINGSTATE_ROW_TEST_ID as D, LOADING_STATE_LIMIT_ITEMS as L, DataListLoadingState as a };

package/dist/DataListOverflowFade-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { u as useInView_2 } from './useInView-es.js';
 import classnames from 'classnames';
 
@@ -9,14 +9,14 @@ var styles = {"fadeContainer":"a-KvXvaVQks-","overflowItems":"faGQ-G8kLN8-","ove
 function DataListOverflowFade({ children }) {
     const [leftRef, isLeftVisible] = useInView_2();
     const [rightRef, isRightVisible] = useInView_2();
-    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
+    return (React__default.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
             [styles.overflowLeft]: !isLeftVisible,
             [styles.overflowRight]: !isRightVisible,
         }) },
-        React.createElement("div", { className: styles.overflowGrid },
-            React.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
-            React.createElement("div", { className: styles.overflowItems }, children),
-            React.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
+        React__default.createElement("div", { className: styles.overflowGrid },
+            React__default.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
+            React__default.createElement("div", { className: styles.overflowItems }, children),
+            React__default.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
 }
 
 export { CONTAINER_TEST_ID as C, DataListOverflowFade as D };

package/dist/DataListSearch-es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React__default, { useRef, useState, useCallback } from 'react';
 import { d as debounce } from './debounce-es.js';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
@@ -27,19 +27,19 @@ function InternalDataListSearch() {
     if (!searchComponent)
         return null;
     const { placeholder, initialValue } = searchComponent.props;
-    return (React.createElement("div", { className: classnames(styles.wrapper, {
+    return (React__default.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
-        React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
+        React__default.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
                 [styles.searchInputVisible]: visible,
             }) },
-            React.createElement(InputText
+            React__default.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" }, clearable: "always" })),
-        React.createElement("div", { className: styles.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 }) }))));
+        React__default.createElement("div", { className: styles.searchButton },
+            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSort-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { C as Combobox } from './Combobox-es.js';
 import './ComboboxProvider-es.js';
@@ -12,16 +12,16 @@ function DataListSort() {
         return null;
     const { sortable, state, onSort } = sorting;
     const sortByOptions = getSortByOptions();
-    return (React.createElement(Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
+    return (React__default.createElement(Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
             {
                 id: getSelectedSortID(),
                 label: (state === null || state === void 0 ? void 0 : state.order) || "",
             },
         ] },
-        React.createElement(Combobox.Activator, null,
-            React.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Suffix, null,
-                React.createElement(Icon, { name: "arrowDown", size: "small" }))))),
-        sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Option, { key: value, id: value, label: label })))));
+        React__default.createElement(Combobox.Activator, null,
+            React__default.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(Chip.Suffix, null,
+                React__default.createElement(Icon, { name: "arrowDown", size: "small" }))))),
+        sortByOptions.map(({ label, value }) => (React__default.createElement(Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
             const label = headers[sort.key];

package/dist/DataListSortingOptions-es.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -14,9 +14,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+    return (React__default.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React__default.createElement("li", { className: styles.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
         option.label,
-        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))))));
+        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))))));
     function handleKeyDown(event, option) {
         if (event.key === "Enter") {
             onSelectChange(option);

package/dist/DataListStatusBar-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { g as getCompoundComponent } from './DataList.utils-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 
@@ -16,7 +16,7 @@ function InternalDataListStatusBar() {
     if (!component)
         return null;
     const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return React.createElement(React.Fragment, null, children);
+    return React__default.createElement(React__default.Fragment, null, children);
 }
 
 export { DataListStatusBar as D, InternalDataListStatusBar as I };

package/dist/DataListStickyHeader-es.js

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import { b as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-es.js';
 
 var styles = {"header":"u5YTRL-PlTI-","stuck":"rylbmDbzCts-","spinning":"_2VUVOWcGjbc-"};
@@ -17,7 +17,7 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
+    return (React__default.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
 }
 
 export { DataListStickyHeader as D };

package/dist/DataListTags-es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { I as InlineLabel } from './InlineLabel-es.js';
 import { T as Text } from './Text-es.js';
@@ -25,13 +25,13 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
-        React.createElement("div", { className: classnames(styles.tags, {
+    return (React__default.createElement("div", { className: styles.tagWrapper, ref: ref },
+        React__default.createElement("div", { className: classnames(styles.tags, {
                 [styles.tagsMask]: shouldShowTagCount,
-            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
-            React.createElement(InlineLabel, null, tag))))),
-        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
-            React.createElement(Text, null,
+            }) }, items.filter(Boolean).map((tag, index) => (React__default.createElement("div", { key: tag, "data-tag-element": index },
+            React__default.createElement(InlineLabel, null, tag))))),
+        shouldShowTagCount && (React__default.createElement("div", { className: styles.tagCount },
+            React__default.createElement(Text, null,
                 "+",
                 visibleItems)))));
     function handleIntersection(...[entries]) {

package/dist/DataListTotalCount-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { T as Text } from './Text-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 
@@ -6,16 +6,16 @@ var styles = {"results":"_9wfZRG5vXI8-","spinning":"_7A1FU9kI3mY-"};
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCountContainer({ children }) {
-    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
+    return (React__default.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
 }
 function DataListTotalCount({ totalCount, loading, }) {
     if (totalCount === null && loading) {
-        return (React.createElement(DataListTotalCountContainer, null,
-            React.createElement(Glimmer, { size: "auto", shape: "rectangle" })));
+        return (React__default.createElement(DataListTotalCountContainer, null,
+            React__default.createElement(Glimmer, { size: "auto", shape: "rectangle" })));
     }
     if (typeof totalCount === "number") {
-        return (React.createElement(DataListTotalCountContainer, null,
-            React.createElement(Text, { variation: "subdued" },
+        return (React__default.createElement(DataListTotalCountContainer, null,
+            React__default.createElement(Text, { variation: "subdued" },
                 "(",
                 totalCount.toLocaleString(),
                 " ",