@jobber/components 6.86.0 → 6.86.1

package/dist/Autocomplete/index.cjs

@@ -1023,7 +1023,7 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
         : {})));
     // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
     // We need to apply the correct update method to each case
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = floatingUi_react.autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -1067,7 +1067,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = useIsMounted.useIsMounted();
     const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React.createElement(floatingUi_react.FloatingPortal, null, menu) : menu;
 }
@@ -1141,13 +1141,13 @@ exports.KeyboardAction = void 0;
  * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
  */
 function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown.useOnKeyDown_2((event) => {
+    useOnKeyDown.useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Select);
     }, "Enter");
 }
@@ -1259,7 +1259,7 @@ function AutocompleteInternal(_a, ref) {
     const [inputFocused, setInputFocused] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const [autocompleteRef, setAutocompleteRef] = React.useState(null);
-    const delayedSearch = useDebounce.useDebounce_2(updateSearch, debounceRate);
+    const delayedSearch = useDebounce.useDebounce(updateSearch, debounceRate);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         delayedSearch();

package/dist/Autocomplete/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { u as useFloating, b as autoUpdate, o as offset, f as flip, e as size, r as useListNavigation, c as useDismiss, d as useInteractions, t as useTransitionStyles, F as FloatingPortal, q as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { u as useFloating, c as autoUpdate, o as offset, f as flip, s as size, r as useListNavigation, a as useDismiss, b as useInteractions, t as useTransitionStyles, F as FloatingPortal, q as FloatingFocusManager } from '../floating-ui.react-es.js';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { useCallbackRef, useDebounce } from '@jobber/hooks';
@@ -12,10 +12,10 @@ import { InputText } from '../InputText/index.mjs';
 import { G as Glimmer } from '../Glimmer-es.js';
 import { m as mergeRefs } from '../FormField-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
-import { u as useDebounce_2 } from '../useDebounce-es.js';
-import { u as useIsMounted_2 } from '../useIsMounted-es.js';
-import { u as useSafeLayoutEffect_1 } from '../useSafeLayoutEffect-es.js';
-import { u as useOnKeyDown_2 } from '../useOnKeyDown-es.js';
+import { u as useDebounce$1 } from '../useDebounce-es.js';
+import { u as useIsMounted } from '../useIsMounted-es.js';
+import { u as useSafeLayoutEffect } from '../useSafeLayoutEffect-es.js';
+import { u as useOnKeyDown } from '../useOnKeyDown-es.js';
 import 'react-dom';
 import 'react-hook-form';
 import 'framer-motion';
@@ -1021,7 +1021,7 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
         : {})));
     // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
     // We need to apply the correct update method to each case
-    useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -1065,7 +1065,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted_2();
+    const mounted = useIsMounted();
     const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React__default.createElement(FloatingPortal, null, menu) : menu;
 }
@@ -1139,13 +1139,13 @@ var KeyboardAction;
  * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
  */
 function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown_2((event) => {
+    useOnKeyDown((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Select);
     }, "Enter");
 }
@@ -1257,7 +1257,7 @@ function AutocompleteInternal(_a, ref) {
     const [inputFocused, setInputFocused] = useState(false);
     const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const [autocompleteRef, setAutocompleteRef] = useState(null);
-    const delayedSearch = useDebounce_2(updateSearch, debounceRate);
+    const delayedSearch = useDebounce$1(updateSearch, debounceRate);
     const inputRef = useRef(null);
     useEffect(() => {
         delayedSearch();

package/dist/Banner-cjs.js

@@ -58,7 +58,7 @@ function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSA
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
         widths: bannerWidths,
     });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {

package/dist/Banner-es.js

@@ -56,7 +56,7 @@ function InternalWrapper({ children, icon, dismissButton, UNSAFE_className, UNSA
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
         widths: bannerWidths,
     });
     const bannerClassNames = classnames(styles.banner, [styles[type]], {

package/dist/Chip-cjs.js

@@ -72,8 +72,8 @@ const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid,
     });
     const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView_2();
-    const [headingRef, headingFullyVisible] = useInView.useInView_2();
+    const [labelRef, labelFullyVisible] = useInView.useInView();
+    const [headingRef, headingFullyVisible] = useInView.useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     const chipContent = (React.createElement(React.Fragment, null,
         prefix,

package/dist/Chip-es.js

@@ -1,6 +1,6 @@
 import React__default, { useRef, forwardRef } from 'react';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-es.js';
+import { u as useInView } from './useInView-es.js';
 import { A as Avatar } from './Avatar-es.js';
 import { I as Icon } from './Icon-es.js';
 import { u as useChildComponent } from './useChildComponent-es.js';
@@ -70,8 +70,8 @@ const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label
     });
     const prefix = useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent(children, d => d.type === ChipSuffix);
-    const [labelRef, labelFullyVisible] = useInView_2();
-    const [headingRef, headingFullyVisible] = useInView_2();
+    const [labelRef, labelFullyVisible] = useInView();
+    const [headingRef, headingFullyVisible] = useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     const chipContent = (React__default.createElement(React__default.Fragment, null,
         prefix,

package/dist/Combobox-cjs.js

@@ -57,7 +57,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const shouldScroll = React.useRef(false);
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
-    const searchCallback = useDebounce.useDebounce_2((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
+    const searchCallback = useDebounce.useDebounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
     const { handleClose, handleSelection, handleOpen } = useMakeComboboxHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {

package/dist/Combobox-es.js

@@ -5,7 +5,7 @@ import { C as ComboboxContextProvider } from './ComboboxProvider-es.js';
 import { C as ComboboxTrigger } from './ComboboxTrigger-es.js';
 import { C as ComboboxOption } from './ComboboxOption-es.js';
 import { n as noop } from './noop-es.js';
-import { u as useDebounce_2 } from './useDebounce-es.js';
+import { u as useDebounce } from './useDebounce-es.js';
 import { C as ComboboxActivator } from './ComboboxActivator-es.js';
 
 var styles = {"overlay":"xxU2WqkpXZU-","wrapper":"W-9SMjhEMpI-","spinning":"mqMvu8yxz2w-"};
@@ -55,7 +55,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const shouldScroll = useRef(false);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState("");
-    const searchCallback = useDebounce_2((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
+    const searchCallback = useDebounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
     const { handleClose, handleSelection, handleOpen } = useMakeComboboxHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {

package/dist/ComboboxContent-cjs.js

@@ -50,8 +50,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const focusedIndex = React.useRef(null);
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
     const nodeId = floatingUi_react.useFloatingNodeId();
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const floatingRef = useFocusTrap.useFocusTrap_2(open);
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const floatingRef = useFocusTrap.useFocusTrap(open);
     const { floatingStyles, update, context } = floatingUi_react.useFloating({
         nodeId,
         elements: {

package/dist/ComboboxContent-es.js

@@ -1,12 +1,12 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import { g as useFloatingParentNodeId, h as useFloatingNodeId, u as useFloating, o as offset, f as flip, b as autoUpdate, c as useDismiss, d as useInteractions, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
+import { g as useFloatingParentNodeId, h as useFloatingNodeId, u as useFloating, o as offset, f as flip, c as autoUpdate, a as useDismiss, b as useInteractions, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
 import { C as ComboboxContentList } from './ComboboxContentList-es.js';
 import { C as ComboboxContentHeader } from './ComboboxContentHeader-es.js';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
 import { C as COMBOBOX_MENU_ID } from './constants-es.js';
 
 var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
@@ -48,8 +48,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const focusedIndex = useRef(null);
     const parentNodeId = useFloatingParentNodeId();
     const nodeId = useFloatingNodeId();
-    useRefocusOnActivator_2(open);
-    const floatingRef = useFocusTrap_2(open);
+    useRefocusOnActivator(open);
+    const floatingRef = useFocusTrap(open);
     const { floatingStyles, update, context } = useFloating({
         nodeId,
         elements: {

package/dist/ComboboxLoadMore-cjs.js

@@ -6,7 +6,7 @@ var useInView = require('./useInView-cjs.js');
 var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
 
 function ComboboxLoadMore({ onLoadMore }) {
-    const [inViewRef, isInView] = useInView.useInView_2();
+    const [inViewRef, isInView] = useInView.useInView();
     React.useEffect(() => {
         isInView && onLoadMore();
     }, [isInView]);

package/dist/ComboboxLoadMore-es.js

@@ -1,10 +1,10 @@
 import React__default, { useEffect } from 'react';
-import { u as useInView_2 } from './useInView-es.js';
+import { u as useInView } from './useInView-es.js';
 
 var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
 
 function ComboboxLoadMore({ onLoadMore }) {
-    const [inViewRef, isInView] = useInView_2();
+    const [inViewRef, isInView] = useInView();
     useEffect(() => {
         isInView && onLoadMore();
     }, [isInView]);

package/dist/ConfirmationModal-cjs.js

@@ -53,7 +53,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
                 onCancel }),
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
-    useOnKeyDown.useOnKeyDown_2(handleKeyboardShortcut, ["Escape", "Enter"]);
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
     return (React.createElement(Modal_index.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),

package/dist/ConfirmationModal-es.js

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useReducer, useImperativeHandle, useEffect } from 'react';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
+import { u as useOnKeyDown } from './useOnKeyDown-es.js';
 import { Modal } from './Modal/index.mjs';
 import { C as Content } from './Content-es.js';
 import { M as Markdown } from './Markdown-es.js';
@@ -51,7 +51,7 @@ const ConfirmationModal = forwardRef(function ConfirmationModalInternal({ title,
                 onCancel }),
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
-    useOnKeyDown_2(handleKeyboardShortcut, ["Escape", "Enter"]);
+    useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
     return (React__default.createElement(Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),

package/dist/ContentBlock-cjs.js

@@ -24,7 +24,7 @@ const getMappedBreakpointWidth = (maxWidth) => {
     return maxWidth;
 };
 
-function ContentBlock({ children, maxWidth = useResizeObserver.useResizeObserver.Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+function ContentBlock({ children, maxWidth = useResizeObserver.Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
     return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--content-block-max-width": getMappedBreakpointWidth(maxWidth), "--content-block-gutters": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gutters) }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.contentBlock, andText && styles.andText, gutters && styles.gutters, justify === "left" && styles.left, justify === "right" && styles.right, justify === "center" && styles.center, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
 }
 

package/dist/ContentBlock-es.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { B as Breakpoints } from './useResizeObserver-es.js';
 import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
 
 var styles = {"contentBlock":"rJamQZ6fRes-","left":"bqjXV8MRO-4-","right":"sCMxIxKkFe0-","center":"_2pIQVKvVL1I-","andText":"_6dF2no3aTxw-","gutters":"_8k8YLsatGag-","spinning":"sjMwRWFdKeo-"};
@@ -22,7 +22,7 @@ const getMappedBreakpointWidth = (maxWidth) => {
     return maxWidth;
 };
 
-function ContentBlock({ children, maxWidth = useResizeObserver.Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+function ContentBlock({ children, maxWidth = Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
     return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--content-block-max-width": getMappedBreakpointWidth(maxWidth), "--content-block-gutters": getMappedAtlantisSpaceToken(gutters) }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.contentBlock, andText && styles.andText, gutters && styles.gutters, justify === "left" && styles.left, justify === "right" && styles.right, justify === "center" && styles.center, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
 }
 

package/dist/DataListActionsMenu-cjs.js

@@ -18,10 +18,10 @@ const variants = {
 };
 function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
     const [ref, setRef] = React.useState();
-    const mounted = useIsMounted.useIsMounted_2();
-    useRefocusOnActivator.useRefocusOnActivator_2(visible);
-    const focusTrapRef = useFocusTrap.useFocusTrap_2(visible);
-    useOnKeyDown.useOnKeyDown_2(onRequestClose, "Escape");
+    const mounted = useIsMounted.useIsMounted();
+    useRefocusOnActivator.useRefocusOnActivator(visible);
+    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
+    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
     const actionsMenu = (React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
         React.createElement(framerMotion.motion.div, { role: "menu", "data-elevation": "elevated", ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: DataList_const.TRANSITION_DELAY_IN_SECONDS }, className: styles.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
         React.createElement("button", { type: "button", className: styles.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))));

package/dist/DataListActionsMenu-es.js

@@ -1,11 +1,11 @@
 import React__default, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+import { u as useOnKeyDown } from './useOnKeyDown-es.js';
 import { createPortal } from 'react-dom';
 import { tokens } from '@jobber/design';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
 import { e as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-es.js';
 
 var styles = {"menu":"e1ztw2-YxtM-","overlay":"uMoOb93Pf1Q-","spinning":"_0wS9DWCNuj4-"};
@@ -16,10 +16,10 @@ const variants = {
 };
 function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
     const [ref, setRef] = useState();
-    const mounted = useIsMounted_2();
-    useRefocusOnActivator_2(visible);
-    const focusTrapRef = useFocusTrap_2(visible);
-    useOnKeyDown_2(onRequestClose, "Escape");
+    const mounted = useIsMounted();
+    useRefocusOnActivator(visible);
+    const focusTrapRef = useFocusTrap(visible);
+    useOnKeyDown(onRequestClose, "Escape");
     const actionsMenu = (React__default.createElement(AnimatePresence, null, visible && (React__default.createElement("div", { ref: focusTrapRef, onClick: handleClick },
         React__default.createElement(motion.div, { role: "menu", "data-elevation": "elevated", ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
         React__default.createElement("button", { type: "button", className: styles.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))));

package/dist/DataListHeaderTile-cjs.js

@@ -31,7 +31,7 @@ function DataListSortingArrows({ headerKey, order, }) {
 function DataListHeaderTile({ headers, headerKey, }) {
     const { sorting } = DataListContext.useDataListContext();
     const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
-    const optionsListRef = useFocusTrap.useFocusTrap_2(isDropDownOpen);
+    const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
     const dataListHeaderTileRef = React.useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);

package/dist/DataListHeaderTile-es.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useRef } from 'react';
 import classnames from 'classnames';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
 import { D as DataListSortingOptions } from './DataListSortingOptions-es.js';
 import { T as Text } from './Text-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
@@ -29,7 +29,7 @@ function DataListSortingArrows({ headerKey, order, }) {
 function DataListHeaderTile({ headers, headerKey, }) {
     const { sorting } = useDataListContext();
     const [isDropDownOpen, setIsDropDownOpen] = useState(false);
-    const optionsListRef = useFocusTrap_2(isDropDownOpen);
+    const optionsListRef = useFocusTrap(isDropDownOpen);
     const dataListHeaderTileRef = useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);

package/dist/DataListLoadMore-cjs.js

@@ -12,7 +12,7 @@ var styles = {"trigger":"aJIHa8Q-WbY-","loadingMore":"lLYWNAYcURY-","backToTop":
 
 function DataListLoadMoreTrigger() {
     const { onLoadMore } = DataListContext.useDataListContext();
-    const [inViewRef, isInView] = useInView.useInView_2();
+    const [inViewRef, isInView] = useInView.useInView();
     React.useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);

package/dist/DataListLoadMore-es.js

@@ -1,5 +1,5 @@
 import React__default, { useEffect } from 'react';
-import { u as useInView_2 } from './useInView-es.js';
+import { u as useInView } 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';
 import { S as Spinner } from './Spinner-es.js';
@@ -10,7 +10,7 @@ var styles = {"trigger":"aJIHa8Q-WbY-","loadingMore":"lLYWNAYcURY-","backToTop":
 
 function DataListLoadMoreTrigger() {
     const { onLoadMore } = useDataListContext();
-    const [inViewRef, isInView] = useInView_2();
+    const [inViewRef, isInView] = useInView();
     useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);

package/dist/DataListOverflowFade-cjs.js

@@ -9,8 +9,8 @@ const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 var styles = {"fadeContainer":"a-KvXvaVQks-","overflowItems":"faGQ-G8kLN8-","overflowGrid":"TBUIm7AHO68-","overflowTrigger":"FMXUosxE5aQ-","overflowLeft":"kxQNzyS1RsY-","overflowRight":"AXW-X8-zsI8-","spinning":"bPN5dkeOZKI-"};
 
 function DataListOverflowFade({ children }) {
-    const [leftRef, isLeftVisible] = useInView.useInView_2();
-    const [rightRef, isRightVisible] = useInView.useInView_2();
+    const [leftRef, isLeftVisible] = useInView.useInView();
+    const [rightRef, isRightVisible] = useInView.useInView();
     return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
             [styles.overflowLeft]: !isLeftVisible,
             [styles.overflowRight]: !isRightVisible,

package/dist/DataListOverflowFade-es.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { u as useInView_2 } from './useInView-es.js';
+import { u as useInView } from './useInView-es.js';
 import classnames from 'classnames';
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
@@ -7,8 +7,8 @@ const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 var styles = {"fadeContainer":"a-KvXvaVQks-","overflowItems":"faGQ-G8kLN8-","overflowGrid":"TBUIm7AHO68-","overflowTrigger":"FMXUosxE5aQ-","overflowLeft":"kxQNzyS1RsY-","overflowRight":"AXW-X8-zsI8-","spinning":"bPN5dkeOZKI-"};
 
 function DataListOverflowFade({ children }) {
-    const [leftRef, isLeftVisible] = useInView_2();
-    const [rightRef, isRightVisible] = useInView_2();
+    const [leftRef, isLeftVisible] = useInView();
+    const [rightRef, isRightVisible] = useInView();
     return (React__default.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
             [styles.overflowLeft]: !isLeftVisible,
             [styles.overflowRight]: !isRightVisible,

package/dist/DataListSearch-cjs.js

@@ -25,7 +25,7 @@ function InternalDataListSearch() {
     const inputRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
     const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
-    const debouncedSearch = useDebounce.useDebounce_2((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
+    const debouncedSearch = useDebounce.useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;

package/dist/DataListSearch-es.js

@@ -1,7 +1,7 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
-import { u as useDebounce_2 } from './useDebounce-es.js';
+import { u as useDebounce } from './useDebounce-es.js';
 import { InputText } from './InputText/index.mjs';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
@@ -23,7 +23,7 @@ function InternalDataListSearch() {
     const inputRef = useRef(null);
     const [visible, setVisible] = useState(false);
     const { searchComponent, filterComponent, sorting, title } = useDataListContext();
-    const debouncedSearch = useDebounce_2((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);
+    const debouncedSearch = useDebounce((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);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;

package/dist/DataListSortingOptions-cjs.js

@@ -8,8 +8,8 @@ var Icon = require('./Icon-cjs.js');
 var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};
 
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator.useRefocusOnActivator_2(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown_2(() => onClose(), "Escape");
+    useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
+    useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
     React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {

package/dist/DataListSortingOptions-es.js

@@ -1,13 +1,13 @@
 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 { u as useOnKeyDown } from './useOnKeyDown-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
 import { I as Icon } from './Icon-es.js';
 
 var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};
 
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator_2(!optionsListRef.current);
-    useOnKeyDown_2(() => onClose(), "Escape");
+    useRefocusOnActivator(!optionsListRef.current);
+    useOnKeyDown(() => onClose(), "Escape");
     useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {

package/dist/DataTable/test-utilities/index.cjs

@@ -2,8 +2,8 @@
 
 var helpers = require('../../helpers-cjs.js');
 require('../../useResizeObserver-cjs.js');
-require('../../_commonjsHelpers-cjs.js');
 require('react');
+require('../../_commonjsHelpers-cjs.js');
 require('../../throttle-cjs.js');
 require('../../debounce-cjs.js');
 require('../../isObjectLike-cjs.js');

package/dist/DataTable/test-utilities/index.mjs

@@ -1,7 +1,7 @@
 export { m as mockContainerWidth } from '../../helpers-es.js';
 import '../../useResizeObserver-es.js';
-import '../../_commonjsHelpers-es.js';
 import 'react';
+import '../../_commonjsHelpers-es.js';
 import '../../throttle-es.js';
 import '../../debounce-es.js';
 import '../../isObjectLike-es.js';

package/dist/DataTable-cjs.js

@@ -177,7 +177,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
-    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -193,10 +193,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
+            exactWidth <= useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
         pagination && (React.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));

package/dist/DataTable-es.js

@@ -1,7 +1,7 @@
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import classnames from 'classnames';
 import React__default, { useCallback, useMemo } from 'react';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { u as useResizeObserver, B as Breakpoints } from './useResizeObserver-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { Select, Option as SelectOption } from './Select/index.mjs';
@@ -175,7 +175,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
-    const [ref, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const [ref, { exactWidth }] = useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
@@ -191,10 +191,10 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 React__default.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
+            exactWidth <= Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
         pagination && (React__default.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));

package/dist/DatePicker-cjs.js

@@ -9779,7 +9779,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     });
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
     if (smartAutofocus) {
-        useRefocusOnActivator.useRefocusOnActivator_2(open);
+        useRefocusOnActivator.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },