@trackunit/react-form-components 0.0.104 → 0.0.106

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx as jsx$1, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
-import { tws, tw, twx } from '@trackunit/tailwind-styled-components';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useCallback, useLayoutEffect, useContext, createElement, Fragment, createContext, useRef, Component } from 'react';
+import { tws, tw } from '@trackunit/tailwind-styled-components';
 import { createPortal } from 'react-dom';
 
 var defaultTranslations = {
@@ -49,13 +49,26 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
+    variants: {
+        size: {
+            small: ["w-6", "h-6"],
+            medium: ["w-8", "h-8"],
+        },
+    },
+    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.
  *
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className, }) => {
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
@@ -81,9 +94,8 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsx$1("div", { className: "flex p-1", children: jsx$1(IconButton, { className: cvaActionButton(), disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx$1(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsx$1("div", { className: cvaActionContainer({ className }), children: jsx$1(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx$1(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
 };
-const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"]);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -122,6 +134,96 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+const cvaInputBase = cvaMerge([
+    "component-baseInput-shadow",
+    "component-baseInput-border",
+    "component-baseInput-background",
+    "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-offset-2",
+    "focus-within:ring-offset-white",
+    "focus-within:ring-primary-500",
+    "focus-within:border-slate-400",
+    "hover:border-slate-400",
+    "hover:bg-slate-50",
+    "transition",
+]);
+const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
+const cvaInputBaseInvalid = cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
+const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
+    variants: {
+        size: {
+            small: ["h-8"],
+            medium: ["h-10"],
+        },
+        disabled: {
+            true: cvaInputBaseDisabled(),
+            false: "",
+        },
+        invalid: {
+            true: cvaInputBaseInvalid(),
+            false: "",
+        },
+    },
+});
+const cvaInputField = cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "focus-visible:outline-none",
+], {
+    variants: {
+        size: {
+            small: ["py-1"],
+            medium: ["py-2"],
+        },
+        disabled: {
+            true: ["text-slate-700"],
+            false: "",
+        },
+    },
+});
+const cvaInputAddon = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "px-3",
+    "border-slate-300",
+    "text-slate-500",
+    "bg-slate-50",
+]);
+const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
+const cvaInputPrefix = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "text-slate-400",
+    "hover:component-search-prefix",
+    "component-baseInput-prefix",
+    "component-search-borderless",
+    "px-3",
+], {
+    variants: {
+        disabled: {
+            true: ["text-slate-500"],
+            false: "",
+        },
+    },
+});
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+    variants: {
+        disabled: {
+            true: ["text-slate-500"],
+            false: "",
+        },
+    },
+});
+
 /**
  * A base input component that can be used for text inputs, password inputs, etc.
  * A reference to the input element is provided as the `ref` prop.
@@ -131,28 +233,47 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React.forwardRef((_a, ref) => {
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type"]);
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type", "inputClassName", "addonBeforeClassName"]);
     const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
-    return (jsxs(InputContainer$1, { "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx$1(AddonBefore, { "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx$1(InputPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx$1("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tws `tu-input__field`, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx$1(InputSuffix, { "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx$1(AddonAfter, { "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+    const renderAsDisabled = rest.disabled || rest.readOnly;
+    return (jsxs("div", { className: cvaInput({
+            disabled: renderAsDisabled,
+            invalid: isInvalid,
+            size: fieldSize,
+            className,
+        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx$1("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx$1("div", { className: cvaInputPrefix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx$1("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx$1("div", { className: cvaInputSuffix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx$1("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+});
+
+const cvaLabel = cvaMerge([
+    "text-base",
+    "text-slate-700",
+    "overflow-hidden",
+    "whitespace-nowrap",
+    "text-ellipsis",
+    "hover:text-slate-800",
+    "group-hover:text-slate-800",
+    "active:text-slate-800",
+    "group-active:text-slate-800",
+], {
+    variants: {
+        invalid: {
+            true: "text-red-600 hover:text-red-700 group-hover:text-red-700 active:text-red-700 group-active:text-red-700",
+            false: "",
+        },
+        disabled: {
+            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        invalid: false,
+        disabled: false,
+    },
 });
-const InputPrefix = tw.div `
-  tu-input__prefix
-`;
-const InputSuffix = tw.div `
-  tu-input__suffix
-`;
-const AddonBefore = tw.div `
-  tu-input__addon-before
-`;
-const AddonAfter = tw.div `
-  tu-input__addon-after
-`;
-const InputContainer$1 = tw.label `
-  tu-input
-  ${({ $invalid }) => ($invalid ? tws `tu-input--invalid` : null)}
-  ${({ $disabled }) => ($disabled ? tws `tu-input--disabled` : null)}
-  ${({ $fieldSize }) => ($fieldSize === "small" ? tws `tu-input--small` : null)}
-`;
 
 /**
  * The CheckIcon component is used by the checkbox to display the checked state.
@@ -164,6 +285,130 @@ const CheckIcon = ({ className, dataTestId }) => {
     return (jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, "data-testid": dataTestId, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2", children: jsx$1("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m2 5.5 2 2L8.5 3" }) }));
 };
 
+const cvaCheckbox = cvaMerge([
+    "w-4",
+    "h-4",
+    "border-solid",
+    "border",
+    "shrink-0",
+    "border-slate-300",
+    "flex",
+    "rounded",
+    "hover:bg-slate-100",
+    "bg-white",
+    "items-center",
+    "shadow-sm",
+    "justify-center",
+    "box-border",
+    "transition",
+    "focus:bg-slate-200",
+    "outline-0",
+    "active:bg-slate-200",
+    "active:ring-2",
+    "active:ring-offset-2",
+    "active:ring-blue-700",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "focus:ring-blue-700",
+    "cursor-pointer",
+    "group-active:ring-2",
+    "group-active:ring-offset-2",
+    "group-active:ring-blue-700",
+], {
+    variants: {
+        disabled: {
+            true: [
+                "bg-slate-300",
+                "border-slate-300",
+                "cursor-not-allowed",
+                "group-hover:bg-slate-300",
+                "group-focus:bg-slate-300",
+                "hover:bg-slate-300",
+                "focus:bg-slate-300",
+                "active:bg-slate-300",
+                "focus:ring-0",
+                "focus:ring-offset-0",
+                "group-active:ring-0",
+                "group-active:ring-offset-0",
+            ],
+            false: "",
+        },
+        invalid: {
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-offset-2",
+            ],
+            false: "",
+        },
+        state: {
+            selected: [
+                "bg-blue-600",
+                "border-blue-600",
+                "hover:bg-blue-700",
+                "hover:border-blue-700",
+                "active:bg-blue-700",
+                "focus:bg-blue-700",
+                "group-hover:bg-blue-700",
+                "group-hover:border-blue-700",
+                "group-focus:bg-blue-700",
+                "group-focus:border-blue-700",
+            ],
+            deselected: ["group-hover:bg-slate-100"],
+            indeterminate: [
+                "bg-blue-600",
+                "border-blue-600",
+                "hover:bg-blue-700",
+                "hover:border-blue-700",
+                "focus:bg-blue-800",
+                "focus:border-blue-800",
+                "active:bg-blue-800",
+                "active:border-blue-800",
+                "group-hover:bg-blue-700",
+                "group-hover:border-blue-700",
+                "group-focus:bg-blue-800",
+                "group-focus:border-blue-800",
+            ],
+        },
+    },
+    compoundVariants: [
+        {
+            state: "selected",
+            invalid: true,
+            className: [
+                "bg-red-600",
+                "border-red-600",
+                "hover:bg-red-700",
+                "hover:border-red-700",
+                "group-hover:bg-red-700",
+                "group-hover:border-red-700",
+                "active:bg-red-700",
+                "active:ring-red-700",
+                "group-active:bg-red-700",
+                "group-active:border-red-700",
+                "group-active:ring-red-700",
+                "group-active:ring-2",
+                "group-active:ring-offset-2",
+            ],
+        },
+    ],
+    defaultVariants: {
+        state: "deselected",
+    }
+});
+const cvaCheckboxContainer = cvaMerge([
+    "grid",
+    "outline-none",
+    "grid-cols-min-fr",
+    "items-center",
+    "gap-2",
+    "group",
+]);
+const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
+const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
  *
@@ -187,8 +432,8 @@ const IndeterminateIcon = ({ className }) => (jsx$1("svg", { xmlns: "http://www.
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
-    const icon = indeterminate ? jsx$1(StyledIndeterminateIcon, {}) : checked && jsx$1(StyledCheckIcon, {});
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
+    const icon = indeterminate ? (jsx$1(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx$1(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React.useRef(null);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
@@ -202,32 +447,16 @@ const Checkbox = React.forwardRef((_a, ref) => {
         }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxs(CheckboxContainer, { "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className, ref: internalRef, onKeyPress: onKeyPress, children: [jsx$1(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx$1(CheckboxWrapper, { id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label && (jsx$1(Label$2, { className: tws `cursor-pointer`, "$disabled": isReadonly, "$isInvalid": isReadonly ? false : isInvalid, children: label })), suffix] }));
+    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsx$1("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx$1("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+                    disabled: isReadonly,
+                    invalid: isReadonly ? false : isInvalid,
+                    state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
+                }), children: icon }), label && (jsx$1("span", { className: cvaLabel({
+                    invalid: isReadonly ? false : isInvalid,
+                    disabled: isReadonly,
+                    className: "cursor-pointer",
+                }), children: label })), suffix] }));
 });
-const StyledCheckIcon = twx(CheckIcon) `tu-checkbox--icon`;
-const StyledIndeterminateIcon = twx(IndeterminateIcon) `tu-checkbox--icon`;
-const CheckboxContainer = tw.label `tu-checkbox--container group`;
-const HiddenInput$1 = tw.input `tu-checkbox--input`;
-const CheckboxWrapper = tw.span `
-  tu-checkbox
-  ${({ $checked, $disabled, $indeterminate }) => {
-    if ($disabled) {
-        return tws `tu-checkbox--disabled`;
-    }
-    return $indeterminate
-        ? tws `tu-checkbox--indeterminate`
-        : $checked
-            ? tws `tu-checkbox--selected`
-            : tws `tu-checkbox--deselected`;
-}}
-
-  ${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
-`;
-const Label$2 = tw.span `
-  tu-label
-  ${({ $disabled }) => $disabled && tws `tu-label--disabled`}
-  ${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
-`;
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -2678,14 +2907,28 @@ const DateInput = forwardRef((_a, ref) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsx$1(Root$2, { id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid, children: children }));
+const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsx$1("label", { id: id || "", htmlFor: htmlFor || "", className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, children: children }));
 };
-const Root$2 = tw.label `
-tu-label
-${({ $disabled }) => $disabled && tws `tu-label--disabled`}
-${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
-`;
+
+const cvaFormGroup = cvaMerge(["component-formGroup-gap"], {
+    variants: {
+        disabled: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+});
+const cvaFormGroupContainerBefore = cvaMerge(["flex", "gap-1", "mb-1"]);
+const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
+    variants: {
+        invalid: {
+            true: "text-danger-500",
+            false: "",
+        },
+    },
+});
+const cvaHelpAddon = cvaMerge(["ml-auto"]);
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
@@ -2695,27 +2938,8 @@ ${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
-    return (jsxs(FormGroupRoot, { className: className, "data-testid": dataTestId, "$disabled": disabled, children: [jsxs(ContainerBefore, { children: [jsx$1(FormGroupLabel, { dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && jsx$1(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, children: tip })] }), children, jsxs(ContainerAfter, { "$isInvalid": isInvalid, children: [helpText && jsx$1("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && jsx$1(HelpAddon, { "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon })] })] }));
+    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore({ className }), children: [jsx$1(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && jsx$1(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, children: tip })] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx$1("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx$1("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
-const FormGroupRoot = tw.div `
-  tu-form-group
-  ${({ $disabled }) => {
-    return $disabled ? "pointer-events-none" : null;
-}}
-`;
-const ContainerBefore = tw.div `
-  tu-form-group__container-before
-`;
-const FormGroupLabel = twx(Label$1) `
-  component-formGroup-font
-`;
-const ContainerAfter = tw.div `
-  tu-form-group__container-after
-  ${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
-`;
-const HelpAddon = tw.span `
-  tu-form-group__help-addon
-`;
 
 /**
  * The date field component is used for entering date values.
@@ -2731,6 +2955,45 @@ const DateField = forwardRef((_a, ref) => {
     return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+const cvaDropZone = cvaMerge([
+    "flex",
+    "component-baseInput-background",
+    "justify-center",
+    "text-slate-500",
+    "rounded-sm",
+    "border-2",
+    "border-gray-200",
+    "border-dashed",
+    "hover:bg-slate-100",
+    "hover:border-solid",
+    "hover:border-primary-500",
+], {
+    variants: {
+        size: {
+            small: ["p-2"],
+            medium: ["p-4"],
+            large: ["p-8"],
+        },
+        disabled: { true: ["bg-slate-100", "hover:bg-slate-100"], false: "" },
+        dragActive: { true: ["border-gray-200", "bg-slate-100"], false: "" },
+        dropComplete: {
+            true: ["border-solid", "border-primary-500", "bg-slate-100", "hover:border-solid", "hover:border-gray-200"],
+            false: "",
+        },
+        invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
+    },
+});
+const cvaDropZoneLabel = cvaMerge([
+    "h-full",
+    "pt-1",
+    "pb-1",
+    "gap-2",
+    "items-center",
+    "flex-col",
+    "flex",
+    "justify-center",
+]);
+
 /**
  * The Drop Zone can be used to drag and drop files
  *
@@ -2770,26 +3033,13 @@ const DropZone = (_a) => {
             setFileDropped(true);
         }
     };
-    return (jsxs(Root$1, Object.assign({ "$disabled": disabled, "$isInvalid": isInvalid, "$dragActive": dragActive, "$fileDropped": fileDropped, "$size": size, className: className, "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
+    return (jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs(DropZoneLabel, { htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
-};
-const Root$1 = tw.div `
-  tu-drop-zone
-   ${({ $size }) => ($size === "small" ? tws `tu-drop-zone--small` : null)}
-   ${({ $size }) => ($size === "medium" ? tws `tu-drop-zone--medium` : null)}
-   ${({ $size }) => ($size === "large" ? tws `tu-drop-zone--large` : null)}
-   ${({ $dragActive }) => ($dragActive ? tws `tu-drop-zone--drag-active` : null)}
-   ${({ $fileDropped }) => ($fileDropped ? tws `tu-drop-zone--drop-complete` : null)}
-   ${({ $isInvalid }) => ($isInvalid ? tws `tu-drop-zone--invalid` : null)}
-   ${({ $disabled }) => ($disabled ? tws `tu-drop-zone--disabled` : null)}
-`;
-const DropZoneLabel = tw.label `
-  tu-drop-zone__label
-`;
+        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
+};
 
 /**
  * A Email Input component is used for input of the type Email.
@@ -2851,39 +3101,40 @@ const NumberField = forwardRef((_a, ref) => {
     return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+const cvaOptionCardLabel = cvaMerge([
+    cvaInputBase(),
+    "text-center",
+    "component-baseInput-background",
+    "aspect-square",
+    "flex",
+    "flex-col",
+    "gap-2",
+    "justify-center",
+    "items-center",
+    "p-6",
+    "w-full",
+    "peer-checked:bg-primary-50",
+    "peer-checked:border-primary-600",
+    "peer-checked:border-2",
+], {
+    variants: {
+        disabled: {
+            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
+            false: ["cursor-pointer"],
+        },
+    },
+});
+const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
+const cvaOptionCardContainer = cvaMerge(["contents"]);
+
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
 const OptionCard = forwardRef((_a, ref) => {
     var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
     const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
-    return (jsxs(Container$3, { "data-testid": dataTestId, children: [jsx$1("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "hidden peer" }, rest)), jsxs(Label, { htmlFor: htmlForId, className: className, "$disabled": disabled, children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx$1(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs(Content, { children: [subheading && (jsx$1(Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx$1(Text, { subtle: true, align: "center", children: description }))] }))] })] }));
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsx$1("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "hidden peer" }, rest)), jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx$1(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx$1(Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx$1(Text, { subtle: true, align: "center", children: description }))] }))] })] }));
 });
-const Container$3 = tw.div `
-  contents
-`;
-const Label = tw.label `
-  tu-input-base
-  text-center
-  ${p => (p.$disabled ? "tu-input--disabled" : "")}
-  ${p => (p.$disabled ? "cursor-not-allowed" : "cursor-pointer")}
-  aspect-square
-  flex
-  flex-col
-  gap-2
-  justify-center
-  items-center
-  p-6
-  w-full
-  peer-checked:bg-primary-50
-  peer-checked:border-primary-600
-  peer-checked:border-2
-`;
-const Content = tw.div `
-  flex
-  flex-col
-  items-center
-`;
 
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
@@ -10215,7 +10466,7 @@ var containerCSS = function containerCSS(_ref) {
     position: 'relative'
   };
 };
-var SelectContainer$2 = function SelectContainer(props) {
+var SelectContainer$1 = function SelectContainer(props) {
   var children = props.children,
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
@@ -10604,7 +10855,7 @@ var inputStyle = function inputStyle(isHidden) {
     width: '100%'
   }, spacingStyle);
 };
-var Input$1 = function Input(props) {
+var Input = function Input(props) {
   var cx = props.cx,
     value = props.value;
   var _cleanCommonProps = cleanCommonProps(props),
@@ -10626,7 +10877,7 @@ var Input$1 = function Input(props) {
     disabled: isDisabled
   }, innerProps)));
 };
-var Input$1$1 = Input$1;
+var Input$1 = Input;
 
 var multiValueCSS = function multiValueCSS(_ref, unstyled) {
   var _ref$theme = _ref.theme,
@@ -10837,7 +11088,7 @@ var components = {
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer,
   IndicatorSeparator: IndicatorSeparator,
-  Input: Input$1$1,
+  Input: Input$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu$1,
   MenuList: MenuList,
@@ -10850,7 +11101,7 @@ var components = {
   MultiValueRemove: MultiValueRemove,
   Option: Option$1,
   Placeholder: Placeholder$1,
-  SelectContainer: SelectContainer$2,
+  SelectContainer: SelectContainer$1,
   SingleValue: SingleValue$1,
   ValueContainer: ValueContainer
 };
@@ -13693,25 +13944,69 @@ var CreatableSelect$1 = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var CreatableSelect$1$1 = CreatableSelect$1;
 
+const cvaSelect = cvaMerge([
+    "relative",
+    "flex",
+    "shadow-sm",
+    "rounded-lg",
+    "border",
+    "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-offset-2",
+    "focus-within:ring-offset-white",
+    "focus-within:ring-primary-600",
+    "focus-within:border-slate-400",
+    "hover:border-slate-400",
+    "hover:bg-slate-50",
+    "bg-white",
+    "transition",
+], {
+    variants: {
+        invalid: {
+            true: "border-red-600 text-red-600 hover:border-red-600 focus-within:ring-red-600",
+            false: "",
+        },
+        disabled: {
+            true: "!bg-slate-100",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        invalid: false,
+        disabled: false,
+    },
+});
+const cvaSelectIcon = cvaMerge("flex justify-center items-center text-slate-400 hover:text-slate-500 mr-2 cursor-pointer");
+const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
+const cvaSelectXIcon = cvaMerge([
+    "flex justify-center items-center text-slate-400 hover:text-slate-500 mr-2 cursor-pointer",
+    "ml-1",
+]);
+const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+    variants: {
+        menuIsOpen: {
+            true: "animate-fade-in-fast",
+            false: "animate-fade-out-fast",
+        },
+    },
+});
+const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+    variants: {
+        visible: { true: "visible", false: "invisible" },
+    },
+});
+const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
+const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
+
 /**
  * The SelectContainer component.
  *
  * @param {SelectContainerProps} props - The props for the SelectContainer component
  * @returns {JSX.Element} SelectContainer component
  */
-const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxs(Container$2, { "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled, children: [label && !hideLabel && jsx$1(Label$1, { htmlFor: id, children: label }), children, (hasError || info) && (jsx$1(InformativeText, { size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false, children: hasError ? error : info }))] }));
+const SelectContainer = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
+    return (jsxs("label", { className: cvaSelect({ invalid: hasError, disabled: isDisabled }), "data-testid": dataTestId, children: [label && !hideLabel && jsx$1(Label, { htmlFor: id, children: label }), children, (hasError || info) && jsx$1(Text, { size: "small", children: hasError ? error : info })] }));
 };
-const Container$2 = tw.label `
-  tu-select__container 
-  tu-select
-  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
-`;
-const InformativeText = twx(Text) `
-  tu-informative-text
-  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
-`;
 
 /**
  * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
@@ -13760,9 +14055,6 @@ const getOrderedOptions = (options, value) => {
     }
     return options || [];
 };
-const SelectPrefix = tw.div `
-  tu-select__prefix 
-`;
 
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
@@ -13842,7 +14134,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         const isLast = index === items.length;
         const counterRequired = requiredSpace > availableSpace && counter !== 0;
         if (isLast && counterRequired) {
-            return (jsx$1(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxs(Counter, { children: ["+", counter] }) }, item.text + index));
+            return (jsx$1(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
         }
         if (isLast) {
             return null;
@@ -13861,19 +14153,10 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         return null;
     })
         .filter(element => element !== null);
-    return (jsxs(Container$1, { style: {
+    return (jsxs("div", { style: {
             width: `${width}`,
-        }, "$ready": isReady, ref: containerRef, children: [renderedElements, postFix] }));
+        }, className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, children: [renderedElements, postFix] }));
 };
-const Container$1 = tw.div `
-tu-select__dynamic-tag--container
-${({ $ready }) => {
-    return $ready ? tws `visible` : tws `invisible`;
-}}
-`;
-const Counter = tw.div `
-tu-select__counter
-`;
 
 /**
  * A hook to retrieve components override object.
@@ -13917,7 +14200,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                 : [], postFix: searchInput, disabled: disabled })) : (jsxs(Fragment$1, { children: [tags &&
                                     tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         var _a, _b;
-                                        return (jsx$1(Tag, { className: tws `shrink-0 inline-flex`, onClose: e => {
+                                        return (jsx$1(Tag, { className: "shrink-0 inline-flex", onClose: e => {
                                                 var _a, _b;
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
@@ -13927,23 +14210,21 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsx$1(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsx$1(Spinner, { size: "small", className: tws `mt-1.5 mr-1` });
+                return jsx$1(Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx$1(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx$1(Icon, { name: "ChevronDownIcon", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsx$1(components.DropdownIndicator, Object.assign({}, props, { children: jsx$1(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
+                return props.selectProps.isLoading ? null : (jsx$1(components.DropdownIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1(XMarkIcon, { onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircleIcon", size: "medium" }) }) })));
+                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircleIcon", size: "medium" }) }) })));
             }, Control: props => {
-                return (jsx$1(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
+                return jsx$1(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
-                return (jsx$1(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__single-value--disabled` : "", children: jsx$1("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
+                return (jsx$1(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx$1("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
-                return (jsx$1(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
-                        ? tws `tu-select__menu-list animate-fade-in-fast`
-                        : tws `tu-select__menu-list animate-fade-out-fast` })));
+                return (jsx$1(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
             }, MenuList: props => {
                 return (jsx$1(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
                             const listEl = e.currentTarget;
@@ -13964,13 +14245,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
     }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
     return customComponents;
 };
-const StyledIcon = tw.div `
-tu-select--icon
-`;
-const XMarkIcon = tw.div `
-tu-select--icon
-tu-select__x-icon
-`;
 
 /**
  * @template IsMulti
@@ -14059,7 +14333,7 @@ const useSelect = (_a) => {
  * @returns {JSX.Element} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, onInputChange, placeholder, isClearable } = props;
+    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, onInputChange, placeholder, isClearable, } = props;
     const hasError = !!error;
     const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
@@ -14089,7 +14363,7 @@ const CreatableSelect = (props) => {
         isClearable,
         id,
     };
-    return (jsx$1(SelectContainer$1, { label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled, children: jsxs(Fragment$1, { children: [prefix !== undefined && (jsx$1(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncCreatableSelect$1, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+    return (jsx$1(SelectContainer, { label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled, children: jsxs(Fragment$1, { children: [prefix !== undefined && (jsx$1("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncCreatableSelect$1, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
                         !disabled && openMenuHandler();
                     }, onMenuClose: () => {
                         closeMenuHandler();
@@ -14146,14 +14420,8 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, "$isReadOnly": readOnly, children: [prefix !== undefined && (jsx$1(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx$1(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
+    return (jsxs("div", { ref: refContainer, className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, children: [prefix !== undefined && (jsx$1("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx$1(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx$1(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
 };
-const SelectContainer = tw.div `
-  tu-select
-  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
-  ${({ $isReadOnly }) => ($isReadOnly ? tws `tu-select--readonly` : null)}
-`;
 Select.displayName = "Select";
 
 const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
@@ -14268,6 +14536,103 @@ const PhoneField = forwardRef((_a, ref) => {
     return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
 });
 
+const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+    variants: {
+        layout: {
+            inline: ["flex", "gap-3", "flex-row", "items-center"],
+        },
+    },
+});
+const cvaRadioItem = cvaMerge([
+    "w-4",
+    "h-4",
+    "appearance-none",
+    "rounded-3xl",
+    "bg-white",
+    "border-solid",
+    "border",
+    "border-slate-300",
+    "shadow-sm",
+    "shrink-0",
+    "transition",
+    "box-border",
+    "hover:cursor-pointer",
+    "hover:bg-slate-100",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "focus:ring-blue-700",
+], {
+    variants: {
+        checked: {
+            true: [
+                "border-solid",
+                "border-4",
+                "border-blue-600",
+                "bg-white",
+                "hover:bg-slate-100",
+                "hover:cursor-pointer",
+                "outline-0",
+                "active:bg-slate-200",
+                "active:ring-2",
+                "active:ring-offset-2",
+                "active:ring-blue-700",
+                "focus:bg-slate-200",
+                "focus:ring-2",
+                "focus:ring-offset-2",
+                "focus:ring-blue-700",
+                "group-active:ring-2",
+                "group-active:ring-offset-2",
+                "group-active:ring-blue-700",
+            ],
+            false: "",
+        },
+        invalid: {
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-offset-2",
+            ],
+            false: "",
+        },
+        disabled: {
+            true: [
+                "bg-slate-400",
+                "border-slate-300",
+                "cursor-not-allowed",
+                "group-hover:bg-slate-400",
+                "group-focus:bg-slate-400",
+                "hover:bg-slate-400",
+                "focus:bg-slate-400",
+                "active:bg-slate-400",
+                "focus:ring-0",
+                "focus:ring-offset-0",
+                "group-active:ring-0",
+                "group-active:ring-offset-0",
+            ],
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: ["bg-white"],
+        },
+    ],
+});
+const cvaRadioItemWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
+const cvaRadioItemLabelContainer = cvaMerge(["gap-y-1", "grid"]);
+const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
+    variants: {
+        disabled: {
+            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
+            false: "",
+        },
+    },
+});
+
 const RadioGroupContext = React.createContext(null);
 
 /**
@@ -14283,7 +14648,7 @@ const RadioGroupContext = React.createContext(null);
  * @returns {JSX.Element} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsx$1(FormGroup, { label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(Flex, { "$inline": inline, className: className, "data-testid": dataTestId, children: jsx$1(RadioGroupContext.Provider, { value: {
+    return (jsx$1(FormGroup, { label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx$1(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -14293,9 +14658,6 @@ const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inli
                 }, children: children }) }) }));
 };
 RadioGroup.displayName = "RadioGroup";
-const Flex = tw.div `
-${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)}
-`;
 
 /**
  * The RadioItem component.
@@ -14306,20 +14668,12 @@ ${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)
 const RadioItem = ({ label, value, dataTestId, className, description, }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxs(InputWrapper, { className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper`, children: [jsx$1(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx$1(Label$1, { htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx$1(Description$1, { htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, children: description }))] })] }));
-};
-const InputWrapper = tw.label `tu-radioitem__wrapper`;
-const Input = tw.input `
-tu-radioitem
-${({ $checked }) => $checked && tws `tu-radioitem--checked`}
-${({ $disabled }) => $disabled && tws `tu-radioitem--disabled`}
-${({ $isInvalid }) => $isInvalid && tws `tu-radioitem--invalid`}
-`;
-const LabelContainer$1 = tw.div `tu-radioitem__label-container`;
-const Description$1 = tw.label `
-tu-radioitem__description
-${({ $disabled }) => $disabled && tws `tu-radioitem__description--disabled`}
-`;
+    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper`, children: [jsx$1("input", { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", value: value, checked: isChecked, className: cvaRadioItem({
+                    checked: isChecked,
+                    disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+                    invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+                }), onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx$1(Label, { htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx$1("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, children: description }))] })] }));
+};
 
 const cvaTimeRange = cvaMerge([
     "flex",
@@ -14387,6 +14741,32 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
  */
 const TextInput = forwardRef((props, ref) => (jsx$1(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
 
+const cvaSearch = cvaMerge([
+    "shadow-none",
+    "component-search-borderless",
+    "component-search-background",
+    "hover:component-search-background",
+    "hover:component-search-focus-hover",
+    "focus:component-search-focus-hover",
+    "focus-within:component-search-focus-within",
+    "transition-all",
+    "duration-300",
+], {
+    variants: {
+        border: { true: ["!component-search-border"], false: "" },
+        widenOnFocus: {
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:component-search-widen-focus",
+                "focus-within:w-full",
+            ],
+            false: "w-full",
+        },
+    },
+});
+
 /**
  * The Search component is used to render a search input field.
  *
@@ -14394,44 +14774,54 @@ const TextInput = forwardRef((props, ref) => (jsx$1(BaseInput, Object.assign({ r
  * @returns {JSX.Element} Search component
  */
 const Search = (_a) => {
-    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
-    return (jsx$1(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
+    return (jsx$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsx$1(Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
-const StyledTextInput = twx(TextInput) `
-  tu-search
-  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tws `tu-search--border`}
-  ${({ $widenOnFocus }) => $widenOnFocus && tws `tu-search--widen-on-focus`}
-`;
+
+const cvaTextArea = cvaMerge([
+    cvaInputBase(),
+    "block",
+    "overflow-auto",
+    "appearance-none",
+    "px-3",
+    "py-2",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "focus-visible:outline-none",
+    "w-full",
+    "h-20",
+    "transition",
+], {
+    variants: {
+        disabled: {
+            true: cvaInputBaseDisabled(),
+            false: "",
+        },
+        invalid: {
+            true: cvaInputBaseInvalid(),
+            false: "",
+        },
+        resize: {
+            both: "resize",
+            vertical: "resize-y",
+            horizontal: "resize-x",
+            none: "resize-none",
+        },
+    },
+});
 
 /**
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
 const TextArea = React.forwardRef((_a, ref) => {
-    var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "required", "dataTestId", "isInvalid"]);
-    return (jsx$1(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
+    var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "required", "dataTestId", "isInvalid", "className"]);
+    return (jsx$1("textarea", Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, ref: ref, defaultValue: defaultValue, required: required, className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }) }, rest, { onChange: onChange, "data-testid": dataTestId })));
 });
-const StyledTextArea = tw.textarea `
-  tu-textarea
-  ${({ $invalid }) => ($invalid ? tws `tu-textarea--invalid` : null)}
-  ${({ disabled }) => (disabled ? tws `tu-textarea--disabled` : null)}
-  ${({ $resize }) => {
-    switch ($resize) {
-        case "both":
-            return tws `resize`;
-        case "horizontal":
-            return tws `resize-x`;
-        case "vertical":
-            return tws `resize-y`;
-        case "none":
-            return tws `resize-none`;
-        default:
-            return null;
-    }
-}};
-`;
 
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
@@ -14497,6 +14887,64 @@ const TimeRangeField = (_a) => {
     return (jsx$1(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsx$1(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid, children: children }, rest)) }));
 };
 
+const cvaToggleWrapper = cvaMerge(["flex", "gap-2"]);
+cvaMerge(["relative"]);
+const cvaToggleTrack = cvaMerge([
+    "shrink-0",
+    "p-1",
+    "cursor-pointer",
+    "rounded-full",
+    "bg-slate-300",
+    "focus:bg-slate-400",
+    "hover:bg-slate-400",
+    "active:bg-slate-500",
+], {
+    variants: {
+        size: {
+            small: ["w-8", "h-4"],
+            medium: ["w-9", "h-5"],
+        },
+        disabled: {
+            true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200"],
+            false: "",
+        },
+        toggled: {
+            true: ["bg-blue-600", "focus:bg-blue-700", "hover:bg-blue-700", "active:bg-blue-800"],
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: true,
+            toggled: true,
+            className: ["bg-slate-400"],
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaToggleThumb = cvaMerge(["block", "rounded-full", "bg-white", "h-full", "aspect-square", "translate-x-0", "transition-all"], {
+    variants: {
+        toggled: {
+            true: ["translate-x-4"],
+            false: "",
+        },
+    },
+    defaultVariants: {},
+});
+const cvaToggleInput = cvaMerge(["absolute", "opacity-0", "-z-10"]);
+const cvaToggleLabelContainer = cvaMerge(["grid", "gap-1"]);
+const cvaToggleLabel = cvaMerge([]);
+const cvaToggleDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
+    variants: {
+        disabled: {
+            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            false: "",
+        },
+    },
+});
+
 /**
  * Use Toggle when you have to only enable/disable a feature.
  *
@@ -14507,28 +14955,26 @@ const TimeRangeField = (_a) => {
  * @param {ToggleProps} props - The props for the Toggle component
  * @returns {JSX.Element} Toggle component
  */
-const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
-    return (jsxs(ToggleWrapper, { className: className, onClick: onClick, children: [jsxs(InputContainer, { htmlFor: id, children: [jsx$1(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
-                            e.stopPropagation();
-                            onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx$1(SwitchContainer, { "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size, children: jsx$1(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) })] }), name || description ? (jsxs(LabelContainer, { children: [jsx$1(Label$1, { htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled, children: name }), description && (jsx$1(Description, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled, children: description }))] })) : null] }));
+const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId = "toggle", onBlur, name, description = "", }, ref) => {
+    const showLabelContainer = Boolean(name || description);
+    const getTestId = (suffix) => `${dataTestId}-${suffix}`;
+    return (jsx$1("span", { className: className, onClick: onClick, "data-testid": getTestId("outer-wrapper"), children: jsxs("label", { className: cvaToggleWrapper(), htmlFor: id, "data-testid": getTestId("wrapper"), children: [jsx$1("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx$1("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx$1(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), jsx$1("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })] })), jsx$1("input", { name: name, className: cvaToggleInput(), type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+                        e.stopPropagation();
+                        onChange(!toggled, e);
+                    }, id: id, "aria-checked": toggled, tabIndex: tabIndex, required: required, ref: ref, "data-testid": getTestId("input"), onBlur: onBlur })] }) }));
 });
-Toggle.displayName = "Toggle";
-const ToggleWrapper = tw.div `tu-toggle__wrapper`;
-const InputContainer = tw.label `tu-toggle__input-container `;
-const HiddenInput = tw.input `tu-toggle__input`;
-const Switch = tw.label `
-  ${({ $toggled }) => ($toggled ? tws `tu-toggle__switch` : tws `tu-toggle`)}`;
-const SwitchContainer = tw.label `
-tu-toggle__switch-container
-  ${({ $disabled }) => $disabled && tws `tu-toggle--disabled`};
-  ${({ $size }) => ($size === "small" ? tws `tu-toggle--small` : tws `tu-toggle--medium`)};
-  ${({ $toggled }) => $toggled && tws `tu-toggle--toggled`}`;
-const LabelContainer = tw.div `tu-toggle__label-container`;
-const Description = tw.label `
-tu-toggle__description
-${({ $disabled }) => $disabled && tws `tu-toggle__description--disabled`}
-`;
+
+const cvaUploadInputField = cvaMerge([
+    "px-0",
+    "py-0",
+    "file:w-0",
+    "file:h-0",
+    "file:invisible",
+    "file:px-0",
+    "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.
@@ -14537,7 +14983,7 @@ ${({ $disabled }) => $disabled && tws `tu-toggle__description--disabled`}
  */
 const UploadInput = forwardRef((_a, ref) => {
     var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsx$1(UploadInputContainer, { children: jsx$1(BaseInput, Object.assign({ addonBefore: uploadLabel, ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+    return (jsx$1(UploadInputContainer, { children: jsx$1(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
             // onClick used to work with nonInteractive option
             onClick: event => {
                 if (nonInteractive) {
@@ -14568,4 +15014,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label$1 as Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, Search, Select, SelectPrefix, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, getOrderedOptions, isMultiValue, useCustomComponents };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isMultiValue, useCustomComponents };