@jobber/components 5.38.0 → 5.39.0

package/dist/InputPhoneNumber/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var InputPhoneNumber = require('../InputPhoneNumber-DkUmKct7.js');
-require('../tslib.es6-0dkOa4kW.js');
+var InputPhoneNumber = require('../InputPhoneNumber-DjDrb8to.js');
+require('../tslib.es6-Ces_VRSu.js');
 require('react');
 require('react-hook-form');
-require('../FormField-Czzotq7h.js');
+require('../FormField-sb-hXNmu.js');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-1nU6xcqd.js');
+require('../Button-Cw357-Ir.js');
 require('react-router-dom');
-require('../Icon-BCBFrSAz.js');
-require('../Typography-8W01sGUl.js');
-require('../Text-8blxz24g.js');
-require('../useFormFieldFocus-BT4soNFm.js');
-require('../InputValidation-CS_Zu7bq.js');
-require('../Spinner-M2YNEy48.js');
+require('../Icon-4aSo6vx6.js');
+require('../Typography-CA5uhNNq.js');
+require('../Text-B0ggBplq.js');
+require('../useFormFieldFocus-1ERKAh63.js');
+require('../InputValidation-D6eShbIt.js');
+require('../Spinner-Dl6L-FFy.js');
 
 
 

package/dist/InputPhoneNumber/index.mjs

@@ -1,16 +1,16 @@
-export { I as InputPhoneNumber } from '../InputPhoneNumber-CCcxv8F7.js';
-import '../tslib.es6-DWyNNqrB.js';
+export { I as InputPhoneNumber } from '../InputPhoneNumber-B5VFOZWZ.js';
+import '../tslib.es6-BSZYTK_Y.js';
 import 'react';
 import 'react-hook-form';
-import '../FormField-dmnpNqgp.js';
+import '../FormField-DS2pXAMR.js';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-C9bjUJsY.js';
+import '../Button-DLsHuj_y.js';
 import 'react-router-dom';
-import '../Icon-Bo4LWbns.js';
-import '../Typography-CFfIrMwQ.js';
-import '../Text-C_CZ5pnD.js';
-import '../useFormFieldFocus-DAboxZm5.js';
-import '../InputValidation-D9Y5zqH2.js';
-import '../Spinner-CeCoQOCU.js';
+import '../Icon-BL38PebQ.js';
+import '../Typography-VubwNP1h.js';
+import '../Text-jjSKDrw-.js';
+import '../useFormFieldFocus-D66DRBf8.js';
+import '../InputValidation-DeRIsFsp.js';
+import '../Spinner-Bl4EVXFP.js';

package/dist/{InputPhoneNumber-CCcxv8F7.js → InputPhoneNumber-B5VFOZWZ.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-DWyNNqrB.js';
+import { _ as __rest } from './tslib.es6-BSZYTK_Y.js';
 import React, { useState, cloneElement } from 'react';
 import { useFormContext, useForm } from 'react-hook-form';
-import { F as FormField } from './FormField-dmnpNqgp.js';
+import { F as FormField } from './FormField-DS2pXAMR.js';
 
 var styles = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-","spinning":"_1-DrP9OjTi4-"};
 

package/dist/{InputPhoneNumber-DkUmKct7.js → InputPhoneNumber-DjDrb8to.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-0dkOa4kW.js');
+var tslib_es6 = require('./tslib.es6-Ces_VRSu.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var FormField = require('./FormField-Czzotq7h.js');
+var FormField = require('./FormField-sb-hXNmu.js');
 
 var styles = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-","spinning":"_1-DrP9OjTi4-"};
 

package/dist/InputText/index.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var InputText = require('../InputText-CRQnS4_R.js');
+var InputText = require('../InputText-Bc4M_POa.js');
 require('react');
-require('../useSafeLayoutEffect-DZddDKCo.js');
-require('../FormField-Czzotq7h.js');
-require('../tslib.es6-0dkOa4kW.js');
+require('../useSafeLayoutEffect-CIw8eTBT.js');
+require('../FormField-sb-hXNmu.js');
+require('../tslib.es6-Ces_VRSu.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-1nU6xcqd.js');
+require('../Button-Cw357-Ir.js');
 require('react-router-dom');
-require('../Icon-BCBFrSAz.js');
-require('../Typography-8W01sGUl.js');
-require('../Text-8blxz24g.js');
-require('../useFormFieldFocus-BT4soNFm.js');
-require('../InputValidation-CS_Zu7bq.js');
-require('../Spinner-M2YNEy48.js');
+require('../Icon-4aSo6vx6.js');
+require('../Typography-CA5uhNNq.js');
+require('../Text-B0ggBplq.js');
+require('../useFormFieldFocus-1ERKAh63.js');
+require('../InputValidation-D6eShbIt.js');
+require('../Spinner-Dl6L-FFy.js');
 
 
 

package/dist/InputText/index.mjs

@@ -1,17 +1,17 @@
-export { I as InputText } from '../InputText-CDF_ovCP.js';
+export { I as InputText } from '../InputText-CP9RccN7.js';
 import 'react';
-import '../useSafeLayoutEffect-D7nHNx5v.js';
-import '../FormField-dmnpNqgp.js';
-import '../tslib.es6-DWyNNqrB.js';
+import '../useSafeLayoutEffect-DUsEPAJl.js';
+import '../FormField-DS2pXAMR.js';
+import '../tslib.es6-BSZYTK_Y.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-C9bjUJsY.js';
+import '../Button-DLsHuj_y.js';
 import 'react-router-dom';
-import '../Icon-Bo4LWbns.js';
-import '../Typography-CFfIrMwQ.js';
-import '../Text-C_CZ5pnD.js';
-import '../useFormFieldFocus-DAboxZm5.js';
-import '../InputValidation-D9Y5zqH2.js';
-import '../Spinner-CeCoQOCU.js';
+import '../Icon-BL38PebQ.js';
+import '../Typography-VubwNP1h.js';
+import '../Text-jjSKDrw-.js';
+import '../useFormFieldFocus-D66DRBf8.js';
+import '../InputValidation-DeRIsFsp.js';
+import '../Spinner-Bl4EVXFP.js';

package/dist/{InputText-CRQnS4_R.js → InputText-Bc4M_POa.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-DZddDKCo.js');
-var FormField = require('./FormField-Czzotq7h.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-CIw8eTBT.js');
+var FormField = require('./FormField-sb-hXNmu.js');
 
 function InputTextInternal(props, ref) {
     const inputRef = React.useRef(null);

package/dist/{InputText-CDF_ovCP.js → InputText-CP9RccN7.js}

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-D7nHNx5v.js';
-import { F as FormField } from './FormField-dmnpNqgp.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-DUsEPAJl.js';
+import { F as FormField } from './FormField-DS2pXAMR.js';
 
 function InputTextInternal(props, ref) {
     const inputRef = useRef(null);

package/dist/InputTime/index.cjs

@@ -1,26 +1,26 @@
 'use strict';
 
-var InputTime = require('../InputTime-CB2LgsVq.js');
-require('../tslib.es6-0dkOa4kW.js');
+var InputTime = require('../InputTime-Bqmp4LXg.js');
+require('../tslib.es6-Ces_VRSu.js');
 require('react');
 require('@std-proposal/temporal');
-require('../debounce-2L0kNTKC.js');
-require('../_commonjsHelpers-Bun7aV_C.js');
-require('../isObjectLike-iOEClw-y.js');
-require('../isSymbol-BbpzJ2E5.js');
-require('../FormField-Czzotq7h.js');
+require('../debounce-s15hWybq.js');
+require('../_commonjsHelpers-BLIunDkT.js');
+require('../isObjectLike-4Yd8T8FR.js');
+require('../isSymbol-B0s5GHcC.js');
+require('../FormField-sb-hXNmu.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-1nU6xcqd.js');
+require('../Button-Cw357-Ir.js');
 require('react-router-dom');
-require('../Icon-BCBFrSAz.js');
-require('../Typography-8W01sGUl.js');
-require('../Text-8blxz24g.js');
-require('../useFormFieldFocus-BT4soNFm.js');
-require('../InputValidation-CS_Zu7bq.js');
-require('../Spinner-M2YNEy48.js');
+require('../Icon-4aSo6vx6.js');
+require('../Typography-CA5uhNNq.js');
+require('../Text-B0ggBplq.js');
+require('../useFormFieldFocus-1ERKAh63.js');
+require('../InputValidation-D6eShbIt.js');
+require('../Spinner-Dl6L-FFy.js');
 
 
 

package/dist/InputTime/index.mjs

@@ -1,21 +1,21 @@
-export { I as InputTime } from '../InputTime-oJ4uCk6s.js';
-import '../tslib.es6-DWyNNqrB.js';
+export { I as InputTime } from '../InputTime-mRz15-ag.js';
+import '../tslib.es6-BSZYTK_Y.js';
 import 'react';
 import '@std-proposal/temporal';
-import '../debounce-BIAgduyw.js';
-import '../_commonjsHelpers-BdCpr4Cf.js';
-import '../isObjectLike-BzVAyD45.js';
-import '../isSymbol-KqZRS9cm.js';
-import '../FormField-dmnpNqgp.js';
+import '../debounce-B08Maooe.js';
+import '../_commonjsHelpers-Wxgt4_Xa.js';
+import '../isObjectLike-D1YiP1XU.js';
+import '../isSymbol-v0Zzh12-.js';
+import '../FormField-DS2pXAMR.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-C9bjUJsY.js';
+import '../Button-DLsHuj_y.js';
 import 'react-router-dom';
-import '../Icon-Bo4LWbns.js';
-import '../Typography-CFfIrMwQ.js';
-import '../Text-C_CZ5pnD.js';
-import '../useFormFieldFocus-DAboxZm5.js';
-import '../InputValidation-D9Y5zqH2.js';
-import '../Spinner-CeCoQOCU.js';
+import '../Icon-BL38PebQ.js';
+import '../Typography-VubwNP1h.js';
+import '../Text-jjSKDrw-.js';
+import '../useFormFieldFocus-D66DRBf8.js';
+import '../InputValidation-DeRIsFsp.js';
+import '../Spinner-Bl4EVXFP.js';

package/dist/{InputTime-CB2LgsVq.js → InputTime-Bqmp4LXg.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-0dkOa4kW.js');
+var tslib_es6 = require('./tslib.es6-Ces_VRSu.js');
 var React = require('react');
 var temporal = require('@std-proposal/temporal');
-var debounce = require('./debounce-2L0kNTKC.js');
-var FormField = require('./FormField-Czzotq7h.js');
+var debounce = require('./debounce-s15hWybq.js');
+var FormField = require('./FormField-sb-hXNmu.js');
 
 function civilTimeToHTMLTime(civilTime) {
     if (civilTime == undefined) {

package/dist/{InputTime-oJ4uCk6s.js → InputTime-mRz15-ag.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-DWyNNqrB.js';
+import { _ as __rest } from './tslib.es6-BSZYTK_Y.js';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { CivilTime } from '@std-proposal/temporal';
-import { a as debounce } from './debounce-BIAgduyw.js';
-import { F as FormField } from './FormField-dmnpNqgp.js';
+import { a as debounce } from './debounce-B08Maooe.js';
+import { F as FormField } from './FormField-DS2pXAMR.js';
 
 function civilTimeToHTMLTime(civilTime) {
     if (civilTime == undefined) {

package/dist/InputValidation/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var InputValidation = require('../InputValidation-CS_Zu7bq.js');
+var InputValidation = require('../InputValidation-D6eShbIt.js');
 require('react');
 require('framer-motion');
-require('../Text-8blxz24g.js');
-require('../Typography-8W01sGUl.js');
+require('../Text-B0ggBplq.js');
+require('../Typography-CA5uhNNq.js');
 require('classnames');
-require('../Icon-BCBFrSAz.js');
+require('../Icon-4aSo6vx6.js');
 require('@jobber/design');
 
 

package/dist/InputValidation/index.mjs

@@ -1,8 +1,8 @@
-export { I as InputValidation } from '../InputValidation-D9Y5zqH2.js';
+export { I as InputValidation } from '../InputValidation-DeRIsFsp.js';
 import 'react';
 import 'framer-motion';
-import '../Text-C_CZ5pnD.js';
-import '../Typography-CFfIrMwQ.js';
+import '../Text-jjSKDrw-.js';
+import '../Typography-VubwNP1h.js';
 import 'classnames';
-import '../Icon-Bo4LWbns.js';
+import '../Icon-BL38PebQ.js';
 import '@jobber/design';

package/dist/{InputValidation-CS_Zu7bq.js → InputValidation-D6eShbIt.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var Text = require('./Text-8blxz24g.js');
-var Icon = require('./Icon-BCBFrSAz.js');
+var Text = require('./Text-B0ggBplq.js');
+var Icon = require('./Icon-4aSo6vx6.js');
 
 var styles = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-","spinning":"jFBJf5JUNfI-"};
 

package/dist/{InputValidation-D9Y5zqH2.js → InputValidation-DeRIsFsp.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { T as Text } from './Text-C_CZ5pnD.js';
-import { I as Icon } from './Icon-Bo4LWbns.js';
+import { T as Text } from './Text-jjSKDrw-.js';
+import { I as Icon } from './Icon-BL38PebQ.js';
 
 var styles = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-","spinning":"jFBJf5JUNfI-"};
 

package/dist/InternalChipDismissible-Bp_bWPeX.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-BKZ6e8vn.js';
+import './isObjectLike-D1YiP1XU.js';
+import '@jobber/design';
+import 'react-popper';
+import { a as debounce } from './debounce-B08Maooe.js';
+import classnames from 'classnames';
+import { T as Text } from './Text-jjSKDrw-.js';
+import { B as Button } from './Button-DLsHuj_y.js';
+import { S as Spinner } from './Spinner-Bl4EVXFP.js';
+import { C as Chip, I as InternalChipButton } from './Chip-Ds_AnRPN.js';
+import './tslib.es6-BSZYTK_Y.js';
+
+function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
+    return (React.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React.createElement(Chip.Prefix, null, prefix),
+        suffix && React.createElement(Chip.Suffix, null, suffix)));
+}
+
+var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-","spinning":"c88tg50FoHI-"};
+
+function InternalChipDismissibleInput(props) {
+    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
+    const menuRef = useScrollToActive(activeIndex);
+    const { ref: visibleChildRef, isInView } = useInView();
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
+    useEffect(() => {
+        if (menuOpen && update)
+            update();
+    }, [allOptions]);
+    useEffect(() => {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    useEffect(() => {
+        isInView && onLoadMore && onLoadMore(searchValue);
+    }, [isInView]);
+    if (!menuOpen) {
+        return React.cloneElement(activator, { onClick: handleOpenMenu });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
+                        [styles.activeOption]: activeIndex === i,
+                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                    React.createElement("span", { "aria-hidden": true }, option.prefix),
+                    React.createElement(Text, null, option.label)))),
+                React.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
+                    React.createElement(Spinner, { size: "small", inline: true }))))))));
+}
+
+function InternalChipDismissible(props) {
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
+    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+}
+
+export { InternalChipDismissible as I, InternalChip as a };

package/dist/InternalChipDismissible-_oOuEaJb.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var React = require('react');
+var useScrollToActive = require('./useScrollToActive-_tVmfyq_.js');
+require('./isObjectLike-4Yd8T8FR.js');
+require('@jobber/design');
+require('react-popper');
+var debounce = require('./debounce-s15hWybq.js');
+var classnames = require('classnames');
+var Text = require('./Text-B0ggBplq.js');
+var Button = require('./Button-Cw357-Ir.js');
+var Spinner = require('./Spinner-Dl6L-FFy.js');
+var Chip = require('./Chip-BWQgTcl7.js');
+require('./tslib.es6-Ces_VRSu.js');
+
+function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
+    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
+        suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
+}
+
+var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-","spinning":"c88tg50FoHI-"};
+
+function InternalChipDismissibleInput(props) {
+    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
+    const menuRef = useScrollToActive.useScrollToActive(activeIndex);
+    const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
+    React.useEffect(() => {
+        if (menuOpen && update)
+            update();
+    }, [allOptions]);
+    React.useEffect(() => {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    React.useEffect(() => {
+        isInView && onLoadMore && onLoadMore(searchValue);
+    }, [isInView]);
+    if (!menuOpen) {
+        return React.cloneElement(activator, { onClick: handleOpenMenu });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
+                        [styles.activeOption]: activeIndex === i,
+                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                    React.createElement("span", { "aria-hidden": true }, option.prefix),
+                    React.createElement(Text.Text, null, option.label)))),
+                React.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
+                    React.createElement(Spinner.Spinner, { size: "small", inline: true }))))))));
+}
+
+function InternalChipDismissible(props) {
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
+    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(Chip.InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+}
+
+exports.InternalChip = InternalChip;
+exports.InternalChipDismissible = InternalChipDismissible;

package/dist/LightBox/index.cjs

@@ -1,25 +1,25 @@
 'use strict';
 
-var LightBox = require('../LightBox-B2JOIyPf.js');
+var LightBox = require('../LightBox-DvmAhJYP.js');
 require('react');
 require('framer-motion');
 require('react-dom');
-require('../debounce-2L0kNTKC.js');
-require('../_commonjsHelpers-Bun7aV_C.js');
-require('../isObjectLike-iOEClw-y.js');
-require('../isSymbol-BbpzJ2E5.js');
-require('../useRefocusOnActivator-CURykF6R.js');
-require('../useOnKeyDown-DdcejHCP.js');
-require('../useFocusTrap-D0gOaOs3.js');
-require('../useIsMounted-DCZrrrxC.js');
-require('../useSafeLayoutEffect-DZddDKCo.js');
-require('../ButtonDismiss-C8rqXdXR.js');
-require('../Button-1nU6xcqd.js');
+require('../debounce-s15hWybq.js');
+require('../_commonjsHelpers-BLIunDkT.js');
+require('../isObjectLike-4Yd8T8FR.js');
+require('../isSymbol-B0s5GHcC.js');
+require('../useRefocusOnActivator-C0uzSamb.js');
+require('../useOnKeyDown-YIK7w0d8.js');
+require('../useFocusTrap-CnK73-Jl.js');
+require('../useIsMounted-BRwZjot8.js');
+require('../useSafeLayoutEffect-CIw8eTBT.js');
+require('../ButtonDismiss-GtzBolIo.js');
+require('../Button-Cw357-Ir.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-BCBFrSAz.js');
+require('../Icon-4aSo6vx6.js');
 require('@jobber/design');
-require('../Typography-8W01sGUl.js');
+require('../Typography-CA5uhNNq.js');
 
 
 

package/dist/LightBox/index.mjs

@@ -1,20 +1,20 @@
-export { L as LightBox } from '../LightBox-CuicGERe.js';
+export { L as LightBox } from '../LightBox-dvt6lMNd.js';
 import 'react';
 import 'framer-motion';
 import 'react-dom';
-import '../debounce-BIAgduyw.js';
-import '../_commonjsHelpers-BdCpr4Cf.js';
-import '../isObjectLike-BzVAyD45.js';
-import '../isSymbol-KqZRS9cm.js';
-import '../useRefocusOnActivator-BtjO40Cn.js';
-import '../useOnKeyDown-BY_e-itg.js';
-import '../useFocusTrap-BYu2Rc7Q.js';
-import '../useIsMounted-Bxj1FW8-.js';
-import '../useSafeLayoutEffect-D7nHNx5v.js';
-import '../ButtonDismiss-CsFZRprX.js';
-import '../Button-C9bjUJsY.js';
+import '../debounce-B08Maooe.js';
+import '../_commonjsHelpers-Wxgt4_Xa.js';
+import '../isObjectLike-D1YiP1XU.js';
+import '../isSymbol-v0Zzh12-.js';
+import '../useRefocusOnActivator-2Nu7D9WQ.js';
+import '../useOnKeyDown-DyaRHzEn.js';
+import '../useFocusTrap-CrUEn4DA.js';
+import '../useIsMounted-C5IR8jDM.js';
+import '../useSafeLayoutEffect-DUsEPAJl.js';
+import '../ButtonDismiss-BiWJhbRd.js';
+import '../Button-DLsHuj_y.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Icon-Bo4LWbns.js';
+import '../Icon-BL38PebQ.js';
 import '@jobber/design';
-import '../Typography-CFfIrMwQ.js';
+import '../Typography-VubwNP1h.js';

package/dist/{LightBox-B2JOIyPf.js → LightBox-DvmAhJYP.js}

@@ -3,13 +3,13 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var debounce = require('./debounce-2L0kNTKC.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-CURykF6R.js');
-var useOnKeyDown = require('./useOnKeyDown-DdcejHCP.js');
-var useFocusTrap = require('./useFocusTrap-D0gOaOs3.js');
-var useIsMounted = require('./useIsMounted-DCZrrrxC.js');
-var ButtonDismiss = require('./ButtonDismiss-C8rqXdXR.js');
-var Button = require('./Button-1nU6xcqd.js');
+var debounce = require('./debounce-s15hWybq.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-C0uzSamb.js');
+var useOnKeyDown = require('./useOnKeyDown-YIK7w0d8.js');
+var useFocusTrap = require('./useFocusTrap-CnK73-Jl.js');
+var useIsMounted = require('./useIsMounted-BRwZjot8.js');
+var ButtonDismiss = require('./ButtonDismiss-GtzBolIo.js');
+var Button = require('./Button-Cw357-Ir.js');
 
 var styles = {"next":"_3JgBCebdbNU-","prev":"JJOBEL7d-10-","lightboxWrapper":"fAep1A-0xIU-","toolbar":"AfUUWErd5S4-","title":"ysUYbBTaORk-","imagesWrapper":"GSOVtN1Y3IU-","overlay":"-V917BdNqSs-","image":"sjwUjzb3a5c-","spinning":"ovrk5UAx5V4-"};
 

package/dist/{LightBox-CuicGERe.js → LightBox-dvt6lMNd.js}

@@ -1,13 +1,13 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import ReactDOM from 'react-dom';
-import { a as debounce } from './debounce-BIAgduyw.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-BtjO40Cn.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-BY_e-itg.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-BYu2Rc7Q.js';
-import { u as useIsMounted_2 } from './useIsMounted-Bxj1FW8-.js';
-import { B as ButtonDismiss } from './ButtonDismiss-CsFZRprX.js';
-import { B as Button } from './Button-C9bjUJsY.js';
+import { a as debounce } from './debounce-B08Maooe.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-2Nu7D9WQ.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DyaRHzEn.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CrUEn4DA.js';
+import { u as useIsMounted_2 } from './useIsMounted-C5IR8jDM.js';
+import { B as ButtonDismiss } from './ButtonDismiss-BiWJhbRd.js';
+import { B as Button } from './Button-DLsHuj_y.js';
 
 var styles = {"next":"_3JgBCebdbNU-","prev":"JJOBEL7d-10-","lightboxWrapper":"fAep1A-0xIU-","toolbar":"AfUUWErd5S4-","title":"ysUYbBTaORk-","imagesWrapper":"GSOVtN1Y3IU-","overlay":"-V917BdNqSs-","image":"sjwUjzb3a5c-","spinning":"ovrk5UAx5V4-"};
 

package/dist/Link/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Link = require('../Link-pzJvhHCg.js');
+var Link = require('../Link-BDzrTaCd.js');
 require('react');
 
 

package/dist/Link/index.mjs

@@ -1,2 +1,2 @@
-export { L as Link } from '../Link-RTQqHCn6.js';
+export { L as Link } from '../Link-BeQDW25S.js';
 import 'react';