@trackunit/react-form-components 1.0.29 → 1.0.31

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, useIsTextTruncated, Heading, Text, Spinner,
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { isValidElement, forwardRef, useMemo, useState, useCallback, useRef, cloneElement, useEffect, useContext, useImperativeHandle } from 'react';
+import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, cloneElement, useEffect, useContext } from 'react';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -18,6 +18,7 @@ import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 
 var defaultTranslations = {
+	"baseInput.copyAction.toolTip": "Copy value",
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
 	"colorField.error.INVALID_HEX_CODE": "Please enter a valid HEX code",
 	"colorField.error.REQUIRED": "This field is required",
@@ -97,15 +98,30 @@ const setupLibraryTranslations = () => {
 const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
     variants: {
         size: {
-            small: ["w-6", "h-6"],
-            medium: ["w-8", "h-8"],
+            small: ["w-6", "h-6", "min-h-0"],
+            medium: ["w-6", "h-6", "min-h-0"],
+            large: ["w-8", "h-8"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaActionContainer = cvaMerge(["flex", "items-center"], {
+    variants: {
+        size: {
+            //I just measured manually the top/bottom spacing
+            //when using the action button inside an input
+            //might need tweaking in the future
+            small: ["m-[1px]"],
+            medium: ["m-[3px]"],
+            large: ["m-[3px]"],
         },
     },
     defaultVariants: {
         size: "medium",
     },
 });
-const cvaActionContainer = cvaMerge(["flex", "items-center", "m-1"]);
 
 /**
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
@@ -113,7 +129,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center", "m-1"]);
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }) => {
+const ActionButton = ({ type, value, dataTestId, size, disabled, className }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -142,52 +158,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
             case "COPY":
                 // Typescript seems to be unable to detect RefObject
                 // as one of the members of the union RefObject | string | null which gives access to the `current` property
-                // eslint-disable-next-line react/prop-types
                 return copyToClipboard(value?.current?.value ?? "");
             default:
                 return null;
         }
     };
-    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: "small" }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
-};
-
-/**
- * Used to compare two React nodes for deep equality.
- */
-const compareReactNodes = (node1, node2) => {
-    // Base case: If both objects are identical, return true.
-    if (node1 === node2) {
-        return true;
-    }
-    // Check if both objects are valid React elements.
-    if (isValidElement(node1) && isValidElement(node2)) {
-        const { type: type1, props: props1, key: key1 } = node1;
-        const { type: type2, props: props2, key: key2 } = node2;
-        if (type1 !== type2 || key1 !== key2) {
-            return false;
-        }
-        return compareReactNodes(props1, props2);
-    }
-    // Check if both objects are objects and not null.
-    if (typeof node1 !== "object" || typeof node2 !== "object" || node1 === null || node2 === null) {
-        return false;
-    }
-    // Get the keys of both objects.
-    const keys1 = Object.keys(node1);
-    const keys2 = Object.keys(node2);
-    // Check if the number of keys is the same.
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    // Iterate through the keys and compare their values recursively.
-    for (const key of keys1) {
-        if (!keys2.includes(key) ||
-            !compareReactNodes(node1[key], node2[key])) {
-            return false;
-        }
-    }
-    // If all checks pass, the objects are deep equal.
-    return true;
+    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: size }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 const cvaInputBase = cvaMerge([
@@ -204,8 +180,9 @@ const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
 const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
-            small: ["h-8"],
-            medium: ["h-10"],
+            small: ["h-7"],
+            medium: ["h-8"],
+            large: ["h-10"],
         },
         disabled: {
             true: cvaInputBaseDisabled(),
@@ -215,6 +192,20 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
             true: cvaInputBaseInvalid(),
             false: [""],
         },
+        isWarning: {
+            true: ["border-warning-600"],
+            false: [""],
+        },
+    },
+    compoundVariants: [
+        {
+            invalid: true,
+            isWarning: true,
+            className: ["border-danger-600"], // Ensures that 'invalid' takes precedence
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
     },
 });
 const cvaInputField = cvaMerge([
@@ -222,18 +213,24 @@ const cvaInputField = cvaMerge([
     "px-3",
     "border-0",
     "bg-transparent",
-    "text-base",
     "text-slate-900",
     "placeholder-slate-400",
     "component-baseInput-border",
+    "text-sm",
+    "truncate",
 ], {
     variants: {
         size: {
-            small: ["py-1"],
-            medium: ["py-2"],
+            small: ["py-0.5", "text-xs"],
+            medium: ["py-1"],
+            large: ["py-2"],
         },
         disabled: {
-            true: ["text-slate-700"],
+            true: ["text-slate-400"],
+            false: [""],
+        },
+        readOnly: {
+            true: ["text-slate-500"],
             false: [""],
         },
         autoFocus: {
@@ -255,6 +252,11 @@ const cvaInputField = cvaMerge([
             prefix: true,
             className: ["ps-4"],
         },
+        {
+            disabled: true,
+            readOnly: true,
+            className: "text-slate-400",
+        },
     ],
 });
 const cvaInputAddon = cvaMerge([
@@ -266,7 +268,15 @@ const cvaInputAddon = cvaMerge([
     "text-slate-500",
     "bg-slate-50",
 ]);
-const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"], {
+    variants: {
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+            large: ["text-sm"],
+        },
+    },
+});
 const cvaInputPrefix = cvaMerge([
     "flex",
     "justify-center",
@@ -285,7 +295,7 @@ const cvaInputPrefix = cvaMerge([
             false: [""],
         },
         addonBefore: {
-            true: ["relative"],
+            true: ["relative", "mr-1"],
             false: [""],
         },
     },
@@ -301,7 +311,7 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
             false: [""],
         },
         actions: {
-            true: ["right-10"],
+            true: ["right-6"],
             false: [""],
         },
     },
@@ -313,41 +323,104 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
         },
     ],
 });
-const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
-const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"], {
     variants: {
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        suffix: {
-            true: ["absolute"],
-            false: [""],
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+            large: ["text-sm"],
         },
     },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            suffix: true,
-            className: ["relative"],
-        },
-    ],
 });
 
+// Renders the "addonAfter" element if provided
+const AddonAfterRenderer = ({ addonAfter, dataTestId, fieldSize, }) => {
+    if (!addonAfter) {
+        return null;
+    }
+    return (jsx("div", { className: cvaInputAddonAfter({ size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter }));
+};
+
+// Renders the "addonBefore" element if provided
+const AddonBeforeRenderer = ({ addonBefore, addonBeforeClassName, dataTestId, fieldSize, }) => {
+    if (!addonBefore) {
+        return null;
+    }
+    return (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName, size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore }));
+};
+
+// Renders generic actions like "copy" if specified
+const GenericActionsRenderer = ({ genericAction, fieldSize, innerRef, }) => {
+    const [t] = useTranslation();
+    if (!genericAction) {
+        return null;
+    }
+    // Currently only supports copy, can extend if more actions are added
+    return (jsx(Tooltip, { label: t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { dataTestId: "copy-value-button", size: fieldSize ?? undefined, type: "COPY", value: innerRef }) }));
+};
+
 /**
  * Icon with explanation tooltip for why an input is locked or disabled.
  * If locked, a permission lacks but the input **can** sometimes be edited.
  * If disabled, the input **cannot** be edited and is only ever for displaying information.
  *
- * @param {DisabledForReasons} props - The reasons for the disabled state.
- * @param {DisabledKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
+ * @param {LockedForReasons} props - The reasons for the disabled state.
+ * @param {LockedKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
  */
-const DisabledForReasonsTip = ({ reasons, kind }) => {
+const InputLockReasonTooltip = ({ reasons, kind }) => {
     const [t] = useTranslation();
     if (!reasons || reasons.length === 0) {
         return (jsx(Tooltip, { label: t("field.notEditable.tooltip"), children: jsx(Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
     }
-    return (jsx(Tooltip, { label: jsx("ul", { className: typeof reasons === "string" || reasons.length === 1 ? "list-inside" : "list-disc", children: typeof reasons === "string" ? jsx("li", { children: reasons }) : reasons.map(reason => jsx("li", { children: reason }, reason)) }), placement: "top", children: jsx(Icon, { name: "LockClosed", size: "small" }) }));
+    return (jsx(Tooltip, { label: jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsx("li", { children: reasons }) : reasons.map(reason => jsx("li", { children: reason }, reason)) }), placement: "top", children: jsx(Icon, { name: "LockClosed", size: "small" }) }));
+};
+
+// Renders a tooltip for lock reasons if the prop is an object
+const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
+    // Only render if lockReason is an object
+    if (typeof lockReason !== "object") {
+        return null;
+    }
+    return (jsx("div", { className: cvaInputSuffix({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsx(InputLockReasonTooltip, { ...lockReason }) }));
+};
+
+// Renders the prefix element or falls back to a default prefix for certain types
+const PrefixRenderer = ({ prefix, type, addonBefore, dataTestId, disabled, }) => {
+    // Default icons for specific input types
+    const defaultPrefixMap = {
+        email: jsx(Icon, { name: "AtSymbol", size: "small" }),
+        number: jsx(Icon, { name: "Hashtag", size: "small" }),
+        url: jsx(Icon, { name: "Link", size: "small" }),
+    };
+    // Decide what to show as prefix
+    const resolvedPrefix = prefix || (type && type !== "text" ? (defaultPrefixMap[type] ?? type) : null);
+    if (!resolvedPrefix) {
+        return null;
+    }
+    return (jsx("div", { className: cvaInputPrefix({ disabled, addonBefore: addonBefore !== undefined }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: resolvedPrefix }));
+};
+
+// Renders the suffix element or shows an icon if invalid/warning
+const SuffixRenderer = ({ suffix, addonAfter, actions, isInvalid, isWarning, dataTestId, disabled, }) => {
+    // If user provided suffix that's not identical to addonBefore, render it
+    if (suffix) {
+        return (jsx("div", { className: cvaInputSuffix({
+                disabled,
+                addonAfter: addonAfter !== undefined,
+                actions: Boolean(actions),
+            }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }));
+    }
+    // If invalid or warning, render an icon (unless within FormGroup)
+    if (isInvalid || isWarning) {
+        return (jsx("div", { className: cvaInputSuffix({
+                disabled,
+                addonAfter: addonAfter !== undefined,
+                actions: Boolean(actions),
+                // Hides the icon if inside a FormGroup
+                className: "group-[.form-group]:hidden",
+            }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: jsx(Icon, { color: isInvalid ? "danger" : "warning", name: "ExclamationTriangle", size: "small" }) }));
+    }
+    return null;
 };
 
 /**
@@ -358,44 +431,33 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, style, ...rest }, ref) => {
-    const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
-    const innerRef = React.useRef(null);
-    // eslint-disable-next-line local-rules/no-typescript-assertion
-    React.useImperativeHandle(ref, () => innerRef.current, []);
+const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, addonBeforeClassName, isWarning, type, genericAction, style, ...rest }, ref) => {
+    // Derive final flags
+    const renderAsDisabled = Boolean(rest.disabled);
+    const renderAsReadonly = Boolean(rest.readOnly);
+    // Keep a reference to the input element
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxs("div", { className: cvaInput({
             disabled: renderAsDisabled,
             invalid: isInvalid,
+            isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsx("div", { className: cvaInputPrefix({
-                    disabled: renderAsDisabled,
-                    addonBefore: addonBefore !== undefined,
-                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsx("input", { "aria-required": rest.required, className: cvaInputField({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [jsx(AddonBeforeRenderer, { addonBefore: addonBefore, addonBeforeClassName: addonBeforeClassName, dataTestId: dataTestId, fieldSize: fieldSize }), jsx(PrefixRenderer, { addonBefore: addonBefore, dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type }), jsx("input", { "aria-required": rest.required, className: cvaInputField({
                     autoFocus: rest.autoFocus,
+                    readOnly: renderAsReadonly,
                     size: fieldSize,
                     disabled: renderAsDisabled,
                     className: inputClassName,
                     addonBefore: addonBefore !== undefined,
-                    prefix: !compareReactNodes(addonBefore, prefix),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, ...rest, disabled: Boolean(rest.disabled), readOnly: rest.readOnly || nonInteractive }), typeof rest.disabled === "object" ? (jsx("div", { className: cvaInputSuffix({
-                    disabled: false,
-                }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsx(DisabledForReasonsTip, { ...rest.disabled }) })) : null, suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
-                    disabled: renderAsDisabled,
-                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
-                    actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
-                }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
-                showDefaultActions &&
-                innerRef.current?.value.length &&
-                innerRef.current.value.length > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsx("div", { className: cvaInputAction({
-                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
-                    suffix: !compareReactNodes(addonBefore, suffix),
-                }), children: actions })) : null, addonAfter && !compareReactNodes(addonBefore, addonAfter) && !compareReactNodes(addonAfter, suffix) ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter })) : null] }));
+                    prefix: !!prefix || (type && type !== "text"),
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { actions: actions, addonAfter: addonAfter, dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonAfterRenderer, { addonAfter: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize })] }));
 });
 BaseInput.displayName = "BaseInput";
 
 const cvaLabel = cvaMerge([
-    "text-base",
+    "text-sm",
     "text-slate-700",
     "truncate",
     "hover:text-slate-800",
@@ -596,7 +658,7 @@ const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInval
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
-const cvaFormGroup = cvaMerge(["component-formGroup-gap"]);
+const cvaFormGroup = cvaMerge(["component-formGroup-gap", "group", "form-group"]);
 const cvaFormGroupContainerBefore = cvaMerge(["flex", "mb-1", "items-center"]);
 const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
     variants: {
@@ -604,7 +666,18 @@ const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1",
             true: "text-danger-500",
             false: "",
         },
+        isWarning: {
+            true: "text-default-500  ",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            invalid: true,
+            isWarning: true,
+            className: "text-danger-500 ", // Ensures that 'invalid' takes precedence
+        },
+    ],
 });
 const cvaHelpAddon = cvaMerge(["ml-auto"]);
 
@@ -615,9 +688,13 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
+const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? (jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    const validationStateIcon = React.useMemo(() => {
+        const color = isInvalid ? "danger" : isWarning ? "warning" : null;
+        return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
+    }, [isInvalid, isWarning]);
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -898,8 +975,8 @@ const validateEmailId = (emailId, required) => {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-const EmailInput = React.forwardRef(({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ...rest }, ref) => {
-    const [email, setEmail] = React.useState("");
+const EmailInput = forwardRef(({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ...rest }, ref) => {
+    const [email, setEmail] = useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
@@ -909,7 +986,7 @@ const EmailInput = React.forwardRef(({ fieldSize = "medium", disabled = false, d
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 });
 EmailInput.displayName = "EmailInput";
 
@@ -1096,7 +1173,7 @@ OptionCard.displayName = "OptionCard";
  */
 const PasswordInput = forwardRef((props, ref) => {
     const [showPassword, setShowPassword] = useState(false);
-    return (jsx(BaseInput, { ref: ref, ...props, actions: jsx("div", { className: cvaActionContainer(), children: jsx(IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+    return (jsx(BaseInput, { ref: ref, ...props, actions: jsx("div", { className: cvaActionContainer({ size: props.fieldSize }), children: jsx(IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
 });
 PasswordInput.displayName = "PasswordInput";
 
@@ -1224,7 +1301,7 @@ const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value,
         onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize ?? undefined, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
 });
 PhoneInput.displayName = "PhoneInput";
 
@@ -1705,12 +1782,12 @@ const cvaSearch = cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", ...rest }, ref) => {
+const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", xMarkRef, ...rest }, ref) => {
     return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsx(Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsx(Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
-            }, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
+            }, ref: xMarkRef, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 });
 Search.displayName = "Search";
 
@@ -1724,8 +1801,15 @@ const cvaSelect = cvaMerge([
     "hover:bg-slate-50",
     "bg-white",
     "transition",
+    "text-sm",
+    "min-h-0",
 ], {
     variants: {
+        fieldSize: {
+            small: ["h-7", "text-xs"],
+            medium: ["h-8"],
+            large: ["h-10"],
+        },
         invalid: {
             true: "border border-red-600 text-red-600 hover:border-red-600",
             false: "",
@@ -1810,8 +1894,8 @@ const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1819,8 +1903,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, optionLabelDescription: optionLabelDescription, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
@@ -1920,7 +2004,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = useMemo(() => {
@@ -2020,7 +2104,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
+                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -2038,12 +2122,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }) => {
+const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
     const customStyles = React.useMemo(() => {
         return {
             control: base => {
                 return {
                     ...base,
+                    minHeight: fieldSize === "small" ? "28px" : fieldSize === "large" ? "40px" : "32px",
                     borderRadius: "var(--border-radius-lg)",
                     backgroundColor: "",
                 };
@@ -2106,6 +2191,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
             valueContainer: base => {
                 return {
                     ...base,
+                    paddingBlock: 0,
                     flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
                     gap: "0.25rem",
                 };
@@ -2137,7 +2223,7 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }) => {
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, fieldSize = "medium", ...props }) => {
     const refContainer = React__default.useRef(null);
     const refPrefix = React__default.useRef(null);
     const { customStyles } = useCustomStyles({
@@ -2146,6 +2232,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         maxSelectedDisplayCount,
         styles,
         disabled: Boolean(disabled),
+        fieldSize,
     });
     const [menuIsOpen, setMenuIsOpen] = React__default.useState(props.menuIsOpen ?? false);
     const refMenuIsEnabled = React__default.useRef(true);
@@ -2159,6 +2246,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         dropdownIcon,
         prefix,
         hasError,
+        fieldSize,
         getOptionLabelDescription,
     });
     const menuPlacement = "auto";
@@ -2252,7 +2340,7 @@ const CreatableSelect = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -2263,7 +2351,7 @@ CreatableSelect.displayName = "CreatableSelect";
  * @returns {JSX.Element} Select component
  */
 const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, } = useSelect(props);
     const reactSelectProps = useMemo(() => ({
         value,
@@ -2322,7 +2410,12 @@ const Select = (props) => {
         value,
     ]);
     const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(DisabledForReasonsTip, { ...props.disabled }) })) : null] }));
+    return (jsxs("div", { className: cvaSelect({
+            invalid: hasError,
+            fieldSize: fieldSize,
+            disabled: renderAsDisabled,
+            className: props.className,
+        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })) : null, async ? (jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsx(ReactSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
 Select.displayName = "Select";
 
@@ -2483,12 +2576,8 @@ TextAreaField.displayName = "TextAreaField";
 
 /**
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
- *
- * _**Do use** when the user has to input or edit simple text based information, such as metadata._
- *
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const TextField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
+const TextField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, isWarning, ...rest }, ref) => {
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + uuidv4();
@@ -2499,7 +2588,7 @@ const TextField = React.forwardRef(({ id, label, tip, helpText, helpAddon, error
         }
     }, [onChange]);
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId, onChange: handleChange }) }));
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId, onChange: handleChange }) }));
 });
 TextField.displayName = "TextField";
 
@@ -2618,20 +2707,19 @@ const cvaUploadInputField = cvaMerge([
     "dark:text-gray-400",
     "self-center",
 ]);
-const cvaUploadInputAddonBefore = cvaMerge(["block", "truncate", "w-28", "pt-2"]);
 
 /**
  * A thin wrapper around the `BaseInput` component for upload input fields.
  *
  * NOTE: If shown with a label, please use the `UploadField` component instead.
  */
-const UploadInput = forwardRef(({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ...rest }, ref) => (jsx("label", { className: "tu-upload-input", children: jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
-            // onClick used to work with nonInteractive option
-            if (nonInteractive) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        }, ref: ref, type: "file", ...rest }) })));
+const UploadInput = forwardRef(({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ...rest }, ref) => (jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
+        // onClick used to work with nonInteractive option
+        if (nonInteractive) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, ref: ref, type: "file", ...rest })));
 UploadInput.displayName = "UploadInput";
 
 /**
@@ -2683,7 +2771,7 @@ const validateUrl = (url, required) => {
 const UrlInput = forwardRef(({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ...rest }, ref) => {
     const [url, setUrl] = useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) }));
+    return (jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize ?? undefined, type: "WEB_ADDRESS", value: url })) }));
 });
 UrlInput.displayName = "UrlField";
 
@@ -2823,4 +2911,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };