@jobber/components 6.26.0 → 6.26.1

package/dist/DescriptionList-es.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
 var styles = {"descriptionList":"BkruJ2-bRWg-","termGroup":"tpCvfS7kyDQ-","spinning":"pkFPHChT5OI-"};
 
 function DescriptionList({ data }) {
-    return (React.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
-        React.createElement(Typography, { element: "dt", textColor: "heading", size: "base" }, term),
-        React.createElement(Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
+    return (React__default.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React__default.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
+        React__default.createElement(Typography, { element: "dt", textColor: "heading", size: "base" }, term),
+        React__default.createElement(Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
 }
 
 export { DescriptionList as D };

package/dist/Disclosure-es.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { u as useResizeObserver } from './useResizeObserver-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -18,19 +18,19 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
     const summaryWrapClassNames = classnames(styles.summaryWrap, { [styles.customSummaryWrap]: !isTitleString }, UNSAFE_className.summaryWrap);
     const arrowIconWrapperClassNames = classnames(styles.arrowIconWrapper, UNSAFE_className.arrowIconWrapper);
     const contentClassNames = classnames(styles.content, UNSAFE_className.content);
-    return (React.createElement("details", { open: isOpen, className: containerClassNames, style: UNSAFE_style.container },
-        React.createElement("summary", { className: summaryClassNames, style: UNSAFE_style.summary, onClick: handleToggle },
-            React.createElement("div", { className: summaryWrapClassNames, style: UNSAFE_style.summaryWrap, ref: titleRef },
-                React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString, UNSAFE_className: UNSAFE_className.title, UNSAFE_style: UNSAFE_style.title }),
-                React.createElement("span", { className: arrowIconWrapperClassNames, style: UNSAFE_style.arrowIconWrapper },
-                    React.createElement(Icon, { name: "arrowDown", color: "interactive", UNSAFE_className: {
+    return (React__default.createElement("details", { open: isOpen, className: containerClassNames, style: UNSAFE_style.container },
+        React__default.createElement("summary", { className: summaryClassNames, style: UNSAFE_style.summary, onClick: handleToggle },
+            React__default.createElement("div", { className: summaryWrapClassNames, style: UNSAFE_style.summaryWrap, ref: titleRef },
+                React__default.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString, UNSAFE_className: UNSAFE_className.title, UNSAFE_style: UNSAFE_style.title }),
+                React__default.createElement("span", { className: arrowIconWrapperClassNames, style: UNSAFE_style.arrowIconWrapper },
+                    React__default.createElement(Icon, { name: "arrowDown", color: "interactive", UNSAFE_className: {
                             svg: (_a = UNSAFE_className.icon) === null || _a === void 0 ? void 0 : _a.svg,
                             path: (_b = UNSAFE_className.icon) === null || _b === void 0 ? void 0 : _b.path,
                         }, UNSAFE_style: {
                             svg: (_c = UNSAFE_style.icon) === null || _c === void 0 ? void 0 : _c.svg,
                             path: (_d = UNSAFE_style.icon) === null || _d === void 0 ? void 0 : _d.path,
                         } })))),
-        React.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
+        React__default.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
     function handleToggle(event) {
         event.preventDefault();
         setInternalOpen(!isOpen);
@@ -39,8 +39,8 @@ function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSA
 }
 function DisclosureTitle({ title, size, isTitleString, UNSAFE_className, UNSAFE_style, }) {
     if (!isTitleString)
-        return React.createElement(React.Fragment, null, title);
-    return (React.createElement(Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
+        return React__default.createElement(React__default.Fragment, null, title);
+    return (React__default.createElement(Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
 }
 
 export { Disclosure as D };

package/dist/Divider-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"divider":"XLgPB38fKeE-","spinning":"JenuDN3dhh4-"};
@@ -9,7 +9,7 @@ var directions = {"horizontal":"evwHY54TitY-","vertical":"qT-G2Sn0Wm8-","spinnin
 
 function Divider({ size = "base", direction = "horizontal", testID, }) {
     const className = classnames(styles.divider, sizes[size], directions[direction]);
-    return (React.createElement("div", { className: className, "data-testid": testID, role: "none presentation" }));
+    return (React__default.createElement("div", { className: className, "data-testid": testID, role: "none presentation" }));
 }
 
 export { Divider as D };

package/dist/DrawerGrid-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { H as Heading } from './Heading-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
@@ -7,23 +7,23 @@ var styles$1 = {"container":"LNIwHwCs8gQ-","drawer":"iDSQR4mxUvM-","open":"y9lAh
 
 function Drawer({ title, children, open = true, onRequestClose, id, }) {
     const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
-    return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
-        React.createElement("div", { className: styles$1.drawer },
-            React.createElement(Header, { title: title, onRequestClose: onRequestClose }),
-            React.createElement("div", { className: styles$1.contentScroll },
-                React.createElement("div", { className: styles$1.content }, children)))));
+    return (React__default.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
+        React__default.createElement("div", { className: styles$1.drawer },
+            React__default.createElement(Header, { title: title, onRequestClose: onRequestClose }),
+            React__default.createElement("div", { className: styles$1.contentScroll },
+                React__default.createElement("div", { className: styles$1.content }, children)))));
 }
 function Header({ title, onRequestClose }) {
-    return (React.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
-        React.createElement("div", { className: styles$1.heading },
-            React.createElement(Heading, { level: 2 }, title)),
-        React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+    return (React__default.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
+        React__default.createElement("div", { className: styles$1.heading },
+            React__default.createElement(Heading, { level: 2 }, title)),
+        React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
 }
 
 var styles = {"drawerGrid":"_50Jq09W07gg-","spinning":"GqOdr2k9PX8-"};
 
 function DrawerGrid({ children }) {
-    return React.createElement("div", { className: styles.drawerGrid }, children);
+    return React__default.createElement("div", { className: styles.drawerGrid }, children);
 }
 
 export { Drawer as D, DrawerGrid as a };

package/dist/Emphasis-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
 function Emphasis({ variation, children }) {
@@ -7,7 +7,7 @@ function Emphasis({ variation, children }) {
         italic: { element: "em", emphasisType: "italic" },
         highlight: { element: "strong", emphasisType: "highlight" },
     };
-    return React.createElement(Typography, Object.assign({}, variationMap[variation]), children);
+    return React__default.createElement(Typography, Object.assign({}, variationMap[variation]), children);
 }
 
 export { Emphasis as E };

package/dist/FeatureSwitch-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import classnames from 'classnames';
 import { H as Heading } from './Heading-es.js';
@@ -15,27 +15,27 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
     const [savedIndicator, setSavedIndicator] = useState(false);
     const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
     shouldShowSavedIndicator();
-    return (React.createElement(Content, null,
-        React.createElement("div", { className: styles.container },
-            React.createElement("div", { className: styles.content },
-                React.createElement(Content, null,
-                    title && React.createElement(Heading, { level: 4 }, title),
-                    description && (React.createElement(Text, null,
-                        React.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
-            onSwitch && (React.createElement("div", { className: styles.action },
-                React.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
-                React.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
+    return (React__default.createElement(Content, null,
+        React__default.createElement("div", { className: styles.container },
+            React__default.createElement("div", { className: styles.content },
+                React__default.createElement(Content, null,
+                    title && React__default.createElement(Heading, { level: 4 }, title),
+                    description && (React__default.createElement(Text, null,
+                        React__default.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
+            onSwitch && (React__default.createElement("div", { className: styles.action },
+                React__default.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
+                React__default.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React__default.createElement(motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
                         delay: 0.2,
                         type: "spring",
                         damping: 20,
                         stiffness: 300,
                     }, onAnimationComplete: handleAnimationComplete },
-                    React.createElement(Text, { variation: "success" },
-                        React.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
-        (children || onEdit) && (React.createElement("div", { className: styles.container },
-            children && (React.createElement("div", { className: featureContentClassnames }, children)),
-            onEdit && (React.createElement("div", { className: styles.action },
-                React.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+                    React__default.createElement(Text, { variation: "success" },
+                        React__default.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
+        (children || onEdit) && (React__default.createElement("div", { className: styles.container },
+            children && (React__default.createElement("div", { className: featureContentClassnames }, children)),
+            onEdit && (React__default.createElement("div", { className: styles.action },
+                React__default.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
     function shouldShowSavedIndicator() {
         // Check if the component is mounted
         const [didMount, setDidMount] = useState(false);

package/dist/Flex-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"flexible":"pEdV7Oo29SE-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
 
 function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
-    return (React.createElement("div", { className: classnames(styles.flexible, {
+    return (React__default.createElement("div", { className: classnames(styles.flexible, {
             [styles[`${gap}Gap`]]: Boolean(gap),
             [styles[`${align}Align`]]: Boolean(align),
         }), style: generateGridStylesFromTemplate(direction, template) }, children));

package/dist/Form-es.js

@@ -1,5 +1,5 @@
 import { a as __awaiter } from './tslib.es6-es.js';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import React__default, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
 const Form = forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
@@ -31,8 +31,8 @@ const Form = forwardRef(function InternalForm({ onSubmit, children, onStateChang
     const formProps = {
         onSubmit: onSubmit && handleSubmit(submitHandler),
     };
-    return (React.createElement(FormProvider, Object.assign({}, methods),
-        React.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    return (React__default.createElement(FormProvider, Object.assign({}, methods),
+        React__default.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
     function submitHandler() {
         onSubmit && onSubmit();
     }

package/dist/FormField-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react';
+import React__default, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
 import classnames from 'classnames';
@@ -42,7 +42,7 @@ function AffixLabel({ label, variation = "prefix", labelRef, }) {
     });
     if (!label)
         return null;
-    return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+    return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const affixIconClass = classnames(styles$1.affixIcon, {
@@ -52,7 +52,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button
+    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button
     /**
      * We can cast the ariaLabel here as a `Suffix`
      * requires an ariaLabel if there is an action
@@ -62,14 +62,14 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
          * We can cast the ariaLabel here as a `Suffix`
          * requires an ariaLabel if there is an action
          */
-        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
 }
 
 function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
-    return (React.createElement("div", { id: id, className: styles$1.description },
-        React.createElement(Text, { size: "small", variation: "subdued" }, description)));
+    return (React__default.createElement("div", { id: id, className: styles$1.description },
+        React__default.createElement(Text, { size: "small", variation: "subdued" }, description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
@@ -77,8 +77,8 @@ var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 function ClearAction({ onClick, visible, }) {
     if (!visible)
         return null;
-    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
-        React.createElement(Icon, { name: "remove", size: "small" })));
+    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
+        React__default.createElement(Icon, { name: "remove", size: "small" })));
 }
 
 function useToolbar(props) {
@@ -199,61 +199,61 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         toolbar,
         toolbarVisibility,
     });
-    return (React.createElement("div", { className: containerClasses },
-        React.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
-            React.createElement(FormFieldInputHorizontalWrapper, null,
-                React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
-                React.createElement(FormFieldInputWrapperStyles, null,
-                    (showMiniLabel || !value) && (React.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+    return (React__default.createElement("div", { className: containerClasses },
+        React__default.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
+            React__default.createElement(FormFieldInputHorizontalWrapper, null,
+                React__default.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React__default.createElement(FormFieldInputWrapperStyles, null,
+                    (showMiniLabel || !value) && (React__default.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
                             ? labelStyle
                             : undefined }, placeholder)),
-                    React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
-                    React.createElement(FormFieldWrapperMain, null, children),
-                    React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
-                React.createElement(ClearAction, { onClick: onClear, visible: showClear }),
-                React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
-            React.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
-        React.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
-        React.createElement(InputValidation, { message: error, visible: !!error && !inline })));
+                    React__default.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React__default.createElement(FormFieldWrapperMain, null, children),
+                    React__default.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
+                React__default.createElement(ClearAction, { onClick: onClear, visible: showClear }),
+                React__default.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+            React__default.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
+        React__default.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
+        React__default.createElement(InputValidation, { message: error, visible: !!error && !inline })));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputHorizontalWrapper({ children, }) {
-    return React.createElement("div", { className: styles$1.horizontalWrapper }, children);
+    return React__default.createElement("div", { className: styles$1.horizontalWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputWrapperStyles({ children, }) {
-    return React.createElement("div", { className: styles$1.inputWrapper }, children);
+    return React__default.createElement("div", { className: styles$1.inputWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldWrapperMain({ children, tabIndex = -1, }) {
-    return (React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
+    return (React__default.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
 }
 function FormFieldLabel({ children, htmlFor, style, external = false, }) {
     if (!children)
         return null;
-    return (React.createElement("label", { className: external ? styles$1.externalLabel : styles$1.label, htmlFor: htmlFor, style: style }, children));
+    return (React__default.createElement("label", { className: external ? styles$1.externalLabel : styles$1.label, htmlFor: htmlFor, style: style }, children));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
-    return (React.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+    return (React__default.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React__default.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
             duration: tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React__default.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, }) {
     if (!visible)
         return null;
-    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon, { name: "arrowDown" })) : (React.createElement(Spinner, { size: "small" }))));
+    return (React__default.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
 }
 
 /**
@@ -392,7 +392,7 @@ function FormField(props) {
     // https://github.com/facebook/react/issues/27103
     const generatedId = useId();
     const id = props.id || generatedId;
-    return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
+    return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
@@ -438,19 +438,19 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("select", Object.assign({}, fieldProps), children),
-                    React.createElement(FormFieldPostFix, { variation: "select" })));
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("select", Object.assign({}, fieldProps), children),
+                    React__default.createElement(FormFieldPostFix, { variation: "select" })));
             case "textarea":
-                return React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRefs }));
+                return React__default.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRefs }));
             default:
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRefs, onKeyUp: onKeyUp })),
-                    loading && React.createElement(FormFieldPostFix, { variation: "spinner" }),
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRefs, onKeyUp: onKeyUp })),
+                    loading && React__default.createElement(FormFieldPostFix, { variation: "spinner" }),
                     children));
         }
     }

package/dist/FormatDate-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 function FormatDate({ date: inputDate, showYear = true, }) {
     let dateObject;
@@ -8,7 +8,7 @@ function FormatDate({ date: inputDate, showYear = true, }) {
     else {
         dateObject = new Date(inputDate);
     }
-    return React.createElement(React.Fragment, null, strFormatDate(dateObject, showYear));
+    return React__default.createElement(React__default.Fragment, null, strFormatDate(dateObject, showYear));
 }
 function strFormatDate(date, showYear = true) {
     let formatOptions = {

package/dist/FormatEmail-es.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"email":"ViFkIUcS6PM-","spinning":"nCTmCxv5074-"};
 
 function FormatEmail({ email }) {
     const className = classnames(styles.email);
-    return React.createElement("address", { className: className }, email);
+    return React__default.createElement("address", { className: className }, email);
 }
 
 export { FormatEmail as F };

package/dist/FormatFile-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import getHumanReadableFileSize from 'filesize';
 import { B as Button } from './Button-es.js';
@@ -14,9 +14,9 @@ var styles$2 = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact"
 function FormatFileDeleteButton({ size, onDelete }) {
     const buttonSize = size === "base" ? "small" : "base";
     const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
-    return (React.createElement("div", { className: styles$2.deleteButton },
-        React.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React.createElement(ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
+    return (React__default.createElement("div", { className: styles$2.deleteButton },
+        React__default.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default.createElement(ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 
 var styles$1 = {"content":"GlvUe-y47J8-","hasName":"zxlhNVPlPfU-","large":"PLxm6a4dUeE-","fileName":"-HUnao9DHy4-","base":"HJGVBmS64DY-","spinning":"Svf9Lca4cus-"};
@@ -30,9 +30,9 @@ function InternalThumbnailImage({ file }) {
     useEffect(() => {
         src().then(url => setImageSource(url));
     }, []);
-    return (React.createElement(React.Fragment, null,
-        !imageLoaded && React.createElement(Glimmer, { size: "auto" }),
-        React.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }) })));
+    return (React__default.createElement(React__default.Fragment, null,
+        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
+        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }) })));
     function handleImageLoad() {
         setImageLoaded(true);
     }
@@ -82,14 +82,14 @@ function InternalThumbnail({ compact = false, size, file, }) {
     const iconName = getIconNameFromType(type);
     const hasName = Boolean(name) && compact;
     if (type.startsWith("image/") && isSupportedImageType(file)) {
-        return React.createElement(InternalThumbnailImage, { file: file });
+        return React__default.createElement(InternalThumbnailImage, { file: file });
     }
-    return (React.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
             [styles$1.hasName]: hasName,
         }) },
-        React.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
-        hasName && (React.createElement("div", { className: styles$1.fileName },
-            React.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default.createElement("div", { className: styles$1.fileName },
+            React__default.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
@@ -126,17 +126,17 @@ function FormatFile({ file, display = "expanded", displaySize = "base", onDelete
         [styles$2.deleteable]: display === "compact",
     });
     const thumbnailContainerClassNames = classnames(styles$2.thumbnail, styles$2[displaySize]);
-    return (React.createElement("div", { className: wrapperClassNames },
-        React.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
-            React.createElement("div", { className: thumbnailContainerClassNames },
-                React.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
-                !isComplete && (React.createElement("div", { className: styles$2.progress },
-                    React.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-            display === "expanded" && (React.createElement("div", { className: styles$2.contentBlock },
-                React.createElement(Text, { size: "base" }, file.name),
-                React.createElement(Text, { size: "small" }, fileSize)))),
-        isComplete && onDelete && (React.createElement("div", { className: styles$2.deleteButton },
-            React.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+    return (React__default.createElement("div", { className: wrapperClassNames },
+        React__default.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React__default.createElement("div", { className: thumbnailContainerClassNames },
+                React__default.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default.createElement("div", { className: styles$2.progress },
+                    React__default.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default.createElement("div", { className: styles$2.contentBlock },
+                React__default.createElement(Text, { size: "base" }, file.name),
+                React__default.createElement(Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default.createElement("div", { className: styles$2.deleteButton },
+            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
 }
 function isHoverable({ display, isComplete, onClick, onDelete, }) {
     if (display === "compact") {

package/dist/FormatRelativeDateTime-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 function FormatRelativeDateTime({ date: inputDate, }) {
     let dateObject;
@@ -13,18 +13,18 @@ function FormatRelativeDateTime({ date: inputDate, }) {
     const delta = now - date.getTime() / 1000; //seconds;
     switch (relativeTimeRange(delta)) {
         case "less than an hour":
-            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
+            return React__default.createElement(React__default.Fragment, null, showMinutes(Math.round(delta / 60)));
         case "less then a day":
-            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
+            return (React__default.createElement(React__default.Fragment, null, date.toLocaleTimeString(undefined, {
                 hour: "numeric",
                 minute: "numeric",
             })));
         case "less than a week":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
+            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { weekday: "short" }));
         case "less than a year":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
+            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
         default:
-            return (React.createElement(React.Fragment, null, strFormatDate(date, {
+            return (React__default.createElement(React__default.Fragment, null, strFormatDate(date, {
                 month: "short",
                 day: "numeric",
                 year: "numeric",

package/dist/FormatTime-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 function FormatTime({ time: inputTime, use24HourClock, }) {
     let dateObject;
@@ -8,7 +8,7 @@ function FormatTime({ time: inputTime, use24HourClock, }) {
     else {
         dateObject = new Date(inputTime);
     }
-    return React.createElement(React.Fragment, null, dateToLocaleTimeString(dateObject, use24HourClock));
+    return React__default.createElement(React__default.Fragment, null, dateToLocaleTimeString(dateObject, use24HourClock));
 }
 function dateToLocaleTimeString(date, use24HourClock) {
     const language = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) ? navigator.language : "en";

package/dist/Gallery-es.js

@@ -1,5 +1,5 @@
 import { a as __awaiter } from './tslib.es6-es.js';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { L as LightBox } from './LightBox-es.js';
 import { F as FormatFile, i as isSafari } from './FormatFile-es.js';
@@ -10,7 +10,7 @@ var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreB
 function Gallery({ files, size = "base", max, onDelete }) {
     const [images, setImages] = useState([]);
     const [filesToImageIndex, setFilesToImageIndex] = useState([]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         generateImagesArray(files).then(result => {
             setImages(result.images);
             setFilesToImageIndex(result.filesToImageIndex);
@@ -20,18 +20,18 @@ function Gallery({ files, size = "base", max, onDelete }) {
     const [lightboxIndex, setLightboxIndex] = useState(0);
     const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
     const visibleFiles = displayPastMax ? files : files.slice(0, max);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
             visibleFiles.map((file, index) => {
-                return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
+                return (React__default.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
                         handleThumbnailClicked(index);
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
-            max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+            max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
+                React__default.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
-        React.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+        React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
     function handleThumbnailClicked(index) {
         return __awaiter(this, void 0, void 0, function* () {
             if (files[index].type.startsWith("image/") &&