@jobber/components 6.85.2 → 6.85.3-CLEANUPre-6d043f4.28

package/dist/Menu/index.cjs

@@ -4,12 +4,10 @@ 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/jsx-runtime');
 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,10 @@ 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/jsx-runtime';
 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/Modal.rebuilt.d.ts

@@ -7,5 +7,5 @@ export declare function ModalActivator({ children }: PropsWithChildren): React.J
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-export declare function ModalOverlay(): React.JSX.Element;
+export declare function ModalOverlay({ children }: PropsWithChildren): React.JSX.Element;
 export declare function ModalContent({ children }: ModalContainerProps): React.JSX.Element;

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');
@@ -20,6 +18,7 @@ require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../_commonjsHelpers-cjs.js');
+require('react/jsx-runtime');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
@@ -35,9 +34,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: {
@@ -92,14 +91,13 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         },
         open: open,
     });
-    const click = floatingUi_react.useClick(floatingContext);
     const dismiss = floatingUi_react.useDismiss(floatingContext, {
-        outsidePressEvent: "click",
+        outsidePressEvent: "pointerdown",
         escapeKey: true,
         bubbles: false,
     });
     const role = floatingUi_react.useRole(floatingContext);
-    const { getFloatingProps } = floatingUi_react.useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = floatingUi_react.useInteractions([dismiss, role]);
     const parentId = floatingUi_react.useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -192,25 +190,30 @@ function ModalActivator({ children }) {
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-function ModalOverlay() {
-    const { onRequestClose } = useModalContext();
-    const { overlayBackground } = useModalStyles();
-    return (React.createElement(framerMotion.motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
+function ModalOverlay({ children }) {
+    const { overlay, overlayBackground } = useModalStyles();
+    const { floatingNodeId } = useModalContext();
+    return (React.createElement(floatingUi_react.FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
+        React.createElement(framerMotion.motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        children));
 }
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
-    const { modal, overlay } = useModalStyles(size);
+    const { modal } = useModalStyles(size);
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
             React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
-                React.createElement(floatingUi_react.FloatingOverlay, { className: overlay },
-                    React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
-                            React.createElement(ModalOverlay, null),
-                            React.createElement(framerMotion.motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                } }, children))))))))));
+                React.createElement(ModalOverlay, null,
+                    React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, order: ["floating", "content"] },
+                        React.createElement(framerMotion.motion.div, { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            } },
+                            React.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
+                                role: "dialog",
+                                className: modal,
+                                "aria-labelledby": modalLabelledBy,
+                            })), children))))))))));
 }
 
 function Modal(props) {

package/dist/Modal/index.mjs

@@ -2,14 +2,12 @@ import React__default, { useRef, createContext, useContext } from 'react';
 import ReactDOM__default from 'react-dom';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-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 { useRefocusOnActivator, useFocusTrap, useOnKeyDown } from '@jobber/hooks';
 import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { h as useFloatingNodeId, u as useFloating, m as useClick, c as useDismiss, n as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, p as FloatingOverlay, q as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { h as useFloatingNodeId, u as useFloating, a as useDismiss, m as useRole, b as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingFocusManager, p as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
@@ -18,6 +16,7 @@ import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../_commonjsHelpers-es.js';
+import 'react/jsx-runtime';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
 import '../AtlantisThemeContext-es.js';
@@ -33,9 +32,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_2(open);
-    const modalRef = useFocusTrap_2(open);
-    useOnKeyDown_2(handleRequestClose, "Escape");
+    useRefocusOnActivator(open);
+    const modalRef = useFocusTrap(open);
+    useOnKeyDown(handleRequestClose, "Escape");
     const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
         React__default.createElement(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__default.createElement(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: {
@@ -90,14 +89,13 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         },
         open: open,
     });
-    const click = useClick(floatingContext);
     const dismiss = useDismiss(floatingContext, {
-        outsidePressEvent: "click",
+        outsidePressEvent: "pointerdown",
         escapeKey: true,
         bubbles: false,
     });
     const role = useRole(floatingContext);
-    const { getFloatingProps } = useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = useInteractions([dismiss, role]);
     const parentId = useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -190,25 +188,30 @@ function ModalActivator({ children }) {
 /**
  * Background overlay for the modal. Used in the ModalContent.
  */
-function ModalOverlay() {
-    const { onRequestClose } = useModalContext();
-    const { overlayBackground } = useModalStyles();
-    return (React__default.createElement(motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
+function ModalOverlay({ children }) {
+    const { overlay, overlayBackground } = useModalStyles();
+    const { floatingNodeId } = useModalContext();
+    return (React__default.createElement(FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
+        React__default.createElement(motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        children));
 }
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
-    const { modal, overlay } = useModalStyles(size);
+    const { modal } = useModalStyles(size);
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
             React__default.createElement(AtlantisPortalContent, null,
-                React__default.createElement(FloatingOverlay, { className: overlay },
-                    React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React__default.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
-                            React__default.createElement(ModalOverlay, null),
-                            React__default.createElement(motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                } }, children))))))))));
+                React__default.createElement(ModalOverlay, null,
+                    React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, order: ["floating", "content"] },
+                        React__default.createElement(motion.div, { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            } },
+                            React__default.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
+                                role: "dialog",
+                                className: modal,
+                                "aria-labelledby": modalLabelledBy,
+                            })), children))))))))));
 }
 
 function Modal(props) {

package/dist/Page/index.cjs

@@ -3,19 +3,15 @@
 var Page = require('../Page-cjs.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../throttle-cjs.js');
-require('../debounce-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
+require('@jobber/hooks');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');
-require('../index-cjs.js');
+require('react/jsx-runtime');
+require('../_commonjsHelpers-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');
@@ -23,12 +19,8 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useFocusTrap-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 

package/dist/Page/index.mjs

@@ -1,19 +1,15 @@
 export { P as Page } from '../Page-es.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-es.js';
-import '../_commonjsHelpers-es.js';
-import '../throttle-es.js';
-import '../debounce-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
+import '@jobber/hooks';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';
-import '../index-es.js';
+import 'react/jsx-runtime';
+import '../_commonjsHelpers-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';
@@ -21,11 +17,7 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useFocusTrap-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';

package/dist/Page-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Content = require('./Content-cjs.js');
@@ -15,11 +15,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Page-es.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { C as Content } from './Content-es.js';
@@ -13,11 +13,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Popover/index.cjs

@@ -5,8 +5,9 @@ require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../floating-ui.react-cjs.js');
+require('react/jsx-runtime');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
+require('@jobber/hooks');
 require('../AtlantisPortalContent-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('@jobber/design');

package/dist/Popover/index.mjs

@@ -3,8 +3,9 @@ import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../floating-ui.react-es.js';
+import 'react/jsx-runtime';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
+import '@jobber/hooks';
 import '../AtlantisPortalContent-es.js';
 import '../AtlantisThemeContext-es.js';
 import '@jobber/design';

package/dist/Popover/usePopover.d.ts

@@ -4,7 +4,7 @@ export declare const usePopover: ({ preferredPlacement, attachTo, open, }: Pick<
     setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
     floatingStyles: {
         float: import("react").CSSProperties;
-        arrow: (Partial<import("@floating-ui/core").Coords> & {
+        arrow: (Partial<import("@floating-ui/utils").Coords> & {
             centerOffset: number;
             alignmentOffset?: number;
         }) | undefined;

package/dist/Popover-cjs.js

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var AtlantisPortalContent = require('./AtlantisPortalContent-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
@@ -53,7 +53,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: floatingUi_react.autoUpdate,
     });
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    jobberHooks.useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/Popover-es.js

@@ -1,8 +1,8 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
-import { o as offset, s as shift, l as limitShift, k as autoPlacement, f as flip, a as arrow, u as useFloating, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { e as arrow, u as useFloating, c as autoUpdate, o as offset, d as shift, l as limitShift, k as autoPlacement, f as flip, F as FloatingPortal } from './floating-ui.react-es.js';
+import { useRefocusOnActivator } from '@jobber/hooks';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
@@ -51,7 +51,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: autoUpdate,
     });
-    useRefocusOnActivator_2(open);
+    useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/RecurringSelect/index.cjs

@@ -20,6 +20,7 @@ require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
 require('../FormField-cjs.js');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
@@ -32,6 +33,7 @@ require('../Spinner-cjs.js');
 require('react-hook-form');
 require('../InputNumber/index.cjs');
 require('react-dom');
+require('../clsx-cjs.js');
 require('../InputGroup-cjs.js');
 require('../Content-cjs.js');
 require('../RadioGroup-cjs.js');

package/dist/RecurringSelect/index.mjs

@@ -18,6 +18,7 @@ import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
 import '../FormField-es.js';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
@@ -30,6 +31,7 @@ import '../Spinner-es.js';
 import 'react-hook-form';
 import '../InputNumber/index.mjs';
 import 'react-dom';
+import '../clsx-es.js';
 import '../InputGroup-es.js';
 import '../Content-es.js';
 import '../RadioGroup-es.js';

package/dist/Select/index.cjs

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