@jobber/components 4.85.6-CJS-to-ESM.1 → 4.85.6-CJS-to-ESM.4

package/README.md

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

package/dist/Autocomplete/index.cjs

@@ -1,28 +1,27 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-CDpl009j.js');
+var Autocomplete = require('../Autocomplete-1iO7JRX2.js');
 require('../tslib.es6-ld72nsZq.js');
 require('react');
-require('../debounce-B-pQrPa0.js');
-require('../_commonjsHelpers-BJu3ubxk.js');
-require('../isObjectLike-CsWGWxp9.js');
-require('../isSymbol-CqL-NQwG.js');
+require('../debounce-CJA36ltI.js');
+require('../_commonjsHelpers-B83fTs8d.js');
+require('../isObjectLike-BUFV4ggG.js');
+require('../isSymbol-DS9vlqp3.js');
 require('../style-inject.es-XZHJH68X.js');
 require('classnames');
 require('react-dom');
 require('react-popper');
-require('@jobber/hooks/useOnKeyDown');
-require('@jobber/hooks/useSafeLayoutEffect');
+require('../useOnKeyDown-B9JF2jLZ.js');
+require('../useSafeLayoutEffect-Qir6pm57.js');
 require('../Text-D9gsHxbp.js');
 require('../Typography-Dx8KtnBw.js');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('../Heading-suKDLmO4.js');
 require('../getAtlantisConfig-mcMVqf6m.js');
-require('../InputText-D1KkzO4T.js');
-require('../FormField-BBg_JAlJ.js');
+require('../InputText--fuxI6yf.js');
+require('../FormField-hCrwUWca.js');
 require('react-hook-form');
-require('@jobber/hooks/useShowClear');
 require('../Button-D3mW3Hcg.js');
 require('react-router-dom');
 require('../InputValidation-DIwnbDDv.js');

package/dist/Autocomplete/index.mjs

@@ -1,26 +1,25 @@
-export { A as Autocomplete } from '../Autocomplete-DcuJsI7Z.js';
+export { A as Autocomplete } from '../Autocomplete-CfntbJ6I.js';
 import '../tslib.es6-Df1SgIEn.js';
 import 'react';
-import '../debounce-asENWBkf.js';
-import '../_commonjsHelpers-BFTU3MAI.js';
-import '../isObjectLike-91E0YOes.js';
-import '../isSymbol-BEvcpX3s.js';
+import '../debounce-D3te8_TG.js';
+import '../_commonjsHelpers-E-ZsRS8r.js';
+import '../isObjectLike-CkQBn_-v.js';
+import '../isSymbol-BB8mecpv.js';
 import '../style-inject.es-tgCJW-Cu.js';
 import 'classnames';
 import 'react-dom';
 import 'react-popper';
-import '@jobber/hooks/useOnKeyDown';
-import '@jobber/hooks/useSafeLayoutEffect';
+import '../useOnKeyDown-BsUfDste.js';
+import '../useSafeLayoutEffect-yaw3NyzX.js';
 import '../Text-DEviM1Tv.js';
 import '../Typography-G8pA_xwj.js';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';
 import '../Heading-CL3UujY7.js';
 import '../getAtlantisConfig-6FPWID0P.js';
-import '../InputText-CgykvJl2.js';
-import '../FormField-C-d0U7Ww.js';
+import '../InputText-CCmzDC9W.js';
+import '../FormField-D2Dlrypi.js';
 import 'react-hook-form';
-import '@jobber/hooks/useShowClear';
 import '../Button-CWVwgwhn.js';
 import 'react-router-dom';
 import '../InputValidation-BmgvSw0e.js';

package/dist/{Autocomplete-CDpl009j.js → Autocomplete-1iO7JRX2.js}

@@ -2,17 +2,17 @@
 
 var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
 var React = require('react');
-var debounce = require('./debounce-B-pQrPa0.js');
+var debounce = require('./debounce-CJA36ltI.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('@jobber/hooks/useOnKeyDown');
-var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
+var useOnKeyDown = require('./useOnKeyDown-B9JF2jLZ.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-Qir6pm57.js');
 var Text = require('./Text-D9gsHxbp.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 var Heading = require('./Heading-suKDLmO4.js');
-var InputText = require('./InputText-D1KkzO4T.js');
+var InputText = require('./InputText--fuxI6yf.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(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: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\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: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\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: 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: 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-"};
@@ -60,19 +60,19 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 inline: "start",
             });
         }, [highlightedIndex]);
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
         }, "ArrowDown");
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
         }, "ArrowUp");
-        useOnKeyDown.useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown.useOnKeyDown((event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
@@ -108,7 +108,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-DcuJsI7Z.js → Autocomplete-CfntbJ6I.js}

@@ -1,16 +1,16 @@
 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-asENWBkf.js';
+import { d as debounce } from './debounce-D3te8_TG.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 { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
-import { useSafeLayoutEffect } from '@jobber/hooks/useSafeLayoutEffect';
+import { u as useOnKeyDown } from './useOnKeyDown-BsUfDste.js';
+import { u as useSafeLayoutEffect } from './useSafeLayoutEffect-yaw3NyzX.js';
 import { T as Text } from './Text-DEviM1Tv.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
 import { H as Heading } from './Heading-CL3UujY7.js';
-import { I as InputText } from './InputText-CgykvJl2.js';
+import { I as InputText } from './InputText-CCmzDC9W.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(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: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\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: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\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: 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: 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-"};
@@ -58,19 +58,19 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 inline: "start",
             });
         }, [highlightedIndex]);
-        useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
         }, "ArrowDown");
-        useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
         }, "ArrowUp");
-        useOnKeyDown((event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
@@ -106,7 +106,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/index.cjs

@@ -1,9 +1,13 @@
 'use strict';
 
-var Banner = require('../Banner-B230_jsV.js');
+var Banner = require('../Banner-QqoLHMka.js');
 require('react');
 require('classnames');
-require('@jobber/hooks/useResizeObserver');
+require('../useResizeObserver-BwGseyVc.js');
+require('../_commonjsHelpers-B83fTs8d.js');
+require('../debounce-CJA36ltI.js');
+require('../isObjectLike-BUFV4ggG.js');
+require('../isSymbol-DS9vlqp3.js');
 require('../BannerIcon-YIreWKuC.js');
 require('../getAtlantisConfig-mcMVqf6m.js');
 require('../style-inject.es-XZHJH68X.js');

package/dist/Banner/index.mjs

@@ -1,7 +1,11 @@
-export { B as Banner } from '../Banner-zMyKdO1y.js';
+export { B as Banner } from '../Banner-9-5fXphG.js';
 import 'react';
 import 'classnames';
-import '@jobber/hooks/useResizeObserver';
+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-QB3lZddm.js';
 import '../getAtlantisConfig-6FPWID0P.js';
 import '../style-inject.es-tgCJW-Cu.js';

package/dist/{Banner-zMyKdO1y.js → Banner-9-5fXphG.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { useResizeObserver } from '@jobber/hooks/useResizeObserver';
+import { u as useResizeObserver } from './useResizeObserver-ZgXMUTij.js';
 import { s as styles, B as BannerIcon } from './BannerIcon-QB3lZddm.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
@@ -20,7 +20,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {

package/dist/{Banner-B230_jsV.js → Banner-QqoLHMka.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks/useResizeObserver');
+var useResizeObserver = require('./useResizeObserver-BwGseyVc.js');
 var BannerIcon = require('./BannerIcon-YIreWKuC.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Icon = require('./Icon-B9XNdA1T.js');
@@ -22,7 +22,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver.useResizeObserver.useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {

package/dist/Card/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Card = require('../Card-0WPJWxfz.js');
+var Card = require('../Card-BeL8rCSY.js');
 require('react');
 require('classnames');
 require('../style-inject.es-XZHJH68X.js');
@@ -11,11 +11,11 @@ require('../Button-D3mW3Hcg.js');
 require('react-router-dom');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
-require('../Menu-DWqTLjQu.js');
+require('../Menu-D3mhNOYC.js');
 require('framer-motion');
-require('@jobber/hooks/useOnKeyDown');
-require('@jobber/hooks/useRefocusOnActivator');
-require('@jobber/hooks/useSafeLayoutEffect');
+require('../useOnKeyDown-B9JF2jLZ.js');
+require('../useRefocusOnActivator-DOJm9VWz.js');
+require('../useSafeLayoutEffect-Qir6pm57.js');
 
 
 

package/dist/Card/index.mjs

@@ -1,4 +1,4 @@
-export { C as Card } from '../Card-BOD8v9wH.js';
+export { C as Card } from '../Card-DQB6rhwZ.js';
 import 'react';
 import 'classnames';
 import '../style-inject.es-tgCJW-Cu.js';
@@ -9,8 +9,8 @@ import '../Button-CWVwgwhn.js';
 import 'react-router-dom';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';
-import '../Menu-BXvyYPow.js';
+import '../Menu-6YnPYEq0.js';
 import 'framer-motion';
-import '@jobber/hooks/useOnKeyDown';
-import '@jobber/hooks/useRefocusOnActivator';
-import '@jobber/hooks/useSafeLayoutEffect';
+import '../useOnKeyDown-BsUfDste.js';
+import '../useRefocusOnActivator-CMNWUYSe.js';
+import '../useSafeLayoutEffect-yaw3NyzX.js';

package/dist/{Card-0WPJWxfz.js → Card-BeL8rCSY.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Heading = require('./Heading-suKDLmO4.js');
 var Button = require('./Button-D3mW3Hcg.js');
-var Menu = require('./Menu-DWqTLjQu.js');
+var Menu = require('./Menu-D3mhNOYC.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: var(--border-base) solid var(--color-border);\n  border: var(--card--border);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\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 * var(--border-base));\n  border-top: 0.375rem solid var(--color-grey);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\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: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: var(--typography--fontFamily-normal);\n  font-size: var(--typography--fontSize-largest);\n}\n";
 var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};

package/dist/{Card-BOD8v9wH.js → Card-DQB6rhwZ.js}

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { H as Heading } from './Heading-CL3UujY7.js';
 import { B as Button } from './Button-CWVwgwhn.js';
-import { M as Menu } from './Menu-BXvyYPow.js';
+import { M as Menu } from './Menu-6YnPYEq0.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: var(--border-base) solid var(--color-border);\n  border: var(--card--border);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\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 * var(--border-base));\n  border-top: 0.375rem solid var(--color-grey);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\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: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: var(--typography--fontFamily-normal);\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,10 +1,11 @@
 'use strict';
 
-var Chip = require('../Chip-Div4v8At.js');
-var ChipDismissible = require('../ChipDismissible-B0DslYTJ.js');
+var Chip = require('../Chip-DSy6Xm8R.js');
+var ChipDismissible = require('../ChipDismissible-BtVU1TDW.js');
 require('react');
 require('classnames');
-require('@jobber/hooks/useInView');
+require('../useInView-Ct13SCWB.js');
+require('../_commonjsHelpers-B83fTs8d.js');
 require('../style-inject.es-XZHJH68X.js');
 require('../Avatar-Q2BQymsE.js');
 require('color');
@@ -12,10 +13,10 @@ require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('../useChildComponent-BUH0ttPi.js');
 require('../Typography-Dx8KtnBw.js');
-require('../Tooltip-DWAVu0yQ.js');
+require('../Tooltip-BEW-a9OW.js');
 require('react-dom');
 require('framer-motion');
-require('@jobber/hooks/useSafeLayoutEffect');
+require('../useSafeLayoutEffect-Qir6pm57.js');
 require('react-popper');
 require('../tslib.es6-ld72nsZq.js');
 

package/dist/Chip/index.mjs

@@ -1,8 +1,9 @@
-export { C as Chip } from '../Chip-tWHAQezL.js';
-export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-DSLoDRyq.js';
+export { C as Chip } from '../Chip-Cvuqhi_q.js';
+export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-C8X7PyuZ.js';
 import 'react';
 import 'classnames';
-import '@jobber/hooks/useInView';
+import '../useInView-Yth15M0p.js';
+import '../_commonjsHelpers-E-ZsRS8r.js';
 import '../style-inject.es-tgCJW-Cu.js';
 import '../Avatar-DZCQBKMr.js';
 import 'color';
@@ -10,9 +11,9 @@ import '../Icon-CoHJokXb.js';
 import '@jobber/design';
 import '../useChildComponent-D95jU7NM.js';
 import '../Typography-G8pA_xwj.js';
-import '../Tooltip-DG1mcZlX.js';
+import '../Tooltip-mn2jRxXD.js';
 import 'react-dom';
 import 'framer-motion';
-import '@jobber/hooks/useSafeLayoutEffect';
+import '../useSafeLayoutEffect-yaw3NyzX.js';
 import 'react-popper';
 import '../tslib.es6-Df1SgIEn.js';

package/dist/{Chip-tWHAQezL.js → Chip-Cvuqhi_q.js}

@@ -1,12 +1,12 @@
 import React from 'react';
 import classnames from 'classnames';
-import { useInView } from '@jobber/hooks/useInView';
+import { u as useInView } from './useInView-Yth15M0p.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import { A as Avatar } from './Avatar-DZCQBKMr.js';
 import { I as Icon } from './Icon-CoHJokXb.js';
 import { u as useChildComponent } from './useChildComponent-D95jU7NM.js';
 import { T as Typography } from './Typography-G8pA_xwj.js';
-import { T as Tooltip } from './Tooltip-DG1mcZlX.js';
+import { T as Tooltip } from './Tooltip-mn2jRxXD.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: var(--space-small) var(--base-unit);\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\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: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: var(--space-small);\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: var(--space-large);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: var(--radius-circle);\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: var(--space-minuscule);\n  height: var(--base-unit);\n  margin: 0 var(--space-small);\n  background-color: var(--color-text--secondary);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: var(--border-base) solid transparent;\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: var(--border-base) solid var(--color-critical);\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: 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: var(--border-base) solid var(--color-border);\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: 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: var(--color-disabled--secondary);\n  cursor: auto;\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  color: var(--color-disabled);\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: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: var(--color-disabled--secondary);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {\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: 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();
-    const [headingRef, headingFullyVisible] = useInView();
+    const [labelRef, labelFullyVisible] = useInView.useInView();
+    const [headingRef, headingFullyVisible] = useInView.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" },

package/dist/{Chip-Div4v8At.js → Chip-DSy6Xm8R.js}

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useInView = require('@jobber/hooks/useInView');
+var useInView = require('./useInView-Ct13SCWB.js');
 var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var Avatar = require('./Avatar-Q2BQymsE.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 var useChildComponent = require('./useChildComponent-BUH0ttPi.js');
 var Typography = require('./Typography-Dx8KtnBw.js');
-var Tooltip = require('./Tooltip-DWAVu0yQ.js');
+var Tooltip = require('./Tooltip-BEW-a9OW.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: var(--space-small) var(--base-unit);\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\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: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: var(--space-small);\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: var(--space-large);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: var(--radius-circle);\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: var(--space-minuscule);\n  height: var(--base-unit);\n  margin: 0 var(--space-small);\n  background-color: var(--color-text--secondary);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: var(--border-base) solid transparent;\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: var(--border-base) solid var(--color-critical);\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: 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: var(--border-base) solid var(--color-border);\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: 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: var(--color-disabled--secondary);\n  cursor: auto;\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  color: var(--color-disabled);\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: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: var(--color-disabled--secondary);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {\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: 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-"};
@@ -38,8 +38,8 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, on
     });
     const prefix = useChildComponent.useChildComponent(children, d => d.type === Chip.Prefix);
     const suffix = useChildComponent.useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView();
-    const [headingRef, headingFullyVisible] = useInView.useInView();
+    const [labelRef, labelFullyVisible] = useInView.useInView.useInView();
+    const [headingRef, headingFullyVisible] = useInView.useInView.useInView();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     return (React.createElement(Tooltip.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" },

package/dist/{ChipDismissible-B0DslYTJ.js → ChipDismissible-BtVU1TDW.js}

@@ -3,7 +3,7 @@
 var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
 var React = require('react');
 var Icon = require('./Icon-B9XNdA1T.js');
-var Chip = require('./Chip-Div4v8At.js');
+var Chip = require('./Chip-DSy6Xm8R.js');
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = tslib_es6.__rest(_a, ["selected"]);

package/dist/{ChipDismissible-DSLoDRyq.js → ChipDismissible-C8X7PyuZ.js}

@@ -1,7 +1,7 @@
 import { _ as __rest } from './tslib.es6-Df1SgIEn.js';
 import React from 'react';
 import { I as Icon } from './Icon-CoHJokXb.js';
-import { C as Chip, s as styles } from './Chip-tWHAQezL.js';
+import { C as Chip, s as styles } from './Chip-Cvuqhi_q.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -1,16 +1,15 @@
 'use strict';
 
-var useScrollToActive = require('../../../useScrollToActive-BB-8euJF.js');
+var useScrollToActive = require('../../../useScrollToActive-DMDRmhoI.js');
 require('react');
-require('../../../_commonjsHelpers-BJu3ubxk.js');
-require('../../../_setToString-F-wwuS_Y.js');
-require('../../../_defineProperty-DVTdBF7D.js');
-require('../../../_getTag-CHBhnZgu.js');
-require('../../../isObjectLike-CsWGWxp9.js');
-require('../../../isSymbol-CqL-NQwG.js');
-require('../../../_baseEach-fQjYIaCA.js');
-require('@jobber/hooks/useLiveAnnounce');
-require('../../../debounce-B-pQrPa0.js');
+require('../../../_commonjsHelpers-B83fTs8d.js');
+require('../../../_setToString-QSHar2ai.js');
+require('../../../_defineProperty-DjLE4Bk3.js');
+require('../../../_getTag-Bd2IuclU.js');
+require('../../../isObjectLike-BUFV4ggG.js');
+require('../../../isSymbol-DS9vlqp3.js');
+require('../../../_baseEach--p319nr8.js');
+require('../../../debounce-CJA36ltI.js');
 require('../../../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('react-popper');

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -1,14 +1,13 @@
-export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDismissibleInput, c as useRepositionMenu, d as useScrollToActive } from '../../../useScrollToActive-KSEZO66J.js';
+export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDismissibleInput, c as useRepositionMenu, d as useScrollToActive } from '../../../useScrollToActive-BkZ3BYNd.js';
 import 'react';
-import '../../../_commonjsHelpers-BFTU3MAI.js';
-import '../../../_setToString-Cjq7b1P9.js';
-import '../../../_defineProperty-DYWOWIJv.js';
-import '../../../_getTag-DYzEQmpZ.js';
-import '../../../isObjectLike-91E0YOes.js';
-import '../../../isSymbol-BEvcpX3s.js';
-import '../../../_baseEach-C5AdInAP.js';
-import '@jobber/hooks/useLiveAnnounce';
-import '../../../debounce-asENWBkf.js';
+import '../../../_commonjsHelpers-E-ZsRS8r.js';
+import '../../../_setToString-DwIrtHSk.js';
+import '../../../_defineProperty-Bai9NpfZ.js';
+import '../../../_getTag-Bcit8gs_.js';
+import '../../../isObjectLike-CkQBn_-v.js';
+import '../../../isSymbol-BB8mecpv.js';
+import '../../../_baseEach-DPBHJoX6.js';
+import '../../../debounce-D3te8_TG.js';
 import '../../../Icon-CoHJokXb.js';
 import '@jobber/design';
 import 'react-popper';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -1,18 +1,17 @@
 'use strict';
 
-var InternalChipDismissible = require('../../InternalChipDismissible-Dj-XvjT4.js');
+var InternalChipDismissible = require('../../InternalChipDismissible-D9MobrPl.js');
 require('react');
 require('../../style-inject.es-XZHJH68X.js');
-require('../../useScrollToActive-BB-8euJF.js');
-require('../../_commonjsHelpers-BJu3ubxk.js');
-require('../../_setToString-F-wwuS_Y.js');
-require('../../_defineProperty-DVTdBF7D.js');
-require('../../_getTag-CHBhnZgu.js');
-require('../../isObjectLike-CsWGWxp9.js');
-require('../../isSymbol-CqL-NQwG.js');
-require('../../_baseEach-fQjYIaCA.js');
-require('@jobber/hooks/useLiveAnnounce');
-require('../../debounce-B-pQrPa0.js');
+require('../../useScrollToActive-DMDRmhoI.js');
+require('../../_commonjsHelpers-B83fTs8d.js');
+require('../../_setToString-QSHar2ai.js');
+require('../../_defineProperty-DjLE4Bk3.js');
+require('../../_getTag-Bd2IuclU.js');
+require('../../isObjectLike-BUFV4ggG.js');
+require('../../isSymbol-DS9vlqp3.js');
+require('../../_baseEach--p319nr8.js');
+require('../../debounce-CJA36ltI.js');
 require('../../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('react-popper');
@@ -22,13 +21,14 @@ require('../../Typography-Dx8KtnBw.js');
 require('../../Button-D3mW3Hcg.js');
 require('react-router-dom');
 require('../../Spinner-DT15aa_r.js');
-require('@jobber/hooks/useAssert');
+require('../../useAssert-Dj-7DdKE.js');
+require('../../index-Jb6tGBiW.js');
 require('../../Avatar-Q2BQymsE.js');
 require('color');
-require('../../Tooltip-DWAVu0yQ.js');
+require('../../Tooltip-BEW-a9OW.js');
 require('react-dom');
 require('framer-motion');
-require('@jobber/hooks/useSafeLayoutEffect');
+require('../../useSafeLayoutEffect-Qir6pm57.js');