@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.3

package/dist/ComboboxContentHeader-CJ0if4JI.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-Dx8KtnBw.js');
+var Button = require('./Button-D3mW3Hcg.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  gap: var(--space-smaller);\n}\n";
+var styles = {"header":"Q-mwo-g5Fi8-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxContentHeader(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" },
+        React.createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React.createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
+exports.ComboboxContentHeader = ComboboxContentHeader;

package/dist/ComboboxContentHeader-DFLlxg-X.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { T as Typography } from './Typography-G8pA_xwj.js';
+import { B as Button } from './Button-CWVwgwhn.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  gap: var(--space-smaller);\n}\n";
+var styles = {"header":"Q-mwo-g5Fi8-"};
+styleInject(css_248z);
+
+function ComboboxContentHeader(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" },
+        React.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
+export { ComboboxContentHeader as C };

package/dist/ComboboxContentList-B_KlRjj7.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { G as Glimmer } from './Glimmer-Dz1E9Bo5.js';
+import { S as Spinner } from './Spinner-BOhyUAA_.js';
+import { A as AnimatedPresence } from './AnimatedPresence-D73apgLB.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { C as ComboboxOption } from './ComboboxOption-D_f4NcBM.js';
+import { C as ComboboxLoadMore } from './ComboboxLoadMore-CBXYoxXv.js';
+
+var css_248z = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
+var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+styleInject(css_248z);
+
+function ComboboxContentList(props) {
+    const optionsExist = props.options.length > 0;
+    const hasSearchTerm = props.searchValue.length > 0;
+    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
+    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 }));
+            }),
+            React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
+                React.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner, { size: "small" })))),
+            props.onLoadMore && (React.createElement(ComboboxLoadMore, { 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, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
+            React.createElement(Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        !hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.emptyStateMessage },
+            React.createElement(Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+}
+function getZeroIndexStateText(subjectNoun) {
+    if (subjectNoun) {
+        return `You don't have any ${subjectNoun} yet`;
+    }
+    return "No options yet";
+}
+function useScrollState(optionsListRef, options) {
+    const [listScrollState, setlistScrollState] = useState("");
+    useEffect(() => {
+        const handleScroll = () => {
+            if (optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight >= scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (options.length === 0) {
+            handleScroll();
+        }
+        if (optionsListRef.current) {
+            optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (optionsListRef.current) {
+                optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [options]);
+    return { listScrollState };
+}
+
+export { ComboboxContentList as C };

package/dist/ComboboxContentList-wTyr0j1u.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Text = require('./Text-D9gsHxbp.js');
+var Glimmer = require('./Glimmer-Cgcy2Ruw.js');
+var Spinner = require('./Spinner-DT15aa_r.js');
+var AnimatedPresence = require('./AnimatedPresence-DFaAEYUa.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var ComboboxOption = require('./ComboboxOption-CWkyTkzU.js');
+var ComboboxLoadMore = require('./ComboboxLoadMore-Bfg4pEkg.js');
+
+var css_248z = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
+var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxContentList(props) {
+    const optionsExist = props.options.length > 0;
+    const hasSearchTerm = props.searchValue.length > 0;
+    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
+    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 }));
+            }),
+            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" })))),
+            props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { 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 },
+            React.createElement(Text.Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        !hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.emptyStateMessage },
+            React.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";
+}
+function useScrollState(optionsListRef, options) {
+    const [listScrollState, setlistScrollState] = React.useState("");
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight >= scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (options.length === 0) {
+            handleScroll();
+        }
+        if (optionsListRef.current) {
+            optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (optionsListRef.current) {
+                optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [options]);
+    return { listScrollState };
+}
+
+exports.ComboboxContentList = ComboboxContentList;

package/dist/ComboboxContentSearch-B8hsfo_D.js

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react';
+import { I as Icon } from './Icon-CoHJokXb.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: var(--space-base);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: var(--typography--fontFamily-normal);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: var(--space-base);\n  z-index: var(--elevation-tooltip);\n  width: var(--space-large);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject(css_248z);
+
+function ComboboxContentSearch(props) {
+    const searchRef = useRef(null);
+    useEffect(() => {
+        if (props.open) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [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" },
+            React.createElement(Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        props.handleSearchChange("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.currentTarget.value);
+        props.handleSearchChange(event.currentTarget.value);
+    }
+}
+
+export { ComboboxContentSearch as C };

package/dist/ComboboxContentSearch-UAyHetvM.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('./Icon-B9XNdA1T.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: var(--space-base);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: var(--typography--fontFamily-normal);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: var(--space-base);\n  z-index: var(--elevation-tooltip);\n  width: var(--space-large);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxContentSearch(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.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" },
+            React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        props.handleSearchChange("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.currentTarget.value);
+        props.handleSearchChange(event.currentTarget.value);
+    }
+}
+
+exports.ComboboxContentSearch = ComboboxContentSearch;

package/dist/ComboboxLoadMore-Bfg4pEkg.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('./useInView-Ct13SCWB.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = "._3s8-RC5Ky3s- {\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
+var styles = {"trigger":"_3s8-RC5Ky3s-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+exports.ComboboxLoadMore = ComboboxLoadMore;

package/dist/ComboboxLoadMore-CBXYoxXv.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { u as useInView } from './useInView-Yth15M0p.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = "._3s8-RC5Ky3s- {\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
+var styles = {"trigger":"_3s8-RC5Ky3s-"};
+styleInject(css_248z);
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView();
+    useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+export { ComboboxLoadMore as C };

package/dist/ComboboxOption-CWkyTkzU.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Icon = require('./Icon-B9XNdA1T.js');
+var Flex = require('./Flex-CBKf3epb.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.js');
+
+var css_248z = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 var(--space-small);\n  padding: var(--space-small);\n  border-radius: var(--radius-large);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles = {"option":"_5QdRGmaNHvc-"};
+styleInject_es.styleInject(css_248z);
+
+function ComboboxOption(props) {
+    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) },
+        React.createElement(Flex.Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React.createElement("div", null, isSelected && React.createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
+}
+
+exports.ComboboxOption = ComboboxOption;

package/dist/ComboboxOption-D_f4NcBM.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { I as Icon } from './Icon-CoHJokXb.js';
+import { F as Flex } from './Flex-DXDpEzMI.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { a as ComboboxContext } from './ComboboxProvider-Dm_tfmkr.js';
+
+var css_248z = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 var(--space-small);\n  padding: var(--space-small);\n  border-radius: var(--radius-large);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles = {"option":"_5QdRGmaNHvc-"};
+styleInject(css_248z);
+
+function ComboboxOption(props) {
+    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) },
+        React.createElement(Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React.createElement("div", null, isSelected && React.createElement(Icon, { name: "checkmark", color: "blue" }))));
+}
+
+export { ComboboxOption as C };

package/dist/ComboboxProvider-BwxfVgmL.js

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

package/dist/ComboboxProvider-Dm_tfmkr.js

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

package/dist/ComboboxTrigger-DdG9k28y.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { C as Chip } from './Chip-Cvuqhi_q.js';
+import './tslib.es6-Df1SgIEn.js';
+import { I as Icon } from './Icon-CoHJokXb.js';
+import { a as ComboboxContext } from './ComboboxProvider-Dm_tfmkr.js';
+
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleClose, open, setOpen } = 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: () => {
+            if (open) {
+                handleClose();
+            }
+            else {
+                setOpen(true);
+            }
+        }, role: "combobox" }, !hasSelection && (React.createElement(Chip.Suffix, null,
+        React.createElement(Icon, { name: "add", size: "small" })))));
+}
+
+export { ComboboxTrigger as C };

package/dist/ComboboxTrigger-zTO01W3n.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var Chip = require('./Chip-DSy6Xm8R.js');
+require('./tslib.es6-ld72nsZq.js');
+var Icon = require('./Icon-B9XNdA1T.js');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.js');
+
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleClose, open, setOpen } = 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: () => {
+            if (open) {
+                handleClose();
+            }
+            else {
+                setOpen(true);
+            }
+        }, role: "combobox" }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
+        React.createElement(Icon.Icon, { name: "add", size: "small" })))));
+}
+
+exports.ComboboxTrigger = ComboboxTrigger;

package/dist/ConfirmationModal/index.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var ConfirmationModal = require('../ConfirmationModal-BX-WMEkO.js');
+require('react');
+require('../useOnKeyDown-B9JF2jLZ.js');
+require('../Modal-DYsKMdiT.js');
+require('react-dom');
+require('classnames');
+require('framer-motion');
+require('../useRefocusOnActivator-DOJm9VWz.js');
+require('../useFocusTrap-CMLwEDMY.js');
+require('../style-inject.es-XZHJH68X.js');
+require('../Heading-suKDLmO4.js');
+require('../Typography-Dx8KtnBw.js');
+require('../getAtlantisConfig-mcMVqf6m.js');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+require('../ButtonDismiss-l6Kunmen.js');
+require('../Content-B8Od1cqS.js');
+require('../Markdown-B2B4q1R4.js');
+require('react-markdown');
+require('../Text-D9gsHxbp.js');
+require('../Emphasis-B3vf8Ek9.js');
+
+
+
+exports.ConfirmationModal = ConfirmationModal.ConfirmationModal;

package/dist/ConfirmationModal/index.mjs

@@ -0,0 +1,23 @@
+export { C as ConfirmationModal } from '../ConfirmationModal-KamMnKR1.js';
+import 'react';
+import '../useOnKeyDown-BsUfDste.js';
+import '../Modal-u49JU_yq.js';
+import 'react-dom';
+import 'classnames';
+import 'framer-motion';
+import '../useRefocusOnActivator-CMNWUYSe.js';
+import '../useFocusTrap-BtnnoHG8.js';
+import '../style-inject.es-tgCJW-Cu.js';
+import '../Heading-CL3UujY7.js';
+import '../Typography-G8pA_xwj.js';
+import '../getAtlantisConfig-6FPWID0P.js';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';
+import '../ButtonDismiss-GLptCaNc.js';
+import '../Content-BknIp35w.js';
+import '../Markdown-BqNLA1UK.js';
+import 'react-markdown';
+import '../Text-DEviM1Tv.js';
+import '../Emphasis-xxFrrT2i.js';

package/dist/{ConfirmationModal-52e16873.js → ConfirmationModal-BX-WMEkO.js}

@@ -1,14 +1,10 @@
 'use strict';
 
 var React = require('react');
-var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-c336cac6.js');
-var Content = require('./Content-e3f7b6fc.js');
-var Markdown = require('./Markdown-f7c55304.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useOnKeyDown = require('./useOnKeyDown-B9JF2jLZ.js');
+var Modal = require('./Modal-DYsKMdiT.js');
+var Content = require('./Content-B8Od1cqS.js');
+var Markdown = require('./Markdown-B2B4q1R4.js');
 
 function confirmationModalReducer(state, action) {
     switch (action.type) {
@@ -59,16 +55,16 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
                 onCancel }),
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
-    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
-    return (React__default["default"].createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
+    useOnKeyDown.useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
+    return (React.createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),
             variation: variation === "destructive" ? "destructive" : "work",
         }, secondaryAction: {
             label: state.cancelLabel,
             onClick: handleAction("cancel"),
-        } }, state.message ? (React__default["default"].createElement(Content.Content, null,
-        React__default["default"].createElement(Markdown.Markdown, { content: state.message }))) : (children)));
+        } }, state.message ? (React.createElement(Content.Content, null,
+        React.createElement(Markdown.Markdown, { content: state.message }))) : (children)));
     function handleAction(type) {
         return () => {
             dispatch({ type });