@jobber/components 6.86.1 → 6.86.3

package/dist/Autocomplete/index.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var floatingUi_react = require('../floating-ui.react-cjs.js');
 var classnames = require('classnames');
 var design = require('@jobber/design');
-var hooks = require('@jobber/hooks');
+var useDebounce = require('../useDebounce-cjs.js');
 var maxHeight = require('../maxHeight-cjs.js');
 var Heading = require('../Heading-cjs.js');
 var Text = require('../Text-cjs.js');
@@ -14,7 +14,6 @@ var InputText_index = require('../InputText/index.cjs');
 var Glimmer = require('../Glimmer-cjs.js');
 var FormField = require('../FormField-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
-var useDebounce = require('../useDebounce-cjs.js');
 var useIsMounted = require('../useIsMounted-cjs.js');
 var useSafeLayoutEffect = require('../useSafeLayoutEffect-cjs.js');
 var useOnKeyDown = require('../useOnKeyDown-cjs.js');
@@ -228,12 +227,12 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
-    const getOptionLabelPropRef = hooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
+    const getOptionLabelPropRef = useDebounce.useCallbackRef_2((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = React.useCallback((opt) => {
         const maybe = getOptionLabelPropRef(opt);
         return maybe !== null && maybe !== void 0 ? maybe : opt.label;
     }, [getOptionLabelPropRef]);
-    const isOptionEqualToValueRef = hooks.useCallbackRef((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
+    const isOptionEqualToValueRef = useDebounce.useCallbackRef_2((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
     const equals = React.useCallback((a, b) => {
         const custom = isOptionEqualToValueRef(a, b);
         return custom != null ? custom : getOptionLabel(a) === getOptionLabel(b);
@@ -253,7 +252,7 @@ function useAutocomplete(props) {
     const persistentsHeaders = flatInitial.persistentsHeaders;
     const persistentsFooters = flatInitial.persistentsFooters;
     // Stable wrappers for function props
-    const inputEqualsOptionRef = hooks.useCallbackRef((text, o) => {
+    const inputEqualsOptionRef = useDebounce.useCallbackRef_2((text, o) => {
         const fn = props.inputEqualsOption;
         return fn ? fn(text, o) : undefined;
     });
@@ -267,7 +266,7 @@ function useAutocomplete(props) {
     }, [optionItems, inputEquals, inputValue]);
     const lastInputWasUser = React.useRef(false);
     const [debouncedInputValue, setDebouncedInputValue] = React.useState(inputValue);
-    const debouncedSetter = hooks.useDebounce(setDebouncedInputValue, debounceMs);
+    const debouncedSetter = useDebounce.useDebounce_2(setDebouncedInputValue, debounceMs);
     React.useEffect(() => {
         if (debounceMs === 0) {
             setDebouncedInputValue(inputValue);
@@ -275,7 +274,7 @@ function useAutocomplete(props) {
         }
         debouncedSetter(inputValue);
     }, [inputValue, debounceMs, debouncedSetter]);
-    const filterOptionsRef = hooks.useCallbackRef((opts, term) => {
+    const filterOptionsRef = useDebounce.useCallbackRef_2((opts, term) => {
         const fn = (typeof props.filterOptions === "function"
             ? props.filterOptions
             : undefined) || undefined;
@@ -1023,7 +1022,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(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = floatingUi_react.autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -1067,7 +1066,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted.useIsMounted();
+    const mounted = useIsMounted.useIsMounted_2();
     const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React.createElement(floatingUi_react.FloatingPortal, null, menu) : menu;
 }
@@ -1141,13 +1140,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((event) => {
+    useOnKeyDown.useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown.useOnKeyDown((event) => {
+    useOnKeyDown.useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown.useOnKeyDown((event) => {
+    useOnKeyDown.useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Select);
     }, "Enter");
 }
@@ -1259,7 +1258,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(updateSearch, debounceRate);
+    const delayedSearch = useDebounce.useDebounce_2(updateSearch, debounceRate);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         delayedSearch();

package/dist/Autocomplete/index.mjs

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-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 { 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 classnames from 'classnames';
 import { tokens } from '@jobber/design';
-import { useCallbackRef, useDebounce } from '@jobber/hooks';
+import { a as useCallbackRef_2, u as useDebounce_2 } from '../useDebounce-es.js';
 import { c as calculateMaxHeight } from '../maxHeight-es.js';
 import { H as Heading } from '../Heading-es.js';
 import { T as Text } from '../Text-es.js';
@@ -12,10 +12,9 @@ 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$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 { 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 'react-dom';
 import 'react-hook-form';
 import 'framer-motion';
@@ -226,12 +225,12 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
-    const getOptionLabelPropRef = useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
+    const getOptionLabelPropRef = useCallbackRef_2((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = useCallback((opt) => {
         const maybe = getOptionLabelPropRef(opt);
         return maybe !== null && maybe !== void 0 ? maybe : opt.label;
     }, [getOptionLabelPropRef]);
-    const isOptionEqualToValueRef = useCallbackRef((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
+    const isOptionEqualToValueRef = useCallbackRef_2((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
     const equals = useCallback((a, b) => {
         const custom = isOptionEqualToValueRef(a, b);
         return custom != null ? custom : getOptionLabel(a) === getOptionLabel(b);
@@ -251,7 +250,7 @@ function useAutocomplete(props) {
     const persistentsHeaders = flatInitial.persistentsHeaders;
     const persistentsFooters = flatInitial.persistentsFooters;
     // Stable wrappers for function props
-    const inputEqualsOptionRef = useCallbackRef((text, o) => {
+    const inputEqualsOptionRef = useCallbackRef_2((text, o) => {
         const fn = props.inputEqualsOption;
         return fn ? fn(text, o) : undefined;
     });
@@ -265,7 +264,7 @@ function useAutocomplete(props) {
     }, [optionItems, inputEquals, inputValue]);
     const lastInputWasUser = useRef(false);
     const [debouncedInputValue, setDebouncedInputValue] = useState(inputValue);
-    const debouncedSetter = useDebounce(setDebouncedInputValue, debounceMs);
+    const debouncedSetter = useDebounce_2(setDebouncedInputValue, debounceMs);
     useEffect(() => {
         if (debounceMs === 0) {
             setDebouncedInputValue(inputValue);
@@ -273,7 +272,7 @@ function useAutocomplete(props) {
         }
         debouncedSetter(inputValue);
     }, [inputValue, debounceMs, debouncedSetter]);
-    const filterOptionsRef = useCallbackRef((opts, term) => {
+    const filterOptionsRef = useCallbackRef_2((opts, term) => {
         const fn = (typeof props.filterOptions === "function"
             ? props.filterOptions
             : undefined) || undefined;
@@ -1021,7 +1020,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(() => {
         if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
             const cleanup = autoUpdate(attachTo, refs.floating.current, update);
             return cleanup;
@@ -1065,7 +1064,7 @@ function useAutocompleteMenu({ attachTo, }) {
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted();
+    const mounted = useIsMounted_2();
     const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
     return mounted.current ? React__default.createElement(FloatingPortal, null, menu) : menu;
 }
@@ -1139,13 +1138,13 @@ var KeyboardAction;
  * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
  */
 function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
-    useOnKeyDown((event) => {
+    useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Next);
     }, "ArrowDown");
-    useOnKeyDown((event) => {
+    useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Previous);
     }, "ArrowUp");
-    useOnKeyDown((event) => {
+    useOnKeyDown_2((event) => {
         onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Select);
     }, "Enter");
 }
@@ -1257,7 +1256,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$1(updateSearch, debounceRate);
+    const delayedSearch = useDebounce_2(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({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.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({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.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();
-    const [headingRef, headingFullyVisible] = useInView.useInView();
+    const [labelRef, labelFullyVisible] = useInView.useInView_2();
+    const [headingRef, headingFullyVisible] = useInView.useInView_2();
     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 } from './useInView-es.js';
+import { u as useInView_2 } 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();
-    const [headingRef, headingFullyVisible] = useInView();
+    const [labelRef, labelFullyVisible] = useInView_2();
+    const [headingRef, headingFullyVisible] = useInView_2();
     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((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
+    const searchCallback = useDebounce.useDebounce_2((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 } from './useDebounce-es.js';
+import { u as useDebounce_2 } 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((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
+    const searchCallback = useDebounce_2((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(open);
-    const floatingRef = useFocusTrap.useFocusTrap(open);
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const floatingRef = useFocusTrap.useFocusTrap_2(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, 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 { 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 { 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 } from './useRefocusOnActivator-es.js';
-import { u as useFocusTrap } from './useFocusTrap-es.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { u as useFocusTrap_2 } 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(open);
-    const floatingRef = useFocusTrap(open);
+    useRefocusOnActivator_2(open);
+    const floatingRef = useFocusTrap_2(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();
+    const [inViewRef, isInView] = useInView.useInView_2();
     React.useEffect(() => {
         isInView && onLoadMore();
     }, [isInView]);

package/dist/ComboboxLoadMore-es.js

@@ -1,10 +1,10 @@
 import React__default, { useEffect } from 'react';
-import { u as useInView } from './useInView-es.js';
+import { u as useInView_2 } from './useInView-es.js';
 
 var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
 
 function ComboboxLoadMore({ onLoadMore }) {
-    const [inViewRef, isInView] = useInView();
+    const [inViewRef, isInView] = useInView_2();
     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(handleKeyboardShortcut, ["Escape", "Enter"]);
+    useOnKeyDown.useOnKeyDown_2(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 } from './useOnKeyDown-es.js';
+import { u as useOnKeyDown_2 } 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(handleKeyboardShortcut, ["Escape", "Enter"]);
+    useOnKeyDown_2(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.Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+function ContentBlock({ children, maxWidth = useResizeObserver.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 { B as Breakpoints } from './useResizeObserver-es.js';
+import { u as useResizeObserver } 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 = 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__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();
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
-    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
+    const mounted = useIsMounted.useIsMounted_2();
+    useRefocusOnActivator.useRefocusOnActivator_2(visible);
+    const focusTrapRef = useFocusTrap.useFocusTrap_2(visible);
+    useOnKeyDown.useOnKeyDown_2(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 } from './useFocusTrap-es.js';
-import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
-import { u as useOnKeyDown } from './useOnKeyDown-es.js';
+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 { createPortal } from 'react-dom';
 import { tokens } from '@jobber/design';
-import { u as useIsMounted } from './useIsMounted-es.js';
+import { u as useIsMounted_2 } 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();
-    useRefocusOnActivator(visible);
-    const focusTrapRef = useFocusTrap(visible);
-    useOnKeyDown(onRequestClose, "Escape");
+    const mounted = useIsMounted_2();
+    useRefocusOnActivator_2(visible);
+    const focusTrapRef = useFocusTrap_2(visible);
+    useOnKeyDown_2(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(isDropDownOpen);
+    const optionsListRef = useFocusTrap.useFocusTrap_2(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 } from './useFocusTrap-es.js';
+import { u as useFocusTrap_2 } 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(isDropDownOpen);
+    const optionsListRef = useFocusTrap_2(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();
+    const [inViewRef, isInView] = useInView.useInView_2();
     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 } from './useInView-es.js';
+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';
 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();
+    const [inViewRef, isInView] = useInView_2();
     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();
-    const [rightRef, isRightVisible] = useInView.useInView();
+    const [leftRef, isLeftVisible] = useInView.useInView_2();
+    const [rightRef, isRightVisible] = useInView.useInView_2();
     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 } from './useInView-es.js';
+import { u as useInView_2 } 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();
-    const [rightRef, isRightVisible] = useInView();
+    const [leftRef, isLeftVisible] = useInView_2();
+    const [rightRef, isRightVisible] = useInView_2();
     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((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_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);
     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 } from './useDebounce-es.js';
+import { u as useDebounce_2 } 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((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_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);
     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(!optionsListRef.current);
-    useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
+    useRefocusOnActivator.useRefocusOnActivator_2(!optionsListRef.current);
+    useOnKeyDown.useOnKeyDown_2(() => 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 } from './useOnKeyDown-es.js';
-import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+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';
 
 var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};
 
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
-    useRefocusOnActivator(!optionsListRef.current);
-    useOnKeyDown(() => onClose(), "Escape");
+    useRefocusOnActivator_2(!optionsListRef.current);
+    useOnKeyDown_2(() => onClose(), "Escape");
     useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {