@jobber/components 4.85.6-CJS-to-ESM.10 → 4.85.6-CJS-to-ESM.18

package/README.md

@@ -35,6 +35,6 @@ export default function MyComponent() {
 More information on Atlantis can be found at
 [https://atlantis.getjobber.com](https://atlantis.getjobber.com).
 
-## Additional Information
+## Additional Informations
 
 Additional Information

package/dist/Autocomplete/Menu.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import { RefObject } from "react";
 import { Option } from "./Option";
 interface MenuProps {
     readonly visible: boolean;
@@ -10,5 +10,5 @@ interface MenuProps {
     readonly attachTo: RefObject<Element | null>;
     onOptionSelect(chosenOption: Option): void;
 }
-export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): React.ReactPortal;
+export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): JSX.Element;
 export {};

package/dist/Autocomplete/index.cjs

@@ -1,27 +1,29 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-D-ew7f4X.js');
+var Autocomplete = require('../Autocomplete-8-k2GoOV.js');
 require('../tslib.es6-ld72nsZq.js');
 require('react');
-require('../debounce-CJA36ltI.js');
-require('../_commonjsHelpers-B83fTs8d.js');
-require('../isObjectLike-BUFV4ggG.js');
-require('../isSymbol-DS9vlqp3.js');
+require('../debounce-B-pQrPa0.js');
+require('../_commonjsHelpers-BJu3ubxk.js');
+require('../isObjectLike-CsWGWxp9.js');
+require('../isSymbol-CqL-NQwG.js');
 require('../style-inject.es-XZHJH68X.js');
 require('classnames');
 require('react-dom');
 require('react-popper');
-require('../useOnKeyDown-B9JF2jLZ.js');
-require('../useSafeLayoutEffect-Qir6pm57.js');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('@jobber/hooks/useIsMounted');
 require('../Text-L0uH5HlC.js');
 require('../Typography-g6o6Nu4H.js');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
-require('../Heading-DaQSloBZ.js');
-require('../getAtlantisConfig-mcMVqf6m.js');
-require('../InputText-C2A27BcB.js');
-require('../FormField-Br5alT0e.js');
+require('../Heading-BOPUeuqz.js');
+require('../useAtlantisConfig-BV9EaVeA.js');
+require('../InputText-DSAkrYN7.js');
+require('../FormField-DH17txVO.js');
 require('react-hook-form');
+require('@jobber/hooks/useShowClear');
 require('../Button-CdFKgOjt.js');
 require('react-router-dom');
 require('../InputValidation-BvFAMweO.js');

package/dist/Autocomplete/index.mjs

@@ -1,25 +1,27 @@
-export { A as Autocomplete } from '../Autocomplete-BQC-Sdt3.js';
+export { A as Autocomplete } from '../Autocomplete-jsdK_za9.js';
 import '../tslib.es6-Df1SgIEn.js';
 import 'react';
-import '../debounce-D3te8_TG.js';
-import '../_commonjsHelpers-E-ZsRS8r.js';
-import '../isObjectLike-CkQBn_-v.js';
-import '../isSymbol-BB8mecpv.js';
+import '../debounce-asENWBkf.js';
+import '../_commonjsHelpers-BFTU3MAI.js';
+import '../isObjectLike-91E0YOes.js';
+import '../isSymbol-BEvcpX3s.js';
 import '../style-inject.es-tgCJW-Cu.js';
 import 'classnames';
 import 'react-dom';
 import 'react-popper';
-import '../useOnKeyDown-BsUfDste.js';
-import '../useSafeLayoutEffect-yaw3NyzX.js';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useSafeLayoutEffect';
+import '@jobber/hooks/useIsMounted';
 import '../Text-B0MvS7fA.js';
 import '../Typography-BLZqr2yE.js';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';
-import '../Heading-qGWVOyZp.js';
-import '../getAtlantisConfig-6FPWID0P.js';
-import '../InputText-DTlyh7n2.js';
-import '../FormField-DO3HRP-l.js';
+import '../Heading-CuwWlvKk.js';
+import '../useAtlantisConfig-Daa10dex.js';
+import '../InputText-BKmC8LAf.js';
+import '../FormField-Dg8dpwo0.js';
 import 'react-hook-form';
+import '@jobber/hooks/useShowClear';
 import '../Button-DCEN_VU9.js';
 import 'react-router-dom';
 import '../InputValidation-DDTInAPc.js';

package/dist/{Autocomplete-D-ew7f4X.js → Autocomplete-8-k2GoOV.js}

@@ -2,17 +2,18 @@
 
 var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
 var React = require('react');
-var debounce = require('./debounce-CJA36ltI.js');
+var debounce = require('./debounce-B-pQrPa0.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
-var useOnKeyDown = require('./useOnKeyDown-B9JF2jLZ.js');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-Qir6pm57.js');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
+var useIsMounted = require('@jobber/hooks/useIsMounted');
 var Text = require('./Text-L0uH5HlC.js');
 var Icon = require('./Icon-B9XNdA1T.js');
-var Heading = require('./Heading-DaQSloBZ.js');
-var InputText = require('./InputText-C2A27BcB.js');
+var Heading = require('./Heading-BOPUeuqz.js');
+var InputText = require('./InputText-DSAkrYN7.js');
 
 var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(6 + 1001);\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
 var styles = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
@@ -23,6 +24,9 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
+// Adding useIsMounted is what tipped this to 13 statements.
+// Any additions beyond useIsMounted should probably see this component refactored a bit
+// eslint-disable-next-line max-statements
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
     const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
@@ -32,6 +36,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    const mounted = useIsMounted.useIsMounted();
     const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames(styles.option, {
             [styles.active]: index === highlightedIndex,
@@ -50,7 +55,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 option.details !== undefined && (React.createElement("div", { className: styles.details },
                     React.createElement(Text.Text, null, option.details))))));
     })));
-    return ReactDOM.createPortal(menu, document.body);
+    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
     function setupKeyListeners() {
         React.useEffect(() => {
             var _a, _b;
@@ -60,19 +65,19 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 inline: "start",
             });
         }, [highlightedIndex]);
-        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
         }, "ArrowDown");
-        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
         }, "ArrowUp");
-        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
@@ -108,7 +113,7 @@ function useRepositionMenu(attachTo, visible = false) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    useSafeLayoutEffect.useSafeLayoutEffect.useSafeLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);

package/dist/{Autocomplete-BQC-Sdt3.js → Autocomplete-jsdK_za9.js}

@@ -1,16 +1,17 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-Df1SgIEn.js';
 import React, { useState, useEffect, forwardRef, useRef } from 'react';
-import { d as debounce } from './debounce-D3te8_TG.js';
+import { d as debounce } from './debounce-asENWBkf.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import classnames from 'classnames';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { u as useOnKeyDown } from './useOnKeyDown-BsUfDste.js';
-import { u as useSafeLayoutEffect } from './useSafeLayoutEffect-yaw3NyzX.js';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { useSafeLayoutEffect } from '@jobber/hooks/useSafeLayoutEffect';
+import { useIsMounted } from '@jobber/hooks/useIsMounted';
 import { T as Text } from './Text-B0MvS7fA.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
-import { H as Heading } from './Heading-qGWVOyZp.js';
-import { I as InputText } from './InputText-DTlyh7n2.js';
+import { H as Heading } from './Heading-CuwWlvKk.js';
+import { I as InputText } from './InputText-BKmC8LAf.js';
 
 var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(6 + 1001);\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
 var styles = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
@@ -21,6 +22,9 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
+// Adding useIsMounted is what tipped this to 13 statements.
+// Any additions beyond useIsMounted should probably see this component refactored a bit
+// eslint-disable-next-line max-statements
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = useState(0);
     const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
@@ -30,6 +34,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    const mounted = useIsMounted();
     const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames(styles.option, {
             [styles.active]: index === highlightedIndex,
@@ -48,7 +53,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 option.details !== undefined && (React.createElement("div", { className: styles.details },
                     React.createElement(Text, null, option.details))))));
     })));
-    return createPortal(menu, document.body);
+    return mounted.current ? createPortal(menu, document.body) : menu;
     function setupKeyListeners() {
         useEffect(() => {
             var _a, _b;
@@ -58,19 +63,19 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 inline: "start",
             });
         }, [highlightedIndex]);
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
         }, "ArrowDown");
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
         }, "ArrowUp");
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown((event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
@@ -106,7 +111,7 @@ function useRepositionMenu(attachTo, visible = false) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    useSafeLayoutEffect.useSafeLayoutEffect(() => {
+    useSafeLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);

package/dist/Banner/components/BannerIcon/index.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var BannerIcon = require('../../../BannerIcon-CoUm6Udu.js');
+var BannerIcon = require('../../../BannerIcon-BKSqafh9.js');
 require('react');
 require('classnames');
-require('../../../getAtlantisConfig-mcMVqf6m.js');
+require('../../../useAtlantisConfig-BV9EaVeA.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../../../style-inject.es-XZHJH68X.js');
 require('../../../Icon-B9XNdA1T.js');
 require('@jobber/design');

package/dist/Banner/components/BannerIcon/index.mjs

@@ -1,7 +1,8 @@
-export { B as BannerIcon } from '../../../BannerIcon-Cf9MHBUn.js';
+export { B as BannerIcon } from '../../../BannerIcon-Bz2co5Sv.js';
 import 'react';
 import 'classnames';
-import '../../../getAtlantisConfig-6FPWID0P.js';
+import '../../../useAtlantisConfig-Daa10dex.js';
+import '@jobber/hooks/useSafeLayoutEffect';
 import '../../../style-inject.es-tgCJW-Cu.js';
 import '../../../Icon-CoHJokXb.js';
 import '@jobber/design';

package/dist/Banner/index.cjs

@@ -1,15 +1,12 @@
 'use strict';
 
-var Banner = require('../Banner-FHgC_G51.js');
+var Banner = require('../Banner-DOTR15NP.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-BwGseyVc.js');
-require('../_commonjsHelpers-B83fTs8d.js');
-require('../debounce-CJA36ltI.js');
-require('../isObjectLike-BUFV4ggG.js');
-require('../isSymbol-DS9vlqp3.js');
-require('../BannerIcon-CoUm6Udu.js');
-require('../getAtlantisConfig-mcMVqf6m.js');
+require('@jobber/hooks/useResizeObserver');
+require('../BannerIcon-BKSqafh9.js');
+require('../useAtlantisConfig-BV9EaVeA.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../style-inject.es-XZHJH68X.js');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');

package/dist/Banner/index.mjs

@@ -1,13 +1,10 @@
-export { B as Banner } from '../Banner-CNVBnTc5.js';
+export { B as Banner } from '../Banner-B0FNQaEA.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-ZgXMUTij.js';
-import '../_commonjsHelpers-E-ZsRS8r.js';
-import '../debounce-D3te8_TG.js';
-import '../isObjectLike-CkQBn_-v.js';
-import '../isSymbol-BB8mecpv.js';
-import '../BannerIcon-Cf9MHBUn.js';
-import '../getAtlantisConfig-6FPWID0P.js';
+import '@jobber/hooks/useResizeObserver';
+import '../BannerIcon-Bz2co5Sv.js';
+import '../useAtlantisConfig-Daa10dex.js';
+import '@jobber/hooks/useSafeLayoutEffect';
 import '../style-inject.es-tgCJW-Cu.js';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';

package/dist/{Banner-CNVBnTc5.js → Banner-B0FNQaEA.js}

@@ -1,26 +1,26 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-ZgXMUTij.js';
-import { s as styles, B as BannerIcon } from './BannerIcon-Cf9MHBUn.js';
+import { useResizeObserver } from '@jobber/hooks/useResizeObserver';
+import { s as styles, B as BannerIcon } from './BannerIcon-Bz2co5Sv.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
 import { T as Text } from './Text-B0MvS7fA.js';
 import { B as Button } from './Button-DCEN_VU9.js';
-import { g as getAtlantisConfig } from './getAtlantisConfig-6FPWID0P.js';
+import { u as useAtlantisConfig } from './useAtlantisConfig-Daa10dex.js';
 
 var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n  background-color: rgb(203, 223, 159);\n  background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: rgb(241, 231, 159);\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: rgb(255, 206, 194);\n  background-color: var(--color-red--lighter);\n}\n";
 var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
 styleInject(css_248z);
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig();
     const [showBanner, setShowBanner] = useState(true);
     const bannerIcon = icon || getBannerIcon(type);
     const bannerWidths = {
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {
@@ -56,7 +56,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     }
 }
 function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig();
     if (!JOBBER_RETHEME)
         return;
     switch (type) {

package/dist/{Banner-FHgC_G51.js → Banner-DOTR15NP.js}

@@ -2,27 +2,27 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-BwGseyVc.js');
-var BannerIcon = require('./BannerIcon-CoUm6Udu.js');
+var jobberHooks = require('@jobber/hooks/useResizeObserver');
+var BannerIcon = require('./BannerIcon-BKSqafh9.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 var Text = require('./Text-L0uH5HlC.js');
 var Button = require('./Button-CdFKgOjt.js');
-var getAtlantisConfig = require('./getAtlantisConfig-mcMVqf6m.js');
+var useAtlantisConfig = require('./useAtlantisConfig-BV9EaVeA.js');
 
 var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n  background-color: rgb(203, 223, 159);\n  background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: rgb(241, 231, 159);\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: rgb(255, 206, 194);\n  background-color: var(--color-red--lighter);\n}\n";
 var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
 styleInject_es.styleInject(css_248z);
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     const [showBanner, setShowBanner] = React.useState(true);
     const bannerIcon = icon || getBannerIcon(type);
     const bannerWidths = {
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {
@@ -58,7 +58,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     }
 }
 function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     if (!JOBBER_RETHEME)
         return;
     switch (type) {

package/dist/{BannerIcon-CoUm6Udu.js → BannerIcon-BKSqafh9.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var getAtlantisConfig = require('./getAtlantisConfig-mcMVqf6m.js');
+var useAtlantisConfig = require('./useAtlantisConfig-BV9EaVeA.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 
@@ -15,7 +15,7 @@ var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c
 styleInject_es.styleInject(css_248z);
 
 function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     if (JOBBER_RETHEME) {
         return (React.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
             React.createElement(Icon.Icon, { name: icon, color: "white", size: "small" })));

package/dist/{BannerIcon-Cf9MHBUn.js → BannerIcon-Bz2co5Sv.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import { g as getAtlantisConfig } from './getAtlantisConfig-6FPWID0P.js';
+import { u as useAtlantisConfig } from './useAtlantisConfig-Daa10dex.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
 
@@ -13,7 +13,7 @@ var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c
 styleInject(css_248z);
 
 function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig();
     if (JOBBER_RETHEME) {
         return (React.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
             React.createElement(Icon, { name: icon, color: "white", size: "small" })));

package/dist/Card/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var Card = require('../Card-DZXBxdQH.js');
+var Card = require('../Card-pEq1vP48.js');
 require('react');
 require('classnames');
 require('../style-inject.es-XZHJH68X.js');
-require('../Heading-DaQSloBZ.js');
+require('../Heading-BOPUeuqz.js');
 require('../Typography-g6o6Nu4H.js');
-require('../getAtlantisConfig-mcMVqf6m.js');
+require('../useAtlantisConfig-BV9EaVeA.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../Button-CdFKgOjt.js');
 require('react-router-dom');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
-require('../Menu-B2CjGXpJ.js');
+require('../Menu-DY0HEByr.js');
 require('framer-motion');
-require('../useOnKeyDown-B9JF2jLZ.js');
-require('../useRefocusOnActivator-DOJm9VWz.js');
-require('../useSafeLayoutEffect-Qir6pm57.js');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useRefocusOnActivator');
 
 
 

package/dist/Card/index.mjs

@@ -1,16 +1,16 @@
-export { C as Card } from '../Card-9IfVI62-.js';
+export { C as Card } from '../Card-DHndcTNY.js';
 import 'react';
 import 'classnames';
 import '../style-inject.es-tgCJW-Cu.js';
-import '../Heading-qGWVOyZp.js';
+import '../Heading-CuwWlvKk.js';
 import '../Typography-BLZqr2yE.js';
-import '../getAtlantisConfig-6FPWID0P.js';
+import '../useAtlantisConfig-Daa10dex.js';
+import '@jobber/hooks/useSafeLayoutEffect';
 import '../Button-DCEN_VU9.js';
 import 'react-router-dom';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';
-import '../Menu-EuYGUgDp.js';
+import '../Menu-DXO2Sfup.js';
 import 'framer-motion';
-import '../useOnKeyDown-BsUfDste.js';
-import '../useRefocusOnActivator-CMNWUYSe.js';
-import '../useSafeLayoutEffect-yaw3NyzX.js';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useRefocusOnActivator';

package/dist/{Card-9IfVI62-.js → Card-DHndcTNY.js}

@@ -1,9 +1,9 @@
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { H as Heading } from './Heading-qGWVOyZp.js';
+import { H as Heading } from './Heading-CuwWlvKk.js';
 import { B as Button } from './Button-DCEN_VU9.js';
-import { M as Menu } from './Menu-EuYGUgDp.js';
+import { M as Menu } from './Menu-DXO2Sfup.js';
 
 var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n";
 var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};

package/dist/{Card-DZXBxdQH.js → Card-pEq1vP48.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-var Heading = require('./Heading-DaQSloBZ.js');
+var Heading = require('./Heading-BOPUeuqz.js');
 var Button = require('./Button-CdFKgOjt.js');
-var Menu = require('./Menu-B2CjGXpJ.js');
+var Menu = require('./Menu-DY0HEByr.js');
 
 var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n";
 var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};

package/dist/Chip/index.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
-var Chip = require('../Chip-D0QzrwiJ.js');
-var ChipDismissible = require('../ChipDismissible-Cp2IIeHG.js');
+var Chip = require('../Chip-BuyIFVpT.js');
+var ChipDismissible = require('../ChipDismissible-DcvzV_6e.js');
 require('react');
 require('classnames');
-require('../useInView-Ct13SCWB.js');
-require('../_commonjsHelpers-B83fTs8d.js');
+require('@jobber/hooks/useInView');
 require('../style-inject.es-XZHJH68X.js');
 require('../Avatar-AkaG8y0Q.js');
 require('color');
@@ -13,10 +12,11 @@ require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('../useChildComponent-BUH0ttPi.js');
 require('../Typography-g6o6Nu4H.js');
-require('../Tooltip-DSGn-Mt6.js');
+require('../Tooltip-raq-Y4h1.js');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-Qir6pm57.js');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('@jobber/hooks/useIsMounted');
 require('react-popper');
 require('../tslib.es6-ld72nsZq.js');
 

package/dist/Chip/index.mjs

@@ -1,9 +1,8 @@
-export { C as Chip } from '../Chip-DiLsQCIb.js';
-export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-B3wENmRd.js';
+export { C as Chip } from '../Chip-BiaFSxjk.js';
+export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-D8Gb8gzT.js';
 import 'react';
 import 'classnames';
-import '../useInView-Yth15M0p.js';
-import '../_commonjsHelpers-E-ZsRS8r.js';
+import '@jobber/hooks/useInView';
 import '../style-inject.es-tgCJW-Cu.js';
 import '../Avatar-CckTha1O.js';
 import 'color';
@@ -11,9 +10,10 @@ import '../Icon-CoHJokXb.js';
 import '@jobber/design';
 import '../useChildComponent-D95jU7NM.js';
 import '../Typography-BLZqr2yE.js';
-import '../Tooltip-Cfg4l2JJ.js';
+import '../Tooltip-C1ZxBdnM.js';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-yaw3NyzX.js';
+import '@jobber/hooks/useSafeLayoutEffect';
+import '@jobber/hooks/useIsMounted';
 import 'react-popper';
 import '../tslib.es6-Df1SgIEn.js';