@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/FormField-BTV2b0gy.js

@@ -0,0 +1,296 @@
+import { _ as __rest } from './tslib.es6-Bu_PBg9i.js';
+import React, { useRef, useState, useEffect, useId, useImperativeHandle } from 'react';
+import { useFormContext, useForm, Controller } from 'react-hook-form';
+import classnames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import { tokens } from '@jobber/design';
+import { B as Button } from './Button-DjFrVgPj.js';
+import { I as Icon } from './Icon-GaU33tZU.js';
+import { T as Text } from './Text-C3-8gHkD.js';
+import { u as useFormFieldFocus } from './useFormFieldFocus-CjqwY0nh.js';
+import { I as InputValidation } from './InputValidation-CM_L0IJg.js';
+import { S as Spinner } from './Spinner-Bg1QOlTK.js';
+
+var styles$1 = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","horizontalWrapper":"q7AxfhwVVBs-","textarea":"mgPacJ6Z71Y-","safari":"g82RTxBqooQ-","timeInputLabel":"YhserUiOeFE-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","text":"e4VYDAkWHAg-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-","toolbar":"_3GtIRFCkZMg-"};
+
+var useShowClear$1 = {};
+
+Object.defineProperty(useShowClear$1, "__esModule", { value: true });
+var useShowClear_2 = useShowClear$1.useShowClear = void 0;
+function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+    if (multiline && clearable !== "never") {
+        throw new Error("Multiline inputs can not be clearable");
+    }
+    // Do not show if there is no value
+    if (!hasValue || clearable === "never" || disabled) {
+        return false;
+    }
+    switch (clearable) {
+        case "while-editing":
+            return focused;
+        case "always":
+            return true;
+    }
+}
+useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
+
+function AffixLabel({ label, variation = "prefix", labelRef, }) {
+    const affixLabelClass = classnames(styles$1.affixLabel, {
+        [styles$1.suffix]: variation === "suffix",
+    });
+    return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+}
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+    const affixIconClass = classnames(styles$1.affixIcon, {
+        [styles$1.suffix]: variation === "suffix",
+        [styles$1.hasAction]: onClick,
+    });
+    const iconSize = size === "small" ? "small" : "base";
+    if (!icon)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.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.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+}
+
+function FormFieldDescription({ id, description, }) {
+    return (React.createElement("div", { id: id, className: styles$1.description },
+        React.createElement(Text, { size: "small", variation: "subdued" }, description)));
+}
+
+var styles = {"clearInput":"t1fFX8kDJh8-"};
+
+function ClearAction({ onClick }) {
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
+        React.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;
+}
+
+// eslint-disable-next-line max-statements
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", wrapperRef, }) {
+    const isSafari = useIsSafari();
+    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
+        [styles$1.miniLabel]: (placeholder && value !== "") ||
+            (placeholder && type === "select") ||
+            // Naively assume that if the the type is tel, it is the InputPhoneNumber
+            (placeholder && type === "tel"),
+        [styles$1.text]: type === "textarea" || type === "text",
+        [styles$1.textarea]: type === "textarea",
+        [styles$1.safari]: isSafari && type === "textarea",
+        [styles$1.select]: type === "select",
+        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [styles$1.disabled]: disabled,
+        [styles$1.maxLength]: maxLength,
+        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+    });
+    const containerClasses = classnames(styles$1.container, {
+        [styles$1.inline]: inline,
+    });
+    const wrapperInlineStyle = {
+        ["--formField-maxLength"]: maxLength || max,
+    };
+    const prefixRef = useRef();
+    const suffixRef = useRef();
+    const [labelStyle, setLabelStyle] = useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    });
+    useEffect(() => {
+        setLabelStyle(getAffixPaddding);
+    }, [value]);
+    const { focused } = useFormFieldFocus({ wrapperRef });
+    const showClear = useShowClear_2({
+        clearable,
+        multiline: type === "textarea",
+        focused,
+        hasValue: Boolean(value),
+        disabled,
+    });
+    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("div", { className: styles$1.horizontalWrapper },
+                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React.createElement("div", { className: styles$1.inputWrapper },
+                    placeholder && (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                            ? labelStyle
+                            : undefined }, placeholder)),
+                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: -1 }, children),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
+                showClear && React.createElement(ClearAction, { onClick: onClear }),
+                (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size })))),
+            React.createElement(AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+                    duration: tokens["timing-base"] / 1000,
+                    ease: "easeInOut",
+                }, tabIndex: -1 },
+                React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar))))),
+        description && !inline && (React.createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
+        error && !inline && React.createElement(InputValidation, { message: error })));
+    function getAffixPaddding() {
+        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 ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
+            const { offsetWidth } = prefixRef.current;
+            newPadding.paddingLeft = offset(offsetWidth);
+        }
+        if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
+            const { offsetWidth } = suffixRef.current;
+            newPadding.paddingRight = offset(offsetWidth);
+        }
+        function offset(width) {
+            return `calc(${width}px + var(--space-smallest)`;
+        }
+        return newPadding;
+    }
+}
+
+function FormFieldPostFix({ variation }) {
+    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon, { name: "arrowDown" })) : (React.createElement(Spinner, { size: "small" }))));
+}
+
+// Added 13th statement to accommodate getErrorMessage function
+/*eslint max-statements: ["error", 13]*/
+function FormField(props) {
+    var _a, _b;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
+    const { control, formState: { errors }, setValue, watch, } = useFormContext() != undefined
+        ? useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            useForm({ mode: "onTouched" });
+    const [identifier] = useState(useId());
+    const [descriptionIdentifier] = useState(`descriptionUUID--${useId()}`);
+    /**
+     * 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 [controlledName] = useState(name ? name : `generatedName--${identifier}`);
+    useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    useImperativeHandle(actionsRef, () => ({
+        setValue: newValue => {
+            setValue(controlledName, newValue, { shouldValidate: true });
+        },
+    }));
+    const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
+    const error = getErrorMessage();
+    useEffect(() => handleValidation(), [error]);
+    return (React.createElement(Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = __rest(_b, ["onChange", "onBlur", "name"]);
+            const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles$1.input, name: (validations || name) && controllerName, 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 });
+            return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), 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" })));
+                    case "textarea":
+                        return (React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
+                    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: inputRef, onKeyUp: onKeyUp })),
+                            loading && React.createElement(FormFieldPostFix, { variation: "spinner" }),
+                            children));
+                }
+            }
+            function handleClear() {
+                var _a;
+                handleBlur();
+                setValue(controlledName, "", { shouldValidate: true });
+                onChange && onChange("");
+                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            function handleChange(event) {
+                let newValue;
+                newValue = event.currentTarget.value;
+                if (type === "number" && newValue.length > 0) {
+                    newValue = parseFloat(newValue);
+                }
+                onChange && onChange(newValue, event);
+                onControllerChange(event);
+            }
+            function handleKeyDown(event) {
+                if (!onEnter)
+                    return;
+                if (event.key !== "Enter")
+                    return;
+                if (event.shiftKey || event.ctrlKey)
+                    return;
+                event.preventDefault();
+                onEnter && onEnter(event);
+            }
+            function handleFocus(event) {
+                const target = event.currentTarget;
+                if (target.select) {
+                    setTimeout(() => readonly && target.select());
+                }
+                onFocus && onFocus();
+            }
+            function handleBlur() {
+                onBlur && onBlur();
+                onControllerBlur();
+            }
+        } }));
+    function getErrorMessage() {
+        if (typeof message === "string") {
+            return message;
+        }
+        return "";
+    }
+    function handleValidation() {
+        onValidation && onValidation(error);
+    }
+}
+function setAutocomplete(autocompleteSetting) {
+    if (autocompleteSetting === true) {
+        return undefined;
+    }
+    else if (autocompleteSetting === false) {
+        return "off";
+    }
+    return autocompleteSetting;
+}
+
+export { FormField as F };

package/dist/FormField-CEojfV6Q.js

@@ -0,0 +1,298 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-6AwvlbWV.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var classnames = require('classnames');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+var Button = require('./Button-CvQJyw1M.js');
+var Icon = require('./Icon-fa-Ii8qc.js');
+var Text = require('./Text-CuGgzpie.js');
+var useFormFieldFocus = require('./useFormFieldFocus-vUhlDUFH.js');
+var InputValidation = require('./InputValidation-BjitowrV.js');
+var Spinner = require('./Spinner-b5Q8KXRQ.js');
+
+var styles$1 = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","horizontalWrapper":"q7AxfhwVVBs-","textarea":"mgPacJ6Z71Y-","safari":"g82RTxBqooQ-","timeInputLabel":"YhserUiOeFE-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","text":"e4VYDAkWHAg-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-","toolbar":"_3GtIRFCkZMg-"};
+
+var useShowClear$1 = {};
+
+Object.defineProperty(useShowClear$1, "__esModule", { value: true });
+var useShowClear_2 = useShowClear$1.useShowClear = void 0;
+function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+    if (multiline && clearable !== "never") {
+        throw new Error("Multiline inputs can not be clearable");
+    }
+    // Do not show if there is no value
+    if (!hasValue || clearable === "never" || disabled) {
+        return false;
+    }
+    switch (clearable) {
+        case "while-editing":
+            return focused;
+        case "always":
+            return true;
+    }
+}
+useShowClear_2 = useShowClear$1.useShowClear = useShowClear;
+
+function AffixLabel({ label, variation = "prefix", labelRef, }) {
+    const affixLabelClass = classnames(styles$1.affixLabel, {
+        [styles$1.suffix]: variation === "suffix",
+    });
+    return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+}
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+    const affixIconClass = classnames(styles$1.affixIcon, {
+        [styles$1.suffix]: variation === "suffix",
+        [styles$1.hasAction]: onClick,
+    });
+    const iconSize = size === "small" ? "small" : "base";
+    if (!icon)
+        return React.createElement(React.Fragment, 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, }) {
+    return (React.createElement("div", { id: id, className: styles$1.description },
+        React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)));
+}
+
+var styles = {"clearInput":"t1fFX8kDJh8-"};
+
+function ClearAction({ onClick }) {
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
+        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;
+}
+
+// eslint-disable-next-line max-statements
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", wrapperRef, }) {
+    const isSafari = useIsSafari();
+    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
+        [styles$1.miniLabel]: (placeholder && value !== "") ||
+            (placeholder && type === "select") ||
+            // Naively assume that if the the type is tel, it is the InputPhoneNumber
+            (placeholder && type === "tel"),
+        [styles$1.text]: type === "textarea" || type === "text",
+        [styles$1.textarea]: type === "textarea",
+        [styles$1.safari]: isSafari && type === "textarea",
+        [styles$1.select]: type === "select",
+        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [styles$1.disabled]: disabled,
+        [styles$1.maxLength]: maxLength,
+        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+    });
+    const containerClasses = classnames(styles$1.container, {
+        [styles$1.inline]: inline,
+    });
+    const wrapperInlineStyle = {
+        ["--formField-maxLength"]: maxLength || max,
+    };
+    const prefixRef = React.useRef();
+    const suffixRef = React.useRef();
+    const [labelStyle, setLabelStyle] = React.useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    });
+    React.useEffect(() => {
+        setLabelStyle(getAffixPaddding);
+    }, [value]);
+    const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
+    const showClear = useShowClear_2({
+        clearable,
+        multiline: type === "textarea",
+        focused,
+        hasValue: Boolean(value),
+        disabled,
+    });
+    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("div", { className: styles$1.horizontalWrapper },
+                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React.createElement("div", { className: styles$1.inputWrapper },
+                    placeholder && (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                            ? labelStyle
+                            : undefined }, placeholder)),
+                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: -1 }, children),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
+                showClear && React.createElement(ClearAction, { onClick: onClear }),
+                (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size })))),
+            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: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar))))),
+        description && !inline && (React.createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
+        error && !inline && React.createElement(InputValidation.InputValidation, { message: error })));
+    function getAffixPaddding() {
+        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 ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
+            const { offsetWidth } = prefixRef.current;
+            newPadding.paddingLeft = offset(offsetWidth);
+        }
+        if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
+            const { offsetWidth } = suffixRef.current;
+            newPadding.paddingRight = offset(offsetWidth);
+        }
+        function offset(width) {
+            return `calc(${width}px + var(--space-smallest)`;
+        }
+        return newPadding;
+    }
+}
+
+function FormFieldPostFix({ variation }) {
+    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+}
+
+// Added 13th statement to accommodate getErrorMessage function
+/*eslint max-statements: ["error", 13]*/
+function FormField(props) {
+    var _a, _b;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
+    const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    const [identifier] = React.useState(React.useId());
+    const [descriptionIdentifier] = React.useState(`descriptionUUID--${React.useId()}`);
+    /**
+     * 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 [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    React.useImperativeHandle(actionsRef, () => ({
+        setValue: newValue => {
+            setValue(controlledName, newValue, { shouldValidate: true });
+        },
+    }));
+    const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
+    const error = getErrorMessage();
+    React.useEffect(() => handleValidation(), [error]);
+    return (React.createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "onBlur", "name"]);
+            const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles$1.input, name: (validations || name) && controllerName, 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 });
+            return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), 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" })));
+                    case "textarea":
+                        return (React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
+                    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: inputRef, onKeyUp: onKeyUp })),
+                            loading && React.createElement(FormFieldPostFix, { variation: "spinner" }),
+                            children));
+                }
+            }
+            function handleClear() {
+                var _a;
+                handleBlur();
+                setValue(controlledName, "", { shouldValidate: true });
+                onChange && onChange("");
+                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            function handleChange(event) {
+                let newValue;
+                newValue = event.currentTarget.value;
+                if (type === "number" && newValue.length > 0) {
+                    newValue = parseFloat(newValue);
+                }
+                onChange && onChange(newValue, event);
+                onControllerChange(event);
+            }
+            function handleKeyDown(event) {
+                if (!onEnter)
+                    return;
+                if (event.key !== "Enter")
+                    return;
+                if (event.shiftKey || event.ctrlKey)
+                    return;
+                event.preventDefault();
+                onEnter && onEnter(event);
+            }
+            function handleFocus(event) {
+                const target = event.currentTarget;
+                if (target.select) {
+                    setTimeout(() => readonly && target.select());
+                }
+                onFocus && onFocus();
+            }
+            function handleBlur() {
+                onBlur && onBlur();
+                onControllerBlur();
+            }
+        } }));
+    function getErrorMessage() {
+        if (typeof message === "string") {
+            return message;
+        }
+        return "";
+    }
+    function handleValidation() {
+        onValidation && onValidation(error);
+    }
+}
+function setAutocomplete(autocompleteSetting) {
+    if (autocompleteSetting === true) {
+        return undefined;
+    }
+    else if (autocompleteSetting === false) {
+        return "off";
+    }
+    return autocompleteSetting;
+}
+
+exports.FormField = FormField;

package/dist/FormatDate/{index.js → index.cjs}

@@ -1,8 +1,6 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var FormatDate = require('../FormatDate-70ea5b43.js');
+var FormatDate = require('../FormatDate-CMk1Vkpz.js');
 require('react');
 
 

package/dist/FormatDate/index.mjs

@@ -0,0 +1,2 @@
+export { F as FormatDate, s as strFormatDate } from '../FormatDate-BblXtoxM.js';
+import 'react';

package/dist/FormatDate-BblXtoxM.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function FormatDate({ date: inputDate, showYear = true, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React.createElement(React.Fragment, null, strFormatDate(dateObject, showYear));
+}
+function strFormatDate(date, showYear = true) {
+    let formatOptions = {
+        month: "short",
+        day: "numeric",
+    };
+    if (showYear) {
+        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, formatOptions);
+}
+
+export { FormatDate as F, strFormatDate as s };

package/dist/{FormatDate-70ea5b43.js → FormatDate-CMk1Vkpz.js}

@@ -2,10 +2,6 @@
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function FormatDate({ date: inputDate, showYear = true, }) {
     let dateObject;
     if (inputDate instanceof Date) {
@@ -17,7 +13,7 @@ function FormatDate({ date: inputDate, showYear = true, }) {
     else {
         dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
+    return React.createElement(React.Fragment, null, strFormatDate(dateObject, showYear));
 }
 function strFormatDate(date, showYear = true) {
     let formatOptions = {