@jobber/components 5.20.8-SCOTTTHd.45 → 5.20.8-SCOTTTHs-a30bcbb.35

package/dist/{Combobox-Df77sTO9.js → Combobox-CatuMSqJ.js}

@@ -1,19 +1,19 @@
 'use strict';
 
 var React = require('react');
-var ComboboxContent = require('./ComboboxContent-Dj94vmCX.js');
-var ComboboxAction = require('./ComboboxAction-D0tqfHR5.js');
-var ComboboxProvider = require('./ComboboxProvider-Bmopsc_X.js');
-var ComboboxTrigger = require('./ComboboxTrigger-DYxVlkMP.js');
-var ComboboxOption = require('./ComboboxOption-CxxAN5VX.js');
-var debounce = require('./debounce-Cng32dig.js');
-var noop = require('./noop-H9IAiqV3.js');
-var ComboboxActivator = require('./ComboboxActivator-DkK2bac3.js');
-var useAssert = require('./useAssert-CqTVaTm7.js');
+var ComboboxContent = require('./ComboboxContent-CVeT78Kb.js');
+var ComboboxAction = require('./ComboboxAction-DRYanCOZ.js');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
+var ComboboxTrigger = require('./ComboboxTrigger-Cx9aytlP.js');
+var ComboboxOption = require('./ComboboxOption-DEICUWcX.js');
+var debounce = require('./debounce-BN5llZ7Y.js');
+var noop = require('./noop-BUBheiOg.js');
+var ComboboxActivator = require('./ComboboxActivator-Bo4rCXFr.js');
+var useAssert = require('./useAssert-BWTjh08k.js');
 
-var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-","spinning":"AN4sbCxlE9A-"};
+var styles = {"overlay":"xxU2WqkpXZU-","wrapper":"W-9SMjhEMpI-","spinning":"mqMvu8yxz2w-"};
 
-function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+function useMakeComboboxHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
@@ -23,6 +23,9 @@ function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shoul
             shouldScroll.current = true;
         }
     }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
+    const handleOpen = React.useCallback(() => {
+        setOpen(true);
+    }, [setOpen]);
     const handleSelection = React.useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -38,6 +41,7 @@ function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shoul
     return {
         handleClose,
         handleSelection,
+        handleOpen,
     };
 }
 function handleMultiSelect(selectCallback, selected, selection) {
@@ -55,19 +59,19 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = React.useCallback(debounce.debounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
-    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const { handleClose, handleSelection, handleOpen } = useMakeComboboxHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
         searchValue,
         setSearchValue,
         open,
-        setOpen,
         selectedOptions: selected,
         selectedStateSetter: onSelect,
         shouldScroll,
         handleClose,
         handleSelection,
+        handleOpen,
         internalFilteredOptions,
         handleSearchChange: onSearch ? searchCallback : noop.noop,
     };
@@ -104,13 +108,14 @@ function Combobox(props) {
         id: option.props.id,
         label: option.props.label,
         prefix: option.props.prefix,
+        customRender: option.props.customRender,
     }))) || [], [optionElements]);
-    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
+    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
         React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React.createElement(ComboboxTrigger.ComboboxTrigger, { label: props.label, selected: props.selected })),
-            React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+            React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator.ComboboxActivator;
 Combobox.Action = ComboboxAction.ComboboxAction;

package/dist/{ComboboxAction-4GHLgOmM.js → ComboboxAction-CiO33kY8.js}

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import { T as Typography } from './Typography-DdPGuT7r.js';
-import { a as ComboboxContext } from './ComboboxProvider-DoixiYnH.js';
+import { T as Typography } from './Typography-DhGlhWcl.js';
+import { a as ComboboxContext } from './ComboboxProvider-LU3bOsya.js';
 
-var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-","spinning":"TAUXQmjxh0w-"};
+var styles = {"actionContainer":"NWf8JR3TBoo-","actionButton":"PoMXFVYVY5A-","spinning":"lP2oDQm9j88-"};
 
 function ComboboxAction(props) {
-    const { searchValue } = useContext(ComboboxContext);
+    const { searchValue, handleClose } = useContext(ComboboxContext);
     if (props.visible) {
         const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
         if (isVisible || !props.visible) {
@@ -14,9 +14,15 @@ function ComboboxAction(props) {
     }
     const options = { searchValue };
     const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
+    const handleClick = (e) => {
+        if (!props.keepOpenOnClick) {
+            handleClose();
+        }
+        props.onClick(e, options);
+    };
     return (React.createElement("div", { className: styles.actionContainer },
-        React.createElement("button", { className: styles.actionButton, onClick: e => props.onClick(e, options), type: "button" },
-            React.createElement(Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
+        React.createElement("button", { className: styles.actionButton, onClick: handleClick, type: "button" },
+            React.createElement(Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
 }
 
 export { ComboboxAction as C };

package/dist/{ComboboxAction-D0tqfHR5.js → ComboboxAction-DRYanCOZ.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-KvPMVZyR.js');
-var ComboboxProvider = require('./ComboboxProvider-Bmopsc_X.js');
+var Typography = require('./Typography-DYUPEo3A.js');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
 
-var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-","spinning":"TAUXQmjxh0w-"};
+var styles = {"actionContainer":"NWf8JR3TBoo-","actionButton":"PoMXFVYVY5A-","spinning":"lP2oDQm9j88-"};
 
 function ComboboxAction(props) {
-    const { searchValue } = React.useContext(ComboboxProvider.ComboboxContext);
+    const { searchValue, handleClose } = React.useContext(ComboboxProvider.ComboboxContext);
     if (props.visible) {
         const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
         if (isVisible || !props.visible) {
@@ -16,9 +16,15 @@ function ComboboxAction(props) {
     }
     const options = { searchValue };
     const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
+    const handleClick = (e) => {
+        if (!props.keepOpenOnClick) {
+            handleClose();
+        }
+        props.onClick(e, options);
+    };
     return (React.createElement("div", { className: styles.actionContainer },
-        React.createElement("button", { className: styles.actionButton, onClick: e => props.onClick(e, options), type: "button" },
-            React.createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
+        React.createElement("button", { className: styles.actionButton, onClick: handleClick, type: "button" },
+            React.createElement(Typography.Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
 }
 
 exports.ComboboxAction = ComboboxAction;

package/dist/ComboboxActivator-3cwd5sZw.js

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { C as Chip } from './Chip-D3p5kdQT.js';
+import './tslib.es6-CeHUynox.js';
+import '@jobber/design';
+import { a as ComboboxContext } from './ComboboxProvider-LU3bOsya.js';
+import { C as COMBOBOX_MENU_ID } from './constants-DCAch56Z.js';
+
+function useComboboxActivatorAccessibility() {
+    const { label, open } = useContext(ComboboxContext);
+    return {
+        ariaLabel: label,
+        ariaExpanded: open,
+        ariaControls: COMBOBOX_MENU_ID,
+        role: "combobox",
+    };
+}
+
+function ComboboxActivator(props) {
+    const { handleOpen } = React.useContext(ComboboxContext);
+    const accessibilityAttributes = useComboboxActivatorAccessibility();
+    if (typeof props.children !== "function" &&
+        (props.children.type === Button || props.children.type === Chip)) {
+        return React.cloneElement(props.children, {
+            role: accessibilityAttributes.role,
+            onClick: handleOpen,
+        });
+    }
+    else if (typeof props.children === "function") {
+        return props.children(Object.assign(Object.assign({}, accessibilityAttributes), { open: handleOpen }));
+    }
+    return null;
+}
+
+export { ComboboxActivator as C };

package/dist/ComboboxActivator-Bo4rCXFr.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-X03o-OsV.js');
+var Chip = require('./Chip-CMURaeyE.js');
+require('./tslib.es6-D1nA6hj6.js');
+require('@jobber/design');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
+var constants = require('./constants-D1-obPRE.js');
+
+function useComboboxActivatorAccessibility() {
+    const { label, open } = React.useContext(ComboboxProvider.ComboboxContext);
+    return {
+        ariaLabel: label,
+        ariaExpanded: open,
+        ariaControls: constants.COMBOBOX_MENU_ID,
+        role: "combobox",
+    };
+}
+
+function ComboboxActivator(props) {
+    const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
+    const accessibilityAttributes = useComboboxActivatorAccessibility();
+    if (typeof props.children !== "function" &&
+        (props.children.type === Button.Button || props.children.type === Chip.Chip)) {
+        return React.cloneElement(props.children, {
+            role: accessibilityAttributes.role,
+            onClick: handleOpen,
+        });
+    }
+    else if (typeof props.children === "function") {
+        return props.children(Object.assign(Object.assign({}, accessibilityAttributes), { open: handleOpen }));
+    }
+    return null;
+}
+
+exports.ComboboxActivator = ComboboxActivator;

package/dist/{ComboboxContent-CcRka06W.js → ComboboxContent-3t0poov0.js}

@@ -1,16 +1,17 @@
 import React, { useContext, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
-import { C as ComboboxContentSearch } from './ComboboxContentSearch-DC0Fksgt.js';
-import { C as ComboboxContentList } from './ComboboxContentList-CW42K9FA.js';
-import { C as ComboboxContentHeader } from './ComboboxContentHeader-iC18w4jP.js';
-import { a as ComboboxContext } from './ComboboxProvider-DoixiYnH.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DHo9bEuK.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-CQE7Ci6u.js';
+import { C as ComboboxContentSearch } from './ComboboxContentSearch-D3uAbsI_.js';
+import { C as ComboboxContentList } from './ComboboxContentList-prs7vZ7A.js';
+import { C as ComboboxContentHeader } from './ComboboxContentHeader-DBzWdUG7.js';
+import { a as ComboboxContext } from './ComboboxProvider-LU3bOsya.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CtkRT0O5.js';
 import { usePopper } from 'react-popper';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-CXrzyvS3.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-CN4xcllA.js';
+import { C as COMBOBOX_MENU_ID } from './constants-DCAch56Z.js';
 
-var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-","spinning":"pZ7I2UXyhxo-"};
+var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
 
 function useComboboxContent(open, selected) {
     const { shouldScroll } = useContext(ComboboxContext);
@@ -124,7 +125,7 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
-    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
         React.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);

package/dist/{ComboboxContent-Dj94vmCX.js → ComboboxContent-CVeT78Kb.js}

@@ -3,16 +3,17 @@
 var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
-var ComboboxContentSearch = require('./ComboboxContentSearch-Ca5ZQV-6.js');
-var ComboboxContentList = require('./ComboboxContentList-DcfyrDaZ.js');
-var ComboboxContentHeader = require('./ComboboxContentHeader-B27EmVHu.js');
-var ComboboxProvider = require('./ComboboxProvider-Bmopsc_X.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BcTcbVPp.js');
-var useFocusTrap = require('./useFocusTrap-Cxo9Hm3n.js');
+var ComboboxContentSearch = require('./ComboboxContentSearch-wiSh-Dva.js');
+var ComboboxContentList = require('./ComboboxContentList-CUuvfmU_.js');
+var ComboboxContentHeader = require('./ComboboxContentHeader-BCbGG2pK.js');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
+var useFocusTrap = require('./useFocusTrap-BcAaMx_N.js');
 var reactPopper = require('react-popper');
-var useOnKeyDown = require('./useOnKeyDown-Tjm-_QHy.js');
+var useOnKeyDown = require('./useOnKeyDown-Dw5_7B0M.js');
+var constants = require('./constants-D1-obPRE.js');
 
-var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-","spinning":"pZ7I2UXyhxo-"};
+var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
 
 function useComboboxContent(open, selected) {
     const { shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
@@ -126,7 +127,7 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
-    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
         React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);

package/dist/{ComboboxContentHeader-B27EmVHu.js → ComboboxContentHeader-BCbGG2pK.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-KvPMVZyR.js');
-var Button = require('./Button-DV8P6VM4.js');
+var Typography = require('./Typography-DYUPEo3A.js');
+var Button = require('./Button-X03o-OsV.js');
 
-var styles = {"header":"Q-mwo-g5Fi8-","spinning":"PNWVDhN2-28-"};
+var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
 
 function ComboboxContentHeader(props) {
     const hasSelected = props.selectedCount > 0;

package/dist/{ComboboxContentHeader-iC18w4jP.js → ComboboxContentHeader-DBzWdUG7.js}

@@ -1,8 +1,8 @@
 import React from 'react';
-import { T as Typography } from './Typography-DdPGuT7r.js';
-import { B as Button } from './Button-DjIsGUK9.js';
+import { T as Typography } from './Typography-DhGlhWcl.js';
+import { B as Button } from './Button-B_S7hCDq.js';
 
-var styles = {"header":"Q-mwo-g5Fi8-","spinning":"PNWVDhN2-28-"};
+var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
 
 function ComboboxContentHeader(props) {
     const hasSelected = props.selectedCount > 0;

package/dist/{ComboboxContentList-DcfyrDaZ.js → ComboboxContentList-CUuvfmU_.js}

@@ -2,14 +2,14 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Text = require('./Text-BEqy0ojx.js');
-var Glimmer = require('./Glimmer-CoTzPZhi.js');
-var Spinner = require('./Spinner-Bj9GuPzT.js');
-var AnimatedPresence = require('./AnimatedPresence-D8VDBhYC.js');
-var ComboboxOption = require('./ComboboxOption-CxxAN5VX.js');
-var ComboboxLoadMore = require('./ComboboxLoadMore--tlJYWJj.js');
+var Text = require('./Text-CJWvewR1.js');
+var Glimmer = require('./Glimmer-Dp6TA00Z.js');
+var Spinner = require('./Spinner-Cl4eyZlz.js');
+var AnimatedPresence = require('./AnimatedPresence-BnueoqI2.js');
+var ComboboxOption = require('./ComboboxOption-DEICUWcX.js');
+var ComboboxLoadMore = require('./ComboboxLoadMore-UBUXI47y.js');
 
-var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-","spinning":"y6DgBv-BPa4-"};
+var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
 
 function ComboboxContentList(props) {
     const optionsExist = props.options.length > 0;
@@ -18,7 +18,7 @@ function ComboboxContentList(props) {
     return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
+                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender }));
             }),
             React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React.createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner.Spinner, { size: "small" })))),

package/dist/{ComboboxContentList-CW42K9FA.js → ComboboxContentList-prs7vZ7A.js}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
-import { T as Text } from './Text-DLaIGPdO.js';
-import { G as Glimmer } from './Glimmer-B4wN9RhA.js';
-import { S as Spinner } from './Spinner-DwfGkh1X.js';
-import { A as AnimatedPresence } from './AnimatedPresence-Bo--kbN2.js';
-import { C as ComboboxOption } from './ComboboxOption-ENdI1SgL.js';
-import { C as ComboboxLoadMore } from './ComboboxLoadMore-DG5KoDHo.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { G as Glimmer } from './Glimmer-DDQazCKz.js';
+import { S as Spinner } from './Spinner-COTKfUIp.js';
+import { A as AnimatedPresence } from './AnimatedPresence-DLT6hZjb.js';
+import { C as ComboboxOption } from './ComboboxOption-CaSEvlkm.js';
+import { C as ComboboxLoadMore } from './ComboboxLoadMore-C21UOOTY.js';
 
-var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-","spinning":"y6DgBv-BPa4-"};
+var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
 
 function ComboboxContentList(props) {
     const optionsExist = props.options.length > 0;
@@ -16,7 +16,7 @@ function ComboboxContentList(props) {
     return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
+                return (React.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender }));
             }),
             React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner, { size: "small" })))),

package/dist/{ComboboxContentSearch-DC0Fksgt.js → ComboboxContentSearch-D3uAbsI_.js}

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
-import { I as Icon } from './Icon-CTO4wvIZ.js';
+import { I as Icon } from './Icon-BPJYIZWC.js';
 
-var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-","spinning":"H-grTYlsPik-"};
+var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
 
 function ComboboxContentSearch(props) {
     const searchRef = useRef(null);

package/dist/{ComboboxContentSearch-Ca5ZQV-6.js → ComboboxContentSearch-wiSh-Dva.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var Icon = require('./Icon-wS5vpmx3.js');
+var Icon = require('./Icon-DMURv2lZ.js');
 
-var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-","spinning":"H-grTYlsPik-"};
+var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
 
 function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);

package/dist/{ComboboxLoadMore-DG5KoDHo.js → ComboboxLoadMore-C21UOOTY.js}

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import { u as useInView_2 } from './useInView-BbITW8l4.js';
+import { u as useInView_2 } from './useInView-lNn9gvvm.js';
 
-var styles = {"trigger":"_3s8-RC5Ky3s-","spinning":"sLhVEmXXsLQ-"};
+var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
 
 function ComboboxLoadMore({ onLoadMore }) {
     const [inViewRef, isInView] = useInView_2();

package/dist/{ComboboxLoadMore--tlJYWJj.js → ComboboxLoadMore-UBUXI47y.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var useInView = require('./useInView-BpYC1TFb.js');
+var useInView = require('./useInView-BWRX95_u.js');
 
-var styles = {"trigger":"_3s8-RC5Ky3s-","spinning":"sLhVEmXXsLQ-"};
+var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
 
 function ComboboxLoadMore({ onLoadMore }) {
     const [inViewRef, isInView] = useInView.useInView_2();

package/dist/ComboboxOption-CaSEvlkm.js

@@ -0,0 +1,25 @@
+import { _ as __rest } from './tslib.es6-CeHUynox.js';
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { I as Icon } from './Icon-BPJYIZWC.js';
+import { F as Flex } from './Flex-BuEj3_N5.js';
+import { a as ComboboxContext } from './ComboboxProvider-LU3bOsya.js';
+
+var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+
+function ComboboxOption(props) {
+    const { customRender } = props, contentProps = __rest(props, ["customRender"]);
+    const { selected, selectionHandler } = useContext(ComboboxContext);
+    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
+    return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
+            selectionHandler({ id: props.id, label: props.label }), className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+}
+function InternalDefaultContent(props) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React.createElement("div", null, props.isSelected && (React.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))));
+}
+
+export { ComboboxOption as C };

package/dist/ComboboxOption-DEICUWcX.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-D1nA6hj6.js');
+var React = require('react');
+var classnames = require('classnames');
+var Icon = require('./Icon-DMURv2lZ.js');
+var Flex = require('./Flex-FEWYiEyG.js');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
+
+var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+
+function ComboboxOption(props) {
+    const { customRender } = props, contentProps = tslib_es6.__rest(props, ["customRender"]);
+    const { selected, selectionHandler } = React.useContext(ComboboxProvider.ComboboxContext);
+    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
+    return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
+            selectionHandler({ id: props.id, label: props.label }), className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+}
+function InternalDefaultContent(props) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Flex.Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React.createElement("div", null, props.isSelected && (React.createElement(Icon.Icon, { name: "checkmark", color: "interactiveSubtle" })))));
+}
+
+exports.ComboboxOption = ComboboxOption;

package/dist/{ComboboxProvider-Bmopsc_X.js → ComboboxProvider-BTlRaM5o.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-Bi0OHwyo.js');
+var tslib_es6 = require('./tslib.es6-D1nA6hj6.js');
 var React = require('react');
 
 const ComboboxContext = React.createContext({});

package/dist/{ComboboxProvider-DoixiYnH.js → ComboboxProvider-LU3bOsya.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-eq3zexCS.js';
+import { _ as __rest } from './tslib.es6-CeHUynox.js';
 import React from 'react';
 
 const ComboboxContext = React.createContext({});

package/dist/ComboboxTrigger-Cx9aytlP.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+var Chip = require('./Chip-CMURaeyE.js');
+require('./tslib.es6-D1nA6hj6.js');
+var Icon = require('./Icon-DMURv2lZ.js');
+var ComboboxProvider = require('./ComboboxProvider-BTlRaM5o.js');
+
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
+    const hasSelection = selected.length;
+    const selectedLabel = selected.map(option => option.label).join(", ");
+    return (React.createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
+        React.createElement(Icon.Icon, { name: "add", size: "small" })))));
+}
+
+exports.ComboboxTrigger = ComboboxTrigger;

package/dist/ComboboxTrigger-DYvfXiDq.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { C as Chip } from './Chip-D3p5kdQT.js';
+import './tslib.es6-CeHUynox.js';
+import { I as Icon } from './Icon-BPJYIZWC.js';
+import { a as ComboboxContext } from './ComboboxProvider-LU3bOsya.js';
+
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleOpen } = React.useContext(ComboboxContext);
+    const hasSelection = selected.length;
+    const selectedLabel = selected.map(option => option.label).join(", ");
+    return (React.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React.createElement(Chip.Suffix, null,
+        React.createElement(Icon, { name: "add", size: "small" })))));
+}
+
+export { ComboboxTrigger as C };

package/dist/ConfirmationModal/index.cjs

@@ -1,28 +1,28 @@
 'use strict';
 
-var ConfirmationModal = require('../ConfirmationModal-DD7FSk9x.js');
+var ConfirmationModal = require('../ConfirmationModal-DYfPbGC2.js');
 require('react');
-require('../useOnKeyDown-Tjm-_QHy.js');
-require('../Modal-DvR9oHUH.js');
+require('../useOnKeyDown-Dw5_7B0M.js');
+require('../Modal-CApsNRnT.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('../useRefocusOnActivator-BcTcbVPp.js');
-require('../useFocusTrap-Cxo9Hm3n.js');
-require('../Heading-VSRbd386.js');
-require('../Typography-KvPMVZyR.js');
-require('../Button-DV8P6VM4.js');
+require('../useRefocusOnActivator-DWAxYZut.js');
+require('../useFocusTrap-BcAaMx_N.js');
+require('../Heading-DNVMkz9q.js');
+require('../Typography-DYUPEo3A.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../ButtonDismiss-B3THrLQF.js');
-require('../Content-CaBYhgC3.js');
-require('../Markdown-CZ37pUwO.js');
-require('../Text-BEqy0ojx.js');
-require('../Emphasis-BBIyVU0U.js');
-require('../index-CrZ7pTC-.js');
-require('../_commonjsHelpers-B0rrMtP0.js');
-require('../_polyfill-node.process-1MMgPD6v.js');
+require('../ButtonDismiss-DcTAOplu.js');
+require('../Content-Bvcrqi5z.js');
+require('../Markdown-q4KytAGw.js');
+require('../Text-CJWvewR1.js');
+require('../Emphasis-S49l0Kwc.js');
+require('../index-C36nFO6W.js');
+require('../_commonjsHelpers-DM5kGkm_.js');
+require('../_polyfill-node.process-DUypQ5CD.js');