@jobber/components 7.13.2 → 7.14.0

package/dist/InputPhoneNumber-cjs.js

@@ -0,0 +1,190 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+var classnames = require('classnames');
+var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
+var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
+require('react-hook-form');
+require('./Button-cjs.js');
+require('@jobber/design');
+var filterDataAttributes = require('./filterDataAttributes-cjs.js');
+
+var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};
+
+function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
+    const [isMasking, setIsMasking] = React.useState(!value);
+    const patternInfo = React.useMemo(() => {
+        const patternChars = pattern.split("");
+        const specialChars = patternChars.filter(char => char !== delimiter);
+        const maxCleanChars = patternChars.filter(char => char === delimiter).length;
+        return {
+            patternChars,
+            specialChars,
+            maxCleanChars,
+        };
+    }, [pattern, delimiter]);
+    const inputValue = React.useMemo(() => {
+        return value
+            .split("")
+            .filter(char => !patternInfo.specialChars.includes(char))
+            .join("");
+    }, [value, patternInfo.specialChars]);
+    const formatValue = React.useCallback((unformattedValue) => {
+        const { patternChars, specialChars, maxCleanChars } = patternInfo;
+        const cleanValueChars = unformattedValue
+            .split("")
+            .filter(char => !specialChars.includes(char) && !Number.isNaN(Number(char)));
+        const isOverCharLimit = cleanValueChars.length > maxCleanChars;
+        if (!strict && isOverCharLimit) {
+            return cleanValueChars.join("");
+        }
+        else {
+            const formattedValue = patternChars.reduce(getMaskedValue([...cleanValueChars], specialChars), "");
+            return formattedValue;
+        }
+    }, [patternInfo, strict]);
+    const maskedOnChange = React.useCallback((newValue, event) => {
+        const formatted = formatValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatted, event);
+    }, [formatValue, onChange]);
+    const formattedValue = React.useMemo(() => formatValue(value), [formatValue, value]);
+    React.useEffect(() => {
+        const shouldMask = strict || inputValue.length < patternInfo.maxCleanChars;
+        setIsMasking(shouldMask);
+    }, [inputValue, patternInfo.maxCleanChars, strict]);
+    const placeholderMask = React.useMemo(() => pattern
+        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
+        .slice(value.length), [pattern, delimiter, value]);
+    return {
+        formattedValue,
+        placeholderMask,
+        isMasking,
+        maskedOnChange,
+        inputValue,
+    };
+}
+function getMaskedValue(cleanVal, specialChars) {
+    return (result, nextCharacter) => {
+        if (!cleanVal.length)
+            return result;
+        if (specialChars.includes(nextCharacter))
+            return result + nextCharacter;
+        const nextValue = cleanVal.shift();
+        return result + (nextValue !== undefined ? nextValue : "");
+    };
+}
+
+function MaskElement({ isMasking, formattedValue, placeholderMask, }) {
+    if (!isMasking) {
+        return null;
+    }
+    return (React.createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React.createElement("span", { className: styles.hiddenValue }, formattedValue),
+        React.createElement("span", null, placeholderMask)));
+}
+
+const DEFAULT_PATTERN = "(***) ***-****";
+
+/**
+ * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
+ * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
+    function handleClear() {
+        var _a;
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleFocus,
+        handleBlur,
+        handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+    };
+}
+
+const InputPhoneNumber = React.forwardRef(function InputPhoneNumberInternal(_a, ref) {
+    var _b, _c, _d, _e;
+    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 generatedId = React.useId();
+    const id = props.id || generatedId;
+    const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { formattedValue, isMasking, placeholderMask, inputValue, maskedOnChange, } = useInputMask({
+        value: props.value,
+        pattern,
+        strict: false,
+        onChange: props.onChange,
+    });
+    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
+        onChange: maskedOnChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onEnter: props.onEnter,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+        inputRef: inputPhoneNumberRef,
+    });
+    const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    return (React.createElement(FormFieldPostFix.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(FormFieldPostFix.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(FormFieldPostFix.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
+});
+
+exports.InputPhoneNumber = InputPhoneNumber;

package/dist/InputPhoneNumber-es.js

@@ -0,0 +1,188 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default, { useState, useMemo, useCallback, useEffect, forwardRef, useId } from 'react';
+import classnames from 'classnames';
+import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './FormFieldPostFix-es.js';
+import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
+import 'react-hook-form';
+import './Button-es.js';
+import '@jobber/design';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
+
+var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};
+
+function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
+    const [isMasking, setIsMasking] = useState(!value);
+    const patternInfo = useMemo(() => {
+        const patternChars = pattern.split("");
+        const specialChars = patternChars.filter(char => char !== delimiter);
+        const maxCleanChars = patternChars.filter(char => char === delimiter).length;
+        return {
+            patternChars,
+            specialChars,
+            maxCleanChars,
+        };
+    }, [pattern, delimiter]);
+    const inputValue = useMemo(() => {
+        return value
+            .split("")
+            .filter(char => !patternInfo.specialChars.includes(char))
+            .join("");
+    }, [value, patternInfo.specialChars]);
+    const formatValue = useCallback((unformattedValue) => {
+        const { patternChars, specialChars, maxCleanChars } = patternInfo;
+        const cleanValueChars = unformattedValue
+            .split("")
+            .filter(char => !specialChars.includes(char) && !Number.isNaN(Number(char)));
+        const isOverCharLimit = cleanValueChars.length > maxCleanChars;
+        if (!strict && isOverCharLimit) {
+            return cleanValueChars.join("");
+        }
+        else {
+            const formattedValue = patternChars.reduce(getMaskedValue([...cleanValueChars], specialChars), "");
+            return formattedValue;
+        }
+    }, [patternInfo, strict]);
+    const maskedOnChange = useCallback((newValue, event) => {
+        const formatted = formatValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatted, event);
+    }, [formatValue, onChange]);
+    const formattedValue = useMemo(() => formatValue(value), [formatValue, value]);
+    useEffect(() => {
+        const shouldMask = strict || inputValue.length < patternInfo.maxCleanChars;
+        setIsMasking(shouldMask);
+    }, [inputValue, patternInfo.maxCleanChars, strict]);
+    const placeholderMask = useMemo(() => pattern
+        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
+        .slice(value.length), [pattern, delimiter, value]);
+    return {
+        formattedValue,
+        placeholderMask,
+        isMasking,
+        maskedOnChange,
+        inputValue,
+    };
+}
+function getMaskedValue(cleanVal, specialChars) {
+    return (result, nextCharacter) => {
+        if (!cleanVal.length)
+            return result;
+        if (specialChars.includes(nextCharacter))
+            return result + nextCharacter;
+        const nextValue = cleanVal.shift();
+        return result + (nextValue !== undefined ? nextValue : "");
+    };
+}
+
+function MaskElement({ isMasking, formattedValue, placeholderMask, }) {
+    if (!isMasking) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React__default.createElement("span", { className: styles.hiddenValue }, formattedValue),
+        React__default.createElement("span", null, placeholderMask)));
+}
+
+const DEFAULT_PATTERN = "(***) ***-****";
+
+/**
+ * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
+ * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
+    function handleClear() {
+        var _a;
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleFocus,
+        handleBlur,
+        handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+    };
+}
+
+const InputPhoneNumber = forwardRef(function InputPhoneNumberInternal(_a, ref) {
+    var _b, _c, _d, _e;
+    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 generatedId = useId();
+    const id = props.id || generatedId;
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { formattedValue, isMasking, placeholderMask, inputValue, maskedOnChange, } = useInputMask({
+        value: props.value,
+        pattern,
+        strict: false,
+        onChange: props.onChange,
+    });
+    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
+        onChange: maskedOnChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onEnter: props.onEnter,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+        inputRef: inputPhoneNumberRef,
+    });
+    const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
+    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(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__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
+        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
+});
+
+export { InputPhoneNumber as I };

package/dist/InputText/index.cjs

@@ -9,8 +9,9 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
-var mergeRefs = require('../mergeRefs-cjs.js');
+var FormFieldPostFix = require('../FormFieldPostFix-cjs.js');
 var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');
@@ -247,13 +248,13 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     const mergedRef = React.useMemo(() => mergeRefs.mergeRefs([inputRef, inputTextRef]), []);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
-        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
+        name, className: FormFieldPostFix.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(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 },
+    return (React.createElement(FormFieldPostFix.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(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));
+            React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }))));
 });
 function useInputTextId(props) {
     const generatedId = React.useId();

package/dist/InputText/index.mjs

@@ -7,8 +7,9 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { m as mergeRefs, g as formFieldStyles, c as FormFieldWrapper, h as FormFieldPostFix } from '../mergeRefs-es.js';
+import { g as formFieldStyles, c as FormFieldWrapper, h as FormFieldPostFix } from '../FormFieldPostFix-es.js';
 import { u as useAtlantisFormFieldName } from '../useAtlantisFormFieldName-es.js';
+import { m as mergeRefs } from '../mergeRefs-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';

package/dist/InputTime/index.cjs

@@ -3,10 +3,11 @@
 var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var debounce = require('../debounce-cjs.js');
-var mergeRefs = require('../mergeRefs-cjs.js');
+var FormFieldPostFix = require('../FormFieldPostFix-cjs.js');
 require('classnames');
 require('@jobber/design');
 require('react-hook-form');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('../Button-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var omit = require('../omit-cjs.js');
@@ -309,8 +310,8 @@ function InputTimeRebuilt(_a) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    return (React.createElement(mergeRefs.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, step % 60 !== 0), wrapperRef: wrapperRef },
-        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: mergeRefs.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, step: step, value: dateToTimeString(value, step % 60 !== 0), 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))));
+    return (React.createElement(FormFieldPostFix.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, step % 60 !== 0), wrapperRef: wrapperRef },
+        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: FormFieldPostFix.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, step: step, value: dateToTimeString(value, step % 60 !== 0), 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,10 +1,11 @@
 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 { c as FormFieldWrapper, g as formFieldStyles, m as mergeRefs } from '../mergeRefs-es.js';
+import { c as FormFieldWrapper, g as formFieldStyles } from '../FormFieldPostFix-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
+import { m as mergeRefs } from '../mergeRefs-es.js';
 import '../Button-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { o as omit } from '../omit-es.js';

package/dist/RecurringSelect/index.cjs

@@ -7,7 +7,7 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('classnames');
 require('../Select-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -20,6 +20,7 @@ require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 require('../filterDataAttributes-cjs.js');
 require('../InputNumber/index.cjs');
 require('../clsx-cjs.js');

package/dist/RecurringSelect/index.mjs

@@ -5,7 +5,7 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import 'classnames';
 import '../Select-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -18,6 +18,7 @@ import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';
 import '../filterDataAttributes-es.js';
 import '../InputNumber/index.mjs';
 import '../clsx-es.js';

package/dist/Select/index.cjs

@@ -3,7 +3,7 @@
 var Select = require('../Select-cjs.js');
 require('react');
 require('classnames');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -18,6 +18,7 @@ require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 require('../filterDataAttributes-cjs.js');
 
 

package/dist/Select/index.mjs

@@ -1,7 +1,7 @@
 export { S as Option, a as Select } from '../Select-es.js';
 import 'react';
 import 'classnames';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -16,4 +16,5 @@ import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';
 import '../filterDataAttributes-es.js';

package/dist/Select-cjs.js

@@ -2,10 +2,11 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var mergeRefs = require('./mergeRefs-cjs.js');
+var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
+var mergeRefs = require('./mergeRefs-cjs.js');
 require('./Button-cjs.js');
 require('@jobber/design');
 var filterDataAttributes = require('./filterDataAttributes-cjs.js');
@@ -59,12 +60,12 @@ function Select(props) {
     });
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    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: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
+    return (React.createElement(FormFieldPostFix.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: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
         React.createElement(React.Fragment, null,
             React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, 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(mergeRefs.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
-            React.createElement(mergeRefs.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormFieldPostFix.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+            React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectRefs(inputRef) {
     const internalRef = React.useRef(null);

package/dist/Select-es.js

@@ -1,9 +1,10 @@
 import React__default, { useId, useRef } from 'react';
 import classnames from 'classnames';
-import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix, m as mergeRefs } from './mergeRefs-es.js';
+import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './FormFieldPostFix-es.js';
 import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';
+import { m as mergeRefs } from './mergeRefs-es.js';
 import './Button-es.js';
 import '@jobber/design';
 import { f as filterDataAttributes } from './filterDataAttributes-es.js';