@jobber/components 6.86.2 → 6.86.3

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

@@ -2,8 +2,8 @@
 
 var helpers = require('../../helpers-cjs.js');
 require('../../useResizeObserver-cjs.js');
-require('react');
 require('../../_commonjsHelpers-cjs.js');
+require('react');
 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 'react';
 import '../../_commonjsHelpers-es.js';
+import 'react';
 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();
+    const [ref, { exactWidth }] = useResizeObserver.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.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
+            exactWidth <= useResizeObserver.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, B as Breakpoints } from './useResizeObserver-es.js';
+import { u as useResizeObserver } 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();
+    const [ref, { exactWidth }] = useResizeObserver.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 > Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
+            exactWidth <= useResizeObserver.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(open);
+        useRefocusOnActivator.useRefocusOnActivator_2(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },

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 } from './useRefocusOnActivator-es.js';
+import { u as useRefocusOnActivator_2 } 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(open);
+        useRefocusOnActivator_2(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();
-    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
+    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.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, B as Breakpoints } from './useResizeObserver-es.js';
+import { u as useResizeObserver } 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();
-    const isBelowBreakpoint = exactWidth && exactWidth < 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/FormField-cjs.js

@@ -13,6 +13,10 @@ 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");
@@ -184,7 +188,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear({
+    const showClear = useShowClear_2({
         clearable,
         multiline: type === "textarea",
         focused,

package/dist/FormField-es.js

@@ -11,6 +11,10 @@ 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");
@@ -182,7 +186,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         showMiniLabel,
     });
     const { focused } = useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear({
+    const showClear = useShowClear_2({
         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").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks/dist").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").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks/dist").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(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
         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(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
         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 } from '../useSafeLayoutEffect-es.js';
+import { u as useSafeLayoutEffect_1 } 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(() => {
+    useSafeLayoutEffect_1(() => {
         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(() => {
+    useSafeLayoutEffect_1(() => {
         setTimeout(() => {
             if (inputRef &&
                 inputRef.current instanceof HTMLTextAreaElement &&

package/dist/LightBox-cjs.js

@@ -15,47 +15,63 @@ var Button = require('./Button-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 
-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;
-}
+var 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 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));
+
+(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));
 
 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-"};
 
@@ -90,21 +106,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(open);
+    const lightboxRef = useFocusTrap.useFocusTrap_2(open);
     const selectedThumbnailRef = React.useRef(null);
-    const debouncedHandleNext = useDebounce.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
-    const debouncedHandlePrevious = useDebounce.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
-    const mounted = useIsMounted.useIsMounted();
+    const debouncedHandleNext = useDebounce.useDebounce_2(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce.useDebounce_2(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
+    const mounted = useIsMounted.useIsMounted_2();
     const prevOpen = React.useRef(open);
-    useRefocusOnActivator.useRefocusOnActivator(open);
-    const handleMouseMovement = useDebounce.useDebounce(() => {
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const handleMouseMovement = useDebounce.useDebounce_2(() => {
         setMouseIsStationary(true);
     }, MOVEMENT_DEBOUNCE_DELAY);
-    useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
-    useOnKeyDown.useOnKeyDown(debouncedHandlePrevious, {
+    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
+    useOnKeyDown.useOnKeyDown_2(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    useOnKeyDown.useOnKeyDown(debouncedHandleNext, {
+    useOnKeyDown.useOnKeyDown_2(debouncedHandleNext, {
         key: "ArrowRight",
     });
     React.useEffect(() => {
@@ -192,12 +208,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
 }
 function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints();
+    const { mediumAndUp } = useBreakpoints.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();
+    const { mediumAndUp } = useBreakpoints.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,59 +1,75 @@
-import React__default, { useCallback, useSyncExternalStore, useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import ReactDOM__default from 'react-dom';
-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 { 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 classnames from 'classnames';
-import { u as useDebounce } from './useDebounce-es.js';
+import { u as useDebounce_2 } 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';
 
-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;
-}
+var 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 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));
+
+(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));
 
 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-"};
 
@@ -88,21 +104,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(open);
+    const lightboxRef = useFocusTrap_2(open);
     const selectedThumbnailRef = useRef(null);
-    const debouncedHandleNext = useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
-    const debouncedHandlePrevious = useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
-    const mounted = useIsMounted();
+    const debouncedHandleNext = useDebounce_2(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce_2(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
+    const mounted = useIsMounted_2();
     const prevOpen = useRef(open);
-    useRefocusOnActivator(open);
-    const handleMouseMovement = useDebounce(() => {
+    useRefocusOnActivator_2(open);
+    const handleMouseMovement = useDebounce_2(() => {
         setMouseIsStationary(true);
     }, MOVEMENT_DEBOUNCE_DELAY);
-    useOnKeyDown(handleRequestClose, "Escape");
-    useOnKeyDown(debouncedHandlePrevious, {
+    useOnKeyDown_2(handleRequestClose, "Escape");
+    useOnKeyDown_2(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    useOnKeyDown(debouncedHandleNext, {
+    useOnKeyDown_2(debouncedHandleNext, {
         key: "ArrowRight",
     });
     useEffect(() => {
@@ -190,12 +206,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
 }
 function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints();
+    const { mediumAndUp } = useBreakpoints.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();
+    const { mediumAndUp } = useBreakpoints.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,6 +13,11 @@ 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 {
@@ -27,8 +32,8 @@ function getWindowDimensions() {
     };
 }
 function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
-    React.useEffect(() => {
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
+    (0, react_1.useEffect)(() => {
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
@@ -60,7 +65,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();
+    const { width } = useWindowDimensions_2();
     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;
@@ -68,8 +73,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         [styles.fullWidth]: fullWidth,
     });
     // useRefocusOnActivator must come before useFocusTrap for them both to work
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const menuRef = useFocusTrap.useFocusTrap(visible);
+    useRefocusOnActivator.useRefocusOnActivator_2(visible);
+    const menuRef = useFocusTrap.useFocusTrap_2(visible);
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
         open: visible,
         onOpenChange: setVisible,
@@ -164,7 +169,7 @@ function Action({ label, sectionLabel, icon, iconColor, destructive, UNSAFE_styl
             label)));
 }
 function MenuPortal({ children }) {
-    const mounted = useIsMounted.useIsMounted();
+    const mounted = useIsMounted.useIsMounted_2();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }