@jobber/components 6.86.0 → 6.86.2

package/dist/DatePicker-es.js

@@ -5,7 +5,7 @@ import './index-es.js';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
 import { T as Typography } from './Typography-es.js';
 import { B as Button } from './Button-es.js';
 import { o as omit } from './omit-es.js';
@@ -9759,7 +9759,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     });
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
     if (smartAutofocus) {
-        useRefocusOnActivator_2(open);
+        useRefocusOnActivator(open);
         useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },

package/dist/Disclosure-cjs.js

@@ -12,8 +12,8 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
     var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
-    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
-    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.useResizeObserver.Breakpoints.small;
+    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
     const isTitleString = typeof title === "string";
     const containerClassNames = classnames(styles.details, UNSAFE_className.container);
     const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);

package/dist/Disclosure-es.js

@@ -1,6 +1,6 @@
 import React__default, { useState } from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { u as useResizeObserver, B as Breakpoints } from './useResizeObserver-es.js';
 import { I as Icon } from './Icon-es.js';
 import { T as Typography } from './Typography-es.js';
 
@@ -10,8 +10,8 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
     var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
-    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
-    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
+    const [titleRef, { exactWidth }] = useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < Breakpoints.small;
     const isTitleString = typeof title === "string";
     const containerClassNames = classnames(styles.details, UNSAFE_className.container);
     const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);

package/dist/FormField-cjs.js

@@ -13,10 +13,6 @@ var Spinner = require('./Spinner-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('react-hook-form');
 
-var useShowClear$1 = {};
-
-Object.defineProperty(useShowClear$1, "__esModule", { value: true });
-var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
 function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
     if (multiline && clearable !== "never") {
         throw new Error("Multiline inputs can not be clearable");
@@ -188,7 +184,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear_2({
+    const showClear = useShowClear({
         clearable,
         multiline: type === "textarea",
         focused,

package/dist/FormField-es.js

@@ -11,10 +11,6 @@ import { S as Spinner } from './Spinner-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { useFormContext, useForm, useController } from 'react-hook-form';
 
-var useShowClear$1 = {};
-
-Object.defineProperty(useShowClear$1, "__esModule", { value: true });
-var useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
 function useShowClear({ clearable, multiline, focused, hasValue, readonly, disabled = false, }) {
     if (multiline && clearable !== "never") {
         throw new Error("Multiline inputs can not be clearable");
@@ -186,7 +182,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear_2({
+    const showClear = useShowClear({
         clearable,
         multiline: type === "textarea",
         focused,

package/dist/InputText/InputText.d.ts

@@ -17,7 +17,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: ("small" | "large") | undefined;
     readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks/dist").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
     version?: 1 | undefined;
     onFocus?: ((event?: React.FocusEvent) => void) | undefined;
     onBlur?: ((event?: React.FocusEvent) => void) | undefined;
@@ -51,7 +51,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: ("small" | "large") | undefined;
     readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks/dist").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
     version?: 1 | undefined;
     onFocus?: ((event?: React.FocusEvent) => void) | undefined;
     onBlur?: ((event?: React.FocusEvent) => void) | undefined;

package/dist/InputText/index.cjs

@@ -34,7 +34,7 @@ require('../_setToString-cjs.js');
  */
 function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
     const rowRange = getRowRange(rows);
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (inputRef &&
             inputRef.current instanceof HTMLTextAreaElement &&
             wrapperRef &&
@@ -45,7 +45,7 @@ function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
     // When the consumer passes a new controlled value, we need to recheck the size.
     // The timeout ensures the DOM has a enough time to render the new text before
     // we access the height.
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         setTimeout(() => {
             if (inputRef &&
                 inputRef.current instanceof HTMLTextAreaElement &&

package/dist/InputText/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
-import { u as useSafeLayoutEffect_1 } from '../useSafeLayoutEffect-es.js';
+import { u as useSafeLayoutEffect } from '../useSafeLayoutEffect-es.js';
 import { k as FormField, s as styles, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
 import 'classnames';
 import { _ as __rest } from '../tslib.es6-es.js';
@@ -32,7 +32,7 @@ import '../_setToString-es.js';
  */
 function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
     const rowRange = getRowRange(rows);
-    useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect(() => {
         if (inputRef &&
             inputRef.current instanceof HTMLTextAreaElement &&
             wrapperRef &&
@@ -43,7 +43,7 @@ function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
     // When the consumer passes a new controlled value, we need to recheck the size.
     // The timeout ensures the DOM has a enough time to render the new text before
     // we access the height.
-    useSafeLayoutEffect_1(() => {
+    useSafeLayoutEffect(() => {
         setTimeout(() => {
             if (inputRef &&
                 inputRef.current instanceof HTMLTextAreaElement &&

package/dist/LightBox-cjs.js

@@ -15,63 +15,47 @@ var Button = require('./Button-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 
-var useBreakpoints = {};
-
-var useMediaQuery = {};
-
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.mediaQueryStore = void 0;
-	exports.useMediaQuery = useMediaQuery;
-	const react_1 = React;
-	exports.mediaQueryStore = {
-	    subscribe(onChange, query) {
-	        const matchMedia = window.matchMedia(query);
-	        matchMedia.addEventListener("change", onChange);
-	        return () => {
-	            matchMedia.removeEventListener("change", onChange);
-	        };
-	    },
-	    getSnapshot(query) {
-	        return () => window.matchMedia(query).matches;
-	    },
-	};
-	function useMediaQuery(query) {
-	    const subscribeMediaQuery = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
-	    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
-	    return matches;
-	} 
-} (useMediaQuery));
+const mediaQueryStore = {
+    subscribe(onChange, query) {
+        const matchMedia = window.matchMedia(query);
+        matchMedia.addEventListener("change", onChange);
+        return () => {
+            matchMedia.removeEventListener("change", onChange);
+        };
+    },
+    getSnapshot(query) {
+        return () => window.matchMedia(query).matches;
+    },
+};
+function useMediaQuery(query) {
+    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
 
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.BREAKPOINT_SIZES = void 0;
-	exports.useBreakpoints = useBreakpoints;
-	const useMediaQuery_1 = useMediaQuery;
-	exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
-	/**
-	 * Hook equivalent of CSS media queries with our
-	 * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
-	 */
-	function useBreakpoints() {
-	    const { sm, md, lg, xl } = exports.BREAKPOINT_SIZES;
-	    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(max-width: ${sm - 1}px)`);
-	    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${sm}px)`);
-	    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${md}px)`);
-	    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${lg}px)`);
-	    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${xl}px)`);
-	    return {
-	        smallAndUp,
-	        mediumAndUp,
-	        largeAndUp,
-	        extraLargeAndUp,
-	        extraSmallOnly,
-	        smallOnly: smallAndUp && !mediumAndUp,
-	        mediumOnly: mediumAndUp && !largeAndUp,
-	        largeOnly: largeAndUp && !extraLargeAndUp,
-	    };
-	} 
-} (useBreakpoints));
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
+ */
+function useBreakpoints() {
+    const { sm, md, lg, xl } = BREAKPOINT_SIZES;
+    const extraSmallOnly = useMediaQuery(`(max-width: ${sm - 1}px)`);
+    const smallAndUp = useMediaQuery(`(min-width: ${sm}px)`);
+    const mediumAndUp = useMediaQuery(`(min-width: ${md}px)`);
+    const largeAndUp = useMediaQuery(`(min-width: ${lg}px)`);
+    const extraLargeAndUp = useMediaQuery(`(min-width: ${xl}px)`);
+    return {
+        smallAndUp,
+        mediumAndUp,
+        largeAndUp,
+        extraLargeAndUp,
+        extraSmallOnly,
+        smallOnly: smallAndUp && !mediumAndUp,
+        mediumOnly: mediumAndUp && !largeAndUp,
+        largeOnly: largeAndUp && !extraLargeAndUp,
+    };
+}
 
 var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
@@ -106,21 +90,21 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
     const [direction, setDirection] = React.useState(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
-    const lightboxRef = useFocusTrap.useFocusTrap_2(open);
+    const lightboxRef = useFocusTrap.useFocusTrap(open);
     const selectedThumbnailRef = React.useRef(null);
-    const debouncedHandleNext = useDebounce.useDebounce_2(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
-    const debouncedHandlePrevious = useDebounce.useDebounce_2(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
-    const mounted = useIsMounted.useIsMounted_2();
+    const debouncedHandleNext = useDebounce.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
+    const mounted = useIsMounted.useIsMounted();
     const prevOpen = React.useRef(open);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const handleMouseMovement = useDebounce.useDebounce_2(() => {
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const handleMouseMovement = useDebounce.useDebounce(() => {
         setMouseIsStationary(true);
     }, MOVEMENT_DEBOUNCE_DELAY);
-    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
-    useOnKeyDown.useOnKeyDown_2(debouncedHandlePrevious, {
+    useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
+    useOnKeyDown.useOnKeyDown(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    useOnKeyDown.useOnKeyDown_2(debouncedHandleNext, {
+    useOnKeyDown.useOnKeyDown(debouncedHandleNext, {
         key: "ArrowRight",
     });
     React.useEffect(() => {
@@ -208,12 +192,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
 }
 function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    const { mediumAndUp } = useBreakpoints();
     return (React.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
         React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    const { mediumAndUp } = useBreakpoints();
     return (React.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
         React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }

package/dist/LightBox-es.js

@@ -1,75 +1,59 @@
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useCallback, useSyncExternalStore, useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import ReactDOM__default from 'react-dom';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+import { u as useOnKeyDown } from './useOnKeyDown-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
 import classnames from 'classnames';
-import { u as useDebounce_2 } from './useDebounce-es.js';
+import { u as useDebounce } from './useDebounce-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { H as Heading } from './Heading-es.js';
 import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
 
-var useBreakpoints = {};
-
-var useMediaQuery = {};
-
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.mediaQueryStore = void 0;
-	exports.useMediaQuery = useMediaQuery;
-	const react_1 = React__default;
-	exports.mediaQueryStore = {
-	    subscribe(onChange, query) {
-	        const matchMedia = window.matchMedia(query);
-	        matchMedia.addEventListener("change", onChange);
-	        return () => {
-	            matchMedia.removeEventListener("change", onChange);
-	        };
-	    },
-	    getSnapshot(query) {
-	        return () => window.matchMedia(query).matches;
-	    },
-	};
-	function useMediaQuery(query) {
-	    const subscribeMediaQuery = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
-	    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
-	    return matches;
-	} 
-} (useMediaQuery));
+const mediaQueryStore = {
+    subscribe(onChange, query) {
+        const matchMedia = window.matchMedia(query);
+        matchMedia.addEventListener("change", onChange);
+        return () => {
+            matchMedia.removeEventListener("change", onChange);
+        };
+    },
+    getSnapshot(query) {
+        return () => window.matchMedia(query).matches;
+    },
+};
+function useMediaQuery(query) {
+    const subscribeMediaQuery = useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
 
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.BREAKPOINT_SIZES = void 0;
-	exports.useBreakpoints = useBreakpoints;
-	const useMediaQuery_1 = useMediaQuery;
-	exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
-	/**
-	 * Hook equivalent of CSS media queries with our
-	 * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
-	 */
-	function useBreakpoints() {
-	    const { sm, md, lg, xl } = exports.BREAKPOINT_SIZES;
-	    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(max-width: ${sm - 1}px)`);
-	    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${sm}px)`);
-	    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${md}px)`);
-	    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${lg}px)`);
-	    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${xl}px)`);
-	    return {
-	        smallAndUp,
-	        mediumAndUp,
-	        largeAndUp,
-	        extraLargeAndUp,
-	        extraSmallOnly,
-	        smallOnly: smallAndUp && !mediumAndUp,
-	        mediumOnly: mediumAndUp && !largeAndUp,
-	        largeOnly: largeAndUp && !extraLargeAndUp,
-	    };
-	} 
-} (useBreakpoints));
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
+ */
+function useBreakpoints() {
+    const { sm, md, lg, xl } = BREAKPOINT_SIZES;
+    const extraSmallOnly = useMediaQuery(`(max-width: ${sm - 1}px)`);
+    const smallAndUp = useMediaQuery(`(min-width: ${sm}px)`);
+    const mediumAndUp = useMediaQuery(`(min-width: ${md}px)`);
+    const largeAndUp = useMediaQuery(`(min-width: ${lg}px)`);
+    const extraLargeAndUp = useMediaQuery(`(min-width: ${xl}px)`);
+    return {
+        smallAndUp,
+        mediumAndUp,
+        largeAndUp,
+        extraLargeAndUp,
+        extraSmallOnly,
+        smallOnly: smallAndUp && !mediumAndUp,
+        mediumOnly: mediumAndUp && !largeAndUp,
+        largeOnly: largeAndUp && !extraLargeAndUp,
+    };
+}
 
 var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
@@ -104,21 +88,21 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
     const [direction, setDirection] = useState(0);
     const [mouseIsStationary, setMouseIsStationary] = useState(true);
-    const lightboxRef = useFocusTrap_2(open);
+    const lightboxRef = useFocusTrap(open);
     const selectedThumbnailRef = useRef(null);
-    const debouncedHandleNext = useDebounce_2(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
-    const debouncedHandlePrevious = useDebounce_2(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
-    const mounted = useIsMounted_2();
+    const debouncedHandleNext = useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
+    const mounted = useIsMounted();
     const prevOpen = useRef(open);
-    useRefocusOnActivator_2(open);
-    const handleMouseMovement = useDebounce_2(() => {
+    useRefocusOnActivator(open);
+    const handleMouseMovement = useDebounce(() => {
         setMouseIsStationary(true);
     }, MOVEMENT_DEBOUNCE_DELAY);
-    useOnKeyDown_2(handleRequestClose, "Escape");
-    useOnKeyDown_2(debouncedHandlePrevious, {
+    useOnKeyDown(handleRequestClose, "Escape");
+    useOnKeyDown(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    useOnKeyDown_2(debouncedHandleNext, {
+    useOnKeyDown(debouncedHandleNext, {
         key: "ArrowRight",
     });
     useEffect(() => {
@@ -206,12 +190,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
 }
 function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    const { mediumAndUp } = useBreakpoints();
     return (React__default.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
         React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    const { mediumAndUp } = useBreakpoints();
     return (React__default.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
         React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }

package/dist/Menu-cjs.js

@@ -13,11 +13,6 @@ var Icon = require('./Icon-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var maxHeight = require('./maxHeight-cjs.js');
 
-var useWindowDimensions$1 = {};
-
-Object.defineProperty(useWindowDimensions$1, "__esModule", { value: true });
-var useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
-const react_1 = React;
 function getWindowDimensions() {
     if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
         return {
@@ -32,8 +27,8 @@ function getWindowDimensions() {
     };
 }
 function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
-    (0, react_1.useEffect)(() => {
+    const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
+    React.useEffect(() => {
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
@@ -65,7 +60,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const [visible, setVisible] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
-    const { width } = useWindowDimensions_2();
+    const { width } = useWindowDimensions();
     const buttonID = React.useId();
     const menuID = React.useId();
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
@@ -73,8 +68,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         [styles.fullWidth]: fullWidth,
     });
     // useRefocusOnActivator must come before useFocusTrap for them both to work
-    useRefocusOnActivator.useRefocusOnActivator_2(visible);
-    const menuRef = useFocusTrap.useFocusTrap_2(visible);
+    useRefocusOnActivator.useRefocusOnActivator(visible);
+    const menuRef = useFocusTrap.useFocusTrap(visible);
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
         open: visible,
         onOpenChange: setVisible,
@@ -169,7 +164,7 @@ function Action({ label, sectionLabel, icon, iconColor, destructive, UNSAFE_styl
             label)));
 }
 function MenuPortal({ children }) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = useIsMounted.useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/Menu-es.js

@@ -1,21 +1,16 @@
-import React__default, { useState, useId, useRef } from 'react';
+import React__default, { useState, useEffect, useId, useRef } from 'react';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useFloating, c as useDismiss, d as useInteractions, F as FloatingPortal, o as offset, f as flip, e as size, b as autoUpdate } from './floating-ui.react-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useRefocusOnActivator } from './useRefocusOnActivator-es.js';
+import { u as useFloating, a as useDismiss, b as useInteractions, F as FloatingPortal, o as offset, f as flip, s as size, c as autoUpdate } from './floating-ui.react-es.js';
+import { u as useFocusTrap } from './useFocusTrap-es.js';
+import { u as useIsMounted } from './useIsMounted-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
 import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';
 
-var useWindowDimensions$1 = {};
-
-Object.defineProperty(useWindowDimensions$1, "__esModule", { value: true });
-var useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
-const react_1 = React__default;
 function getWindowDimensions() {
     if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
         return {
@@ -30,8 +25,8 @@ function getWindowDimensions() {
     };
 }
 function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
-    (0, react_1.useEffect)(() => {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
@@ -63,7 +58,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const [visible, setVisible] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
-    const { width } = useWindowDimensions_2();
+    const { width } = useWindowDimensions();
     const buttonID = useId();
     const menuID = useId();
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
@@ -71,8 +66,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         [styles.fullWidth]: fullWidth,
     });
     // useRefocusOnActivator must come before useFocusTrap for them both to work
-    useRefocusOnActivator_2(visible);
-    const menuRef = useFocusTrap_2(visible);
+    useRefocusOnActivator(visible);
+    const menuRef = useFocusTrap(visible);
     const { refs, floatingStyles, context } = useFloating({
         open: visible,
         onOpenChange: setVisible,
@@ -167,7 +162,7 @@ function Action({ label, sectionLabel, icon, iconColor, destructive, UNSAFE_styl
             label)));
 }
 function MenuPortal({ children }) {
-    const mounted = useIsMounted_2();
+    const mounted = useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/Modal/index.cjs

@@ -35,9 +35,9 @@ var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKIT
 
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const modalRef = useFocusTrap.useFocusTrap_2(open);
-    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const modalRef = useFocusTrap.useFocusTrap(open);
+    useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
     const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
         React.createElement(framerMotion.motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React.createElement(framerMotion.motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {