@jobber/components 7.14.3 → 7.15.0

package/dist/FormField/index.cjs

@@ -2,23 +2,24 @@
 
 var FormField = require('../FormField-cjs.js');
 var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
-var FormFieldPostFix = require('../FormFieldPostFix-cjs.js');
+var FormFieldWrapper = require('../FormFieldWrapper-cjs.js');
 require('react');
+require('../FormFieldPostFix-cjs.js');
 require('classnames');
+require('../Icon-cjs.js');
+require('@jobber/design');
+require('../Spinner-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../mergeRefs-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
-require('@jobber/design');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
-require('../Spinner-cjs.js');
 
 
 
@@ -27,12 +28,12 @@ exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName.useAtlantisFormFieldName;
-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;
+exports.AffixIcon = FormFieldWrapper.AffixIcon;
+exports.AffixLabel = FormFieldWrapper.AffixLabel;
+exports.FormFieldInputHorizontalWrapper = FormFieldWrapper.FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = FormFieldWrapper.FormFieldInputWrapperStyles;
+exports.FormFieldLabel = FormFieldWrapper.FormFieldLabel;
+exports.FormFieldWrapper = FormFieldWrapper.FormFieldWrapper;
+exports.FormFieldWrapperMain = FormFieldWrapper.FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = FormFieldWrapper.FormFieldWrapperToolbar;
+exports.useFormFieldWrapperStyles = FormFieldWrapper.useFormFieldWrapperStyles;

package/dist/FormField/index.mjs

@@ -1,19 +1,20 @@
 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 '../FormFieldPostFix-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 '../FormFieldWrapper-es.js';
 import 'react';
+import '../FormFieldPostFix-es.js';
 import 'classnames';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../Spinner-es.js';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import '../mergeRefs-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
-import '@jobber/design';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
-import '../Spinner-es.js';

package/dist/FormField-cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
 var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 var classnames = require('classnames');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
@@ -68,8 +69,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(FormFieldPostFix.formFieldStyles.input, {
-            [FormFieldPostFix.formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(FormFieldWrapper.formFieldStyles.input, {
+            [FormFieldWrapper.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 });
@@ -175,7 +176,7 @@ 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(FormFieldPostFix.FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
+    return (React.createElement(FormFieldWrapper.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":

package/dist/FormField-es.js

@@ -1,5 +1,6 @@
 import React__default, { useEffect, useImperativeHandle, useId, useRef } from 'react';
-import { g as formFieldStyles, c as FormFieldWrapper, h as FormFieldPostFix } from './FormFieldPostFix-es.js';
+import { g as formFieldStyles, c as FormFieldWrapper } from './FormFieldWrapper-es.js';
+import { F 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';

package/dist/FormFieldPostFix-cjs.js

@@ -1,250 +1,15 @@
 '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 FormFieldWrapper = require('./FormFieldWrapper-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" }))));
+    return (React.createElement("span", { className: classnames(FormFieldWrapper.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;

package/dist/FormFieldPostFix-es.js

@@ -1,238 +1,13 @@
-import React__default, { useState, useEffect, useRef } from 'react';
-import { useShowClear } from '@jobber/hooks';
-import { AnimatePresence, motion } from 'framer-motion';
-import { tokens } from '@jobber/design';
+import React__default from 'react';
 import classnames from 'classnames';
-import { B as Button } from './Button-es.js';
+import { g as formFieldStyles } from './FormFieldWrapper-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';
 
-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" }))));
 }
 
-export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, FormFieldInputWrapperStyles as a, FormFieldLabel as b, FormFieldWrapper as c, FormFieldWrapperMain as d, FormFieldWrapperToolbar as e, AffixLabel as f, formFieldStyles as g, FormFieldPostFix as h, useFormFieldWrapperStyles as u };
+export { FormFieldPostFix as F };