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

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,6 +1,6 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-D-ew7f4X.js');
+var Autocomplete = require('../Autocomplete-CaIBrj8e.js');
 require('../tslib.es6-ld72nsZq.js');
 require('react');
 require('../debounce-CJA36ltI.js');
@@ -12,14 +12,16 @@ require('classnames');
 require('react-dom');
 require('react-popper');
 require('../useOnKeyDown-B9JF2jLZ.js');
-require('../useSafeLayoutEffect-Qir6pm57.js');
+require('../useSafeLayoutEffect-s4dpytw-.js');
+require('../index-t2DqzTGa.js');
+require('../useIsMounted-Dr3u-G7D.js');
 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('../Heading-MZbPA1EN.js');
+require('../useAtlantisConfig-CYXIWWUG.js');
+require('../InputText-CjBbL76E.js');
 require('../FormField-Br5alT0e.js');
 require('react-hook-form');
 require('../Button-CdFKgOjt.js');

package/dist/Autocomplete/index.mjs

@@ -1,4 +1,4 @@
-export { A as Autocomplete } from '../Autocomplete-BQC-Sdt3.js';
+export { A as Autocomplete } from '../Autocomplete-DJi7jdUw.js';
 import '../tslib.es6-Df1SgIEn.js';
 import 'react';
 import '../debounce-D3te8_TG.js';
@@ -10,14 +10,16 @@ import 'classnames';
 import 'react-dom';
 import 'react-popper';
 import '../useOnKeyDown-BsUfDste.js';
-import '../useSafeLayoutEffect-yaw3NyzX.js';
+import '../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../index-JVBxhXV1.js';
+import '../useIsMounted-DaMtx554.js';
 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 '../Heading-B4TyweCq.js';
+import '../useAtlantisConfig-Dz-mOyhD.js';
+import '../InputText-C8Coa_og.js';
 import '../FormField-DO3HRP-l.js';
 import 'react-hook-form';
 import '../Button-DCEN_VU9.js';

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

@@ -8,11 +8,12 @@ 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 useSafeLayoutEffect = require('./useSafeLayoutEffect-s4dpytw-.js');
+var useIsMounted = require('./useIsMounted-Dr3u-G7D.js');
 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-MZbPA1EN.js');
+var InputText = require('./InputText-CjBbL76E.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.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;

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

@@ -6,11 +6,12 @@ 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 { u as useSafeLayoutEffect } from './useSafeLayoutEffect-Biu-Q-_f.js';
+import { u as useIsMounted } from './useIsMounted-DaMtx554.js';
 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-B4TyweCq.js';
+import { I as InputText } from './InputText-C8Coa_og.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.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;

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

@@ -1,9 +1,11 @@
 'use strict';
 
-var BannerIcon = require('../../../BannerIcon-CoUm6Udu.js');
+var BannerIcon = require('../../../BannerIcon-BifD3IS3.js');
 require('react');
 require('classnames');
-require('../../../getAtlantisConfig-mcMVqf6m.js');
+require('../../../useAtlantisConfig-CYXIWWUG.js');
+require('../../../useSafeLayoutEffect-s4dpytw-.js');
+require('../../../index-t2DqzTGa.js');
 require('../../../style-inject.es-XZHJH68X.js');
 require('../../../Icon-B9XNdA1T.js');
 require('@jobber/design');

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

@@ -1,7 +1,9 @@
-export { B as BannerIcon } from '../../../BannerIcon-Cf9MHBUn.js';
+export { B as BannerIcon } from '../../../BannerIcon-Dyt3bQRR.js';
 import 'react';
 import 'classnames';
-import '../../../getAtlantisConfig-6FPWID0P.js';
+import '../../../useAtlantisConfig-Dz-mOyhD.js';
+import '../../../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../../../index-JVBxhXV1.js';
 import '../../../style-inject.es-tgCJW-Cu.js';
 import '../../../Icon-CoHJokXb.js';
 import '@jobber/design';

package/dist/Banner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Banner = require('../Banner-FHgC_G51.js');
+var Banner = require('../Banner-Dhp4UfBI.js');
 require('react');
 require('classnames');
 require('../useResizeObserver-BwGseyVc.js');
@@ -8,8 +8,10 @@ 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('../BannerIcon-BifD3IS3.js');
+require('../useAtlantisConfig-CYXIWWUG.js');
+require('../useSafeLayoutEffect-s4dpytw-.js');
+require('../index-t2DqzTGa.js');
 require('../style-inject.es-XZHJH68X.js');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');

package/dist/Banner/index.mjs

@@ -1,4 +1,4 @@
-export { B as Banner } from '../Banner-CNVBnTc5.js';
+export { B as Banner } from '../Banner-BlkdZtWM.js';
 import 'react';
 import 'classnames';
 import '../useResizeObserver-ZgXMUTij.js';
@@ -6,8 +6,10 @@ 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 '../BannerIcon-Dyt3bQRR.js';
+import '../useAtlantisConfig-Dz-mOyhD.js';
+import '../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../index-JVBxhXV1.js';
 import '../style-inject.es-tgCJW-Cu.js';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';

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

@@ -1,19 +1,19 @@
 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 { s as styles, B as BannerIcon } from './BannerIcon-Dyt3bQRR.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-Dz-mOyhD.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 = {
@@ -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-Dhp4UfBI.js}

@@ -3,19 +3,19 @@
 var React = require('react');
 var classnames = require('classnames');
 var useResizeObserver = require('./useResizeObserver-BwGseyVc.js');
-var BannerIcon = require('./BannerIcon-CoUm6Udu.js');
+var BannerIcon = require('./BannerIcon-BifD3IS3.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-CYXIWWUG.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 = {
@@ -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-BifD3IS3.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var getAtlantisConfig = require('./getAtlantisConfig-mcMVqf6m.js');
+var useAtlantisConfig = require('./useAtlantisConfig-CYXIWWUG.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-Dyt3bQRR.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-Dz-mOyhD.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,22 @@
 'use strict';
 
-var Card = require('../Card-DZXBxdQH.js');
+var Card = require('../Card-CHBaqzv3.js');
 require('react');
 require('classnames');
 require('../style-inject.es-XZHJH68X.js');
-require('../Heading-DaQSloBZ.js');
+require('../Heading-MZbPA1EN.js');
 require('../Typography-g6o6Nu4H.js');
-require('../getAtlantisConfig-mcMVqf6m.js');
+require('../useAtlantisConfig-CYXIWWUG.js');
+require('../useSafeLayoutEffect-s4dpytw-.js');
+require('../index-t2DqzTGa.js');
 require('../Button-CdFKgOjt.js');
 require('react-router-dom');
 require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
-require('../Menu-B2CjGXpJ.js');
+require('../Menu-Br_z6m1_.js');
 require('framer-motion');
 require('../useOnKeyDown-B9JF2jLZ.js');
 require('../useRefocusOnActivator-DOJm9VWz.js');
-require('../useSafeLayoutEffect-Qir6pm57.js');
 
 
 

package/dist/Card/index.mjs

@@ -1,16 +1,17 @@
-export { C as Card } from '../Card-9IfVI62-.js';
+export { C as Card } from '../Card-BsiJi1g7.js';
 import 'react';
 import 'classnames';
 import '../style-inject.es-tgCJW-Cu.js';
-import '../Heading-qGWVOyZp.js';
+import '../Heading-B4TyweCq.js';
 import '../Typography-BLZqr2yE.js';
-import '../getAtlantisConfig-6FPWID0P.js';
+import '../useAtlantisConfig-Dz-mOyhD.js';
+import '../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../index-JVBxhXV1.js';
 import '../Button-DCEN_VU9.js';
 import 'react-router-dom';
 import '../Icon-CoHJokXb.js';
 import '@jobber/design';
-import '../Menu-EuYGUgDp.js';
+import '../Menu-C57XI2sy.js';
 import 'framer-motion';
 import '../useOnKeyDown-BsUfDste.js';
 import '../useRefocusOnActivator-CMNWUYSe.js';
-import '../useSafeLayoutEffect-yaw3NyzX.js';

package/dist/{Card-9IfVI62-.js → Card-BsiJi1g7.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-B4TyweCq.js';
 import { B as Button } from './Button-DCEN_VU9.js';
-import { M as Menu } from './Menu-EuYGUgDp.js';
+import { M as Menu } from './Menu-C57XI2sy.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-CHBaqzv3.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-MZbPA1EN.js');
 var Button = require('./Button-CdFKgOjt.js');
-var Menu = require('./Menu-B2CjGXpJ.js');
+var Menu = require('./Menu-Br_z6m1_.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,7 +1,7 @@
 'use strict';
 
-var Chip = require('../Chip-D0QzrwiJ.js');
-var ChipDismissible = require('../ChipDismissible-Cp2IIeHG.js');
+var Chip = require('../Chip-C3Slm72t.js');
+var ChipDismissible = require('../ChipDismissible-CPP7NmO9.js');
 require('react');
 require('classnames');
 require('../useInView-Ct13SCWB.js');
@@ -13,10 +13,12 @@ require('../Icon-B9XNdA1T.js');
 require('@jobber/design');
 require('../useChildComponent-BUH0ttPi.js');
 require('../Typography-g6o6Nu4H.js');
-require('../Tooltip-DSGn-Mt6.js');
+require('../Tooltip-h7mlmKO8.js');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-Qir6pm57.js');
+require('../useSafeLayoutEffect-s4dpytw-.js');
+require('../index-t2DqzTGa.js');
+require('../useIsMounted-Dr3u-G7D.js');
 require('react-popper');
 require('../tslib.es6-ld72nsZq.js');
 

package/dist/Chip/index.mjs

@@ -1,5 +1,5 @@
-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-BsGl_WKW.js';
+export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-CekG0Sf1.js';
 import 'react';
 import 'classnames';
 import '../useInView-Yth15M0p.js';
@@ -11,9 +11,11 @@ import '../Icon-CoHJokXb.js';
 import '@jobber/design';
 import '../useChildComponent-D95jU7NM.js';
 import '../Typography-BLZqr2yE.js';
-import '../Tooltip-Cfg4l2JJ.js';
+import '../Tooltip-BGoYIW4v.js';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-yaw3NyzX.js';
+import '../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../index-JVBxhXV1.js';
+import '../useIsMounted-DaMtx554.js';
 import 'react-popper';
 import '../tslib.es6-Df1SgIEn.js';

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

@@ -6,7 +6,7 @@ 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-Cfg4l2JJ.js';
+import { T as Tooltip } from './Tooltip-BGoYIW4v.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-"};

package/dist/{Chip-D0QzrwiJ.js → Chip-C3Slm72t.js}

@@ -8,7 +8,7 @@ var Avatar = require('./Avatar-AkaG8y0Q.js');
 var Icon = require('./Icon-B9XNdA1T.js');
 var useChildComponent = require('./useChildComponent-BUH0ttPi.js');
 var Typography = require('./Typography-g6o6Nu4H.js');
-var Tooltip = require('./Tooltip-DSGn-Mt6.js');
+var Tooltip = require('./Tooltip-h7mlmKO8.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-"};

package/dist/{ChipDismissible-Cp2IIeHG.js → ChipDismissible-CPP7NmO9.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-D0QzrwiJ.js');
+var Chip = require('./Chip-C3Slm72t.js');
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = tslib_es6.__rest(_a, ["selected"]);

package/dist/{ChipDismissible-B3wENmRd.js → ChipDismissible-CekG0Sf1.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-DiLsQCIb.js';
+import { C as Chip, s as styles } from './Chip-BsGl_WKW.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var InternalChipDismissible = require('../../InternalChipDismissible-B9qWcqXd.js');
+var InternalChipDismissible = require('../../InternalChipDismissible-D-x2dZe2.js');
 require('react');
 require('../../style-inject.es-XZHJH68X.js');
 require('../../useScrollToActive-DMDRmhoI.js');
@@ -25,10 +25,12 @@ require('../../useAssert-CvlH4Ru0.js');
 require('../../_polyfill-node.process-Clw8ILH4.js');
 require('../../Avatar-AkaG8y0Q.js');
 require('color');
-require('../../Tooltip-DSGn-Mt6.js');
+require('../../Tooltip-h7mlmKO8.js');
 require('react-dom');
 require('framer-motion');
-require('../../useSafeLayoutEffect-Qir6pm57.js');
+require('../../useSafeLayoutEffect-s4dpytw-.js');
+require('../../index-t2DqzTGa.js');
+require('../../useIsMounted-Dr3u-G7D.js');
 
 
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -1,4 +1,4 @@
-export { I as InternalChipDismissible } from '../../InternalChipDismissible-BeNRgOsk.js';
+export { I as InternalChipDismissible } from '../../InternalChipDismissible-CvkZplkA.js';
 import 'react';
 import '../../style-inject.es-tgCJW-Cu.js';
 import '../../useScrollToActive-D-aHcMpx.js';
@@ -23,7 +23,9 @@ import '../../useAssert-BeGBODqQ.js';
 import '../../_polyfill-node.process-CzATM2P1.js';
 import '../../Avatar-CckTha1O.js';
 import 'color';
-import '../../Tooltip-Cfg4l2JJ.js';
+import '../../Tooltip-BGoYIW4v.js';
 import 'react-dom';
 import 'framer-motion';
-import '../../useSafeLayoutEffect-yaw3NyzX.js';
+import '../../useSafeLayoutEffect-Biu-Q-_f.js';
+import '../../index-JVBxhXV1.js';
+import '../../useIsMounted-DaMtx554.js';