@jobber/components 5.7.8 → 5.7.9-poc-moving-6945243.15

package/AtlantisThemeContext.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AtlantisThemeContext";

package/AtlantisThemeContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AtlantisThemeContext = require("./dist/AtlantisThemeContext");
+
+Object.keys(AtlantisThemeContext).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AtlantisThemeContext[key];
+    },
+  });
+});

package/Box.d.ts

@@ -0,0 +1 @@
+export * from "./dist/Box";

package/Box.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var Box = require("./dist/Box");
+
+Object.keys(Box).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return Box[key];
+    },
+  });
+});

package/SideDrawer.d.ts

@@ -0,0 +1 @@
+export * from "./dist/SideDrawer";

package/SideDrawer.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var SideDrawer = require("./dist/SideDrawer");
+
+Object.keys(SideDrawer).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return SideDrawer[key];
+    },
+  });
+});

package/dist/AnimatedPresence/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var AnimatedPresence = require('../AnimatedPresence--ZzlYJ69.js');
+var AnimatedPresence = require('../AnimatedPresence-CugW6zuJ.js');
 require('react');
 require('framer-motion');
 require('@jobber/design');

package/dist/AnimatedPresence/index.mjs

@@ -1,4 +1,4 @@
-export { A as AnimatedPresence } from '../AnimatedPresence-O97LypQu.js';
+export { A as AnimatedPresence } from '../AnimatedPresence-DqsLSWYy.js';
 import 'react';
 import 'framer-motion';
 import '@jobber/design';

package/dist/AnimatedSwitcher/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var AnimatedSwitcher = require('../AnimatedSwitcher-CkjsYydc.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-BVmQMPwE.js');
 require('react');
 require('framer-motion');
-require('../Icon-CjUGifdF.js');
+require('../Icon-CIsZwIIN.js');
 require('@jobber/design');
 
 

package/dist/AnimatedSwitcher/index.mjs

@@ -1,5 +1,5 @@
-export { A as AnimatedSwitcher } from '../AnimatedSwitcher-CfmDFfoZ.js';
+export { A as AnimatedSwitcher } from '../AnimatedSwitcher-B6zQ-KnQ.js';
 import 'react';
 import 'framer-motion';
-import '../Icon-G-mQP65f.js';
+import '../Icon-C92W6hj7.js';
 import '@jobber/design';

package/dist/{AnimatedSwitcher-CfmDFfoZ.js → AnimatedSwitcher-B6zQ-KnQ.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { I as Icon } from './Icon-G-mQP65f.js';
+import { I as Icon } from './Icon-C92W6hj7.js';
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;

package/dist/{AnimatedSwitcher-CkjsYydc.js → AnimatedSwitcher-BVmQMPwE.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var Icon = require('./Icon-CjUGifdF.js');
+var Icon = require('./Icon-CIsZwIIN.js');
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;

package/dist/AtlantisContext/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var AtlantisContext = require('../AtlantisContext-BwSYXrts.js');
+var AtlantisContext = require('../AtlantisContext-CgTynQWN.js');
 require('react');
 
 

package/dist/AtlantisContext/index.mjs

@@ -1,2 +1,2 @@
-export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from '../AtlantisContext-OgwJ3VdC.js';
+export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from '../AtlantisContext-DP70AgGV.js';
 import 'react';

package/dist/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
+export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): JSX.Element;
+export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var updateTheme = require('../updateTheme-BHTlAIB9.js');
+require('@jobber/design');
+require('react');
+require('../_commonjsHelpers-DvRzEIOw.js');
+require('../identity-Bg1BAxiZ.js');
+require('../isTypedArray-CSj63dNU.js');
+require('../isObjectLike-zMxLNahE.js');
+require('../_baseAssignValue-BnTtPZvl.js');
+require('../_baseFor-BZxjDppA.js');
+require('../keysIn-CBTd-qDZ.js');
+require('../_isIterateeCall-C9TRT0ur.js');
+require('../_setToString-B7CkMPNY.js');
+
+
+
+exports.AtlantisThemeContextProvider = updateTheme.AtlantisThemeContextProvider;
+exports.THEME_CHANGE_EVENT = updateTheme.THEME_CHANGE_EVENT;
+exports.atlantisThemeContextDefaultValues = updateTheme.atlantisThemeContextDefaultValues;
+exports.updateTheme = updateTheme.updateTheme;
+exports.useAtlantisTheme = updateTheme.useAtlantisTheme;

package/dist/AtlantisThemeContext/index.d.ts

@@ -0,0 +1,3 @@
+export { AtlantisThemeContextProvider, atlantisThemeContextDefaultValues, useAtlantisTheme, } from "./AtlantisThemeContext";
+export { THEME_CHANGE_EVENT, Theme, ThemeChangeDetails, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";
+export { updateTheme } from "./updateTheme";

package/dist/AtlantisThemeContext/index.mjs

@@ -0,0 +1,12 @@
+export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from '../updateTheme-TTV8QF2T.js';
+import '@jobber/design';
+import 'react';
+import '../_commonjsHelpers-DldqFNPA.js';
+import '../identity-BOiVl3Zb.js';
+import '../isTypedArray-DwBnusLx.js';
+import '../isObjectLike-rA1BJ-7N.js';
+import '../_baseAssignValue-Dbx_xUto.js';
+import '../_baseFor-FILq1HP7.js';
+import '../keysIn-X_a1CI3_.js';
+import '../_isIterateeCall-BTxU8iic.js';
+import '../_setToString-Cwp8rE-n.js';

package/dist/AtlantisThemeContext/types.d.ts

@@ -0,0 +1,28 @@
+import { tokens } from "@jobber/design";
+import { PropsWithChildren } from "react";
+export interface AtlantisThemeContextValue {
+    /**
+     * The theme of the application.
+     */
+    readonly theme: Theme;
+    /**
+     * The design tokens for the current theme.
+     */
+    readonly tokens: typeof tokens;
+}
+export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
+    /**
+     * The children to render.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+     * This is dangerous because the children in this provider will not be able to change the theme.
+     */
+    readonly dangerouslyOverrideTheme?: Theme;
+}
+export type Theme = "light" | "dark";
+export interface ThemeChangeDetails {
+    theme: Theme;
+}
+export declare const THEME_CHANGE_EVENT = "atlantis.toggle-theme";

package/dist/AtlantisThemeContext/updateTheme.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from "./types";
+/**
+ * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
+ * Will add data-theme="<newTheme>" to the <html> element.
+ * Will dispatch a custom event "atlantis.toggle-theme" with the new theme for other providers to subscribe to.
+ */
+export declare function updateTheme(theme: Theme): void;

package/dist/Autocomplete/index.cjs

@@ -1,32 +1,32 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-BQa01TdL.js');
-require('../tslib.es6-BRBAJKq6.js');
+var Autocomplete = require('../Autocomplete-DWHaXrAg.js');
+require('../tslib.es6-BJlmvoR9.js');
 require('react');
-require('../debounce-2zkTSVFN.js');
-require('../_commonjsHelpers-CThFMB8i.js');
-require('../isObjectLike-CmGzXpu3.js');
-require('../isSymbol-1x5829ZP.js');
 require('classnames');
 require('react-dom');
 require('react-popper');
-require('../useOnKeyDown-D6rWKzSN.js');
-require('../useSafeLayoutEffect-Fwao4DGy.js');
-require('../useIsMounted-Cx1In5yj.js');
-require('../Text-sDdfjC6i.js');
-require('../Typography-DHK5E8f6.js');
-require('../Icon-CjUGifdF.js');
+require('../useOnKeyDown-CYMrKdpe.js');
+require('../useSafeLayoutEffect-D_xHSoEx.js');
+require('../useIsMounted-Bq7TW-Pq.js');
+require('../Text-BbI2MT33.js');
+require('../Typography-BfSxPxnN.js');
+require('../Icon-CIsZwIIN.js');
 require('@jobber/design');
-require('../Heading-BMNvCP2Z.js');
-require('../InputText-B94Ra1cQ.js');
-require('../FormField-UhfhwEql.js');
+require('../Heading-aVypjEaN.js');
+require('../InputText-BBOCWXKM.js');
+require('../FormField-pjuOSH90.js');
 require('react-hook-form');
 require('framer-motion');
-require('../Button-CfY9luzp.js');
+require('../Button-DzQ0NEwH.js');
 require('react-router-dom');
-require('../useFormFieldFocus-D9ACmgHX.js');
-require('../InputValidation-D6Krobfb.js');
-require('../Spinner-DKgVxQ0H.js');
+require('../useFormFieldFocus-Den3ko5K.js');
+require('../InputValidation-CFxYmRB2.js');
+require('../Spinner-CMgQosLJ.js');
+require('../debounce-DCca0jzc.js');
+require('../_commonjsHelpers-DvRzEIOw.js');
+require('../isObjectLike-zMxLNahE.js');
+require('../isSymbol-D1CDd_b_.js');
 
 
 

package/dist/Autocomplete/index.mjs

@@ -1,27 +1,27 @@
-export { A as Autocomplete } from '../Autocomplete-D01K-Z5K.js';
-import '../tslib.es6-DIIQ4Raf.js';
+export { A as Autocomplete } from '../Autocomplete-heCz08M2.js';
+import '../tslib.es6-CNjDu0Q8.js';
 import 'react';
-import '../debounce-xEZH3rph.js';
-import '../_commonjsHelpers-CigPD5cm.js';
-import '../isObjectLike-6WSWNziC.js';
-import '../isSymbol-CU0jyql9.js';
 import 'classnames';
 import 'react-dom';
 import 'react-popper';
-import '../useOnKeyDown-HnAmdNNC.js';
-import '../useSafeLayoutEffect-5SAJ6NaE.js';
-import '../useIsMounted-C-gS4Jr-.js';
-import '../Text--icDIi9d.js';
-import '../Typography-DNX512VL.js';
-import '../Icon-G-mQP65f.js';
+import '../useOnKeyDown-C1tTcCcY.js';
+import '../useSafeLayoutEffect-BpGLt2TS.js';
+import '../useIsMounted-CcTuX9Jp.js';
+import '../Text-D0arxT9k.js';
+import '../Typography-B_617qWz.js';
+import '../Icon-C92W6hj7.js';
 import '@jobber/design';
-import '../Heading-BoJaeWbc.js';
-import '../InputText-C_lsfVkX.js';
-import '../FormField-BEpu_5ui.js';
+import '../Heading-C4L-AWAD.js';
+import '../InputText-Wa6JW42R.js';
+import '../FormField-DPzNJmPb.js';
 import 'react-hook-form';
 import 'framer-motion';
-import '../Button-BfZKEL67.js';
+import '../Button-MAYItGRi.js';
 import 'react-router-dom';
-import '../useFormFieldFocus-B-pBsNuw.js';
-import '../InputValidation-C-7n2Uh5.js';
-import '../Spinner-CdrFj5v6.js';
+import '../useFormFieldFocus-BqKKAI4f.js';
+import '../InputValidation-CZRkyaP8.js';
+import '../Spinner-CWymRz_2.js';
+import '../debounce-Dn_zNhPP.js';
+import '../_commonjsHelpers-DldqFNPA.js';
+import '../isObjectLike-rA1BJ-7N.js';
+import '../isSymbol-CTnU4G7e.js';

package/dist/{Autocomplete-BQa01TdL.js → Autocomplete-DWHaXrAg.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-BRBAJKq6.js');
+var tslib_es6 = require('./tslib.es6-BJlmvoR9.js');
 var React = require('react');
-var debounce = require('./debounce-2zkTSVFN.js');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
-var useOnKeyDown = require('./useOnKeyDown-D6rWKzSN.js');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-Fwao4DGy.js');
-var useIsMounted = require('./useIsMounted-Cx1In5yj.js');
-var Text = require('./Text-sDdfjC6i.js');
-var Icon = require('./Icon-CjUGifdF.js');
-var Heading = require('./Heading-BMNvCP2Z.js');
-var InputText = require('./InputText-B94Ra1cQ.js');
+var useOnKeyDown = require('./useOnKeyDown-CYMrKdpe.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-D_xHSoEx.js');
+var useIsMounted = require('./useIsMounted-Bq7TW-Pq.js');
+var Text = require('./Text-BbI2MT33.js');
+var Icon = require('./Icon-CIsZwIIN.js');
+var Heading = require('./Heading-aVypjEaN.js');
+var InputText = require('./InputText-BBOCWXKM.js');
+var debounce = require('./debounce-DCca0jzc.js');
 
-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-"};
+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-","spinning":"iPB87GEOvKw-"};
 
 var IndexChange;
 (function (IndexChange) {
@@ -34,7 +34,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     setupKeyListeners();
     React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
     const mounted = useIsMounted.useIsMounted_2();
-    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 menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames(styles.option, {
             [styles.active]: index === highlightedIndex,
             [styles.separator]: addSeparators,
@@ -118,6 +118,36 @@ function useRepositionMenu(attachTo, visible = false) {
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
 
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+function useDebounce(func, wait, options) {
+    const funcRef = React.useRef(func);
+    // We're keeping the provided func wrapped in a ref to avoid forcing the consumer to memoize it.
+    // This is a defense against consumers who aren't memoizing their functions.. or if they are
+    // memoized but invalidating too frequently due to possible bugs.
+    if (funcRef.current !== func) {
+        funcRef.current = func;
+    }
+    const debounced = React.useMemo(() => {
+        return debounce.debounce(() => funcRef.current(), wait, options);
+        // Note: do not add any dependencies! There is currently no use case where we would change
+        // the wait delay or options between renders. By not tracking as dependencies, this allows
+        // consumers of useDebounce to provide a raw object for options rather than forcing them to
+        // memoize that param. Same with the func they provide, we're using a ref to keep that up
+        // to date and to avoid forcing the consumer to memoize it.
+    }, []);
+    React.useEffect(() => {
+        // If the debounced function is recreated (or unmounted), cancel the last call.
+        return () => debounced.cancel();
+    }, [debounced]);
+    return debounced;
+}
+
 // Max statements increased to make room for the debounce functions
 /* eslint max-statements: ["error", 14] */
 function AutocompleteInternal(_a, ref) {
@@ -127,10 +157,9 @@ function AutocompleteInternal(_a, ref) {
     const [menuVisible, setMenuVisible] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const autocompleteRef = React.useRef(null);
-    const delayedSearch = debounce.debounce(updateSearch, debounceRate);
+    const delayedSearch = useDebounce(updateSearch, debounceRate);
     React.useEffect(() => {
         delayedSearch();
-        return delayedSearch.cancel;
     }, [inputText]);
     React.useEffect(() => {
         var _a;

package/dist/{Autocomplete-D01K-Z5K.js → Autocomplete-heCz08M2.js}

@@ -1,18 +1,18 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-DIIQ4Raf.js';
-import React, { useState, useEffect, forwardRef, useRef } from 'react';
-import { d as debounce } from './debounce-xEZH3rph.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-CNjDu0Q8.js';
+import React, { useState, useEffect, useRef, useMemo, forwardRef } from 'react';
 import classnames from 'classnames';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-HnAmdNNC.js';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-5SAJ6NaE.js';
-import { u as useIsMounted_2 } from './useIsMounted-C-gS4Jr-.js';
-import { T as Text } from './Text--icDIi9d.js';
-import { I as Icon } from './Icon-G-mQP65f.js';
-import { H as Heading } from './Heading-BoJaeWbc.js';
-import { I as InputText } from './InputText-C_lsfVkX.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-C1tTcCcY.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-BpGLt2TS.js';
+import { u as useIsMounted_2 } from './useIsMounted-CcTuX9Jp.js';
+import { T as Text } from './Text-D0arxT9k.js';
+import { I as Icon } from './Icon-C92W6hj7.js';
+import { H as Heading } from './Heading-C4L-AWAD.js';
+import { I as InputText } from './InputText-Wa6JW42R.js';
+import { a as debounce } from './debounce-Dn_zNhPP.js';
 
-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-"};
+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-","spinning":"iPB87GEOvKw-"};
 
 var IndexChange;
 (function (IndexChange) {
@@ -32,7 +32,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     setupKeyListeners();
     useEffect(() => setHighlightedIndex(initialHighlight), [options]);
     const mounted = useIsMounted_2();
-    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 menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames(styles.option, {
             [styles.active]: index === highlightedIndex,
             [styles.separator]: addSeparators,
@@ -116,6 +116,36 @@ function useRepositionMenu(attachTo, visible = false) {
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
 
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+function useDebounce(func, wait, options) {
+    const funcRef = useRef(func);
+    // We're keeping the provided func wrapped in a ref to avoid forcing the consumer to memoize it.
+    // This is a defense against consumers who aren't memoizing their functions.. or if they are
+    // memoized but invalidating too frequently due to possible bugs.
+    if (funcRef.current !== func) {
+        funcRef.current = func;
+    }
+    const debounced = useMemo(() => {
+        return debounce(() => funcRef.current(), wait, options);
+        // Note: do not add any dependencies! There is currently no use case where we would change
+        // the wait delay or options between renders. By not tracking as dependencies, this allows
+        // consumers of useDebounce to provide a raw object for options rather than forcing them to
+        // memoize that param. Same with the func they provide, we're using a ref to keep that up
+        // to date and to avoid forcing the consumer to memoize it.
+    }, []);
+    useEffect(() => {
+        // If the debounced function is recreated (or unmounted), cancel the last call.
+        return () => debounced.cancel();
+    }, [debounced]);
+    return debounced;
+}
+
 // Max statements increased to make room for the debounce functions
 /* eslint max-statements: ["error", 14] */
 function AutocompleteInternal(_a, ref) {
@@ -125,10 +155,9 @@ function AutocompleteInternal(_a, ref) {
     const [menuVisible, setMenuVisible] = useState(false);
     const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const autocompleteRef = useRef(null);
-    const delayedSearch = debounce(updateSearch, debounceRate);
+    const delayedSearch = useDebounce(updateSearch, debounceRate);
     useEffect(() => {
         delayedSearch();
-        return delayedSearch.cancel;
     }, [inputText]);
     useEffect(() => {
         var _a;

package/dist/Avatar/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var Avatar = require('../Avatar-BjbzFlrW.js');
+var Avatar = require('../Avatar-Ck0EMAa7.js');
 require('react');
 require('classnames');
 require('color');
-require('../Icon-CjUGifdF.js');
+require('../Icon-CIsZwIIN.js');
 require('@jobber/design');
 
 

package/dist/Avatar/index.mjs

@@ -1,6 +1,6 @@
-export { A as Avatar } from '../Avatar-BN_Bqv2A.js';
+export { A as Avatar } from '../Avatar-DVJDU7I8.js';
 import 'react';
 import 'classnames';
 import 'color';
-import '../Icon-G-mQP65f.js';
+import '../Icon-C92W6hj7.js';
 import '@jobber/design';

package/dist/{Avatar-BjbzFlrW.js → Avatar-Ck0EMAa7.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var classnames = require('classnames');
 var Color = require('color');
-var Icon = require('./Icon-CjUGifdF.js');
+var Icon = require('./Icon-CIsZwIIN.js');
 
-var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
+var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-","spinning":"Hy8OadVgshM-"};
 
 function isDark(colorToCheck) {
     if (colorToCheck == undefined) {

package/dist/{Avatar-BN_Bqv2A.js → Avatar-DVJDU7I8.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 import Color from 'color';
-import { I as Icon } from './Icon-G-mQP65f.js';
+import { I as Icon } from './Icon-C92W6hj7.js';
 
-var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
+var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-","spinning":"Hy8OadVgshM-"};
 
 function isDark(colorToCheck) {
     if (colorToCheck == undefined) {

package/dist/Banner/Banner.d.ts

@@ -19,6 +19,11 @@ interface BannerProps {
      */
     readonly icon?: IconNames;
     onDismiss?(): void;
+    /**
+     * When provided, the banner's visibility is controlled by this value.
+     * @default undefined
+     */
+    readonly controlledVisiblity?: boolean;
 }
-export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element | null;
+export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, controlledVisiblity, }: BannerProps): JSX.Element | null;
 export {};

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var BannerIcon = require('../../../BannerIcon-BUgJRv5_.js');
+var BannerIcon = require('../../../BannerIcon-zv3eo4fx.js');
 require('react');
 require('classnames');
-require('../../../Icon-CjUGifdF.js');
+require('../../../Icon-CIsZwIIN.js');
 require('@jobber/design');
 
 

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

@@ -1,5 +1,5 @@
-export { B as BannerIcon } from '../../../BannerIcon-DmGqkyZU.js';
+export { B as BannerIcon } from '../../../BannerIcon-J_qkqy10.js';
 import 'react';
 import 'classnames';
-import '../../../Icon-G-mQP65f.js';
+import '../../../Icon-C92W6hj7.js';
 import '@jobber/design';

package/dist/Banner/index.cjs

@@ -1,21 +1,22 @@
 'use strict';
 
-var Banner = require('../Banner-CEUyAlDj.js');
+var Banner = require('../Banner-B7gmM1lC.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-B3Iyjqe2.js');
-require('../_commonjsHelpers-CThFMB8i.js');
-require('../debounce-2zkTSVFN.js');
-require('../isObjectLike-CmGzXpu3.js');
-require('../isSymbol-1x5829ZP.js');
-require('../BannerIcon-BUgJRv5_.js');
-require('../Icon-CjUGifdF.js');
+require('../useResizeObserver-DEhL1mzu.js');
+require('../_commonjsHelpers-DvRzEIOw.js');
+require('../throttle-DMLWZScl.js');
+require('../debounce-DCca0jzc.js');
+require('../isObjectLike-zMxLNahE.js');
+require('../isSymbol-D1CDd_b_.js');
+require('../BannerIcon-zv3eo4fx.js');
+require('../Icon-CIsZwIIN.js');
 require('@jobber/design');
-require('../Text-sDdfjC6i.js');
-require('../Typography-DHK5E8f6.js');
-require('../Button-CfY9luzp.js');
+require('../Text-BbI2MT33.js');
+require('../Typography-BfSxPxnN.js');
+require('../Button-DzQ0NEwH.js');
 require('react-router-dom');
-require('../ButtonDismiss-Ju4CNPvU.js');
+require('../ButtonDismiss-D13twZoG.js');