@jobber/components 6.90.4 → 6.91.0

package/dist/InputPhoneNumber/index.cjs

@@ -7,6 +7,7 @@ var FormField = require('../FormField-cjs.js');
 var reactHookForm = require('react-hook-form');
 require('../Button-cjs.js');
 require('@jobber/design');
+require('@jobber/hooks');
 require('framer-motion');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');

package/dist/InputPhoneNumber/index.mjs

@@ -5,6 +5,7 @@ import { j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as For
 import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
 import '@jobber/design';
+import '@jobber/hooks';
 import 'framer-motion';
 import '../Icon-es.js';
 import '../Text-es.js';

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect = require('../useSafeLayoutEffect-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
 var tslib_es6 = require('../tslib.es6-cjs.js');
@@ -34,7 +34,7 @@ require('../_setToString-cjs.js');
  */
 function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
     const rowRange = getRowRange(rows);
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+    jobberHooks.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(() => {
+    jobberHooks.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 { useSafeLayoutEffect } from '@jobber/hooks';
 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/InputTime/index.cjs

@@ -9,6 +9,7 @@ require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
 var omit = require('../omit-cjs.js');
+require('@jobber/hooks');
 require('framer-motion');
 require('../_commonjsHelpers-cjs.js');
 require('../isObjectLike-cjs.js');

package/dist/InputTime/index.mjs

@@ -1,12 +1,13 @@
 import React__default, { useState, useCallback, useEffect, useRef, useId } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
-import { a as debounce } from '../debounce-es.js';
+import { d as debounce } from '../debounce-es.js';
 import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
 import { o as omit } from '../omit-es.js';
+import '@jobber/hooks';
 import 'framer-motion';
 import '../_commonjsHelpers-es.js';
 import '../isObjectLike-es.js';

package/dist/InternalChipDismissible-cjs.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var useScrollToActive = require('./useScrollToActive-cjs.js');
 require('./isObjectLike-cjs.js');
+require('@jobber/hooks');
 require('@jobber/design');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');

package/dist/InternalChipDismissible-es.js

@@ -1,6 +1,7 @@
 import React__default, { useEffect } from 'react';
 import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-es.js';
 import './isObjectLike-es.js';
+import '@jobber/hooks';
 import '@jobber/design';
 import classnames from 'classnames';
 import { F as FloatingPortal } from './floating-ui.react-es.js';

package/dist/LightBox/index.cjs

@@ -4,13 +4,8 @@ var LightBox = require('../LightBox-cjs.js');
 require('react');
 require('framer-motion');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
-require('../useOnKeyDown-cjs.js');
-require('../useFocusTrap-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('@jobber/hooks');
 require('classnames');
-require('../useDebounce-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/LightBox/index.mjs

@@ -2,13 +2,8 @@ export { L as LightBox } from '../LightBox-es.js';
 import 'react';
 import 'framer-motion';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
-import '../useOnKeyDown-es.js';
-import '../useFocusTrap-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '@jobber/hooks';
 import 'classnames';
-import '../useDebounce-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/LightBox-cjs.js

@@ -3,76 +3,14 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
-var useOnKeyDown = require('./useOnKeyDown-cjs.js');
-var useFocusTrap = require('./useFocusTrap-cjs.js');
-var useIsMounted = require('./useIsMounted-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
-var useDebounce = require('./useDebounce-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Text = require('./Text-cjs.js');
 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));
-
-(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-"};
 
 const swipeConfidenceThreshold = 10000;
@@ -106,21 +44,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 = jobberHooks.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 = jobberHooks.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = jobberHooks.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
+    const mounted = jobberHooks.useIsMounted();
     const prevOpen = React.useRef(open);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const handleMouseMovement = useDebounce.useDebounce_2(() => {
+    jobberHooks.useRefocusOnActivator(open);
+    const handleMouseMovement = jobberHooks.useDebounce(() => {
         setMouseIsStationary(true);
     }, MOVEMENT_DEBOUNCE_DELAY);
-    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
-    useOnKeyDown.useOnKeyDown_2(debouncedHandlePrevious, {
+    jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
+    jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
         key: "ArrowLeft",
     });
-    useOnKeyDown.useOnKeyDown_2(debouncedHandleNext, {
+    jobberHooks.useOnKeyDown(debouncedHandleNext, {
         key: "ArrowRight",
     });
     React.useEffect(() => {
@@ -208,12 +146,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
 }
 function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    const { mediumAndUp } = jobberHooks.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 } = jobberHooks.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,76 +1,14 @@
 import React__default, { 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 { useFocusTrap, useDebounce, useIsMounted, useRefocusOnActivator, useOnKeyDown, useBreakpoints } from '@jobber/hooks';
 import classnames from 'classnames';
-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';
 
-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));
-
-(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-"};
 
 const swipeConfidenceThreshold = 10000;
@@ -104,21 +42,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 +144,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/index.cjs

@@ -4,12 +4,9 @@ var Menu = require('../Menu-cjs.js');
 require('react');
 require('classnames');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
+require('@jobber/hooks');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useFocusTrap-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');

package/dist/Menu/index.mjs

@@ -2,12 +2,9 @@ export { M as Menu } from '../Menu-es.js';
 import 'react';
 import 'classnames';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
+import '@jobber/hooks';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useFocusTrap-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';

package/dist/Menu-cjs.js

@@ -3,46 +3,14 @@
 var React = require('react');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var useFocusTrap = require('./useFocusTrap-cjs.js');
-var useIsMounted = require('./useIsMounted-cjs.js');
 var Button = require('./Button-cjs.js');
 var Typography = require('./Typography-cjs.js');
 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 {
-            width: 0,
-            height: 0,
-        };
-    }
-    const { innerWidth: width, innerHeight: height } = window;
-    return {
-        width,
-        height,
-    };
-}
-function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
-    (0, react_1.useEffect)(() => {
-        function handleResize() {
-            setWindowDimensions(getWindowDimensions());
-        }
-        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
-        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowDimensions;
-}
-
 var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
@@ -65,7 +33,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 } = jobberHooks.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 +41,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);
+    jobberHooks.useRefocusOnActivator(visible);
+    const menuRef = jobberHooks.useFocusTrap(visible);
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
         open: visible,
         onOpenChange: setVisible,
@@ -169,7 +137,7 @@ function Action({ label, sectionLabel, icon, iconColor, destructive, UNSAFE_styl
             label)));
 }
 function MenuPortal({ children }) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = jobberHooks.useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/Menu-es.js

@@ -1,46 +1,14 @@
 import React__default, { useState, 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 { useWindowDimensions, useRefocusOnActivator, useFocusTrap, useIsMounted } from '@jobber/hooks';
+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 { 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 {
-            width: 0,
-            height: 0,
-        };
-    }
-    const { innerWidth: width, innerHeight: height } = window;
-    return {
-        width,
-        height,
-    };
-}
-function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
-    (0, react_1.useEffect)(() => {
-        function handleResize() {
-            setWindowDimensions(getWindowDimensions());
-        }
-        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
-        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowDimensions;
-}
-
 var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
@@ -63,7 +31,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 +39,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 +135,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

@@ -4,9 +4,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useRefocusOnActivator = require('../useRefocusOnActivator-cjs.js');
-var useOnKeyDown = require('../useOnKeyDown-cjs.js');
-var useFocusTrap = require('../useFocusTrap-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Heading = require('../Heading-cjs.js');
 var Button = require('../Button-cjs.js');
 var ButtonDismiss = require('../ButtonDismiss-cjs.js');
@@ -35,9 +33,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");
+    jobberHooks.useRefocusOnActivator(open);
+    const modalRef = jobberHooks.useFocusTrap(open);
+    jobberHooks.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: {