@jobber/components 4.59.0 → 4.59.1-st-spike-w.1

package/dist/Combobox/index.js

@@ -1,46 +1,36 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-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-54334431.js');
-var Typography = require('../Typography-83915c54.js');
-var Button = require('../Button-db6114a6.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 Chip = require('../Chip-f8b8fd89.js');
-require('@jobber/design');
-var useAssert = require('@jobber/hooks/useAssert');
-require('react-router-dom');
-require('@jobber/hooks/useInView');
-require('../Avatar-1aa30ee1.js');
-require('color');
-require('../Tooltip-6b12f1c2.js');
-require('framer-motion');
-
-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);
+import React, { useRef, useEffect, useContext, useCallback, useState, Children, isValidElement, useMemo } from 'react';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { s as styleInject } from '../style-inject.es-a0e1a0ba.js';
+import { I as Icon } from '../Icon-22723fe6.js';
+import { T as Text } from '../Text-703e2c21.js';
+import { T as Typography } from '../Typography-09952a2f.js';
+import { B as Button } from '../Button-319d8fa0.js';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { usePopper } from 'react-popper';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { C as Chip } from '../Chip-40f5214c.js';
+import '@jobber/design';
+import { useAssert } from '@jobber/hooks/useAssert';
+import 'react-router-dom';
+import '@jobber/hooks/useInView';
+import '../Avatar-b2e862de.js';
+import 'color';
+import '../Tooltip-c80b9fb7.js';
+import 'framer-motion';
 
 var css_248z$6 = ".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- {\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$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
-styleInject_es.styleInject(css_248z$6);
+styleInject(css_248z$6);
 
 var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\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.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: 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  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-: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";
 var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
-styleInject_es.styleInject(css_248z$5);
+styleInject(css_248z$5);
 
 function ComboboxContentSearch(props) {
-    const searchRef = React.useRef(null);
-    React.useEffect(() => {
+    const searchRef = useRef(null);
+    useEffect(() => {
         if (props.open) {
             setTimeout(() => {
                 var _a;
@@ -48,10 +38,10 @@ function ComboboxContentSearch(props) {
             }, 0);
         }
     }, [props.open]);
-    return (React__default["default"].createElement("div", { className: styles$5.search },
-        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$5.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default["default"].createElement("button", { className: styles$5.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
-            React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
+    return (React.createElement("div", { className: styles$5.search },
+        React.createElement("input", { type: "search", ref: searchRef, className: styles$5.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React.createElement("button", { className: styles$5.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("");
@@ -64,15 +54,15 @@ function ComboboxContentSearch(props) {
 
 var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\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._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\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.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
 var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
-styleInject_es.styleInject(css_248z$4);
+styleInject(css_248z$4);
 
 var css_248z$3 = "._5QdRGmaNHvc- {\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  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\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  transition: all 200ms;\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._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n._5QdRGmaNHvc-: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";
 var styles$3 = {"option":"_5QdRGmaNHvc-"};
-styleInject_es.styleInject(css_248z$3);
+styleInject(css_248z$3);
 
-const ComboboxContext = React__default["default"].createContext({});
+const ComboboxContext = React.createContext({});
 function ComboboxContextProvider(props) {
-    return (React__default["default"].createElement(ComboboxContext.Provider, { value: {
+    return (React.createElement(ComboboxContext.Provider, { value: {
             open: props.open,
             setOpen: props.setOpen,
             selected: props.selected,
@@ -83,26 +73,26 @@ function ComboboxContextProvider(props) {
 }
 
 function ComboboxOption(props) {
-    const { selected, selectionHandler } = React.useContext(ComboboxContext);
+    const { selected, selectionHandler } = useContext(ComboboxContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
-    return (React__default["default"].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__default["default"](styles$3.option) },
+    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$3.option) },
         props.label,
-        isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+        isSelected && React.createElement(Icon, { name: "checkmark", color: "blue" })));
 }
 
 function ComboboxContentList(props) {
-    return (React__default["default"].createElement("div", { className: styles$4.container },
-        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
+    return (React.createElement("div", { className: styles$4.container },
+        !props.showEmptyState && props.options.length > 0 && (React.createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
-                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
+                return (React.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
             }))),
-        !props.showEmptyState && props.options.length === 0 && (React__default["default"].createElement("div", { className: styles$4.filterMessage },
-            React__default["default"].createElement(Text.Text, { variation: "subdued" },
+        !props.showEmptyState && props.options.length === 0 && (React.createElement("div", { className: styles$4.filterMessage },
+            React.createElement(Text, { variation: "subdued" },
                 "No results for ",
                 `“${props.searchValue}”`))),
-        props.showEmptyState && (React__default["default"].createElement("div", { className: styles$4.emptyStateMessage },
-            React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+        props.showEmptyState && (React.createElement("div", { className: styles$4.emptyStateMessage },
+            React.createElement(Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
 }
 function getZeroIndexStateText(subjectNoun) {
     if (subjectNoun) {
@@ -113,7 +103,7 @@ function getZeroIndexStateText(subjectNoun) {
 
 var css_248z$2 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
 var styles$2 = {"header":"Q-mwo-g5Fi8-"};
-styleInject_es.styleInject(css_248z$2);
+styleInject(css_248z$2);
 
 function ComboboxContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
@@ -121,9 +111,9 @@ function ComboboxContentHeader(props) {
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React__default["default"].createElement("div", { className: styles$2.header, "data-testid": "ATL-Combobox-Header" },
-        React__default["default"].createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
-        showAction && (React__default["default"].createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+    return (React.createElement("div", { className: styles$2.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) {
@@ -136,10 +126,10 @@ function getLabel(hasSelected, count, subjectNoun) {
 }
 
 function useComboboxContent(options, open, selected, searchValue) {
-    const { shouldScroll } = React.useContext(ComboboxContext);
-    const optionsListRef = React.useRef(null);
+    const { shouldScroll } = useContext(ComboboxContext);
+    const optionsListRef = useRef(null);
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         if (open && shouldScroll.current && optionsListRef.current) {
             const firstSelected = Array.from((_a = optionsListRef === null || optionsListRef === void 0 ? void 0 : optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children).find(child => {
@@ -166,12 +156,12 @@ function scrollToFirstSelected(firstSelected, shouldScroll) {
 
 // eslint-disable-next-line max-statements
 function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
-    const { handleClose } = React.useContext(ComboboxContext);
+    const { handleClose } = useContext(ComboboxContext);
     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, {
+    const focusedIndex = useRef(null);
+    useRefocusOnActivator(open);
+    const popperRef = useFocusTrap(open);
+    const { styles: popperStyles, attributes } = usePopper(wrapperRef.current, popperRef.current, {
         modifiers: [
             {
                 name: "flip",
@@ -182,10 +172,10 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
         ],
         placement: "bottom-start",
     });
-    React.useEffect(() => {
+    useEffect(() => {
         focusedIndex.current = null;
     }, [open, filteredOptions.length]);
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         if (open) {
             (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
@@ -195,7 +185,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
             (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
         };
     }, [open, optionsListRef, filteredOptions]);
-    useOnKeyDown.useOnKeyDown(() => {
+    useOnKeyDown(() => {
         if (open) {
             handleClose();
         }
@@ -246,51 +236,51 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { filteredOptions, optionsListRef } = useComboboxContent(props.options, props.open, props.selected, props.searchValue);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, filteredOptions, optionsListRef, props.open, props.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$6.content, { [styles$6.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
-        React__default["default"].createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue }),
-        props.multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: filteredOptions.length > 0, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames(styles$6.content, { [styles$6.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+        React.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue }),
+        props.multiselect && optionsExist && (React.createElement(ComboboxContentHeader, { hasOptionsVisible: filteredOptions.length > 0, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
             }, onSelectAll: () => {
                 props.selectedStateSetter(filteredOptions);
             } })),
-        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun }),
-        props.actionElements && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+        React.createElement(ComboboxContentList, { multiselect: props.multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun }),
+        props.actionElements && (React.createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
                 [styles$6.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
-    return ReactDOM__default["default"].createPortal(template, document.body);
+    return ReactDOM.createPortal(template, document.body);
 }
 
 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);
+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, type: "button", "aria-label": props.label },
-            React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
+    return (React.createElement("div", { className: styles$1.actionContainer },
+        React.createElement("button", { className: styles$1.actionButton, onClick: props.onClick, type: "button", "aria-label": props.label },
+            React.createElement(Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
 }
 
 function ComboboxTrigger({ label = "Select", selected, }) {
-    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    const { handleClose, open, setOpen } = React.useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React__default["default"].createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", heading: label, onClick: () => {
+    return (React.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", heading: label, onClick: () => {
             if (open) {
                 handleClose();
             }
             else {
                 setOpen(true);
             }
-        }, role: "combobox" }, !hasSelection && (React__default["default"].createElement(Chip.Chip.Suffix, null,
-        React__default["default"].createElement(Icon.Icon, { name: "add", size: "small" })))));
+        }, role: "combobox" }, !hasSelection && (React.createElement(Chip.Suffix, null,
+        React.createElement(Icon, { name: "add", size: "small" })))));
 }
 
 var css_248z = ".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\n._-0dkolvLF-Y- {\n  display: inline-block;\n}\n";
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
-styleInject_es.styleInject(css_248z);
+styleInject(css_248z);
 
 function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
-    const handleClose = React.useCallback(() => {
+    const handleClose = useCallback(() => {
         setOpen(false);
         setSearchValue("");
         onClose && onClose();
@@ -298,7 +288,7 @@ function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shoul
             shouldScroll.current = true;
         }
     }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
-    const handleSelection = React.useCallback((selection) => {
+    const handleSelection = useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
         }
@@ -306,7 +296,7 @@ function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shoul
             handleSingleSelect(selectedStateSetter, selection);
         }
     }, [multiSelect, selectedStateSetter, selectedOptions]);
-    const handleSingleSelect = React.useCallback((selectCallback, selection) => {
+    const handleSingleSelect = useCallback((selectCallback, selection) => {
         selectCallback([selection]);
         handleClose();
     }, []);
@@ -325,10 +315,10 @@ function handleMultiSelect(selectCallback, selected, selection) {
 }
 
 function useCombobox(selected, onSelect, onClose, multiSelect) {
-    const wrapperRef = React.useRef(null);
-    const shouldScroll = React.useRef(false);
-    const [open, setOpen] = React.useState(false);
-    const [searchValue, setSearchValue] = React.useState("");
+    const wrapperRef = useRef(null);
+    const shouldScroll = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
     const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
     return {
         wrapperRef,
@@ -345,9 +335,9 @@ function useCombobox(selected, onSelect, onClose, multiSelect) {
 }
 
 function ComboboxActivator(props) {
-    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
-    if (props.children.type === Button.Button || props.children.type === Chip.Chip) {
-        return React__default["default"].cloneElement(props.children, {
+    const { handleClose, open, setOpen } = React.useContext(ComboboxContext);
+    if (props.children.type === Button || props.children.type === Chip) {
+        return React.cloneElement(props.children, {
             role: "combobox",
             onClick: () => {
                 if (open) {
@@ -368,7 +358,7 @@ function useComboboxValidation(children) {
     const actionElements = getCompoundComponents(ComboboxAction, children);
     const activatorElements = getCompoundComponents(ComboboxActivator, children);
     const shouldThrowTriggerError = isInvalid(activatorElements);
-    useAssert.useAssert(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
+    useAssert(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
     return {
         optionElements,
         triggerElement: activatorElements[0],
@@ -382,27 +372,26 @@ function isInvalid(activators) {
  * Return all instances child component that matches the `type` provided
  */
 function getCompoundComponents(type, children) {
-    const childrenArray = React.Children.toArray(children);
-    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    const childrenArray = Children.toArray(children);
+    const elements = childrenArray.filter((child) => isValidElement(child) && child.type === type);
     return elements;
 }
 
 function Combobox(props) {
     const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
-    const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
+    const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
         id: option.props.id,
         label: option.props.label,
     }))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, } = useCombobox(props.selected, props.onSelect, props.onClose, props.multiSelect);
-    return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll },
-        React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
-            React__default["default"].createElement(ComboboxContent, { multiselect: props.multiSelect, searchPlaceholder: props.searchPlaceholder, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: options }))));
+    return (React.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll },
+        React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
+            open && (React.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            triggerElement || (React.createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
+            React.createElement(ComboboxContent, { multiselect: props.multiSelect, searchPlaceholder: props.searchPlaceholder, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: options }))));
 }
 Combobox.Activator = ComboboxActivator;
 Combobox.Action = ComboboxAction;
 Combobox.Option = ComboboxOption;
 
-exports.Combobox = Combobox;
-exports.ComboboxContextProvider = ComboboxContextProvider;
+export { Combobox, ComboboxContextProvider };

package/dist/ConfirmationModal/index.js

@@ -1,30 +1,22 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ConfirmationModal = require('../ConfirmationModal-285c3cbe.js');
-require('react');
-require('@jobber/hooks/useOnKeyDown');
-require('../Modal-c17cc105.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-4cde9989.js');
-require('../Typography-83915c54.js');
-require('../Button-db6114a6.js');
-require('react-router-dom');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../ButtonDismiss-1ccb84ec.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-d53b01bf.js');
-require('react-markdown');
-require('../Text-54334431.js');
-require('../Emphasis-e10dde65.js');
-
-
-
-exports.ConfirmationModal = ConfirmationModal.ConfirmationModal;
+export { C as ConfirmationModal } from '../ConfirmationModal-86b42ca0.js';
+import 'react';
+import '@jobber/hooks/useOnKeyDown';
+import '../Modal-06dc9551.js';
+import 'react-dom';
+import 'classnames';
+import 'framer-motion';
+import '@jobber/hooks/useRefocusOnActivator';
+import '@jobber/hooks/useFocusTrap';
+import '../style-inject.es-a0e1a0ba.js';
+import '../Heading-04994667.js';
+import '../Typography-09952a2f.js';
+import '../Button-319d8fa0.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../ButtonDismiss-85986110.js';
+import '../Content-3354c281.js';
+import '../Markdown-2ec28e51.js';
+import 'react-markdown';
+import '../Text-703e2c21.js';
+import '../Emphasis-edd2af9b.js';

package/dist/{ConfirmationModal-285c3cbe.js → ConfirmationModal-86b42ca0.js}

@@ -1,14 +1,8 @@
-'use strict';
-
-var React = require('react');
-var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-c17cc105.js');
-var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-d53b01bf.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+import React, { forwardRef, useReducer, useImperativeHandle, useEffect } from 'react';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { M as Modal } from './Modal-06dc9551.js';
+import { C as Content } from './Content-3354c281.js';
+import { M as Markdown } from './Markdown-2ec28e51.js';
 
 function confirmationModalReducer(state, action) {
     switch (action.type) {
@@ -26,8 +20,8 @@ function confirmationModalReducer(state, action) {
             throw new Error();
     }
 }
-const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({ title, message, open = false, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onRequestClose, variation = "work", size, children, }, ref) {
-    const [state, dispatch] = React.useReducer(confirmationModalReducer, {
+const ConfirmationModal = forwardRef(function ConfirmationModalInternal({ title, message, open = false, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onRequestClose, variation = "work", size, children, }, ref) {
+    const [state, dispatch] = useReducer(confirmationModalReducer, {
         title,
         message,
         open: false,
@@ -37,7 +31,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
         onCancel,
     });
     // Expose a `show` method through this component's ref.
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
         show: ({ title: newTitle, message: newMessage, confirmLabel: newConfirmLabel, cancelLabel: newCancelLabel, onConfirm: newOnConfirm, onCancel: newOnCancel, }) => {
             dispatch({
                 type: "display",
@@ -50,7 +44,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
             });
         },
     }));
-    React.useEffect(() => {
+    useEffect(() => {
         dispatch({
             type: "reset",
             state: Object.assign(Object.assign({}, state), { title, message: message, confirmLabel,
@@ -59,16 +53,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(handleKeyboardShortcut, ["Escape", "Enter"]);
+    return (React.createElement(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, null,
+        React.createElement(Markdown, { content: state.message }))) : (children)));
     function handleAction(type) {
         return () => {
             dispatch({ type });
@@ -97,4 +91,4 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
     }
 });
 
-exports.ConfirmationModal = ConfirmationModal;
+export { ConfirmationModal as C };

package/dist/Content/index.js

@@ -1,12 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Content = require('../Content-2ca1ffe1.js');
-require('react');
-require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-
-
-
-exports.Content = Content.Content;
+export { C as Content } from '../Content-3354c281.js';
+import 'react';
+import 'classnames';
+import '../style-inject.es-a0e1a0ba.js';

package/dist/{Content-2ca1ffe1.js → Content-3354c281.js}

@@ -1,24 +1,18 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+import { createElement } from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
 
 var css_248z$1 = ".SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: calc(16px * 1);\n  margin-bottom: var(--space-base);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: calc(16px * 1.5);\n  margin-bottom: var(--space-large);\n}\n";
 var spacings = {"base":"SRYe3DkjH1c-","small":"rDJFaGPzCbE-","large":"_7TZ4MI3kr4Y-"};
-styleInject_es.styleInject(css_248z$1);
+styleInject(css_248z$1);
 
 var css_248z = "._4On2F-4nWuY- {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
 var styles = {"padded":"_4On2F-4nWuY-"};
-styleInject_es.styleInject(css_248z);
+styleInject(css_248z);
 
 function Content({ children, spacing = "base", type = "div", }) {
-    const className = classnames__default["default"](styles.padded, spacings[spacing]);
-    return React.createElement(type, { className }, children);
+    const className = classnames(styles.padded, spacings[spacing]);
+    return createElement(type, { className }, children);
 }
 
-exports.Content = Content;
+export { Content as C };