@jobber/components 7.5.0 → 7.7.0

package/dist/InputDate/index.mjs

@@ -1,15 +1,21 @@
-import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
-import { o as omit } from '../omit-es.js';
-import { k as FormField } from '../FormField-es.js';
+export { I as InputDate } from '../InputDate-es.js';
+import 'react';
+import '../DatePicker-es.js';
 import 'classnames';
-import '../tslib.es6-es.js';
-import 'react-hook-form';
+import '../clsx-es.js';
+import '../floating-ui.react-es.js';
+import '../index.esm-es.js';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../floating-ui.react-dom-es.js';
 import '@jobber/hooks';
-import 'framer-motion';
-import '@jobber/design';
+import '../Typography-es.js';
 import '../Button-es.js';
-import { D as DatePicker } from '../DatePicker-es.js';
-import { InputText } from '../InputText/index.mjs';
+import '../tslib.es6-es.js';
+import 'react-router-dom';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../omit-es.js';
 import '../_commonjsHelpers-es.js';
 import '../_getAllKeys-es.js';
 import '../isTypedArray-es.js';
@@ -21,165 +27,14 @@ import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
-import '../Icon-es.js';
+import '../AtlantisContext-es.js';
+import '../InputText/index.mjs';
+import '../FormField-es.js';
+import '../mergeRefs-es.js';
+import 'framer-motion';
 import '../Text-es.js';
-import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-router-dom';
-import '../clsx-es.js';
-import '../floating-ui.react-es.js';
-import '../index.esm-es.js';
-import 'react/jsx-runtime';
-import 'react-dom';
-import '../floating-ui.react-dom-es.js';
-import '../AtlantisContext-es.js';
+import 'react-hook-form';
 import '../filterDataAttributes-es.js';
-
-// eslint-disable-next-line import/no-deprecated
-function InputDate$1(inputProps) {
-    const formFieldActionsRef = useRef(null);
-    return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value } = activatorProps;
-            const newActivatorProps = omit(activatorProps, ["activator"]);
-            const [isFocused, setIsFocused] = useState(false);
-            const suffix = inputProps.showIcon !== false
-                ? {
-                    icon: "calendar",
-                    ariaLabel: "Show calendar",
-                    onClick: !inputProps.disabled && onClick && onClick,
-                }
-                : undefined;
-            // Set form field to formatted date string immediately, to avoid validations
-            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
-            useEffect(() => {
-                var _a;
-                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
-            }, [value]);
-            const showEmptyValueLabel = !value && !isFocused;
-            return (
-            // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
-            React__default.createElement("div", { onClick: onClick },
-                React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
-                        onChange && onChange(event);
-                    }, onBlur: () => {
-                        inputProps.onBlur && inputProps.onBlur();
-                        activatorProps.onBlur && activatorProps.onBlur();
-                        setIsFocused(false);
-                    }, onFocus: () => {
-                        inputProps.onFocus && inputProps.onFocus();
-                        activatorProps.onFocus && activatorProps.onFocus();
-                        setIsFocused(true);
-                    }, onKeyUp: event => {
-                        var _a;
-                        if (inputProps.showIcon === false &&
-                            event.key === "ArrowDown") {
-                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
-                        }
-                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
-        } }));
-}
-
-function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
-    const [isFocused, setIsFocused] = useState(false);
-    function handleChange(_newValue, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }
-    function handleFocus(event) {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        setIsFocused(true);
-    }
-    function handleBlur(event) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        setIsFocused(false);
-    }
-    return {
-        handleBlur,
-        handleChange,
-        handleFocus,
-        isFocused,
-    };
-}
-
-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, 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;
-                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;
-                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);
-            },
-        });
-        const suffix = props.showIcon !== false
-            ? {
-                icon: "calendar",
-                ariaLabel: "Show calendar",
-                onClick: !props.disabled && onClick && onClick,
-            }
-            : undefined;
-        const showEmptyValueLabel = !value && !isFocused;
-        return (
-        // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
-        React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
-                    var _a, _b;
-                    if (props.showIcon === false && event.key === "ArrowDown") {
-                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
-                    }
-                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
-                }, onChange: handleChange })));
-    }
-});
-InputDateRebuilt.displayName = "InputDateRebuilt";
-
-function isNewInputDateProps(props) {
-    return props.version === 2;
-}
-const InputDate = forwardRef(function InputDateShim(props, ref) {
-    if (isNewInputDateProps(props)) {
-        return React__default.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
-    }
-    else {
-        return React__default.createElement(InputDate$1, Object.assign({}, props));
-    }
-});
-
-export { InputDate };

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
-import type { InputDateRebuiltProps } from "./InputDate.types";
+import type { InputDateProps } from "./InputDate.types";
 import type { DatePickerActivatorProps } from "../DatePicker/DatePickerActivator";
-export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuiltProps, "onFocus" | "onBlur"> {
+export interface useInputDateActivatorActionsProps extends Pick<InputDateProps, "onFocus" | "onBlur"> {
     onChange: DatePickerActivatorProps["onChange"];
 }
 export declare function useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {

package/dist/InputDate-cjs.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var React = require('react');
+var DatePicker = require('./DatePicker-cjs.js');
+var InputText_index = require('./InputText/index.cjs');
+
+function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
+    const [isFocused, setIsFocused] = React.useState(false);
+    function handleChange(_newValue, event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFocused(true);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
+    }
+    return {
+        handleBlur,
+        handleChange,
+        handleFocus,
+        isFocused,
+    };
+}
+
+const InputDate = 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, 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;
+                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;
+                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);
+            },
+        });
+        const suffix = props.showIcon !== false
+            ? {
+                icon: "calendar",
+                ariaLabel: "Show calendar",
+                onClick: !props.disabled && onClick && onClick,
+            }
+            : undefined;
+        const showEmptyValueLabel = !value && !isFocused;
+        return (
+        // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+        React.createElement("div", { onClick: onClick },
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+                    var _a, _b;
+                    if (props.showIcon === false && event.key === "ArrowDown") {
+                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                    }
+                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+                }, onChange: handleChange })));
+    }
+});
+InputDate.displayName = "InputDate";
+
+exports.InputDate = InputDate;

package/dist/InputDate-es.js

@@ -0,0 +1,94 @@
+import React__default, { useState, forwardRef, useRef } from 'react';
+import { D as DatePicker } from './DatePicker-es.js';
+import { InputText } from './InputText/index.mjs';
+
+function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
+    const [isFocused, setIsFocused] = useState(false);
+    function handleChange(_newValue, event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFocused(true);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
+    }
+    return {
+        handleBlur,
+        handleChange,
+        handleFocus,
+        isFocused,
+    };
+}
+
+const InputDate = 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, 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;
+                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;
+                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);
+            },
+        });
+        const suffix = props.showIcon !== false
+            ? {
+                icon: "calendar",
+                ariaLabel: "Show calendar",
+                onClick: !props.disabled && onClick && onClick,
+            }
+            : undefined;
+        const showEmptyValueLabel = !value && !isFocused;
+        return (
+        // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+        React__default.createElement("div", { onClick: onClick },
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+                    var _a, _b;
+                    if (props.showIcon === false && event.key === "ArrowDown") {
+                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                    }
+                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+                }, onChange: handleChange })));
+    }
+});
+InputDate.displayName = "InputDate";
+
+export { InputDate as I };

package/dist/InputEmail/index.cjs

@@ -9,14 +9,15 @@ require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
+require('react-router-dom');
 require('../Icon-cjs.js');
-require('../Text-cjs.js');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-router-dom');
 
 const validationMessage = "Please enter a valid email";
 
@@ -102,7 +103,7 @@ 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 { name } = FormField.useAtlantisFormFieldName({
+    const { name } = mergeRefs.useAtlantisFormFieldName({
         nameProp: props.name,
         id,
     });
@@ -124,9 +125,9 @@ 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, 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, maxLength: props.maxLength, required: props.required, 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 })));
+    return (React.createElement(mergeRefs.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: mergeRefs.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, maxLength: props.maxLength, required: props.required, 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(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 
 function isNewInputEmailProps(props) {

package/dist/InputEmail/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useId, useRef } from 'react';
-import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix } from '../FormField-es.js';
+import { F as FormField } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -7,14 +7,15 @@ import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix } from '../mergeRefs-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
+import 'react-router-dom';
 import '../Icon-es.js';
-import '../Text-es.js';
 import '../Typography-es.js';
+import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-router-dom';
 
 const validationMessage = "Please enter a valid email";
 

package/dist/InputNumber/index.cjs

@@ -15,6 +15,7 @@ require('@jobber/design');
 require('../Button-cjs.js');
 require('../clsx-cjs.js');
 require('../Typography-cjs.js');
+require('../mergeRefs-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');

package/dist/InputNumber/index.mjs

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { I as Icon } from '../Icon-es.js';
 import { T as Text } from '../Text-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
-import { k as FormField } from '../FormField-es.js';
+import { F as FormField } from '../FormField-es.js';
 import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
@@ -13,6 +13,7 @@ import '@jobber/design';
 import '../Button-es.js';
 import '../clsx-es.js';
 import '../Typography-es.js';
+import '../mergeRefs-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';

package/dist/InputPassword/index.cjs

@@ -3,6 +3,7 @@
 var InputPassword = require('../InputPassword-cjs.js');
 require('react');
 require('../FormField-cjs.js');
+require('../mergeRefs-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');

package/dist/InputPassword/index.mjs

@@ -1,6 +1,7 @@
 export { I as InputPassword } from '../InputPassword-es.js';
 import 'react';
 import '../FormField-es.js';
+import '../mergeRefs-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';

package/dist/InputPassword-es.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { k as FormField } from './FormField-es.js';
+import { F as FormField } from './FormField-es.js';
 import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/InputPhoneNumber/index.cjs

@@ -3,11 +3,12 @@
 var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var classnames = require('classnames');
-var FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var reactHookForm = require('react-hook-form');
 require('../Button-cjs.js');
 require('@jobber/design');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
+var FormField = require('../FormField-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('../Icon-cjs.js');
@@ -176,7 +177,7 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     const wrapperRef = React.useRef(null);
     const generatedId = React.useId();
     const id = props.id || generatedId;
-    const { name } = FormField.useAtlantisFormFieldName({
+    const { name } = mergeRefs.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
     });
@@ -202,14 +203,14 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
     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(FormField.formFieldStyles.input, {
+    return (React.createElement(mergeRefs.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(mergeRefs.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, required: props.required, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
         React.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
-        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
+        React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
 });
 
 function InputPhoneNumber$1(_a) {

package/dist/InputPhoneNumber/index.mjs

@@ -1,11 +1,12 @@
 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 { b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, k as FormField } from '../FormField-es.js';
+import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix } from '../mergeRefs-es.js';
 import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
 import '@jobber/design';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
+import { F as FormField } from '../FormField-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '../Icon-es.js';

package/dist/InputText/index.cjs

@@ -9,14 +9,15 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
+require('react-router-dom');
 require('../Icon-cjs.js');
-require('../Text-cjs.js');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-router-dom');
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
@@ -220,7 +221,7 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { name } = FormField.useAtlantisFormFieldName({
+    const { name } = mergeRefs.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
     });
@@ -242,16 +243,16 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    const mergedRef = React.useMemo(() => FormField.mergeRefs([inputRef, inputTextRef]), []);
+    const mergedRef = React.useMemo(() => mergeRefs.mergeRefs([inputRef, inputTextRef]), []);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
-        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, required: props.required, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+        name, className: mergeRefs.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, required: props.required, 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: mergedRef }, 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", 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, showMiniLabel: props.showMiniLabel },
+    return (React.createElement(mergeRefs.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, showMiniLabel: props.showMiniLabel },
         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 }))));
+            React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));
 });
 function useInputTextId(props) {
     const generatedId = React.useId();