@jobber/components 7.13.1 → 7.14.0

package/dist/Autocomplete/index.cjs

@@ -13,9 +13,10 @@ var Typography = require('../Typography-cjs.js');
 var Icon = require('../Icon-cjs.js');
 var Glimmer = require('../Glimmer-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
-var mergeRefs = require('../mergeRefs-cjs.js');
+var FormFieldPostFix = require('../FormFieldPostFix-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('../Button-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
@@ -1302,7 +1303,7 @@ function MultipleSelectionLayout({ selectedValues, inputValue, disabled, error,
     }, []);
     return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt", onFocus: handleFocusIn, onBlur: handleFocusOut },
         React.createElement("div", { className: styles$1.multiSelectField, "data-testid": "ATL-AutocompleteRebuilt-multiSelectContainer" },
-            React.createElement(mergeRefs.FormFieldWrapper, { disabled: disabled, size: sizeProp ? sizeProp : undefined, error: (_a = error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(error || invalid), identifier: inputId, descriptionIdentifier: descriptionId, description: description, clearable: clearable !== null && clearable !== void 0 ? clearable : "never", onClear: () => {
+            React.createElement(FormFieldPostFix.FormFieldWrapper, { disabled: disabled, size: sizeProp ? sizeProp : undefined, error: (_a = error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(error || invalid), identifier: inputId, descriptionIdentifier: descriptionId, description: description, clearable: clearable !== null && clearable !== void 0 ? clearable : "never", onClear: () => {
                     var _a;
                     clearAll();
                     (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();

package/dist/Autocomplete/index.mjs

@@ -11,9 +11,10 @@ import { T as Typography } from '../Typography-es.js';
 import { I as Icon } from '../Icon-es.js';
 import { G as Glimmer } from '../Glimmer-es.js';
 import { InputText } from '../InputText/index.mjs';
-import { m as mergeRefs, c as FormFieldWrapper } from '../mergeRefs-es.js';
+import { c as FormFieldWrapper } from '../FormFieldPostFix-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 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 '../floating-ui.utils.dom-es.js';

package/dist/DataList/components/DataListSearch/index.cjs

@@ -7,7 +7,7 @@ require('@jobber/design');
 require('@jobber/hooks');
 require('../../../InputText/index.cjs');
 require('../../../FormField-cjs.js');
-require('../../../mergeRefs-cjs.js');
+require('../../../FormFieldPostFix-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');
@@ -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('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');

package/dist/DataList/components/DataListSearch/index.mjs

@@ -5,7 +5,7 @@ import '@jobber/design';
 import '@jobber/hooks';
 import '../../../InputText/index.mjs';
 import '../../../FormField-es.js';
-import '../../../mergeRefs-es.js';
+import '../../../FormFieldPostFix-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';
@@ -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 '../../../DataListContext-es.js';
 import '../../../noop-es.js';

package/dist/DataList/index.cjs

@@ -82,11 +82,12 @@ require('../DataListStickyHeader-cjs.js');
 require('../DataListSearch-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 require('../DataListEmptyState-cjs.js');
 require('../DataListLoadMore-cjs.js');
 require('../DataListAction-cjs.js');

package/dist/DataList/index.mjs

@@ -80,11 +80,12 @@ import '../DataListStickyHeader-es.js';
 import '../DataListSearch-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';
 import '../DataListEmptyState-es.js';
 import '../DataListLoadMore-es.js';
 import '../DataListAction-es.js';

package/dist/DataTable/index.cjs

@@ -11,7 +11,7 @@ require('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
 require('../Select-cjs.js');
-require('../mergeRefs-cjs.js');
+require('../FormFieldPostFix-cjs.js');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
@@ -24,6 +24,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/DataTable/index.mjs

@@ -9,7 +9,7 @@ import '../Glimmer-es.js';
 import '../tslib.es6-es.js';
 import '../Content-es.js';
 import '../Select-es.js';
-import '../mergeRefs-es.js';
+import '../FormFieldPostFix-es.js';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
@@ -22,4 +22,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/FormField/index.cjs

@@ -2,11 +2,12 @@
 
 var FormField = require('../FormField-cjs.js');
 var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
-var mergeRefs = require('../mergeRefs-cjs.js');
+var FormFieldPostFix = require('../FormFieldPostFix-cjs.js');
 require('react');
 require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
+require('../mergeRefs-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -26,12 +27,12 @@ exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName.useAtlantisFormFieldName;
-exports.AffixIcon = mergeRefs.AffixIcon;
-exports.AffixLabel = mergeRefs.AffixLabel;
-exports.FormFieldInputHorizontalWrapper = mergeRefs.FormFieldInputHorizontalWrapper;
-exports.FormFieldInputWrapperStyles = mergeRefs.FormFieldInputWrapperStyles;
-exports.FormFieldLabel = mergeRefs.FormFieldLabel;
-exports.FormFieldWrapper = mergeRefs.FormFieldWrapper;
-exports.FormFieldWrapperMain = mergeRefs.FormFieldWrapperMain;
-exports.FormFieldWrapperToolbar = mergeRefs.FormFieldWrapperToolbar;
-exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;
+exports.AffixIcon = FormFieldPostFix.AffixIcon;
+exports.AffixLabel = FormFieldPostFix.AffixLabel;
+exports.FormFieldInputHorizontalWrapper = FormFieldPostFix.FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = FormFieldPostFix.FormFieldInputWrapperStyles;
+exports.FormFieldLabel = FormFieldPostFix.FormFieldLabel;
+exports.FormFieldWrapper = FormFieldPostFix.FormFieldWrapper;
+exports.FormFieldWrapperMain = FormFieldPostFix.FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = FormFieldPostFix.FormFieldWrapperToolbar;
+exports.useFormFieldWrapperStyles = FormFieldPostFix.useFormFieldWrapperStyles;

package/dist/FormField/index.mjs

@@ -1,10 +1,11 @@
 export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from '../FormField-es.js';
 export { u as useAtlantisFormFieldName } from '../useAtlantisFormFieldName-es.js';
-export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from '../mergeRefs-es.js';
+export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from '../FormFieldPostFix-es.js';
 import 'react';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
+import '../mergeRefs-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';

package/dist/FormField-cjs.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var React = require('react');
-var mergeRefs = require('./mergeRefs-cjs.js');
+var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 var classnames = require('classnames');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('react-hook-form');
+var mergeRefs = require('./mergeRefs-cjs.js');
 
 /**
  * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
@@ -67,8 +68,8 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
  */
 function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(mergeRefs.formFieldStyles.input, {
-            [mergeRefs.formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(FormFieldPostFix.formFieldStyles.input, {
+            [FormFieldPostFix.formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
         }), name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
         !inline && { "aria-describedby": descriptionIdentifier }));
     const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
@@ -174,19 +175,19 @@ function FormFieldInternal(props) {
     // Ensure focus tracking works by providing a wrapperRef when none is passed
     const internalWrapperRef = React.useRef(null);
     const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
-    return (React.createElement(mergeRefs.FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
+    return (React.createElement(FormFieldPostFix.FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
                 return (React.createElement(React.Fragment, null,
                     React.createElement("select", Object.assign({}, fieldProps), children),
-                    React.createElement(mergeRefs.FormFieldPostFix, { variation: "select" })));
+                    React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "select" })));
             case "textarea":
                 return React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRefs }));
             default:
                 return (React.createElement(React.Fragment, null,
                     React.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRefs, onKeyUp: onKeyUp })),
-                    loading && React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner" }),
+                    loading && React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "spinner" }),
                     children));
         }
     }

package/dist/FormField-es.js

@@ -1,9 +1,10 @@
 import React__default, { useEffect, useImperativeHandle, useId, useRef } from 'react';
-import { g as formFieldStyles, m as mergeRefs, 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 classnames from 'classnames';
 import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { useFormContext, useForm, useController } from 'react-hook-form';
+import { m as mergeRefs } from './mergeRefs-es.js';
 
 /**
  * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to

package/dist/FormFieldPostFix-cjs.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+var classnames = require('classnames');
+var Button = require('./Button-cjs.js');
+var Icon = require('./Icon-cjs.js');
+var Text = require('./Text-cjs.js');
+var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
+var InputValidation = require('./InputValidation-cjs.js');
+var Spinner = require('./Spinner-cjs.js');
+
+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.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.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.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.createElement(Icon.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.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
+}
+
+var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
+
+function ClearAction({ onClick, visible, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
+        React.createElement(Icon.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] = React.useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    });
+    React.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 = React.useRef(null);
+    const suffixRef = React.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.useFormFieldFocus({ wrapperRef });
+    const showClear = jobberHooks.useShowClear({
+        clearable,
+        multiline: type === "textarea",
+        focused,
+        hasValue: Boolean(value),
+        disabled,
+        readonly,
+    });
+    const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
+        focused,
+        toolbar,
+        toolbarVisibility,
+    });
+    return (React.createElement("div", { className: containerClasses },
+        React.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
+            React.createElement(FormFieldInputHorizontalWrapper, null,
+                React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React.createElement(FormFieldInputWrapperStyles, null,
+                    (showMiniLabel || !value) && (React.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                            ? labelStyle
+                            : undefined }, placeholder)),
+                    React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React.createElement(FormFieldWrapperMain, null, children),
+                    React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
+                React.createElement(ClearAction, { onClick: onClear, visible: showClear }),
+                React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+            React.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
+        React.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
+        React.createElement(InputValidation.InputValidation, { message: error, visible: !!error && !inline })));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputHorizontalWrapper({ children, }) {
+    return React.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputWrapperStyles({ children, }) {
+    return React.createElement("div", { className: formFieldStyles.inputWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperMain({ children, tabIndex = -1, }) {
+    return (React.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
+}
+function FormFieldLabel({ children, htmlFor, style, external = false, }) {
+    if (!children)
+        return null;
+    return (React.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
+    return (React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+            duration: design.tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+        }, tabIndex: -1 },
+        React.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+}
+
+function FormFieldPostFix({ variation, visible = true, className, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+}
+
+exports.AffixIcon = AffixIcon;
+exports.AffixLabel = AffixLabel;
+exports.FormFieldInputHorizontalWrapper = FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = FormFieldInputWrapperStyles;
+exports.FormFieldLabel = FormFieldLabel;
+exports.FormFieldPostFix = FormFieldPostFix;
+exports.FormFieldWrapper = FormFieldWrapper;
+exports.FormFieldWrapperMain = FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
+exports.formFieldStyles = formFieldStyles;
+exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;