@jobber/components 6.26.0 → 6.26.2

package/dist/InputNumber-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 function InputNumberInternal(props, ref) {

package/dist/InputNumber-es.js

@@ -1,10 +1,10 @@
-import React, { forwardRef, createRef, useImperativeHandle } from 'react';
+import React__default, { forwardRef, createRef, useImperativeHandle } from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 function InputNumberInternal(props, ref) {
@@ -24,7 +24,7 @@ function InputNumberInternal(props, ref) {
             }
         },
     }));
-    return (React.createElement(FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    return (React__default.createElement(FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
     function customValidators(validators) {
         if (validators == null) {
             return getOverLimitMessage;

package/dist/InputPassword-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 function InputPassword(props) {

package/dist/InputPassword-es.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 function InputPassword(props) {
     const { hasVisibility = false } = props;
     const [visible, setVisibility] = useState(false);
-    return (React.createElement(FormField, Object.assign({}, props, (hasVisibility && {
+    return (React__default.createElement(FormField, Object.assign({}, props, (hasVisibility && {
         suffix: {
             ariaLabel: visible ? "Hide password" : "Show password",
             icon: visible ? "eye" : "eyeCrossed",

package/dist/InputPhoneNumber-cjs.js

@@ -4,9 +4,9 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
@@ -73,7 +73,7 @@ function InputPhoneNumber(_a) {
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
     return (React.createElement(InputMask, { pattern: pattern, strict: false },
-        React.createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
+        React.createElement(FormField.FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
                     message: `${errorSubject} is required`,
                 } }, validations), { validate: getPhoneNumberValidation }) }))));

package/dist/InputPhoneNumber-es.js

@@ -1,10 +1,10 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React, { useState, cloneElement } from 'react';
+import React__default, { useState, cloneElement } from 'react';
 import { useFormContext, useForm } from 'react-hook-form';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
@@ -16,9 +16,9 @@ function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
     const placeholderValue = pattern
         .replace(new RegExp(`\\${delimiter}`, "g"), "_")
         .slice(stringifiedValue.length);
-    const inputMask = (React.createElement("div", { className: styles.mask, "aria-hidden": "true" },
-        React.createElement("span", { className: styles.hiddenValue }, stringifiedValue),
-        React.createElement("span", null, placeholderValue)));
+    const inputMask = (React__default.createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React__default.createElement("span", { className: styles.hiddenValue }, stringifiedValue),
+        React__default.createElement("span", null, placeholderValue)));
     return cloneElement(children, {
         onChange: handleChange,
         children: isMasking && inputMask,
@@ -70,8 +70,8 @@ function InputPhoneNumber(_a) {
         ? useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             useForm({ mode: "onTouched" });
-    return (React.createElement(InputMask, { pattern: pattern, strict: false },
-        React.createElement(FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
+    return (React__default.createElement(InputMask, { pattern: pattern, strict: false },
+        React__default.createElement(FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
                     message: `${errorSubject} is required`,
                 } }, validations), { validate: getPhoneNumberValidation }) }))));

package/dist/InputText/index.cjs

@@ -3,11 +3,11 @@
 var React = require('react');
 var useSafeLayoutEffect = require('../useSafeLayoutEffect-cjs.js');
 var FormField = require('../FormField-cjs.js');
+require('classnames');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
 var omit = require('../omit-cjs.js');
 require('../Icon-cjs.js');

package/dist/InputText/index.mjs

@@ -1,11 +1,11 @@
-import React, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
+import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { u as useSafeLayoutEffect_1 } from '../useSafeLayoutEffect-es.js';
 import { k as FormField, s as styles, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
+import 'classnames';
 import { _ as __rest } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
 import { o as omit } from '../omit-es.js';
 import '../Icon-es.js';
@@ -125,7 +125,7 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
+    return (React__default.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
         resize();
@@ -208,8 +208,8 @@ function useInputTextFormField(_a) {
 
 const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
     var _a, _b, _c;
-    const inputTextRef = React.useRef(null);
-    const wrapperRef = React.useRef(null);
+    const inputTextRef = React__default.useRef(null);
+    const wrapperRef = React__default.useRef(null);
     const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
     const id = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
@@ -250,10 +250,10 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         handleBlur,
         handleFocus,
         handleKeyDown }));
-    return (React.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
-        React.createElement(React.Fragment, null,
-            type === "textarea" ? (React.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
-            React.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+        React__default.createElement(React__default.Fragment, null,
+            type === "textarea" ? (React__default.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React__default.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
+            React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
             props.children)));
 });
 function useInputTextId(props) {
@@ -261,10 +261,10 @@ function useInputTextId(props) {
     return props.id || generatedId;
 }
 function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
-    return (React.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
+    return (React__default.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
 }
 function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
-    return (React.createElement("input", Object.assign({}, fieldProps, { ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
+    return (React__default.createElement("input", Object.assign({}, fieldProps, { ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
 }
 
 function isNewInputTextProps(props) {
@@ -272,10 +272,10 @@ function isNewInputTextProps(props) {
 }
 const InputText = forwardRef(function InputTextShim(props, ref) {
     if (isNewInputTextProps(props)) {
-        return (React.createElement(InputTextSPAR, Object.assign({}, props, { ref: ref })));
+        return (React__default.createElement(InputTextSPAR, Object.assign({}, props, { ref: ref })));
     }
     else {
-        return (React.createElement(InputText$1, Object.assign({}, props, { ref: ref })));
+        return (React__default.createElement(InputText$1, Object.assign({}, props, { ref: ref })));
     }
 });
 

package/dist/InputTime-cjs.js

@@ -4,10 +4,10 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var debounce = require('./debounce-cjs.js');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 const DEBOUNCE_TIME = 300;

package/dist/InputTime-es.js

@@ -1,11 +1,11 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React__default, { useState, useCallback, useEffect, useRef } from 'react';
 import { d as debounce } from './debounce-es.js';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 const DEBOUNCE_TIME = 300;
@@ -154,7 +154,7 @@ function InputTime(_a) {
     const ref = useRef(null);
     const { setTypedTime } = useTimePredict({ value, handleChange });
     const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: dateToTimeString(defaultValue) })), (!defaultValue && { value: dateToTimeString(value) })), params);
-    return (React.createElement(FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
+    return (React__default.createElement(FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
             var _a;
             (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
             !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);

package/dist/InputValidation-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -13,10 +13,10 @@ function InputValidation({ message, visible = true, }) {
     };
     if (!visible)
         return null;
-    return (React.createElement(React.Fragment, null, messages && messages.length > 0 && (React.createElement(AnimatePresence, { mode: "wait" }, messages.map(msg => (React.createElement(motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
-        React.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
-            React.createElement(Icon, { name: "alert", size: "small", color: "critical" }),
-            React.createElement(Text, { size: "small", variation: "error" }, msg)))))))));
+    return (React__default.createElement(React__default.Fragment, null, messages && messages.length > 0 && (React__default.createElement(AnimatePresence, { mode: "wait" }, messages.map(msg => (React__default.createElement(motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
+        React__default.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
+            React__default.createElement(Icon, { name: "alert", size: "small", color: "critical" }),
+            React__default.createElement(Text, { size: "small", variation: "error" }, msg)))))))));
 }
 
 export { InputValidation as I };

package/dist/InternalChipDismissible-es.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-es.js';
 import './isObjectLike-es.js';
 import '@jobber/design';
@@ -13,15 +13,15 @@ import { C as Chip, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React.createElement(Chip.Prefix, null, prefix),
-        suffix && React.createElement(Chip.Suffix, null, suffix)));
+    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React__default.createElement(Chip.Prefix, null, prefix),
+        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
+    const { activator = React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
     const menuRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();
@@ -37,27 +37,27 @@ function InternalChipDismissibleInput(props) {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);
     if (!menuOpen) {
-        return React.cloneElement(activator, { onClick: handleOpenMenu });
+        return React__default.cloneElement(activator, { onClick: handleOpenMenu });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
-            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React__default.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
                         [styles.activeOption]: activeIndex === i,
                     }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                    React.createElement("span", { "aria-hidden": true }, option.prefix),
-                    React.createElement(Text, null, option.label)))),
-                React.createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
-                    React.createElement(Spinner, { size: "small", inline: true }))))))));
+                    React__default.createElement("span", { "aria-hidden": true }, option.prefix),
+                    React__default.createElement(Text, null, option.label)))),
+                React__default.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React__default.createElement("div", { className: styles.loadingIndicator },
+                    React__default.createElement(Spinner, { size: "small", inline: true }))))))));
 }
 
 function InternalChipDismissible(props) {
     const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
-    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+    return (React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(chip => (React__default.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }
 
 export { InternalChipDismissible as I, InternalChip as a };

package/dist/LightBox-es.js

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
@@ -21,7 +21,7 @@ var useMediaQuery = {};
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.mediaQueryStore = void 0;
 	exports.useMediaQuery = useMediaQuery;
-	const react_1 = React;
+	const react_1 = React__default;
 	exports.mediaQueryStore = {
 	    subscribe(onChange, query) {
 	        const matchMedia = window.matchMedia(query);
@@ -137,44 +137,44 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
             inline: "center",
         });
     }, [currentImageIndex]);
-    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
+    const template = (React__default.createElement(React__default.Fragment, null, open && (React__default.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
             if (mouseIsStationary) {
                 setMouseIsStationary(false);
             }
             handleMouseMovement();
         } },
-        React.createElement("div", { className: styles.backgroundImage, style: {
+        React__default.createElement("div", { className: styles.backgroundImage, style: {
                 backgroundImage: `url("${images[currentImageIndex].url}")`,
             } }),
-        React.createElement("div", { className: styles.blurOverlay, onClick: handleRequestClose }),
-        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
-            React.createElement("div", { className: styles.toolbar },
-                React.createElement("div", { className: styles.slideNumber },
-                    React.createElement(Text, null, `${currentImageIndex + 1}/${images.length}`)),
-                React.createElement("div", { className: styles.closeButton },
-                    React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
-        React.createElement("div", { className: styles.imageArea },
-            React.createElement(AnimatePresence, { initial: false },
-                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+        React__default.createElement("div", { className: styles.blurOverlay, onClick: handleRequestClose }),
+        React__default.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React__default.createElement("div", { className: styles.toolbar },
+                React__default.createElement("div", { className: styles.slideNumber },
+                    React__default.createElement(Text, null, `${currentImageIndex + 1}/${images.length}`)),
+                React__default.createElement("div", { className: styles.closeButton },
+                    React__default.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
+        React__default.createElement("div", { className: styles.imageArea },
+            React__default.createElement(AnimatePresence, { initial: false },
+                React__default.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
                         images[currentImageIndex].title ||
                         "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
-        images.length > 1 && (React.createElement(React.Fragment, null,
-            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
-            React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
+        images.length > 1 && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
+            React__default.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
         (images[currentImageIndex].title ||
-            images[currentImageIndex].caption) && (React.createElement("div", { className: styles.captionWrapper },
-            React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
-                images[currentImageIndex].title && (React.createElement("div", { className: styles.title },
-                    React.createElement(Heading, { level: 4 }, images[currentImageIndex].title))),
-                images[currentImageIndex].caption && (React.createElement(Text, { size: "large" }, images[currentImageIndex].caption))))),
-        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, style: {
+            images[currentImageIndex].caption) && (React__default.createElement("div", { className: styles.captionWrapper },
+            React__default.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+                images[currentImageIndex].title && (React__default.createElement("div", { className: styles.title },
+                    React__default.createElement(Heading, { level: 4 }, images[currentImageIndex].title))),
+                images[currentImageIndex].caption && (React__default.createElement(Text, { size: "large" }, images[currentImageIndex].caption))))),
+        images.length > 1 && (React__default.createElement("div", { className: styles.thumbnailBar, style: {
                 "--lightbox--box-sizing": boxSizing,
-            }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+            }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React__default.createElement("div", { key: index, className: classnames(styles.thumbnail, {
                 [styles.selected]: index === currentImageIndex,
             }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-            React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));
+            React__default.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));
     return mounted.current
-        ? ReactDOM.createPortal(template, document.body)
+        ? ReactDOM__default.createPortal(template, document.body)
         : template;
     function handleMovePrevious() {
         setDirection(-1);
@@ -208,13 +208,13 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
 }
 function PreviousButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
-    return (React.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+    return (React__default.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
-    return (React.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+    return (React__default.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 function togglePrintStyles(open) {
     try {

package/dist/Link-es.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 
 var styles = {"link":"_8oxipSwiMJQ-","spinning":"iU2hXJfEJ-E-"};
 
 function Link({ url, children, ariaLabel, ariaExpanded, external = false, }) {
-    return (React.createElement("a", Object.assign({ href: url }, (external && { target: "_blank" }), (ariaLabel && { "aria-label": ariaLabel }), (ariaExpanded && { "aria-expanded": ariaExpanded }), { className: styles.link }), children));
+    return (React__default.createElement("a", Object.assign({ href: url }, (external && { target: "_blank" }), (ariaLabel && { "aria-label": ariaLabel }), (ariaExpanded && { "aria-expanded": ariaExpanded }), { className: styles.link }), children));
 }
 
 export { Link as L };

package/dist/List-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { _ as _baseEach, a as _baseIteratee, g as get } from './_baseEach-es.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
@@ -131,31 +131,31 @@ function ListItem(props) {
     const actionClasses = classnames(styles$1.action, props.isActive && styles$1.isActive, (props.onClick || props.url) && styles$1.hoverable, props.customRenderItem && !props.customItemStyles && styles$1.customItem);
     const Wrapper = props.url ? "a" : "button";
     const buttonProps = Object.assign({}, (Wrapper === "button" && { role: "button", type: "button" }));
-    return (React.createElement(Wrapper, Object.assign({ id: props.id.toString(), className: actionClasses, href: props.url, onClick: props.onClick }, buttonProps), props.customRenderItem ? (props.customRenderItem(props)) : (React.createElement(DefaultRenderItem, Object.assign({}, props)))));
+    return (React__default.createElement(Wrapper, Object.assign({ id: props.id.toString(), className: actionClasses, href: props.url, onClick: props.onClick }, buttonProps), props.customRenderItem ? (props.customRenderItem(props)) : (React__default.createElement(DefaultRenderItem, Object.assign({}, props)))));
 }
 function DefaultRenderItem(props) {
-    return (React.createElement("div", { className: styles$1.defaultContent },
-        props.icon && (React.createElement("div", { className: styles$1.icon },
-            React.createElement(Icon, { name: props.icon, color: props.iconColor }))),
-        React.createElement("div", { className: styles$1.info },
-            props.title && React.createElement(Heading, { level: 5 }, props.title),
-            props.content && React.createElement(Description, { content: props.content }),
-            props.caption && (React.createElement(Text, { variation: "subdued" },
-                React.createElement(Typography, { element: "span", size: "small", emphasisType: "italic" }, props.caption)))),
-        props.value && (React.createElement("div", { className: styles$1.amount },
-            React.createElement(Text, null,
-                React.createElement(Emphasis, { variation: "bold" }, props.value))))));
+    return (React__default.createElement("div", { className: styles$1.defaultContent },
+        props.icon && (React__default.createElement("div", { className: styles$1.icon },
+            React__default.createElement(Icon, { name: props.icon, color: props.iconColor }))),
+        React__default.createElement("div", { className: styles$1.info },
+            props.title && React__default.createElement(Heading, { level: 5 }, props.title),
+            props.content && React__default.createElement(Description, { content: props.content }),
+            props.caption && (React__default.createElement(Text, { variation: "subdued" },
+                React__default.createElement(Typography, { element: "span", size: "small", emphasisType: "italic" }, props.caption)))),
+        props.value && (React__default.createElement("div", { className: styles$1.amount },
+            React__default.createElement(Text, null,
+                React__default.createElement(Emphasis, { variation: "bold" }, props.value))))));
 }
 function Description({ content }) {
     if (content instanceof Array) {
-        return (React.createElement(React.Fragment, null, content.map((item, i) => (React.createElement(Text, { key: i },
-            React.createElement("span", { className: styles$1.truncate },
-                React.createElement(Markdown, { content: item, basicUsage: true })))))));
+        return (React__default.createElement(React__default.Fragment, null, content.map((item, i) => (React__default.createElement(Text, { key: i },
+            React__default.createElement("span", { className: styles$1.truncate },
+                React__default.createElement(Markdown, { content: item, basicUsage: true })))))));
     }
     else {
-        return (React.createElement(Text, null,
-            React.createElement("span", { className: styles$1.truncate },
-                React.createElement(Markdown, { content: content, basicUsage: true }))));
+        return (React__default.createElement(Text, null,
+            React__default.createElement("span", { className: styles$1.truncate },
+                React__default.createElement(Markdown, { content: content, basicUsage: true }))));
     }
 }
 
@@ -166,17 +166,17 @@ var styles = {"list":"sFlecO8-wnY-","item":"dbZy6dviEis-","section":"vz43PAcPYt0
 function List({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader = "Other", labelledBy, }) {
     const isSectioned = items.some(item => "section" in item && item.section);
     if (isSectioned) {
-        return (React.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, customRenderSection: customRenderSection, customSectionStyles: customSectionStyles, defaultSectionHeader: defaultSectionHeader, labelledBy: labelledBy }));
+        return (React__default.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, customRenderSection: customRenderSection, customSectionStyles: customSectionStyles, defaultSectionHeader: defaultSectionHeader, labelledBy: labelledBy }));
     }
     else {
-        return (React.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, labelledBy: labelledBy }));
+        return (React__default.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, labelledBy: labelledBy }));
     }
 }
 function DisplayList({ items, customRenderItem, customItemStyles, labelledBy, }) {
     const omitDefaultStyles = customRenderItem && customItemStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
-    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, items.map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
-        React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))));
+    return (React__default.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, items.map(item => (React__default.createElement("li", { key: item.id, className: itemClassNames },
+        React__default.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))));
 }
 function SectionedList({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader, labelledBy, }) {
     const sectionedItems = groupBy$1(items, item => get(item, "section", defaultSectionHeader));
@@ -184,16 +184,16 @@ function SectionedList({ items, customRenderItem, customItemStyles, customRender
     const omitDefaultSectionStyles = customRenderSection && customSectionStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
     const sectionHeaderClassNames = classnames(!omitDefaultSectionStyles && sectionStyles.sectionHeader);
-    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, Object.keys(sectionedItems).map(sectionName => {
-        return (React.createElement("li", { key: sectionName, className: classnames(!omitDefaultSectionStyles && styles.section) },
+    return (React__default.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, Object.keys(sectionedItems).map(sectionName => {
+        return (React__default.createElement("li", { key: sectionName, className: classnames(!omitDefaultSectionStyles && styles.section) },
             getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection),
-            React.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
-                React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles }))))))));
+            React__default.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React__default.createElement("li", { key: item.id, className: itemClassNames },
+                React__default.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles }))))))));
     })));
 }
 function getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection) {
-    const sectionHeader = customRenderSection ? (customRenderSection(sectionName)) : (React.createElement(Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName));
-    return React.createElement("div", { className: sectionHeaderClassNames }, sectionHeader);
+    const sectionHeader = customRenderSection ? (customRenderSection(sectionName)) : (React__default.createElement(Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName));
+    return React__default.createElement("div", { className: sectionHeaderClassNames }, sectionHeader);
 }
 
 export { List as L, ListItem as a };