@jobber/components 6.26.0 → 6.26.2

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/FormFieldTypes.d.ts

@@ -202,5 +202,11 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * Determines the visibility of the toolbar.
      */
     readonly toolbarVisibility?: "always" | "while-editing";
+    /**
+     * Pattern is currently only used for the InputPhone type
+     * it is used to determine the format of the phone number
+     * and the number of digits to expect.
+     */
+    readonly pattern?: string;
 }
 export {};

package/dist/FormField/hooks/useAtlantisFormField.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import { UseControllerReturn } from "react-hook-form";
 import type { FormFieldProps, KeyBoardTypes } from "../FormFieldTypes";
-export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "description" | "disabled" | "readonly" | "inline" | "autofocus"> {
+export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "description" | "disabled" | "readonly" | "inline" | "autofocus" | "pattern" | "type" | "value"> {
     /**
      * The html id for the field
      */
@@ -57,7 +57,7 @@ export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "descrip
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-export declare function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }: useAtlantisFormFieldProps): {
+export declare function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }: useAtlantisFormFieldProps): {
     textFieldProps: {
         autoFocus: boolean | undefined;
         onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/dist/FormField-cjs.js

@@ -33,7 +33,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -316,14 +316,19 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
+function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: styles$1.input, name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
+            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+        }), name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
         !inline && { "aria-describedby": descriptionIdentifier }));
     const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
     React.useEffect(() => handleValidation(errorMessage), [errorMessage]);
     return { textFieldProps, fieldProps, descriptionIdentifier };
 }
+function shouldAddPhoneNumberClass(type, value, pattern) {
+    return type === "tel" && !value && pattern && pattern[0] === "(";
+}
 
 function useAtlantisFormFieldName({ id, nameProp, }) {
     /**
@@ -397,7 +402,7 @@ function FormField(props) {
     return React.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;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
         actionsRef,
@@ -432,6 +437,9 @@ function FormFieldInternal(props) {
         readonly,
         keyboard,
         autofocus,
+        value,
+        type,
+        pattern,
         handleChange,
         handleBlur,
         handleFocus,

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';
@@ -31,7 +31,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -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" }))));
 }
 
 /**
@@ -314,14 +314,19 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
+function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: styles$1.input, name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
+            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+        }), name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
         !inline && { "aria-describedby": descriptionIdentifier }));
     const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
     useEffect(() => handleValidation(errorMessage), [errorMessage]);
     return { textFieldProps, fieldProps, descriptionIdentifier };
 }
+function shouldAddPhoneNumberClass(type, value, pattern) {
+    return type === "tel" && !value && pattern && pattern[0] === "(";
+}
 
 function useAtlantisFormFieldName({ id, nameProp, }) {
     /**
@@ -392,10 +397,10 @@ 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;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
         actionsRef,
@@ -430,6 +435,9 @@ function FormFieldInternal(props) {
         readonly,
         keyboard,
         autofocus,
+        value,
+        type,
+        pattern,
         handleChange,
         handleBlur,
         handleFocus,
@@ -438,19 +446,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 };