@jobber/components 8.13.1 → 8.14.1

package/dist/{ComboboxContent-cjs.js → FilterPickerContent-cjs.js}

@@ -3,18 +3,18 @@
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var ComboboxContentSearch = require('./ComboboxContentSearch-cjs.js');
-var ComboboxContentList = require('./ComboboxContentList-cjs.js');
-var ComboboxContentHeader = require('./ComboboxContentHeader-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerContentSearch = require('./FilterPickerContentSearch-cjs.js');
+var FilterPickerContentList = require('./FilterPickerContentList-cjs.js');
+var FilterPickerContentHeader = require('./FilterPickerContentHeader-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 var jobberHooks = require('@jobber/hooks');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var constants = require('./constants-cjs.js');
 
-var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
+var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};
 
-function useComboboxContent(open, selected) {
-    const { onClear, onSelectAll, shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
+function useFilterPickerContent(open, selected) {
+    const { onClear, onSelectAll, shouldScroll } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const optionsListRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -42,10 +42,10 @@ function scrollToFirstSelected(firstSelected, shouldScroll) {
     }
 }
 
-const COMBOBOX_OFFSET = 8;
+const FILTER_PICKER_OFFSET = 8;
 // eslint-disable-next-line max-statements
-function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
-    const { handleClose } = React.useContext(ComboboxProvider.ComboboxContext);
+function useFilterPickerAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const hasOptionsVisible = open && filteredOptions.length > 0;
     const focusedIndex = React.useRef(null);
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
@@ -65,7 +65,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            floatingUi_reactDom.offset(COMBOBOX_OFFSET),
+            floatingUi_reactDom.offset(FILTER_PICKER_OFFSET),
             floatingUi_reactDom.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
     });
@@ -139,10 +139,10 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     };
 }
 
-function ComboboxContent(props) {
+function FilterPickerContent(props) {
     const optionsExist = props.options.length > 0;
-    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { onClear, onSelectAll, optionsListRef } = useFilterPickerContent(props.open, props.selected);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useFilterPickerAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = React.useMemo(() => {
@@ -151,18 +151,18 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.FILTER_PICKER_MENU_ID, "data-testid": constants.FILTER_PICKER_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
         }), style: floatingStyles }, floatingProps),
-        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: () => {
+        React.createElement(FilterPickerContentSearch.FilterPickerContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(FilterPickerContentHeader.FilterPickerContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
                 onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
-        React.createElement(ComboboxContentList.ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        React.createElement(FilterPickerContentList.FilterPickerContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
         props.actionElements && (React.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
                 [styles.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
@@ -174,4 +174,4 @@ function ComboboxContent(props) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React.createElement(floatingUi_react.FloatingPortal, null, content)) : (content);
 }
 
-exports.ComboboxContent = ComboboxContent;
+exports.FilterPickerContent = FilterPickerContent;

package/dist/{ComboboxContent-es.js → FilterPickerContent-es.js}

@@ -1,18 +1,18 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import { a as useFloatingParentNodeId, b as useFloatingNodeId, u as useFloating, c as useDismiss, d as useInteractions, e as FloatingTree, f as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
-import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
-import { C as ComboboxContentList } from './ComboboxContentList-es.js';
-import { C as ComboboxContentHeader } from './ComboboxContentHeader-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { F as FilterPickerContentSearch } from './FilterPickerContentSearch-es.js';
+import { F as FilterPickerContentList } from './FilterPickerContentList-es.js';
+import { F as FilterPickerContentHeader } from './FilterPickerContentHeader-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 import { useRefocusOnActivator, useFocusTrap } from '@jobber/hooks';
 import { o as offset, f as flip, b as autoUpdate } from './floating-ui.react-dom-es.js';
-import { C as COMBOBOX_MENU_ID } from './constants-es.js';
+import { F as FILTER_PICKER_MENU_ID } from './constants-es.js';
 
-var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
+var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};
 
-function useComboboxContent(open, selected) {
-    const { onClear, onSelectAll, shouldScroll } = useContext(ComboboxContext);
+function useFilterPickerContent(open, selected) {
+    const { onClear, onSelectAll, shouldScroll } = useContext(FilterPickerContext);
     const optionsListRef = useRef(null);
     useEffect(() => {
         var _a;
@@ -40,10 +40,10 @@ function scrollToFirstSelected(firstSelected, shouldScroll) {
     }
 }
 
-const COMBOBOX_OFFSET = 8;
+const FILTER_PICKER_OFFSET = 8;
 // eslint-disable-next-line max-statements
-function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
-    const { handleClose } = useContext(ComboboxContext);
+function useFilterPickerAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = useContext(FilterPickerContext);
     const hasOptionsVisible = open && filteredOptions.length > 0;
     const focusedIndex = useRef(null);
     const parentNodeId = useFloatingParentNodeId();
@@ -63,7 +63,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            offset(COMBOBOX_OFFSET),
+            offset(FILTER_PICKER_OFFSET),
             flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
     });
@@ -137,10 +137,10 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     };
 }
 
-function ComboboxContent(props) {
+function FilterPickerContent(props) {
     const optionsExist = props.options.length > 0;
-    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { onClear, onSelectAll, optionsListRef } = useFilterPickerContent(props.open, props.selected);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useFilterPickerAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = useMemo(() => {
@@ -149,18 +149,18 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: FILTER_PICKER_MENU_ID, "data-testid": FILTER_PICKER_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
         }), style: floatingStyles }, floatingProps),
-        React__default.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__default.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+        React__default.createElement(FilterPickerContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default.createElement(FilterPickerContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
                 onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
-        React__default.createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        React__default.createElement(FilterPickerContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
         props.actionElements && (React__default.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default.createElement("div", { key: index, className: classnames({
                 [styles.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
@@ -172,4 +172,4 @@ function ComboboxContent(props) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React__default.createElement(FloatingPortal, null, content)) : (content);
 }
 
-export { ComboboxContent as C };
+export { FilterPickerContent as F };

package/dist/{ComboboxContentHeader-cjs.js → FilterPickerContentHeader-cjs.js}

@@ -5,15 +5,15 @@ var Typography = require('./Typography-cjs.js');
 var Button = require('./Button-cjs.js');
 require('classnames');
 
-var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
+var styles = {"header":"qsCrV9XnUYQ-","spinning":"cDKMYcrIogE-"};
 
-function ComboboxContentHeader(props) {
+function FilterPickerContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
     const actionLabel = hasSelected ? "Clear" : "Select all";
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-FilterPicker-Header" },
         React.createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
         showAction && (React.createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
@@ -27,4 +27,4 @@ function getLabel(hasSelected, count, subjectNoun) {
     return "Select";
 }
 
-exports.ComboboxContentHeader = ComboboxContentHeader;
+exports.FilterPickerContentHeader = FilterPickerContentHeader;

package/dist/{ComboboxContentHeader-es.js → FilterPickerContentHeader-es.js}

@@ -3,15 +3,15 @@ import { T as Typography } from './Typography-es.js';
 import { B as Button } from './Button-es.js';
 import 'classnames';
 
-var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
+var styles = {"header":"qsCrV9XnUYQ-","spinning":"cDKMYcrIogE-"};
 
-function ComboboxContentHeader(props) {
+function FilterPickerContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
     const actionLabel = hasSelected ? "Clear" : "Select all";
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React__default.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+    return (React__default.createElement("div", { className: styles.header, "data-testid": "ATL-FilterPicker-Header" },
         React__default.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
         showAction && (React__default.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
@@ -25,4 +25,4 @@ function getLabel(hasSelected, count, subjectNoun) {
     return "Select";
 }
 
-export { ComboboxContentHeader as C };
+export { FilterPickerContentHeader as F };

package/dist/{ComboboxContentList-cjs.js → FilterPickerContentList-cjs.js}

@@ -7,12 +7,12 @@ var Text = require('./Text-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
-var ComboboxOption = require('./ComboboxOption-cjs.js');
-var ComboboxLoadMore = require('./ComboboxLoadMore-cjs.js');
+var FilterPickerOption = require('./FilterPickerOption-cjs.js');
+var FilterPickerLoadMore = require('./FilterPickerLoadMore-cjs.js');
 
-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-"};
+var styles = {"container":"d-JzbXbz3vI-","optionsList":"_9sPZShzetbo-","filterMessage":"_7iUzJFaZYDs-","emptyStateMessage":"I3lJfMgm-Io-","scrollTop":"VNhhUhatkmw-","scrollNone":"w8LsXerWI7I-","scrollBottom":"-Bk1T-RD-tA-","loadingContainer":"czPVeCUK2Zc-","hasOptions":"_9IwiWJBxJxQ-","spinning":"BrOPnXbFiHU-"};
 
-function ComboboxContentList(props) {
+function FilterPickerContentList(props) {
     const { tokens } = AtlantisThemeContext.useAtlantisTheme();
     const optionsExist = props.options.length > 0;
     const hasSearchTerm = props.searchValue.length > 0;
@@ -20,12 +20,12 @@ 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, customRender: option.customRender, onClick: option.onClick }));
+                return (React.createElement(FilterPickerOption.FilterPickerOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React.createElement(framerMotion.AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
                     React.createElement(Spinner.Spinner, { size: "small" }))))),
-            props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+            props.onLoadMore && (React.createElement(FilterPickerLoadMore.FilterPickerLoadMore, { onLoadMore: props.onLoadMore })))),
         props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
             React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
         hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
@@ -77,4 +77,4 @@ function useScrollState(optionsListRef, options) {
     return { listScrollState };
 }
 
-exports.ComboboxContentList = ComboboxContentList;
+exports.FilterPickerContentList = FilterPickerContentList;

package/dist/{ComboboxContentList-es.js → FilterPickerContentList-es.js}

@@ -5,12 +5,12 @@ import { T as Text } from './Text-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { S as Spinner } from './Spinner-es.js';
 import { u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
-import { C as ComboboxOption } from './ComboboxOption-es.js';
-import { C as ComboboxLoadMore } from './ComboboxLoadMore-es.js';
+import { F as FilterPickerOption } from './FilterPickerOption-es.js';
+import { F as FilterPickerLoadMore } from './FilterPickerLoadMore-es.js';
 
-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-"};
+var styles = {"container":"d-JzbXbz3vI-","optionsList":"_9sPZShzetbo-","filterMessage":"_7iUzJFaZYDs-","emptyStateMessage":"I3lJfMgm-Io-","scrollTop":"VNhhUhatkmw-","scrollNone":"w8LsXerWI7I-","scrollBottom":"-Bk1T-RD-tA-","loadingContainer":"czPVeCUK2Zc-","hasOptions":"_9IwiWJBxJxQ-","spinning":"BrOPnXbFiHU-"};
 
-function ComboboxContentList(props) {
+function FilterPickerContentList(props) {
     const { tokens } = useAtlantisTheme();
     const optionsExist = props.options.length > 0;
     const hasSearchTerm = props.searchValue.length > 0;
@@ -18,12 +18,12 @@ function ComboboxContentList(props) {
     return (React__default.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React__default.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
+                return (React__default.createElement(FilterPickerOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React__default.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React__default.createElement(AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React__default.createElement(motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
                     React__default.createElement(Spinner, { size: "small" }))))),
-            props.onLoadMore && (React__default.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+            props.onLoadMore && (React__default.createElement(FilterPickerLoadMore, { onLoadMore: props.onLoadMore })))),
         props.loading && !optionsExist && (React__default.createElement(React__default.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default.createElement("div", { className: styles.loadingContainer, key: index },
             React__default.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
         hasSearchTerm && !props.loading && !optionsExist && (React__default.createElement("div", { className: styles.filterMessage },
@@ -75,4 +75,4 @@ function useScrollState(optionsListRef, options) {
     return { listScrollState };
 }
 
-export { ComboboxContentList as C };
+export { FilterPickerContentList as F };

package/dist/{ComboboxContentSearch-cjs.js → FilterPickerContentSearch-cjs.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var Icon = require('./Icon-cjs.js');
 
-var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
+var styles = {"search":"_74R4ICUNw-M-","searchInput":"icUzhma-GJs-","clearSearch":"ePmiDYZ2boo-","spinning":"_-2bwJZqt-do-"};
 
-function ComboboxContentSearch(props) {
+function FilterPickerContentSearch(props) {
     const searchRef = React.useRef(null);
     React.useEffect(() => {
         if (props.open) {
@@ -17,7 +17,7 @@ function ComboboxContentSearch(props) {
     }, [props.open]);
     return (React.createElement("div", { className: styles.search },
         React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
             React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -31,4 +31,4 @@ function ComboboxContentSearch(props) {
     }
 }
 
-exports.ComboboxContentSearch = ComboboxContentSearch;
+exports.FilterPickerContentSearch = FilterPickerContentSearch;

package/dist/{ComboboxContentSearch-es.js → FilterPickerContentSearch-es.js}

@@ -1,9 +1,9 @@
 import React__default, { useRef, useEffect } from 'react';
 import { I as Icon } from './Icon-es.js';
 
-var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
+var styles = {"search":"_74R4ICUNw-M-","searchInput":"icUzhma-GJs-","clearSearch":"ePmiDYZ2boo-","spinning":"_-2bwJZqt-do-"};
 
-function ComboboxContentSearch(props) {
+function FilterPickerContentSearch(props) {
     const searchRef = useRef(null);
     useEffect(() => {
         if (props.open) {
@@ -15,7 +15,7 @@ function ComboboxContentSearch(props) {
     }, [props.open]);
     return (React__default.createElement("div", { className: styles.search },
         React__default.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+        props.searchValue && (React__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
             React__default.createElement(Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -29,4 +29,4 @@ function ComboboxContentSearch(props) {
     }
 }
 
-export { ComboboxContentSearch as C };
+export { FilterPickerContentSearch as F };

package/dist/FilterPickerLoadMore-cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+
+var styles = {"trigger":"_8SCmS4wfKOQ-","spinning":"coGWl7tznJU-"};
+
+function FilterPickerLoadMore({ onLoadMore, }) {
+    const [inViewRef, isInView] = jobberHooks.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-FilterPicker-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+exports.FilterPickerLoadMore = FilterPickerLoadMore;

package/dist/{ComboboxLoadMore-es.js → FilterPickerLoadMore-es.js}

@@ -1,14 +1,14 @@
 import React__default, { useEffect } from 'react';
 import { useInView } from '@jobber/hooks';
 
-var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
+var styles = {"trigger":"_8SCmS4wfKOQ-","spinning":"coGWl7tznJU-"};
 
-function ComboboxLoadMore({ onLoadMore }) {
+function FilterPickerLoadMore({ onLoadMore, }) {
     const [inViewRef, isInView] = useInView();
     useEffect(() => {
         isInView && onLoadMore();
     }, [isInView]);
-    return (React__default.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+    return (React__default.createElement("div", { "data-testid": "ATL-FilterPicker-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
 }
 
-export { ComboboxLoadMore as C };
+export { FilterPickerLoadMore as F };

package/dist/{ComboboxOption-cjs.js → FilterPickerOption-cjs.js}

@@ -5,13 +5,13 @@ var React = require('react');
 var classnames = require('classnames');
 var Icon = require('./Icon-cjs.js');
 var Flex = require('./Flex-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 
-var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+var styles = {"option":"tjXkqP6ZdSk-","spinning":"yDp0Y9ojp0Y-"};
 
-function ComboboxOption(props) {
+function FilterPickerOption(props) {
     const { customRender, onClick } = props, contentProps = tslib_es6.__rest(props, ["customRender", "onClick"]);
-    const { selected, selectionHandler } = React.useContext(ComboboxProvider.ComboboxContext);
+    const { selected, selectionHandler } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     const handleClick = () => {
         const { id, label } = props;
@@ -28,4 +28,4 @@ function InternalDefaultContent(props) {
         React.createElement("div", null, props.isSelected && (React.createElement(Icon.Icon, { name: "checkmark", color: "interactiveSubtle" })))));
 }
 
-exports.ComboboxOption = ComboboxOption;
+exports.FilterPickerOption = FilterPickerOption;

package/dist/{ComboboxOption-es.js → FilterPickerOption-es.js}

@@ -3,13 +3,13 @@ import React__default, { useContext } from 'react';
 import classnames from 'classnames';
 import { I as Icon } from './Icon-es.js';
 import { F as Flex } from './Flex-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 
-var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+var styles = {"option":"tjXkqP6ZdSk-","spinning":"yDp0Y9ojp0Y-"};
 
-function ComboboxOption(props) {
+function FilterPickerOption(props) {
     const { customRender, onClick } = props, contentProps = __rest(props, ["customRender", "onClick"]);
-    const { selected, selectionHandler } = useContext(ComboboxContext);
+    const { selected, selectionHandler } = useContext(FilterPickerContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     const handleClick = () => {
         const { id, label } = props;
@@ -26,4 +26,4 @@ function InternalDefaultContent(props) {
         React__default.createElement("div", null, props.isSelected && (React__default.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))));
 }
 
-export { ComboboxOption as C };
+export { FilterPickerOption as F };

package/dist/FilterPickerProvider-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+
+const FilterPickerContext = React.createContext({});
+function FilterPickerContextProvider(_a) {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(FilterPickerContext.Provider, { value: props }, children));
+}
+
+exports.FilterPickerContext = FilterPickerContext;
+exports.FilterPickerContextProvider = FilterPickerContextProvider;

package/dist/FilterPickerProvider-es.js

@@ -0,0 +1,10 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default from 'react';
+
+const FilterPickerContext = React__default.createContext({});
+function FilterPickerContextProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React__default.createElement(FilterPickerContext.Provider, { value: props }, children));
+}
+
+export { FilterPickerContextProvider as F, FilterPickerContext as a };

package/dist/{ComboboxTrigger-cjs.js → FilterPickerTrigger-cjs.js}

@@ -4,14 +4,14 @@ var React = require('react');
 var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 
-function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
-    const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
+function FilterPickerTrigger({ label = "Select", selected, activatorRef, }) {
+    const { handleOpen } = React.useContext(FilterPickerProvider.FilterPickerContext);
     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", ref: activatorRef }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
         React.createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 
-exports.ComboboxTrigger = ComboboxTrigger;
+exports.FilterPickerTrigger = FilterPickerTrigger;

package/dist/{ComboboxTrigger-es.js → FilterPickerTrigger-es.js}

@@ -2,14 +2,14 @@ import React__default from 'react';
 import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 
-function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
-    const { handleOpen } = React__default.useContext(ComboboxContext);
+function FilterPickerTrigger({ label = "Select", selected, activatorRef, }) {
+    const { handleOpen } = React__default.useContext(FilterPickerContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
     return (React__default.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(Chip.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 
-export { ComboboxTrigger as C };
+export { FilterPickerTrigger as F };

package/dist/constants-cjs.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const COMBOBOX_MENU_ID = "ATL-Combobox-Content";
+const FILTER_PICKER_MENU_ID = "ATL-FilterPicker-Content";
 
-exports.COMBOBOX_MENU_ID = COMBOBOX_MENU_ID;
+exports.FILTER_PICKER_MENU_ID = FILTER_PICKER_MENU_ID;

package/dist/constants-es.js

@@ -1,3 +1,3 @@
-const COMBOBOX_MENU_ID = "ATL-Combobox-Content";
+const FILTER_PICKER_MENU_ID = "ATL-FilterPicker-Content";
 
-export { COMBOBOX_MENU_ID as C };
+export { FILTER_PICKER_MENU_ID as F };

package/dist/docs/Autocomplete/Autocomplete.md

@@ -459,7 +459,7 @@ different from the rest.
 * If autocompleted results are not required for the text input, use
   [InputText](../InputText/InputText.md)
 * If a text input appearance is not required, and options can only be from a
-  predefined set then a Combobox can be used
+  predefined set then a FilterPicker can be used
 
 
 ## Configuration

package/dist/docs/Banner/Banner.md

@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Card/Card.md

@@ -265,7 +265,7 @@ desired markup and have no need for either UNSAFE.
 | `accent` | `"indigo" | "teal" | "blue" | "green" | "lime" | "yellowGreen" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "purple" | "pink" | "orange" | "brown" | "navy" | ... 68 more ... | "yellowLightest"` | No | — | The `accent`, if provided, will effect the color accent at the top of the card. |
 | `elevation` | `elevationProp` | No | — |  |
 | `external` | `boolean` | No | — | Makes the URL open in new tab on click. |
-| `header` | `string | ReactElement<unknown, string | JSXElementConstructor<any>> | HeaderActionProps` | No | — | The header props of the card. |
+| `header` | `string | HeaderActionProps | ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | The header props of the card. |
 | `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void` | No | — | Event handler that gets called when the card is clicked. |
 | `title` | `string` | No | — | @deprecated Use header instead. |
 | `UNSAFE_className` | `{ container?: string; header?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |