@jobber/components 6.25.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/Disclosure.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode } from "react";
 interface DisclosureProps {
     /**
      * Child content that is manged by this component.
@@ -24,6 +24,44 @@ interface DisclosureProps {
      * Used to make the disclosure a Controlled Component.
      */
     readonly open?: boolean;
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        summary?: string;
+        summaryWrap?: string;
+        title?: {
+            textStyle?: string;
+        };
+        icon?: {
+            svg?: string;
+            path?: string;
+        };
+        arrowIconWrapper?: string;
+        content?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        summary?: CSSProperties;
+        summaryWrap?: CSSProperties;
+        title?: {
+            textStyle?: CSSProperties;
+        };
+        icon?: {
+            svg?: CSSProperties;
+            path?: CSSProperties;
+        };
+        arrowIconWrapper?: CSSProperties;
+        content?: CSSProperties;
+    };
 }
-export declare function Disclosure({ children, title, defaultOpen, onToggle, open, }: DisclosureProps): JSX.Element;
+export declare function Disclosure({ children, title, defaultOpen, onToggle, open, UNSAFE_className, UNSAFE_style, }: DisclosureProps): JSX.Element;
 export {};

package/dist/Disclosure-cjs.js

@@ -8,31 +8,41 @@ var Typography = require('./Typography-cjs.js');
 
 var styles = {"arrowIconWrapper":"VMuRkKeqAs8-","details":"fNHz-uKoICo-","summary":"_8BfGPs1d3OI-","summaryWrap":"lPbWm-JxIOc-","customSummaryWrap":"qCHHx-9sUDU-","content":"v4nYwpvvlh8-","openAnimation":"R-IWZjEaJeM-","spinning":"UfV5y-kjRUE-"};
 
-function Disclosure({ children, title, defaultOpen = false, onToggle, open, }) {
+function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
     const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
     const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.useResizeObserver.Breakpoints.small;
     const isTitleString = typeof title === "string";
-    return (React.createElement("details", { open: isOpen, className: styles.details },
-        React.createElement("summary", { className: styles.summary, onClick: handleToggle },
-            React.createElement("div", { className: classnames(styles.summaryWrap, {
-                    [styles.customSummaryWrap]: !isTitleString,
-                }), ref: titleRef },
-                React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString }),
-                React.createElement("span", { className: styles.arrowIconWrapper },
-                    React.createElement(Icon.Icon, { name: "arrowDown", color: "interactive" })))),
-        React.createElement("span", { className: styles.content }, children)));
+    const containerClassNames = classnames(styles.details, UNSAFE_className.container);
+    const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);
+    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.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)));
     function handleToggle(event) {
         event.preventDefault();
         setInternalOpen(!isOpen);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isOpen);
     }
 }
-function DisclosureTitle({ title, size, isTitleString }) {
+function DisclosureTitle({ title, size, isTitleString, UNSAFE_className, UNSAFE_style, }) {
     if (!isTitleString)
         return React.createElement(React.Fragment, null, title);
-    return (React.createElement(Typography.Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading" }, title));
+    return (React.createElement(Typography.Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
 }
 
 exports.Disclosure = Disclosure;

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';
@@ -6,31 +6,41 @@ import { T as Typography } from './Typography-es.js';
 
 var styles = {"arrowIconWrapper":"VMuRkKeqAs8-","details":"fNHz-uKoICo-","summary":"_8BfGPs1d3OI-","summaryWrap":"lPbWm-JxIOc-","customSummaryWrap":"qCHHx-9sUDU-","content":"v4nYwpvvlh8-","openAnimation":"R-IWZjEaJeM-","spinning":"UfV5y-kjRUE-"};
 
-function Disclosure({ children, title, defaultOpen = false, onToggle, open, }) {
+function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    var _a, _b, _c, _d;
     const [internalOpen, setInternalOpen] = useState(defaultOpen || open || false);
     const isOpen = open !== undefined ? open : internalOpen;
     const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
     const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
     const isTitleString = typeof title === "string";
-    return (React.createElement("details", { open: isOpen, className: styles.details },
-        React.createElement("summary", { className: styles.summary, onClick: handleToggle },
-            React.createElement("div", { className: classnames(styles.summaryWrap, {
-                    [styles.customSummaryWrap]: !isTitleString,
-                }), ref: titleRef },
-                React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString }),
-                React.createElement("span", { className: styles.arrowIconWrapper },
-                    React.createElement(Icon, { name: "arrowDown", color: "interactive" })))),
-        React.createElement("span", { className: styles.content }, children)));
+    const containerClassNames = classnames(styles.details, UNSAFE_className.container);
+    const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);
+    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__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__default.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
     function handleToggle(event) {
         event.preventDefault();
         setInternalOpen(!isOpen);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isOpen);
     }
 }
-function DisclosureTitle({ title, size, isTitleString }) {
+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" }, 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 };