@jobber/components 4.85.6-CJS-to-ESM.11 → 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/index.cjs

@@ -1,29 +1,29 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-CaIBrj8e.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-s4dpytw-.js');
-require('../index-t2DqzTGa.js');
-require('../useIsMounted-Dr3u-G7D.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-MZbPA1EN.js');
-require('../useAtlantisConfig-CYXIWWUG.js');
-require('../InputText-CjBbL76E.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,27 +1,27 @@
-export { A as Autocomplete } from '../Autocomplete-DJi7jdUw.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-Biu-Q-_f.js';
-import '../index-JVBxhXV1.js';
-import '../useIsMounted-DaMtx554.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-B4TyweCq.js';
-import '../useAtlantisConfig-Dz-mOyhD.js';
-import '../InputText-C8Coa_og.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-CaIBrj8e.js → Autocomplete-8-k2GoOV.js}

@@ -2,18 +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-s4dpytw-.js');
-var useIsMounted = require('./useIsMounted-Dr3u-G7D.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-MZbPA1EN.js');
-var InputText = require('./InputText-CjBbL76E.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-"};
@@ -36,7 +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.useIsMounted();
+    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,
@@ -65,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]))
@@ -113,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-DJi7jdUw.js → Autocomplete-jsdK_za9.js}

@@ -1,17 +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-Biu-Q-_f.js';
-import { u as useIsMounted } from './useIsMounted-DaMtx554.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-B4TyweCq.js';
-import { I as InputText } from './InputText-C8Coa_og.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-"};
@@ -34,7 +34,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    const mounted = useIsMounted.useIsMounted();
+    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,
@@ -63,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]))
@@ -111,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,11 +1,10 @@
 'use strict';
 
-var BannerIcon = require('../../../BannerIcon-BifD3IS3.js');
+var BannerIcon = require('../../../BannerIcon-BKSqafh9.js');
 require('react');
 require('classnames');
-require('../../../useAtlantisConfig-CYXIWWUG.js');
-require('../../../useSafeLayoutEffect-s4dpytw-.js');
-require('../../../index-t2DqzTGa.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,9 +1,8 @@
-export { B as BannerIcon } from '../../../BannerIcon-Dyt3bQRR.js';
+export { B as BannerIcon } from '../../../BannerIcon-Bz2co5Sv.js';
 import 'react';
 import 'classnames';
-import '../../../useAtlantisConfig-Dz-mOyhD.js';
-import '../../../useSafeLayoutEffect-Biu-Q-_f.js';
-import '../../../index-JVBxhXV1.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,17 +1,12 @@
 'use strict';
 
-var Banner = require('../Banner-Dhp4UfBI.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-BifD3IS3.js');
-require('../useAtlantisConfig-CYXIWWUG.js');
-require('../useSafeLayoutEffect-s4dpytw-.js');
-require('../index-t2DqzTGa.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,15 +1,10 @@
-export { B as Banner } from '../Banner-BlkdZtWM.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-Dyt3bQRR.js';
-import '../useAtlantisConfig-Dz-mOyhD.js';
-import '../useSafeLayoutEffect-Biu-Q-_f.js';
-import '../index-JVBxhXV1.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-BlkdZtWM.js → Banner-B0FNQaEA.js}

@@ -1,12 +1,12 @@
 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-Dyt3bQRR.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 { u as useAtlantisConfig } from './useAtlantisConfig-Dz-mOyhD.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-"};
@@ -20,7 +20,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {

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

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-BwGseyVc.js');
-var BannerIcon = require('./BannerIcon-BifD3IS3.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 useAtlantisConfig = require('./useAtlantisConfig-CYXIWWUG.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-"};
@@ -22,7 +22,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
         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 = {

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useAtlantisConfig = require('./useAtlantisConfig-CYXIWWUG.js');
+var useAtlantisConfig = require('./useAtlantisConfig-BV9EaVeA.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import { u as useAtlantisConfig } from './useAtlantisConfig-Dz-mOyhD.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';
 

package/dist/Card/index.cjs

@@ -1,22 +1,21 @@
 'use strict';
 
-var Card = require('../Card-CHBaqzv3.js');
+var Card = require('../Card-pEq1vP48.js');
 require('react');
 require('classnames');
 require('../style-inject.es-XZHJH68X.js');
-require('../Heading-MZbPA1EN.js');
+require('../Heading-BOPUeuqz.js');
 require('../Typography-g6o6Nu4H.js');
-require('../useAtlantisConfig-CYXIWWUG.js');
-require('../useSafeLayoutEffect-s4dpytw-.js');
-require('../index-t2DqzTGa.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-Br_z6m1_.js');
+require('../Menu-DY0HEByr.js');
 require('framer-motion');
-require('../useOnKeyDown-B9JF2jLZ.js');
-require('../useRefocusOnActivator-DOJm9VWz.js');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useRefocusOnActivator');
 
 
 

package/dist/Card/index.mjs

@@ -1,17 +1,16 @@
-export { C as Card } from '../Card-BsiJi1g7.js';
+export { C as Card } from '../Card-DHndcTNY.js';
 import 'react';
 import 'classnames';
 import '../style-inject.es-tgCJW-Cu.js';
-import '../Heading-B4TyweCq.js';
+import '../Heading-CuwWlvKk.js';
 import '../Typography-BLZqr2yE.js';
-import '../useAtlantisConfig-Dz-mOyhD.js';
-import '../useSafeLayoutEffect-Biu-Q-_f.js';
-import '../index-JVBxhXV1.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-C57XI2sy.js';
+import '../Menu-DXO2Sfup.js';
 import 'framer-motion';
-import '../useOnKeyDown-BsUfDste.js';
-import '../useRefocusOnActivator-CMNWUYSe.js';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useRefocusOnActivator';

package/dist/{Card-BsiJi1g7.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-B4TyweCq.js';
+import { H as Heading } from './Heading-CuwWlvKk.js';
 import { B as Button } from './Button-DCEN_VU9.js';
-import { M as Menu } from './Menu-C57XI2sy.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-CHBaqzv3.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-MZbPA1EN.js');
+var Heading = require('./Heading-BOPUeuqz.js');
 var Button = require('./Button-CdFKgOjt.js');
-var Menu = require('./Menu-Br_z6m1_.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-C3Slm72t.js');
-var ChipDismissible = require('../ChipDismissible-CPP7NmO9.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,12 +12,11 @@ require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('../useChildComponent-BUH0ttPi.js');
 require('../Typography-g6o6Nu4H.js');
-require('../Tooltip-h7mlmKO8.js');
+require('../Tooltip-raq-Y4h1.js');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-s4dpytw-.js');
-require('../index-t2DqzTGa.js');
-require('../useIsMounted-Dr3u-G7D.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-BsGl_WKW.js';
-export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-CekG0Sf1.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,11 +10,10 @@ import '../Icon-CoHJokXb.js';
 import '@jobber/design';
 import '../useChildComponent-D95jU7NM.js';
 import '../Typography-BLZqr2yE.js';
-import '../Tooltip-BGoYIW4v.js';
+import '../Tooltip-C1ZxBdnM.js';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-Biu-Q-_f.js';
-import '../index-JVBxhXV1.js';
-import '../useIsMounted-DaMtx554.js';
+import '@jobber/hooks/useSafeLayoutEffect';
+import '@jobber/hooks/useIsMounted';
 import 'react-popper';
 import '../tslib.es6-Df1SgIEn.js';

package/dist/{Chip-BsGl_WKW.js → Chip-BiaFSxjk.js}

@@ -1,12 +1,12 @@
 import React from 'react';
 import classnames from 'classnames';
-import { u as useInView } from './useInView-Yth15M0p.js';
+import { useInView } from '@jobber/hooks/useInView';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { A as Avatar } from './Avatar-CckTha1O.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
 import { u as useChildComponent } from './useChildComponent-D95jU7NM.js';
 import { T as Typography } from './Typography-BLZqr2yE.js';
-import { T as Tooltip } from './Tooltip-BGoYIW4v.js';
+import { T as Tooltip } from './Tooltip-C1ZxBdnM.js';
 
 var css_248z = ":root {\n  --chip--gradient-color-variation: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.af7U8MvcbHE- {\n  --chip-height: 40px;\n  --chip-radius: 20px;\n  --chip-base-bg: var(--color-surface--background);\n  --chip-base--hover: var(--color-surface--background--hover);\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 40px;\n  height: var(--chip-height);\n  min-width: 0;\n  padding: calc(16px / 2) 16px;\n  padding: var(--space-small) var(--base-unit);\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.af7U8MvcbHE-:focus,\n.af7U8MvcbHE-:focus-visible {\n  outline: none;\n}\n\n.af7U8MvcbHE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * (16px / 2));\n  margin-left: calc(-1 * calc(16px / 2));\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: calc(-1 * (16px / 2));\n  margin-right: calc(-1 * calc(16px / 2));\n  margin-right: calc(-1 * var(--space-small));\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-,\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-.usdkmQ9Sxbk-,\n.af7U8MvcbHE- .ySADfZ0FckM-.usdkmQ9Sxbk- {\n  display: none;\n}\n\n.af7U8MvcbHE- .dg1-Izy1eQA- {\n  width: calc(16px / 16);\n  width: var(--space-minuscule);\n  height: 16px;\n  height: var(--base-unit);\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-text--secondary);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation: var(--chip-base-bg);\n}\n\n.wSI5L-5rODg-:hover,\n.wSI5L-5rODg-:focus-visible {\n  background-color: var(--chip-base--hover);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.SmUxkzpIC84-,\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n  border: calc(16px / 16) solid rgb(201, 66, 33);\n  border: var(--border-base) solid var(--color-critical);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n  --chip--gradient-color-variation: var(--color-critical--surface);\n  --chip--gradient-color-variation--hover: var(--color-critical--surface);\n}\n\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n  background-color: rgb(193, 201, 206);\n  background-color: var(--color-surface--background--hover);\n  --chip--gradient-color-variation: var(--color-surface--background--hover);\n  --chip--gradient-color-variation--hover: var(\n    --color-surface--background--hover\n  );\n}\n\n.Mux23dmZSuw- {\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  --chip--gradient-color-variation: var(--color-surface);\n}\n\n/* CAUTION: Order is important here since\n* there is are different styles for subtle:focus and subtle:hover\n* and we want hover to take priority\n*/\n\n.Mux23dmZSuw-:focus-visible {\n  --chip--gradient-color-variation--hover: var(--color-surface);\n}\n\n.Mux23dmZSuw-:hover {\n  border: calc(16px / 16) solid var(--chip-base-bg);\n  border: var(--border-base) solid var(--chip-base-bg);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base-bg);\n}\n\n.SmUxkzpIC84-.MbRItb9vKhc-,\n.SmUxkzpIC84-.MbRItb9vKhc-:hover,\n.SmUxkzpIC84-.MbRItb9vKhc-:focus-visible {\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  cursor: auto;\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  cursor: auto;\n  --chip--gradient-color-variation: var(--color-disabled--secondary);\n  --chip--gradient-color-variation--hover: var(--color-disabled--secondary);\n}\n\n.MbRItb9vKhc- .dg1-Izy1eQA- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n}\n\n.tJhURjR2Vec- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.tJhURjR2Vec- > * {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.tJhURjR2Vec- > p {\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.G3QXY0rNcK0- {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: 100%;\n  background: linear-gradient(\n    to left,\n    var(--chip-base-bg) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.af7U8MvcbHE-:focus-visible .G3QXY0rNcK0-,\n.af7U8MvcbHE-:hover .G3QXY0rNcK0- {\n  background: linear-gradient(\n    to left,\n    var(--chip-base--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.MUKEW6c2nNA- {\n  display: inline-block;\n  width: 1px;\n}\n";
 var styles = {"chip":"af7U8MvcbHE-","prefix":"e905AYK4SCc-","suffix":"ySADfZ0FckM-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-"};
@@ -36,8 +36,8 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, on
     });
     const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
     const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView();
-    const [headingRef, headingFullyVisible] = useInView.useInView();
+    const [labelRef, labelFullyVisible] = useInView();
+    const [headingRef, headingFullyVisible] = useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     return (React.createElement(Tooltip, { message: tooltipMessage },
         React.createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },