@jobber/components 6.105.1 → 6.105.3

package/dist/Autocomplete/index.mjs

@@ -10,7 +10,7 @@ import { T as Typography } from '../Typography-es.js';
 import { I as Icon } from '../Icon-es.js';
 import { InputText } from '../InputText/index.mjs';
 import { G as Glimmer } from '../Glimmer-es.js';
-import { m as mergeRefs } from '../FormField-es.js';
+import { n as mergeRefs } from '../FormField-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react/jsx-runtime';

package/dist/DatePicker/DatePicker.d.ts

@@ -40,6 +40,10 @@ interface BaseDatePickerProps {
      * Change handler when the selected month changes
      */
     onMonthChange?(val: Date): void;
+    /**
+     * Callback when the calendar open state changes
+     */
+    onOpenChange?(open: boolean): void;
 }
 interface DatePickerModalProps extends BaseDatePickerProps {
     /**
@@ -66,5 +70,5 @@ interface DatePickerInlineProps extends BaseDatePickerProps {
     readonly inline?: boolean;
 }
 type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
-export declare function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
 export {};

package/dist/DatePicker-cjs.js

@@ -12705,7 +12705,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = React.useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
@@ -12752,9 +12752,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/DatePicker-es.js

@@ -12703,7 +12703,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
@@ -12750,9 +12750,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/FormField-cjs.js

@@ -14,22 +14,22 @@ var Spinner = require('./Spinner-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('react-hook-form');
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","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-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","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-","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
  */
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
-    const affixLabelClass = classnames(styles$1.affixLabel, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     if (!label)
         return null;
     return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
-    const affixIconClass = classnames(styles$1.affixIcon, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
@@ -51,7 +51,7 @@ function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
     const useStringFormat = !description || typeof description === "string";
-    return (React.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
+    return (React.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
@@ -86,22 +86,22 @@ function useIsSafari() {
  */
 function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
     const isSafari = useIsSafari();
-    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
-        [styles$1.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
             (placeholder && type === "select") ||
             // Naively assume that if the the type is tel, it is the InputPhoneNumber
             (placeholder && type === "tel"),
-        [styles$1.text]: type === "textarea" || type === "text",
-        [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
-        [styles$1.select]: type === "select",
-        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
-        [styles$1.disabled]: disabled,
-        [styles$1.maxLength]: maxLength,
-        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
     });
-    const containerClasses = classnames(styles$1.container, {
-        [styles$1.inline]: inline,
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
     });
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
@@ -120,7 +120,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         }));
     }, [value]);
     return {
-        inputStyle: styles$1.input,
+        inputStyle: formFieldStyles.input,
         wrapperClasses,
         containerClasses,
         wrapperInlineStyle,
@@ -203,24 +203,24 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
  * @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.createElement("div", { className: formFieldStyles.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.createElement("div", { className: formFieldStyles.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.createElement("div", { className: formFieldStyles.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.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -230,13 +230,13 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
             duration: design.tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+    return (React.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
 }
 
 /**
@@ -299,8 +299,8 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
  */
 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: classnames(styles$1.input, {
-            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(formFieldStyles.input, {
+            [formFieldStyles.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 });
@@ -470,6 +470,7 @@ exports.FormFieldPostFix = FormFieldPostFix;
 exports.FormFieldWrapper = FormFieldWrapper;
 exports.FormFieldWrapperMain = FormFieldWrapperMain;
 exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
+exports.formFieldStyles = formFieldStyles;
 exports.mergeRefs = mergeRefs;
 exports.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;

package/dist/FormField-es.js

@@ -12,22 +12,22 @@ import { S as Spinner } from './Spinner-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { useFormContext, useForm, useController } from 'react-hook-form';
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","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-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","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-","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
  */
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
-    const affixLabelClass = classnames(styles$1.affixLabel, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     if (!label)
         return null;
     return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
-    const affixIconClass = classnames(styles$1.affixIcon, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
@@ -49,7 +49,7 @@ function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
     const useStringFormat = !description || typeof description === "string";
-    return (React__default.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
+    return (React__default.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
@@ -84,22 +84,22 @@ function useIsSafari() {
  */
 function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
     const isSafari = useIsSafari();
-    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
-        [styles$1.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
             (placeholder && type === "select") ||
             // Naively assume that if the the type is tel, it is the InputPhoneNumber
             (placeholder && type === "tel"),
-        [styles$1.text]: type === "textarea" || type === "text",
-        [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
-        [styles$1.select]: type === "select",
-        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
-        [styles$1.disabled]: disabled,
-        [styles$1.maxLength]: maxLength,
-        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
     });
-    const containerClasses = classnames(styles$1.container, {
-        [styles$1.inline]: inline,
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
     });
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
@@ -118,7 +118,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         }));
     }, [value]);
     return {
-        inputStyle: styles$1.input,
+        inputStyle: formFieldStyles.input,
         wrapperClasses,
         containerClasses,
         wrapperInlineStyle,
@@ -201,24 +201,24 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputHorizontalWrapper({ children, }) {
-    return React__default.createElement("div", { className: styles$1.horizontalWrapper }, children);
+    return React__default.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputWrapperStyles({ children, }) {
-    return React__default.createElement("div", { className: styles$1.inputWrapper }, children);
+    return React__default.createElement("div", { className: formFieldStyles.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__default.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
+    return (React__default.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
 }
 function FormFieldLabel({ children, htmlFor, style, external = false, }) {
     if (!children)
         return null;
-    return (React__default.createElement("label", { className: external ? styles$1.externalLabel : styles$1.label, htmlFor: htmlFor, style: style }, children));
+    return (React__default.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -228,13 +228,13 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
             duration: tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React__default.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React__default.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
+    return (React__default.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
 }
 
 /**
@@ -297,8 +297,8 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
  */
 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: classnames(styles$1.input, {
-            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(formFieldStyles.input, {
+            [formFieldStyles.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 });
@@ -458,4 +458,4 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, useAtlantisFormField as u };
+export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, formFieldStyles as l, FormFieldPostFix as m, mergeRefs as n, useAtlantisFormField as u };

package/dist/InputDate/index.cjs

@@ -103,21 +103,47 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
 
 const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
     const { onChange } = props;
+    const isCalendarOpenRef = React.useRef(false);
+    const inputFocusedRef = React.useRef(false);
+    const compositeFocusedRef = React.useRef(false);
+    const lastBlurEventRef = React.useRef(null);
     return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
-        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
+        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
+            var _a;
+            isCalendarOpenRef.current = open;
+            // When calendar closes, fire onBlur if input is also not focused
+            if (!open &&
+                !inputFocusedRef.current &&
+                compositeFocusedRef.current &&
+                lastBlurEventRef.current) {
+                compositeFocusedRef.current = false;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
+            }
+        } }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
             onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = true;
+                // Fire parent's onFocus only when the composite component first receives focus
+                if (!compositeFocusedRef.current) {
+                    compositeFocusedRef.current = true;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = false;
+                lastBlurEventRef.current = event;
+                // Only fire parent's onBlur if calendar is also closed
+                if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
+                    compositeFocusedRef.current = false;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });

package/dist/InputDate/index.mjs

@@ -101,21 +101,47 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
 
 const InputDateRebuilt = forwardRef((props, forwardedRef) => {
     const { onChange } = props;
+    const isCalendarOpenRef = useRef(false);
+    const inputFocusedRef = useRef(false);
+    const compositeFocusedRef = useRef(false);
+    const lastBlurEventRef = useRef(null);
     return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
-        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
+        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
+            var _a;
+            isCalendarOpenRef.current = open;
+            // When calendar closes, fire onBlur if input is also not focused
+            if (!open &&
+                !inputFocusedRef.current &&
+                compositeFocusedRef.current &&
+                lastBlurEventRef.current) {
+                compositeFocusedRef.current = false;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
+            }
+        } }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
             onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = true;
+                // Fire parent's onFocus only when the composite component first receives focus
+                if (!compositeFocusedRef.current) {
+                    compositeFocusedRef.current = true;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = false;
+                lastBlurEventRef.current = event;
+                // Only fire parent's onBlur if calendar is also closed
+                if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
+                    compositeFocusedRef.current = false;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });

package/dist/InputEmail/index.cjs

@@ -101,17 +101,6 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
     const id = props.id || generatedId;
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
     const wrapperRef = React.useRef(null);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        inline: props.inline,
-        align: props.align,
-        type: "email",
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-    });
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id,
@@ -134,8 +123,8 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
-        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
+        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
         React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 

package/dist/InputEmail/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useId, useRef } from 'react';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -99,17 +99,6 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
     const id = props.id || generatedId;
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
     const wrapperRef = useRef(null);
-    const { inputStyle } = useFormFieldWrapperStyles({
-        size: props.size,
-        inline: props.inline,
-        align: props.align,
-        type: "email",
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-    });
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id,
@@ -132,8 +121,8 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes(props);
-    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
-        React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
+        React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
         React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 

package/dist/InputPhoneNumber/index.cjs

@@ -174,17 +174,6 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     var { pattern = DEFAULT_PATTERN } = _a, props = tslib_es6.__rest(_a, ["pattern"]);
     const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
     const wrapperRef = React.useRef(null);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        inline: props.inline,
-        type: "tel",
-    });
     const generatedId = React.useId();
     const id = props.id || generatedId;
     const { name } = FormField.useAtlantisFormFieldName({
@@ -214,7 +203,7 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
-        React.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+        React.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(FormField.formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
             }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                 ? descriptionIdentifier

package/dist/InputPhoneNumber/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
-import { j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, k as FormField } from '../FormField-es.js';
+import { b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, k as FormField } from '../FormField-es.js';
 import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
 import '@jobber/design';
@@ -172,17 +172,6 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
     var { pattern = DEFAULT_PATTERN } = _a, props = __rest(_a, ["pattern"]);
     const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React__default.useRef(null);
     const wrapperRef = React__default.useRef(null);
-    const { inputStyle } = useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        inline: props.inline,
-        type: "tel",
-    });
     const generatedId = useId();
     const id = props.id || generatedId;
     const { name } = useAtlantisFormFieldName({
@@ -212,7 +201,7 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes(props);
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
-        React__default.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+        React__default.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
             }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                 ? descriptionIdentifier

package/dist/InputText/index.cjs

@@ -218,18 +218,6 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        maxLength: props.maxLength,
-        type: props.multiline ? "textarea" : "text",
-        disabled: props.disabled,
-        inline: props.inline,
-    });
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -254,10 +242,10 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
-        name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+        name, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
             ? descriptionIdentifier
             : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: FormField.mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", maxLength: props.maxLength, onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React.createElement(React.Fragment, null,
             props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
             React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));

package/dist/InputText/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, m as mergeRefs, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, l as formFieldStyles, n as mergeRefs, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -216,18 +216,6 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { inputStyle } = useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        maxLength: props.maxLength,
-        type: props.multiline ? "textarea" : "text",
-        disabled: props.disabled,
-        inline: props.inline,
-    });
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -252,10 +240,10 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
     const dataAttrs = filterDataAttributes(props);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
-        name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+        name, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
             ? descriptionIdentifier
             : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", maxLength: props.maxLength, onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React__default.createElement(React__default.Fragment, null,
             props.multiline ? (React__default.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React__default.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
             React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));

package/dist/InputTime/index.cjs

@@ -268,7 +268,6 @@ function InputTimeRebuilt(_a) {
     const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
     const generatedId = React.useId();
     const id = props.id || generatedId;
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(props);
     const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
@@ -301,7 +300,7 @@ function InputTimeRebuilt(_a) {
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: FormField.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = React.useRef(null);

package/dist/InputTime/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import { a as debounce } from '../debounce-es.js';
-import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, m as mergeRefs, k as FormField } from '../FormField-es.js';
+import { f as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
@@ -266,7 +266,6 @@ function InputTimeRebuilt(_a) {
     const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
     const generatedId = useId();
     const id = props.id || generatedId;
-    const { inputStyle } = useFormFieldWrapperStyles(props);
     const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
@@ -299,7 +298,7 @@ function InputTimeRebuilt(_a) {
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+        React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = useRef(null);

package/dist/Select/index.cjs

@@ -61,7 +61,6 @@ var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning"
 function SelectRebuilt(props) {
     var _a;
     const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign({}, omit.omit(props, ["version"])));
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
     const generatedId = React.useId();
     const id = props.id || generatedId;
@@ -81,7 +80,7 @@ function SelectRebuilt(props) {
         React.createElement(React.Fragment, null,
             React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                     ? descriptionIdentifier
-                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormField.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectRefs(inputRef) {

package/dist/Select/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { useId, useRef } from 'react';
 import { o as omit } from '../omit-es.js';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, n as mergeRefs } from '../FormField-es.js';
 import classnames from 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -59,7 +59,6 @@ var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning"
 function SelectRebuilt(props) {
     var _a;
     const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
-    const { inputStyle } = useFormFieldWrapperStyles(Object.assign({}, omit(props, ["version"])));
     const dataAttrs = filterDataAttributes(props);
     const generatedId = useId();
     const id = props.id || generatedId;
@@ -79,7 +78,7 @@ function SelectRebuilt(props) {
         React__default.createElement(React__default.Fragment, null,
             React__default.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                     ? descriptionIdentifier
-                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectRefs(inputRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.105.1",
+  "version": "6.105.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2e40c551d4af9f4de5d134287b55928b73a518b9"
+  "gitHead": "56e20f9af118bc4640fdb6e648a227ab803f6d38"
 }