@jobber/components 4.44.0 → 4.45.0

package/dist/Combobox/index.js

@@ -0,0 +1,295 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useAssert = require('@jobber/hooks/useAssert');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Icon = require('../Icon-405a216c.js');
+var Text = require('../Text-59bde58c.js');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var reactPopper = require('react-popper');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var Typography = require('../Typography-9bff9c91.js');
+var Button = require('../Button-d89f2271.js');
+require('@jobber/design');
+require('react-router-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+
+var css_248z$5 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.YQry-Rd6zfQ-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc((16px * 1.5) * -1);\n  top: calc(calc(16px * 1.5) * -1);\n  top: calc(var(--space-large) * -1);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var styles$5 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z$5);
+
+var css_248z$4 = ".ifwwZOYTf8U- {\n  position: relative;\n}\n\n.gIbHknFkZLI- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.dZmEG-amk2U- {\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n.dZmEG-amk2U-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.ifwwZOYTf8U-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc((16px * 1.5) * -1);\n  bottom: calc(calc(16px * 1.5) * -1);\n  bottom: calc(var(--space-large) * -1);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background-image: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
+var styles$4 = {"search":"ifwwZOYTf8U-","searchInput":"gIbHknFkZLI-","clearSearch":"dZmEG-amk2U-"};
+styleInject_es.styleInject(css_248z$4);
+
+function ComboboxSearch(props) {
+    const searchRef = React.useRef(null);
+    React.useEffect(() => {
+        if (props.open) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [props.open]);
+    return (React__default["default"].createElement("div", { className: styles$4.search },
+        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$4.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$4.clearSearch, onClick: clearSearch, "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+            React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.target.value);
+    }
+}
+
+var css_248z$3 = "._5n7VvEn39-Y- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.KhX5VfZjAog- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.NNCJVHYx6lc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.IvTItlT0MOQ-,\n.NNCJVHYx6lc-:hover,\n.NNCJVHYx6lc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.NNCJVHYx6lc-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._2IRm1sf-TUU-,\n.DTuoA8WPNzc- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n";
+var styles$3 = {"container":"_5n7VvEn39-Y-","optionsList":"KhX5VfZjAog-","option":"NNCJVHYx6lc-","selectedOption":"IvTItlT0MOQ-","filterMessage":"_2IRm1sf-TUU-","emptyStateMessage":"DTuoA8WPNzc-"};
+styleInject_es.styleInject(css_248z$3);
+
+function ComboboxList(props) {
+    return (React__default["default"].createElement("div", { className: styles$3.container },
+        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$3.optionsList, role: "listbox", ref: props.optionsListRef }, !props.showEmptyState &&
+            props.options.map(option => {
+                var _a;
+                const isSelected = option.id.toString() === ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.id.toString());
+                return (React__default["default"].createElement("li", { ref: listItem => {
+                        if (isSelected)
+                            props.setSelectedElement(listItem);
+                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$3.option, {
+                        [styles$3.selectedOption]: isSelected,
+                    }) },
+                    option.label,
+                    isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+            }))),
+        !props.showEmptyState && props.options.length === 0 && (React__default["default"].createElement("div", { className: styles$3.filterMessage },
+            React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        props.showEmptyState && (React__default["default"].createElement("div", { className: styles$3.emptyStateMessage },
+            React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+}
+function getZeroIndexStateText(subjectNoun) {
+    if (subjectNoun) {
+        return `You don't have any ${subjectNoun} yet`;
+    }
+    return "No options yet";
+}
+
+var css_248z$2 = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n";
+var styles$2 = {"overlay":"W8qMZnORYxI-"};
+styleInject_es.styleInject(css_248z$2);
+
+const ComboboxContext = React__default["default"].createContext({});
+function ComboboxContextProvider(props) {
+    const [open, setOpen] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    return (React__default["default"].createElement(ComboboxContext.Provider, { value: { open, setOpen, wrapperRef } },
+        React__default["default"].createElement("div", { ref: wrapperRef },
+            open && (React__default["default"].createElement("div", { className: styles$2.overlay, onClick: () => setOpen(false), "data-testid": "ATL-Combobox-Overlay" })),
+            props.children)));
+}
+
+function useComboboxContent(options, open) {
+    const [searchValue, setSearchValue] = React.useState("");
+    const [selectedElement, setSelectedElement] = React.useState(null);
+    const optionsListRef = React.useRef(null);
+    const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    React.useEffect(() => {
+        if (open && selectedElement) {
+            selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [open, selectedElement]);
+    return {
+        searchValue,
+        setSearchValue,
+        setSelectedElement,
+        filteredOptions,
+        optionsListRef,
+    };
+}
+
+function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, setOpen, wrapperRef) {
+    const hasOptionsVisible = open && filteredOptions.length > 0;
+    const focusedIndex = React.useRef(null);
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const popperRef = useFocusTrap.useFocusTrap(open);
+    const { styles: popperStyles, attributes } = reactPopper.usePopper(wrapperRef.current, popperRef.current, {
+        modifiers: [
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["top-start"],
+                },
+            },
+        ],
+        placement: "bottom-start",
+    });
+    React.useEffect(() => {
+        focusedIndex.current = null;
+    }, [open, filteredOptions.length]);
+    React.useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+        }
+        return () => {
+            var _a;
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+        };
+    }, [open, optionsListRef, filteredOptions]);
+    useOnKeyDown.useOnKeyDown(() => {
+        if (open) {
+            setOpen(false);
+        }
+    }, "Escape");
+    function handleContentKeydown(event) {
+        var _a;
+        if (!hasOptionsVisible)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            const activeElementInList = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+            if (!activeElementInList)
+                return;
+            handleKeyboardSelection(event);
+        }
+        if (event.key === "ArrowDown") {
+            handleKeyboardNavigation(event, 1);
+        }
+        if (event.key === "ArrowUp") {
+            handleKeyboardNavigation(event, -1);
+        }
+    }
+    function handleKeyboardNavigation(event, indexChange) {
+        var _a;
+        const newIndex = focusedIndex.current === null ? 0 : focusedIndex.current + indexChange;
+        if (newIndex < 0 || newIndex >= filteredOptions.length)
+            return;
+        const optionElement = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children[newIndex];
+        optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
+        focusedIndex.current = newIndex;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyboardSelection(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (focusedIndex.current !== null) {
+            selectionCallback(filteredOptions[focusedIndex.current]);
+        }
+    }
+    return {
+        popperRef,
+        popperStyles,
+        attributes,
+    };
+}
+
+function ComboboxContent(props) {
+    const { open, setOpen, wrapperRef } = React__default["default"].useContext(ComboboxContext);
+    const optionsExist = props.options.length > 0;
+    const { searchValue, setSearchValue, setSelectedElement, filteredOptions, optionsListRef, } = useComboboxContent(props.options, open);
+    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(handleSelection, filteredOptions, optionsListRef, open, setOpen, wrapperRef);
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$5.content, { [styles$5.hidden]: !open }), style: popperStyles.popper }, attributes.popper),
+        React__default["default"].createElement(ComboboxSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
+        React__default["default"].createElement(ComboboxList, { showEmptyState: !optionsExist, options: filteredOptions, selected: props.selected, optionsListRef: optionsListRef, setSelectedElement: setSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
+        props.children && (React__default["default"].createElement("div", { className: styles$5.actions, role: "group" }, React__default["default"].Children.toArray(props.children).map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+                [styles$5.actionPadding]: index === childrenArray.length - 1,
+            }) }, child)))))));
+    return ReactDOM__default["default"].createPortal(template, document.body);
+    function handleSelection(selection) {
+        props.onSelect(selection);
+        setSearchValue("");
+        setOpen(false);
+    }
+}
+
+var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8-:hover {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$1 = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+styleInject_es.styleInject(css_248z$1);
+
+function ComboboxAction(props) {
+    return (React__default["default"].createElement("div", { className: styles$1.actionContainer },
+        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: props.onClick, "aria-label": props.label },
+            React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
+}
+
+function ComboboxTriggerButton(props) {
+    const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    return (React__default["default"].createElement(Button.Button, { role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", label: props.label, variation: props.variation, type: props.type, onClick: () => setOpen(!open), icon: props.icon, iconOnRight: props.iconOnRight }));
+}
+
+var css_248z = ".NtYpU6bZMtM- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc((16px / 4) * 5);\n  border-radius: calc(calc(16px / 4) * 5);\n  border-radius: calc(var(--radius-large) * 5);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.NtYpU6bZMtM-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.ftceU-6iBO0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles = {"trigger":"NtYpU6bZMtM-","triggerIcon":"ftceU-6iBO0-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxTriggerChip(props) {
+    const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    return (React__default["default"].createElement("button", { className: styles.trigger, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", onClick: () => {
+            setOpen(!open);
+        } },
+        React__default["default"].createElement(Typography.Typography, { fontWeight: "semiBold", textColor: "heading" }, props.label),
+        React__default["default"].createElement("div", { className: styles.triggerIcon },
+            React__default["default"].createElement(Icon.Icon, { color: "surfaceReverse", name: "add", size: "small" }))));
+}
+
+const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
+const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
+const Combobox = (props) => {
+    const { contentElement, triggerElement } = useComboboxValidation(props.children);
+    return (React__default["default"].createElement(ComboboxContextProvider, null,
+        triggerElement,
+        contentElement));
+};
+function useComboboxValidation(children) {
+    const childrenArray = React__default["default"].Children.toArray(children);
+    let triggerElement, contentElement, multipleTriggersFound = false;
+    childrenArray.forEach(child => {
+        if (isTriggerElement(child)) {
+            if (triggerElement) {
+                multipleTriggersFound = true;
+            }
+            triggerElement = child;
+        }
+        if (isContentElement(child)) {
+            contentElement = child;
+        }
+    });
+    useAssert.useAssert(multipleTriggersFound, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
+    useAssert.useAssert(!triggerElement || !contentElement, COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE);
+    return {
+        contentElement,
+        triggerElement,
+    };
+}
+function isTriggerElement(child) {
+    return (React__default["default"].isValidElement(child) &&
+        (child.type === ComboboxTriggerButton || child.type === ComboboxTriggerChip));
+}
+function isContentElement(child) {
+    return React__default["default"].isValidElement(child) && child.type === ComboboxContent;
+}
+Combobox.TriggerButton = ComboboxTriggerButton;
+Combobox.TriggerChip = ComboboxTriggerChip;
+Combobox.Content = ComboboxContent;
+Combobox.Action = ComboboxAction;
+
+exports.COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE;
+exports.COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE;
+exports.Combobox = Combobox;
+exports.ComboboxContextProvider = ComboboxContextProvider;

package/dist/ConfirmationModal/index.js

@@ -2,28 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-6b61ebf5.js');
+var ConfirmationModal = require('../ConfirmationModal-92f07027.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-a9ab9565.js');
+require('../Modal-dcdc0032.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-a1191b15.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+require('../Heading-4562900a.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-82680c7d.js');
+require('../ButtonDismiss-250840a4.js');
 require('../Content-2ca1ffe1.js');
-require('../Markdown-f6748dcb.js');
+require('../Markdown-b37cf9ec.js');
 require('react-markdown');
-require('../Text-e7ed0974.js');
-require('../Emphasis-76a10790.js');
+require('../Text-59bde58c.js');
+require('../Emphasis-cc3456ac.js');
 
 
 

package/dist/{ConfirmationModal-6b61ebf5.js → ConfirmationModal-92f07027.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-a9ab9565.js');
+var Modal = require('./Modal-dcdc0032.js');
 var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-f6748dcb.js');
+var Markdown = require('./Markdown-b37cf9ec.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-cc2ffbaa.js');
+var Card = require('../Card-69304e99.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Emphasis = require('../Emphasis-76a10790.js');
+var Emphasis = require('../Emphasis-cc3456ac.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-a1191b15.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+require('../Heading-4562900a.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-51f8712f.js');
+require('../Menu-cec53b50.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/DataList/index.js

@@ -5,47 +5,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-e7ed0974.js');
+var Text = require('../Text-59bde58c.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var noop = require('lodash/noop');
 var reactRouterDom = require('react-router-dom');
-var Button = require('../Button-fd8413b2.js');
+var Button = require('../Button-d89f2271.js');
 var design = require('@jobber/design');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 var ReactDOM = require('react-dom');
-var Tooltip = require('../Tooltip-bf67fe6e.js');
+var Tooltip = require('../Tooltip-59dbab5b.js');
 require('react-popper');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var foundation = require('@jobber/design/foundation');
 var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var InlineLabel = require('../InlineLabel-3d461632.js');
 var styles$f = require('@jobber/components/DataList/DataList.css');
 require('uuid');
 require('react-hook-form');
-var Checkbox = require('../Checkbox-3bccf65c.js');
+var Checkbox = require('../Checkbox-eac63b7f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-a1191b15.js');
+var Heading = require('../Heading-4562900a.js');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var useInView = require('@jobber/hooks/useInView');
 var Icon = require('../Icon-405a216c.js');
-var Popover = require('../Popover-bbfc6aa1.js');
+var Popover = require('../Popover-d401fb54.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-4916a642.js');
+var Chip = require('../Chip-4d8e6370.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-1aa30ee1.js');
 require('color');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-d1a52550.js');
+var InputText = require('../InputText-5ac5cfe0.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('../ButtonDismiss-82680c7d.js');
+require('../ButtonDismiss-250840a4.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
-require('../FormField-d6138b7f.js');
-require('../InputValidation-b5a3d92c.js');
+require('../FormField-bef41ec9.js');
+require('../InputValidation-4e809bdd.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataTable/index.js

@@ -9,20 +9,20 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-b903e7ac.js');
-var Button = require('../Button-fd8413b2.js');
-var Text = require('../Text-e7ed0974.js');
+var Option = require('../Option-9f4a65da.js');
+var Button = require('../Button-d89f2271.js');
+var Text = require('../Text-59bde58c.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-d6138b7f.js');
+require('../FormField-bef41ec9.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-b5a3d92c.js');
+require('../InputValidation-4e809bdd.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-router-dom');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-b31baae4.js');
+var DatePicker = require('../DatePicker-39d2dc8b.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{DatePicker-b31baae4.js → DatePicker-39d2dc8b.js}

@@ -5,8 +5,8 @@ var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Typography = require('./Typography-fd6f932a.js');
-var Button = require('./Button-fd8413b2.js');
+var Typography = require('./Typography-9bff9c91.js');
+var Button = require('./Button-d89f2271.js');
 var omit = require('lodash/omit');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/DescriptionList/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Disclosure/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Typography = require('../Typography-fd6f932a.js');
+var Typography = require('../Typography-9bff9c91.js');
 require('@jobber/design');
 require('classnames');
 

package/dist/Drawer/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-a1191b15.js');
-var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+var Heading = require('../Heading-4562900a.js');
+var ButtonDismiss = require('../ButtonDismiss-250840a4.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Emphasis/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-76a10790.js');
+var Emphasis = require('../Emphasis-cc3456ac.js');
 require('react');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 

package/dist/{Emphasis-76a10790.js → Emphasis-cc3456ac.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-fd6f932a.js');
+var Typography = require('./Typography-9bff9c91.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/FeatureSwitch/index.js

@@ -6,14 +6,14 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-a1191b15.js');
-var Text = require('../Text-e7ed0974.js');
+var Heading = require('../Heading-4562900a.js');
+var Text = require('../Text-59bde58c.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Switch = require('../Switch-e75145cc.js');
-var Button = require('../Button-fd8413b2.js');
-var Emphasis = require('../Emphasis-76a10790.js');
-var Markdown = require('../Markdown-f6748dcb.js');
-require('../Typography-fd6f932a.js');
+var Switch = require('../Switch-165f01e3.js');
+var Button = require('../Button-d89f2271.js');
+var Emphasis = require('../Emphasis-cc3456ac.js');
+var Markdown = require('../Markdown-b37cf9ec.js');
+require('../Typography-9bff9c91.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/FormField/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-d6138b7f.js');
+var FormField = require('../FormField-bef41ec9.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-fd8413b2.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fd6f932a.js');
-require('../Text-e7ed0974.js');
-require('../InputValidation-b5a3d92c.js');
+require('../Typography-9bff9c91.js');
+require('../Text-59bde58c.js');
+require('../InputValidation-4e809bdd.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{FormField-d6138b7f.js → FormField-bef41ec9.js}

@@ -6,10 +6,10 @@ var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var Button = require('./Button-fd8413b2.js');
+var Button = require('./Button-d89f2271.js');
 var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-e7ed0974.js');
-var InputValidation = require('./InputValidation-b5a3d92c.js');
+var Text = require('./Text-59bde58c.js');
+var InputValidation = require('./InputValidation-4e809bdd.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }