@jobber/components 7.5.0 → 7.7.0

package/dist/Autocomplete/index.cjs

@@ -13,7 +13,7 @@ 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 FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../Button-cjs.js');
@@ -22,11 +22,12 @@ require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../Content-cjs.js');
+require('../FormField-cjs.js');
 require('framer-motion');
+require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-router-dom');
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
@@ -1209,7 +1210,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             }
         }
     }, [setReferenceElement, props.multiple]);
-    const mergedInputRef = React.useMemo(() => FormField.mergeRefs([
+    const mergedInputRef = React.useMemo(() => mergeRefs.mergeRefs([
         referenceInputRef,
         internalInputRef,
         forwardedRef,
@@ -1299,7 +1300,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(FormField.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(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: () => {
                     var _a;
                     clearAll();
                     (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1583,7 +1584,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: FormField.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React.createElement(InputText_index.InputText, Object.assign({ ref: mergeRefs.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
         React.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);

package/dist/Autocomplete/index.mjs

@@ -11,7 +11,7 @@ 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 { n as mergeRefs, f as FormFieldWrapper } from '../FormField-es.js';
+import { m as mergeRefs, c as FormFieldWrapper } from '../mergeRefs-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import '../Button-es.js';
@@ -20,11 +20,12 @@ import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../Content-es.js';
+import '../FormField-es.js';
 import 'framer-motion';
+import 'react-router-dom';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-router-dom';
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */

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

@@ -7,6 +7,7 @@ require('@jobber/design');
 require('@jobber/hooks');
 require('../../../InputText/index.cjs');
 require('../../../FormField-cjs.js');
+require('../../../mergeRefs-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');

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

@@ -5,6 +5,7 @@ import '@jobber/design';
 import '@jobber/hooks';
 import '../../../InputText/index.mjs';
 import '../../../FormField-es.js';
+import '../../../mergeRefs-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';

package/dist/DataList/index.cjs

@@ -81,6 +81,7 @@ require('../DataListStickyHeader-cjs.js');
 require('../DataListSearch-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');
+require('../mergeRefs-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('react-hook-form');

package/dist/DataList/index.mjs

@@ -79,6 +79,7 @@ import '../DataListStickyHeader-es.js';
 import '../DataListSearch-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
+import '../mergeRefs-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import 'react-hook-form';

package/dist/DataTable/index.cjs

@@ -10,20 +10,8 @@ require('@jobber/hooks');
 require('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
-require('../Select/index.cjs');
-require('../omit-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
-require('../identity-cjs.js');
-require('../_getTag-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
-require('../FormField-cjs.js');
+require('../Select-cjs.js');
+require('../mergeRefs-cjs.js');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/DataTable/index.mjs

@@ -8,20 +8,8 @@ import '@jobber/hooks';
 import '../Glimmer-es.js';
 import '../tslib.es6-es.js';
 import '../Content-es.js';
-import '../Select/index.mjs';
-import '../omit-es.js';
-import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
-import '../identity-es.js';
-import '../_getTag-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
-import '../FormField-es.js';
+import '../Select-es.js';
+import '../mergeRefs-es.js';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';

package/dist/DataTable-cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var Glimmer = require('./Glimmer-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
-var Select_index = require('./Select/index.cjs');
+var Select = require('./Select-cjs.js');
 var Button = require('./Button-cjs.js');
 var Text = require('./Text-cjs.js');
 var DataTableTable = require('./DataTableTable-cjs.js');
@@ -111,9 +111,9 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
         React.createElement("div", { className: styles$1.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React.createElement("div", { className: styles$1.paginationNav },
             React.createElement("div", { className: styles$1.paginationSelect },
-                React.createElement(Select_index.Select, { value: table.getState().pagination.pageSize, onChange: value => {
+                React.createElement(Select.Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
-                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Select_index.Option, { key: numOfPages, value: numOfPages }, numOfPages)))),
+                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Select.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React.createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
             React.createElement("div", { className: styles$1.paginationButtons },
                 React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {

package/dist/DataTable-es.js

@@ -4,7 +4,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
-import { Select, Option as SelectOption } from './Select/index.mjs';
+import { a as Select, S as SelectOption } from './Select-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Text } from './Text-es.js';
 import { S as SortIcon, a as SortDirection, m as DataTableTable, f as DataTableHeader, g as DataTableHeaderCell, j as DataTableRow, c as DataTableCell, k as DataTableRowActions, D as DataTableActions, b as DataTableBody, d as DataTableContainer, l as DataTableSortableHeader, e as DataTableFooter, h as DataTablePagination, i as DataTablePaginationButton } from './DataTableTable-es.js';

package/dist/FormField/index.cjs

@@ -1,13 +1,15 @@
 'use strict';
 
 var FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('react');
+require('classnames');
+require('../tslib.es6-cjs.js');
+require('react-hook-form');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
-require('../tslib.es6-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
@@ -15,21 +17,20 @@ require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-hook-form');
 
 
 
-exports.AffixIcon = FormField.AffixIcon;
-exports.AffixLabel = FormField.AffixLabel;
 exports.FormField = FormField.FormField;
-exports.FormFieldInputHorizontalWrapper = FormField.FormFieldInputHorizontalWrapper;
-exports.FormFieldInputWrapperStyles = FormField.FormFieldInputWrapperStyles;
-exports.FormFieldLabel = FormField.FormFieldLabel;
-exports.FormFieldWrapper = FormField.FormFieldWrapper;
-exports.FormFieldWrapperMain = FormField.FormFieldWrapperMain;
-exports.FormFieldWrapperToolbar = FormField.FormFieldWrapperToolbar;
 exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
-exports.useAtlantisFormFieldName = FormField.useAtlantisFormFieldName;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
-exports.useFormFieldWrapperStyles = FormField.useFormFieldWrapperStyles;
+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.useAtlantisFormFieldName = mergeRefs.useAtlantisFormFieldName;
+exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;

package/dist/FormField/index.mjs

@@ -1,11 +1,13 @@
-export { A as AffixIcon, i as AffixLabel, k as FormField, F as FormFieldInputHorizontalWrapper, d as FormFieldInputWrapperStyles, e as FormFieldLabel, f as FormFieldWrapper, g as FormFieldWrapperMain, h as FormFieldWrapperToolbar, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactHookForm, j as useFormFieldWrapperStyles } from '../FormField-es.js';
+export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from '../FormField-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 useAtlantisFormFieldName, g as useFormFieldWrapperStyles } from '../mergeRefs-es.js';
 import 'react';
+import 'classnames';
+import '../tslib.es6-es.js';
+import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
-import '../tslib.es6-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
@@ -13,4 +15,3 @@ import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-hook-form';

package/dist/FormField-cjs.js

@@ -1,244 +1,11 @@
 'use strict';
 
 var React = require('react');
-var jobberHooks = require('@jobber/hooks');
-var framerMotion = require('framer-motion');
-var design = require('@jobber/design');
+var mergeRefs = require('./mergeRefs-cjs.js');
 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 tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('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.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" }))));
-}
-
 /**
  * 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
@@ -299,8 +66,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(formFieldStyles.input, {
-            [formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(mergeRefs.formFieldStyles.input, {
+            [mergeRefs.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 });
@@ -311,33 +78,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
  */
@@ -363,7 +103,7 @@ function useAtlantisReactHookForm({ actionsRef, name, defaultValue, value, valid
             setValue(name, value);
         }
     }, [value, watch(name)]);
-    const inputRefs = mergeRefs([inputRef, fieldRef]);
+    const inputRefs = mergeRefs.mergeRefs([inputRef, fieldRef]);
     return {
         inputRefs,
         useControllerField,
@@ -385,7 +125,7 @@ function FormField(props) {
 function FormFieldInternal(props) {
     var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
-    const { name } = useAtlantisFormFieldName({ id, nameProp });
+    const { name } = mergeRefs.useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
         actionsRef,
         name,
@@ -433,19 +173,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(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
+    return (React.createElement(mergeRefs.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(FormFieldPostFix, { variation: "select" })));
+                    React.createElement(mergeRefs.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(FormFieldPostFix, { variation: "spinner" }),
+                    loading && React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner" }),
                     children));
         }
     }
@@ -460,20 +200,7 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-exports.AffixIcon = AffixIcon;
-exports.AffixLabel = AffixLabel;
 exports.FormField = FormField;
-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.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
-exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
 exports.useAtlantisReactHookForm = useAtlantisReactHookForm;
-exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;