@trackunit/react-form-components 0.0.105 → 0.0.106

package/index.cjs.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var React = require('react');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -75,13 +75,26 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
+const cvaActionButton = cssClassVarianceUtilities.cvaMerge(["drop-shadow-none", "rounded-md"], {
+    variants: {
+        size: {
+            small: ["w-6", "h-6"],
+            medium: ["w-8", "h-8"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaActionContainer = cssClassVarianceUtilities.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":
@@ -107,9 +120,8 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsxRuntime.jsx("div", { className: "flex p-1", children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton(), disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
 };
-const cvaActionButton = cssClassVarianceUtilities.cvaMerge(["drop-shadow-none", "rounded-md"]);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -148,6 +160,96 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+const cvaInputBase = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
+const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
+const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
+    variants: {
+        size: {
+            small: ["h-8"],
+            medium: ["h-10"],
+        },
+        disabled: {
+            true: cvaInputBaseDisabled(),
+            false: "",
+        },
+        invalid: {
+            true: cvaInputBaseInvalid(),
+            false: "",
+        },
+    },
+});
+const cvaInputField = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "px-3",
+    "border-slate-300",
+    "text-slate-500",
+    "bg-slate-50",
+]);
+const cvaInputAddonBefore = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonAfter = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
+const cvaInputPrefix = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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.
@@ -157,28 +259,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__namespace.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 = React.useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
-    return (jsxRuntime.jsxs(InputContainer$1, { "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx(AddonBefore, { "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx(InputPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tailwindStyledComponents.tws `tu-input__field`, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx(InputSuffix, { "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx(AddonAfter, { "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+    const renderAsDisabled = rest.disabled || rest.readOnly;
+    return (jsxRuntime.jsxs("div", { className: cvaInput({
+            disabled: renderAsDisabled,
+            invalid: isInvalid,
+            size: fieldSize,
+            className,
+        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("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 ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+});
+
+const cvaLabel = cssClassVarianceUtilities.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 = tailwindStyledComponents.tw.div `
-  tu-input__prefix
-`;
-const InputSuffix = tailwindStyledComponents.tw.div `
-  tu-input__suffix
-`;
-const AddonBefore = tailwindStyledComponents.tw.div `
-  tu-input__addon-before
-`;
-const AddonAfter = tailwindStyledComponents.tw.div `
-  tu-input__addon-after
-`;
-const InputContainer$1 = tailwindStyledComponents.tw.label `
-  tu-input
-  ${({ $invalid }) => ($invalid ? tailwindStyledComponents.tws `tu-input--invalid` : null)}
-  ${({ $disabled }) => ($disabled ? tailwindStyledComponents.tws `tu-input--disabled` : null)}
-  ${({ $fieldSize }) => ($fieldSize === "small" ? tailwindStyledComponents.tws `tu-input--small` : null)}
-`;
 
 /**
  * The CheckIcon component is used by the checkbox to display the checked state.
@@ -190,6 +311,130 @@ const CheckIcon = ({ className, dataTestId }) => {
     return (jsxRuntime.jsx("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: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m2 5.5 2 2L8.5 3" }) }));
 };
 
+const cvaCheckbox = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([
+    "grid",
+    "outline-none",
+    "grid-cols-min-fr",
+    "items-center",
+    "gap-2",
+    "group",
+]);
+const cvaCheckboxInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
+const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
  *
@@ -213,8 +458,8 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { xmlns: "ht
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React__namespace.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 ? jsxRuntime.jsx(StyledIndeterminateIcon, {}) : checked && jsxRuntime.jsx(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 ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
@@ -228,32 +473,16 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxRuntime.jsxs(CheckboxContainer, { "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className, ref: internalRef, onKeyPress: onKeyPress, children: [jsxRuntime.jsx(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 })), jsxRuntime.jsx(CheckboxWrapper, { id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label && (jsxRuntime.jsx(Label$2, { className: tailwindStyledComponents.tws `cursor-pointer`, "$disabled": isReadonly, "$isInvalid": isReadonly ? false : isInvalid, children: label })), suffix] }));
+    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsxRuntime.jsx("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 })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+                    disabled: isReadonly,
+                    invalid: isReadonly ? false : isInvalid,
+                    state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
+                }), children: icon }), label && (jsxRuntime.jsx("span", { className: cvaLabel({
+                    invalid: isReadonly ? false : isInvalid,
+                    disabled: isReadonly,
+                    className: "cursor-pointer",
+                }), children: label })), suffix] }));
 });
-const StyledCheckIcon = tailwindStyledComponents.twx(CheckIcon) `tu-checkbox--icon`;
-const StyledIndeterminateIcon = tailwindStyledComponents.twx(IndeterminateIcon) `tu-checkbox--icon`;
-const CheckboxContainer = tailwindStyledComponents.tw.label `tu-checkbox--container group`;
-const HiddenInput$1 = tailwindStyledComponents.tw.input `tu-checkbox--input`;
-const CheckboxWrapper = tailwindStyledComponents.tw.span `
-  tu-checkbox
-  ${({ $checked, $disabled, $indeterminate }) => {
-    if ($disabled) {
-        return tailwindStyledComponents.tws `tu-checkbox--disabled`;
-    }
-    return $indeterminate
-        ? tailwindStyledComponents.tws `tu-checkbox--indeterminate`
-        : $checked
-            ? tailwindStyledComponents.tws `tu-checkbox--selected`
-            : tailwindStyledComponents.tws `tu-checkbox--deselected`;
-}}
-
-  ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
-`;
-const Label$2 = tailwindStyledComponents.tw.span `
-  tu-label
-  ${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
-  ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.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
@@ -2704,14 +2933,28 @@ const DateInput = React.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 (jsxRuntime.jsx(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 (jsxRuntime.jsx("label", { id: id || "", htmlFor: htmlFor || "", className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, children: children }));
 };
-const Root$2 = tailwindStyledComponents.tw.label `
-tu-label
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
-${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--invalid`}
-`;
+
+const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap"], {
+    variants: {
+        disabled: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+});
+const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "mb-1"]);
+const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
+    variants: {
+        invalid: {
+            true: "text-danger-500",
+            false: "",
+        },
+    },
+});
+const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
@@ -2721,27 +2964,8 @@ ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--inva
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
-    return (jsxRuntime.jsxs(FormGroupRoot, { className: className, "data-testid": dataTestId, "$disabled": disabled, children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, { dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && jsxRuntime.jsx(reactComponents.Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, children: tip })] }), children, jsxRuntime.jsxs(ContainerAfter, { "$isInvalid": isInvalid, children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && jsxRuntime.jsx(HelpAddon, { "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon })] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore({ className }), children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && jsxRuntime.jsx(reactComponents.Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, children: tip })] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
-const FormGroupRoot = tailwindStyledComponents.tw.div `
-  tu-form-group
-  ${({ $disabled }) => {
-    return $disabled ? "pointer-events-none" : null;
-}}
-`;
-const ContainerBefore = tailwindStyledComponents.tw.div `
-  tu-form-group__container-before
-`;
-const FormGroupLabel = tailwindStyledComponents.twx(Label$1) `
-  component-formGroup-font
-`;
-const ContainerAfter = tailwindStyledComponents.tw.div `
-  tu-form-group__container-after
-  ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-form-group__container-after--invalid` : null)}
-`;
-const HelpAddon = tailwindStyledComponents.tw.span `
-  tu-form-group__help-addon
-`;
 
 /**
  * The date field component is used for entering date values.
@@ -2757,6 +2981,45 @@ const DateField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+const cvaDropZone = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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
  *
@@ -2796,26 +3059,13 @@ const DropZone = (_a) => {
             setFileDropped(true);
         }
     };
-    return (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs(DropZoneLabel, { htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
-};
-const Root$1 = tailwindStyledComponents.tw.div `
-  tu-drop-zone
-   ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-drop-zone--small` : null)}
-   ${({ $size }) => ($size === "medium" ? tailwindStyledComponents.tws `tu-drop-zone--medium` : null)}
-   ${({ $size }) => ($size === "large" ? tailwindStyledComponents.tws `tu-drop-zone--large` : null)}
-   ${({ $dragActive }) => ($dragActive ? tailwindStyledComponents.tws `tu-drop-zone--drag-active` : null)}
-   ${({ $fileDropped }) => ($fileDropped ? tailwindStyledComponents.tws `tu-drop-zone--drop-complete` : null)}
-   ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-drop-zone--invalid` : null)}
-   ${({ $disabled }) => ($disabled ? tailwindStyledComponents.tws `tu-drop-zone--disabled` : null)}
-`;
-const DropZoneLabel = tailwindStyledComponents.tw.label `
-  tu-drop-zone__label
-`;
+        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
+};
 
 /**
  * A Email Input component is used for input of the type Email.
@@ -2877,39 +3127,40 @@ const NumberField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+const cvaOptionCardLabel = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
+const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
+
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
 const OptionCard = React.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 (jsxRuntime.jsxs(Container$3, { "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "hidden peer" }, rest)), jsxRuntime.jsxs(Label, { htmlFor: htmlForId, className: className, "$disabled": disabled, children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxRuntime.jsxs(Content, { children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { subtle: true, align: "center", children: description }))] }))] })] }));
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "hidden peer" }, rest)), jsxRuntime.jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { subtle: true, align: "center", children: description }))] }))] })] }));
 });
-const Container$3 = tailwindStyledComponents.tw.div `
-  contents
-`;
-const Label = tailwindStyledComponents.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 = tailwindStyledComponents.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.
@@ -10241,7 +10492,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,
@@ -10630,7 +10881,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),
@@ -10652,7 +10903,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,
@@ -10863,7 +11114,7 @@ var components = {
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer,
   IndicatorSeparator: IndicatorSeparator,
-  Input: Input$1$1,
+  Input: Input$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu$1,
   MenuList: MenuList,
@@ -10876,7 +11127,7 @@ var components = {
   MultiValueRemove: MultiValueRemove,
   Option: Option$1,
   Placeholder: Placeholder$1,
-  SelectContainer: SelectContainer$2,
+  SelectContainer: SelectContainer$1,
   SingleValue: SingleValue$1,
   ValueContainer: ValueContainer
 };
@@ -13719,25 +13970,69 @@ var CreatableSelect$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var CreatableSelect$1$1 = CreatableSelect$1;
 
+const cvaSelect = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge("flex justify-center items-center text-slate-400 hover:text-slate-500 mr-2 cursor-pointer");
+const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
+const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
+    "flex justify-center items-center text-slate-400 hover:text-slate-500 mr-2 cursor-pointer",
+    "ml-1",
+]);
+const cvaSelectMenuList = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+    variants: {
+        visible: { true: "visible", false: "invisible" },
+    },
+});
+const cvaSelectCounter = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
+const cvaSelectMenu = cssClassVarianceUtilities.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 (jsxRuntime.jsxs(Container$2, { "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled, children: [label && !hideLabel && jsxRuntime.jsx(Label$1, { htmlFor: id, children: label }), children, (hasError || info) && (jsxRuntime.jsx(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 (jsxRuntime.jsxs("label", { className: cvaSelect({ invalid: hasError, disabled: isDisabled }), "data-testid": dataTestId, children: [label && !hideLabel && jsxRuntime.jsx(Label, { htmlFor: id, children: label }), children, (hasError || info) && jsxRuntime.jsx(reactComponents.Text, { size: "small", children: hasError ? error : info })] }));
 };
-const Container$2 = tailwindStyledComponents.tw.label `
-  tu-select__container 
-  tu-select
-  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
-`;
-const InformativeText = tailwindStyledComponents.twx(reactComponents.Text) `
-  tu-informative-text
-  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
-`;
 
 /**
  * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
@@ -13786,9 +14081,6 @@ const getOrderedOptions = (options, value) => {
     }
     return options || [];
 };
-const SelectPrefix = tailwindStyledComponents.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
@@ -13868,7 +14160,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 (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxRuntime.jsxs(Counter, { children: ["+", counter] }) }, item.text + index));
+            return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxRuntime.jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
         }
         if (isLast) {
             return null;
@@ -13887,19 +14179,10 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         return null;
     })
         .filter(element => element !== null);
-    return (jsxRuntime.jsxs(Container$1, { style: {
+    return (jsxRuntime.jsxs("div", { style: {
             width: `${width}`,
-        }, "$ready": isReady, ref: containerRef, children: [renderedElements, postFix] }));
+        }, className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, children: [renderedElements, postFix] }));
 };
-const Container$1 = tailwindStyledComponents.tw.div `
-tu-select__dynamic-tag--container
-${({ $ready }) => {
-    return $ready ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`;
-}}
-`;
-const Counter = tailwindStyledComponents.tw.div `
-tu-select__counter
-`;
 
 /**
  * A hook to retrieve components override object.
@@ -13943,7 +14226,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                 : [], postFix: searchInput, disabled: disabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags &&
                                     tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         var _a, _b;
-                                        return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindStyledComponents.tws `shrink-0 inline-flex`, onClose: e => {
+                                        return (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0 inline-flex", onClose: e => {
                                                 var _a, _b;
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
@@ -13953,23 +14236,21 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 }
                 return (jsxRuntime.jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { size: "small", className: tailwindStyledComponents.tws `mt-1.5 mr-1` });
+                return jsxRuntime.jsx(reactComponents.Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDownIcon", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsxRuntime.jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
+                return props.selectProps.isLoading ? null : (jsxRuntime.jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(XMarkIcon, { onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircleIcon", size: "medium" }) }) })));
+                return (jsxRuntime.jsx(components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircleIcon", size: "medium" }) }) })));
             }, Control: props => {
-                return (jsxRuntime.jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tailwindStyledComponents.tws `tu-select__control--disabled` : "" })));
+                return jsxRuntime.jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
-                return (jsxRuntime.jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tailwindStyledComponents.tws `tu-select__single-value--disabled` : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
+                return (jsxRuntime.jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
-                return (jsxRuntime.jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
-                        ? tailwindStyledComponents.tws `tu-select__menu-list animate-fade-in-fast`
-                        : tailwindStyledComponents.tws `tu-select__menu-list animate-fade-out-fast` })));
+                return (jsxRuntime.jsx(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
             }, MenuList: props => {
                 return (jsxRuntime.jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
                             const listEl = e.currentTarget;
@@ -13990,13 +14271,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 = tailwindStyledComponents.tw.div `
-tu-select--icon
-`;
-const XMarkIcon = tailwindStyledComponents.tw.div `
-tu-select--icon
-tu-select__x-icon
-`;
 
 /**
  * @template IsMulti
@@ -14085,7 +14359,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 = {
@@ -14115,7 +14389,7 @@ const CreatableSelect = (props) => {
         isClearable,
         id,
     };
-    return (jsxRuntime.jsx(SelectContainer$1, { label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncCreatableSelect$1, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+    return (jsxRuntime.jsx(SelectContainer, { label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncCreatableSelect$1, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
                         !disabled && openMenuHandler();
                     }, onMenuClose: () => {
                         closeMenuHandler();
@@ -14172,14 +14446,8 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxRuntime.jsxs(SelectContainer, { ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled, "$isReadOnly": readOnly, children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, { "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
+    return (jsxRuntime.jsxs("div", { ref: refContainer, className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(AsyncSelect$1, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(StateManagedSelect$1, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
 };
-const SelectContainer = tailwindStyledComponents.tw.div `
-  tu-select
-  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
-  ${({ $isReadOnly }) => ($isReadOnly ? tailwindStyledComponents.tws `tu-select--readonly` : null)}
-`;
 Select.displayName = "Select";
 
 const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
@@ -14294,6 +14562,103 @@ const PhoneField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(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: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
 });
 
+const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+    variants: {
+        layout: {
+            inline: ["flex", "gap-3", "flex-row", "items-center"],
+        },
+    },
+});
+const cvaRadioItem = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
+const cvaRadioItemLabelContainer = cssClassVarianceUtilities.cvaMerge(["gap-y-1", "grid"]);
+const cvaRadioItemDescription = cssClassVarianceUtilities.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__namespace.createContext(null);
 
 /**
@@ -14309,7 +14674,7 @@ const RadioGroupContext = React__namespace.createContext(null);
  * @returns {JSX.Element} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsxRuntime.jsx(FormGroup, { label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(Flex, { "$inline": inline, className: className, "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+    return (jsxRuntime.jsx(FormGroup, { label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -14319,9 +14684,6 @@ const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inli
                 }, children: children }) }) }));
 };
 RadioGroup.displayName = "RadioGroup";
-const Flex = tailwindStyledComponents.tw.div `
-${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inline` : tailwindStyledComponents.tws `tu-radiogroup`)}
-`;
 
 /**
  * The RadioItem component.
@@ -14332,20 +14694,12 @@ ${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inlin
 const RadioItem = ({ label, value, dataTestId, className, description, }) => {
     const groupCtx = React__namespace.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxRuntime.jsxs(InputWrapper, { className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper`, children: [jsxRuntime.jsx(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 }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(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 && (jsxRuntime.jsx(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 = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
-const Input = tailwindStyledComponents.tw.input `
-tu-radioitem
-${({ $checked }) => $checked && tailwindStyledComponents.tws `tu-radioitem--checked`}
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem--disabled`}
-${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-radioitem--invalid`}
-`;
-const LabelContainer$1 = tailwindStyledComponents.tw.div `tu-radioitem__label-container`;
-const Description$1 = tailwindStyledComponents.tw.label `
-tu-radioitem__description
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem__description--disabled`}
-`;
+    return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper`, children: [jsxRuntime.jsx("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 }), jsxRuntime.jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsxRuntime.jsx(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 && (jsxRuntime.jsx("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 = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -14413,6 +14767,32 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
  */
 const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
 
+const cvaSearch = cssClassVarianceUtilities.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.
  *
@@ -14420,44 +14800,54 @@ const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Ob
  * @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 (jsxRuntime.jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("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 (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
-const StyledTextInput = tailwindStyledComponents.twx(TextInput) `
-  tu-search
-  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tailwindStyledComponents.tws `tu-search--border`}
-  ${({ $widenOnFocus }) => $widenOnFocus && tailwindStyledComponents.tws `tu-search--widen-on-focus`}
-`;
+
+const cvaTextArea = cssClassVarianceUtilities.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__namespace.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 (jsxRuntime.jsx(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 (jsxRuntime.jsx("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 = tailwindStyledComponents.tw.textarea `
-  tu-textarea
-  ${({ $invalid }) => ($invalid ? tailwindStyledComponents.tws `tu-textarea--invalid` : null)}
-  ${({ disabled }) => (disabled ? tailwindStyledComponents.tws `tu-textarea--disabled` : null)}
-  ${({ $resize }) => {
-    switch ($resize) {
-        case "both":
-            return tailwindStyledComponents.tws `resize`;
-        case "horizontal":
-            return tailwindStyledComponents.tws `resize-x`;
-        case "vertical":
-            return tailwindStyledComponents.tws `resize-y`;
-        case "none":
-            return tailwindStyledComponents.tws `resize-none`;
-        default:
-            return null;
-    }
-}};
-`;
 
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
@@ -14523,6 +14913,64 @@ const TimeRangeField = (_a) => {
     return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid, children: children }, rest)) }));
 };
 
+const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaToggleTrack = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "-z-10"]);
+const cvaToggleLabelContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1"]);
+const cvaToggleLabel = cssClassVarianceUtilities.cvaMerge([]);
+const cvaToggleDescription = cssClassVarianceUtilities.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.
  *
@@ -14533,28 +14981,26 @@ const TimeRangeField = (_a) => {
  * @param {ToggleProps} props - The props for the Toggle component
  * @returns {JSX.Element} Toggle component
  */
-const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
-    return (jsxRuntime.jsxs(ToggleWrapper, { className: className, onClick: onClick, children: [jsxRuntime.jsxs(InputContainer, { htmlFor: id, children: [jsxRuntime.jsx(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 }), jsxRuntime.jsx(SwitchContainer, { "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size, children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) })] }), name || description ? (jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label$1, { htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled, children: name }), description && (jsxRuntime.jsx(Description, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled, children: description }))] })) : null] }));
+const Toggle = React__namespace.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 (jsxRuntime.jsx("span", { className: className, onClick: onClick, "data-testid": getTestId("outer-wrapper"), children: jsxRuntime.jsxs("label", { className: cvaToggleWrapper(), htmlFor: id, "data-testid": getTestId("wrapper"), children: [jsxRuntime.jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsxRuntime.jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxRuntime.jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsxRuntime.jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), jsxRuntime.jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })] })), jsxRuntime.jsx("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 = tailwindStyledComponents.tw.div `tu-toggle__wrapper`;
-const InputContainer = tailwindStyledComponents.tw.label `tu-toggle__input-container `;
-const HiddenInput = tailwindStyledComponents.tw.input `tu-toggle__input`;
-const Switch = tailwindStyledComponents.tw.label `
-  ${({ $toggled }) => ($toggled ? tailwindStyledComponents.tws `tu-toggle__switch` : tailwindStyledComponents.tws `tu-toggle`)}`;
-const SwitchContainer = tailwindStyledComponents.tw.label `
-tu-toggle__switch-container
-  ${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-toggle--disabled`};
-  ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-toggle--small` : tailwindStyledComponents.tws `tu-toggle--medium`)};
-  ${({ $toggled }) => $toggled && tailwindStyledComponents.tws `tu-toggle--toggled`}`;
-const LabelContainer = tailwindStyledComponents.tw.div `tu-toggle__label-container`;
-const Description = tailwindStyledComponents.tw.label `
-tu-toggle__description
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-toggle__description--disabled`}
-`;
+
+const cvaUploadInputField = cssClassVarianceUtilities.cvaMerge([
+    "px-0",
+    "py-0",
+    "file:w-0",
+    "file:h-0",
+    "file:invisible",
+    "file:px-0",
+    "dark:text-gray-400",
+    "self-center",
+]);
+const cvaUploadInputAddonBefore = cssClassVarianceUtilities.cvaMerge(["block", "truncate", "w-28", "pt-2"]);
 
 /**
  * A thin wrapper around the `BaseInput` component for upload input fields.
@@ -14563,7 +15009,7 @@ ${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-toggle__descr
  */
 const UploadInput = React.forwardRef((_a, ref) => {
     var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsxRuntime.jsx(UploadInputContainer, { children: jsxRuntime.jsx(BaseInput, Object.assign({ addonBefore: uploadLabel, ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+    return (jsxRuntime.jsx(UploadInputContainer, { children: jsxRuntime.jsx(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) {
@@ -14604,7 +15050,7 @@ exports.DropZone = DropZone;
 exports.EmailField = EmailField;
 exports.EmailInput = EmailInput;
 exports.FormGroup = FormGroup;
-exports.Label = Label$1;
+exports.Label = Label;
 exports.MultiSelectMenuItem = MultiSelectMenuItem;
 exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;
@@ -14616,7 +15062,6 @@ exports.RadioItem = RadioItem;
 exports.Schedule = Schedule;
 exports.Search = Search;
 exports.Select = Select;
-exports.SelectPrefix = SelectPrefix;
 exports.SingleSelectMenuItem = SingleSelectMenuItem;
 exports.TextArea = TextArea;
 exports.TextAreaField = TextAreaField;
@@ -14628,6 +15073,24 @@ exports.Toggle = Toggle;
 exports.UploadField = UploadField;
 exports.UploadInput = UploadInput;
 exports.ValueType = StateManagedSelect$1;
+exports.cvaInput = cvaInput;
+exports.cvaInputAddon = cvaInputAddon;
+exports.cvaInputAddonAfter = cvaInputAddonAfter;
+exports.cvaInputAddonBefore = cvaInputAddonBefore;
+exports.cvaInputBase = cvaInputBase;
+exports.cvaInputBaseDisabled = cvaInputBaseDisabled;
+exports.cvaInputBaseInvalid = cvaInputBaseInvalid;
+exports.cvaInputField = cvaInputField;
+exports.cvaInputPrefix = cvaInputPrefix;
+exports.cvaInputSuffix = cvaInputSuffix;
+exports.cvaSelect = cvaSelect;
+exports.cvaSelectCounter = cvaSelectCounter;
+exports.cvaSelectDynamicTagContainer = cvaSelectDynamicTagContainer;
+exports.cvaSelectIcon = cvaSelectIcon;
+exports.cvaSelectMenu = cvaSelectMenu;
+exports.cvaSelectMenuList = cvaSelectMenuList;
+exports.cvaSelectPrefix = cvaSelectPrefix;
+exports.cvaSelectXIcon = cvaSelectXIcon;
 exports.getOrderedOptions = getOrderedOptions;
 exports.isMultiValue = isMultiValue;
 exports.useCustomComponents = useCustomComponents;