@jobber/components 7.13.2 → 7.14.0

package/dist/docs/InputPhoneNumber/InputPhoneNumber.md

@@ -44,28 +44,47 @@ edits the input.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `onChange` | `(value: string) => void` | Yes | — | onChange handler that provides the new value (or event) |
-| `value` | `string` | Yes | — | Set the component to the given value. |
-| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
-| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
+| `onChange` | `(value: string, event?: ChangeEvent<HTMLInputElement>) => void` | Yes | — | Custom onChange handler that provides the new value as the first argument. |
+| `value` | `string` | Yes | — | The current value of the input. |
+| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
+| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
+| `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
+| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
+| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
+| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
+| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
+| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
+| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
+| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
+| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
+| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
+| `id` | `string` | No | — | The unique identifier for the input element. |
+| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
+| `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
-| `pattern` | `string` | No | `"(***) ***-****"` | A pattern to specify the format to display the phone number in. For example if you want to display the format for [De... |
+| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Blur event handler. |
+| `onClick` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Click event handler. |
+| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
+| `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Focus event handler. |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key down event handler. |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key up event handler. |
+| `onMouseDown` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
+| `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
+| `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
+| `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
+| `pattern` | `string` | No | `(***) ***-****` | A pattern to specify the format to display the phone number in. For example if you want to display the format for [De... |
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
-| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
-| `required` | `boolean` | No | — | Shows a "required" validation message when the component is left empty. |
-| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
+| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `required` | `boolean` | No | — | Whether the input is required before form submission. |
+| `role` | `string` | No | — | Role attribute for accessibility. |
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
-| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
+| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
+| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -11,14 +11,13 @@ The following components have a v2 implementation. **Always pass
 `version={2}`**. Never generate v1 usage for these components — v1 is
 deprecated.
 
-| Component        | Import                                                                   | v2 prop                                           |
-| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
-| Autocomplete     | `import { Autocomplete } from "@jobber/components/Autocomplete"`         | `version={2}` — fully controlled, async support   |
-| InputNumber      | `import { InputNumber } from "@jobber/components/InputNumber"`           | `version={2}`                                     |
-| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}`                                     |
-| InputText        | `import { InputText } from "@jobber/components/InputText"`               | `version={2}`                                     |
-| InputTime        | `import { InputTime } from "@jobber/components/InputTime"`               | `version={2}`                                     |
-| Modal            | `import { Modal } from "@jobber/components/Modal"`                       | `version={2}` — uses `Modal.Provider` composition |
+| Component    | Import                                                           | v2 prop                                           |
+| ------------ | ---------------------------------------------------------------- | ------------------------------------------------- |
+| Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support   |
+| InputNumber  | `import { InputNumber } from "@jobber/components/InputNumber"`   | `version={2}`                                     |
+| InputText    | `import { InputText } from "@jobber/components/InputText"`       | `version={2}`                                     |
+| InputTime    | `import { InputTime } from "@jobber/components/InputTime"`       | `version={2}`                                     |
+| Modal        | `import { Modal } from "@jobber/components/Modal"`               | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use
 

package/dist/index.cjs

@@ -44,7 +44,7 @@ var Flex = require('./Flex-cjs.js');
 var Form = require('./Form-cjs.js');
 var FormField = require('./FormField-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
-var mergeRefs = require('./mergeRefs-cjs.js');
+var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
 var FormatDate = require('./FormatDate-cjs.js');
 var FormatEmail = require('./FormatEmail-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
@@ -63,7 +63,7 @@ var InputFile = require('./InputFile-cjs.js');
 var InputGroup = require('./InputGroup-cjs.js');
 var InputNumber_index = require('./InputNumber/index.cjs');
 var InputPassword = require('./InputPassword-cjs.js');
-var InputPhoneNumber_index = require('./InputPhoneNumber/index.cjs');
+var InputPhoneNumber = require('./InputPhoneNumber-cjs.js');
 var InputText_index = require('./InputText/index.cjs');
 var InputTime_index = require('./InputTime/index.cjs');
 var InputValidation = require('./InputValidation-cjs.js');
@@ -119,6 +119,7 @@ require('classnames');
 require('./maxHeight-cjs.js');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
+require('./mergeRefs-cjs.js');
 require('./filterDataAttributes-cjs.js');
 require('color');
 require('react-router-dom');
@@ -265,15 +266,15 @@ 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;
 exports.FormatDate = FormatDate.FormatDate;
 exports.strFormatDate = FormatDate.strFormatDate;
 exports.FormatEmail = FormatEmail.FormatEmail;
@@ -300,7 +301,7 @@ exports.useInputFileContentContext = InputFile.useInputFileContentContext;
 exports.InputGroup = InputGroup.InputGroup;
 exports.InputNumber = InputNumber_index.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;
-exports.InputPhoneNumber = InputPhoneNumber_index.InputPhoneNumber;
+exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;
 exports.InputText = InputText_index.InputText;
 exports.InputTime = InputTime_index.InputTime;
 exports.InputValidation = InputValidation.InputValidation;

package/dist/index.mjs

@@ -42,7 +42,7 @@ export { F as Flex } from './Flex-es.js';
 export { F as Form } from './Form-es.js';
 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';
 export { F as FormatDate, s as strFormatDate } from './FormatDate-es.js';
 export { F as FormatEmail } from './FormatEmail-es.js';
 export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
@@ -61,7 +61,7 @@ export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as us
 export { I as InputGroup } from './InputGroup-es.js';
 export { InputNumber } from './InputNumber/index.mjs';
 export { I as InputPassword } from './InputPassword-es.js';
-export { InputPhoneNumber } from './InputPhoneNumber/index.mjs';
+export { I as InputPhoneNumber } from './InputPhoneNumber-es.js';
 export { InputText } from './InputText/index.mjs';
 export { InputTime } from './InputTime/index.mjs';
 export { I as InputValidation } from './InputValidation-es.js';
@@ -117,6 +117,7 @@ import 'classnames';
 import './maxHeight-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';
+import './mergeRefs-es.js';
 import './filterDataAttributes-es.js';
 import 'color';
 import 'react-router-dom';

package/dist/mergeRefs-cjs.js

@@ -1,242 +1,5 @@
 '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" }))));
-}
-
 /**
  * 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.
@@ -254,15 +17,4 @@ function mergeRefs(refs) {
     };
 }
 
-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.mergeRefs = mergeRefs;
-exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;