@jobber/components 7.5.0 → 7.6.0

package/dist/FormField-es.js

@@ -1,242 +1,9 @@
-import React__default, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react';
-import { useShowClear } from '@jobber/hooks';
-import { AnimatePresence, motion } from 'framer-motion';
-import { tokens } from '@jobber/design';
+import React__default, { useEffect, useImperativeHandle, useId, useRef } from 'react';
+import { h as formFieldStyles, m as mergeRefs, c as FormFieldWrapper, i as FormFieldPostFix, u as useAtlantisFormFieldName } from './mergeRefs-es.js';
 import classnames from 'classnames';
-import { B as Button } from './Button-es.js';
-import { I as Icon } from './Icon-es.js';
-import { T as Text } from './Text-es.js';
-import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
-import { I as InputValidation } from './InputValidation-es.js';
-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 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(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(formFieldStyles.affixIcon, {
-        [formFieldStyles.suffix]: variation === "suffix",
-    });
-    const iconSize = size === "small" ? "small" : "base";
-    if (!icon)
-        return null;
-    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button
-    /**
-     * We can cast the ariaLabel here as a `Suffix`
-     * requires an ariaLabel if there is an action
-     */
-    , { 
-        /**
-         * We can cast the ariaLabel here as a `Suffix`
-         * requires an ariaLabel if there is an action
-         */
-        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
-}
-
-function FormFieldDescription({ id, description, visible = true, }) {
-    if (!visible)
-        return null;
-    const useStringFormat = !description || typeof description === "string";
-    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-"};
-
-function ClearAction({ onClick, visible, }) {
-    if (!visible)
-        return null;
-    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
-        React__default.createElement(Icon, { name: "remove", size: "small" })));
-}
-
-function useToolbar(props) {
-    const isToolbarVisible = props.toolbar !== undefined &&
-        (props.toolbarVisibility === "always" || props.focused);
-    const toolbarAnimationEnd = { opacity: 0, height: 0 };
-    const toolbarAnimationStart = { opacity: 1, height: "auto" };
-    return {
-        isToolbarVisible,
-        toolbarAnimationEnd,
-        toolbarAnimationStart,
-    };
-}
-
-function useIsSafari() {
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator)
-        ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-        : false;
-}
-
-/**
- * Hook for getting the correct styles for the FormField and its children
- */
-function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
-    const isSafari = useIsSafari();
-    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"),
-        [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(formFieldStyles.container, {
-        [formFieldStyles.inline]: inline,
-    });
-    const wrapperInlineStyle = {
-        ["--formField-maxLength"]: maxLength || max,
-    };
-    const [labelStyle, setLabelStyle] = useState({
-        paddingLeft: undefined,
-        paddingRight: undefined,
-    });
-    useEffect(() => {
-        var _a, _b;
-        setLabelStyle(getAffixPaddding({
-            value,
-            type,
-            prefixWidth: ((_a = prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
-            suffixWidth: ((_b = suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
-        }));
-    }, [value]);
-    return {
-        inputStyle: formFieldStyles.input,
-        wrapperClasses,
-        containerClasses,
-        wrapperInlineStyle,
-        labelStyle,
-        setLabelStyle,
-    };
-}
-function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
-    const hasValue = value !== "";
-    const newPadding = {
-        paddingLeft: undefined,
-        paddingRight: undefined,
-    };
-    // Naively assume that if the the type is tel, it is the InputPhoneNumber
-    if (type === "tel")
-        return newPadding;
-    if (prefixWidth && !hasValue) {
-        newPadding.paddingLeft = offset(prefixWidth);
-    }
-    if (suffixWidth && !hasValue) {
-        newPadding.paddingRight = offset(suffixWidth);
-    }
-    function offset(width) {
-        return `calc(${width}px + var(--space-smallest)`;
-    }
-    return newPadding;
-}
-
-function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = useRef(null);
-    const suffixRef = useRef(null);
-    const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
-        align,
-        max,
-        maxLength,
-        prefixRef,
-        suffixRef,
-        placeholder,
-        value,
-        invalid,
-        error,
-        type,
-        disabled,
-        inline,
-        size,
-        showMiniLabel,
-    });
-    const { focused } = useFormFieldFocus({ wrapperRef });
-    const showClear = useShowClear({
-        clearable,
-        multiline: type === "textarea",
-        focused,
-        hasValue: Boolean(value),
-        disabled,
-        readonly,
-    });
-    const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
-        focused,
-        toolbar,
-        toolbarVisibility,
-    });
-    return (React__default.createElement("div", { className: containerClasses },
-        React__default.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
-            React__default.createElement(FormFieldInputHorizontalWrapper, null,
-                React__default.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
-                React__default.createElement(FormFieldInputWrapperStyles, null,
-                    (showMiniLabel || !value) && (React__default.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
-                            ? labelStyle
-                            : undefined }, placeholder)),
-                    React__default.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
-                    React__default.createElement(FormFieldWrapperMain, null, children),
-                    React__default.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
-                React__default.createElement(ClearAction, { onClick: onClear, visible: showClear }),
-                React__default.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
-            React__default.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
-        React__default.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
-        React__default.createElement(InputValidation, { message: error, visible: !!error && !inline })));
-}
-/**
- * @internal Reach out to UX Foundations if using this component since it is possible it might change
- */
-function FormFieldInputHorizontalWrapper({ children, }) {
-    return React__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: 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: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
-}
-function FormFieldLabel({ children, htmlFor, style, external = false, }) {
-    if (!children)
-        return null;
-    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
- */
-function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
-    return (React__default.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React__default.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
-            duration: tokens["timing-base"] / 1000,
-            ease: "easeInOut",
-        }, tabIndex: -1 },
-        React__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(formFieldStyles.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
-}
-
 /**
  * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
  * manage the form state of a field through react-hook-form while providing support for additional callbacks
@@ -309,33 +76,6 @@ function shouldAddPhoneNumberClass(type, value, pattern) {
     return type === "tel" && !value && pattern && pattern[0] === "(";
 }
 
-function useAtlantisFormFieldName({ id, nameProp, }) {
-    /**
-     * Generate a name if one is not supplied, this is the name
-     * that will be used for react-hook-form and not neccessarily
-     * attached to the DOM
-     */
-    const name = nameProp ? nameProp : `generatedName--${id}`;
-    return { name };
-}
-
-/**
- * Given an array of refs, merge them into a single ref callback.
- * This is useful for cases where you need to pass a multiple refs to a component.
- */
-function mergeRefs(refs) {
-    return value => {
-        refs.forEach(ref => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-}
-
 /**
  * Hook used to manage the form state of a field through react-hook-form
  */
@@ -458,4 +198,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, formFieldStyles as l, FormFieldPostFix as m, mergeRefs as n, useAtlantisFormField as u };
+export { FormField as F, useAtlantisFormFieldActions as a, useAtlantisReactHookForm as b, useAtlantisFormField as u };

package/dist/InputDate/index.cjs

@@ -23,6 +23,7 @@ require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
+require('../mergeRefs-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');

package/dist/InputDate/index.mjs

@@ -1,6 +1,6 @@
 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';
+import { F as FormField } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -21,6 +21,7 @@ import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
+import '../mergeRefs-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';

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();

package/dist/InputText/index.mjs

@@ -1,20 +1,21 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, b as useAtlantisFormFieldName, n as mergeRefs, l as formFieldStyles, f as FormFieldWrapper, 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';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { u as useAtlantisFormFieldName, m as mergeRefs, h as formFieldStyles, c as FormFieldWrapper, 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';
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.

package/dist/InputTime/index.cjs

@@ -3,13 +3,14 @@
 var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var debounce = require('../debounce-cjs.js');
-var FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('classnames');
 require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var omit = require('../omit-cjs.js');
+var FormField = require('../FormField-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('../_commonjsHelpers-cjs.js');
@@ -302,12 +303,12 @@ function InputTimeRebuilt(_a) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
     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: FormField.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, 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))));
+    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), 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, 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);
-    const mergedRef = FormField.mergeRefs([internalRef, inputRef]);
+    const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
     const wrapperRef = React.useRef(null);
     return { internalRef, mergedRef, wrapperRef };
 }

package/dist/InputTime/index.mjs

@@ -1,13 +1,14 @@
 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 { f as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, k as FormField } from '../FormField-es.js';
+import { c as FormFieldWrapper, h as formFieldStyles, m as mergeRefs } from '../mergeRefs-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { o as omit } from '../omit-es.js';
+import { F as FormField } from '../FormField-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '../_commonjsHelpers-es.js';