@trackunit/react-form-components 0.0.452 → 0.0.454

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner, useIs
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
+import React__default, { isValidElement, forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import { isValidDate } from 'rxjs/internal/util/isDate';
@@ -16,6 +16,7 @@ import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 import { nonNullable } from '@trackunit/shared-utils';
+import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 
 var defaultTranslations = {
@@ -126,14 +127,14 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
             case "PHONE_NUMBER":
                 return window.open(`tel:${value}`);
             case "COPY":
+                // Typescript seems to be unable to detect RefObject
+                // as one of the members of the union RefObject | string | null which gives access to the `current` property
+                // eslint-disable-next-line react/prop-types
                 return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
             default:
                 return null;
         }
     };
-    if (ButtonAction === null) {
-        return null;
-    }
     return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }));
 };
 
@@ -179,21 +180,56 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/**
+ * Used to compare two React nodes for deep equality.
+ */
+const compareReactNodes = (node1, node2) => {
+    // Base case: If both objects are identical, return true.
+    if (node1 === node2) {
+        return true;
+    }
+    // Check if both objects are valid React elements.
+    if (isValidElement(node1) && isValidElement(node2)) {
+        const { type: type1, props: props1, key: key1 } = node1;
+        const { type: type2, props: props2, key: key2 } = node2;
+        if (type1 !== type2 || key1 !== key2) {
+            return false;
+        }
+        return compareReactNodes(props1, props2);
+    }
+    // Check if both objects are objects and not null.
+    if (typeof node1 !== "object" || typeof node2 !== "object" || node1 === null || node2 === null) {
+        return false;
+    }
+    // Get the keys of both objects.
+    const keys1 = Object.keys(node1);
+    const keys2 = Object.keys(node2);
+    // Check if the number of keys is the same.
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    // Iterate through the keys and compare their values recursively.
+    for (const key of keys1) {
+        if (!keys2.includes(key) ||
+            !compareReactNodes(node1[key], node2[key])) {
+            return false;
+        }
+    }
+    // If all checks pass, the objects are deep equal.
+    return true;
+};
+
 const cvaInputBase = cvaMerge([
     "component-baseInput-shadow",
     "component-baseInput-border",
     "component-baseInput-background",
     "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "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 cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
 const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -202,24 +238,15 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
         },
         disabled: {
             true: cvaInputBaseDisabled(),
-            false: "",
+            false: [""],
         },
         invalid: {
             true: cvaInputBaseInvalid(),
-            false: "",
+            false: [""],
         },
     },
 });
-const cvaInputField = cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "focus-visible:outline-none",
-], {
+const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
     variants: {
         size: {
             small: ["py-1"],
@@ -227,9 +254,28 @@ const cvaInputField = cvaMerge([
         },
         disabled: {
             true: ["text-slate-700"],
-            false: "",
+            false: [""],
+        },
+        autoFocus: {
+            true: [""],
+            false: ["focus-visible:outline-none"],
+        },
+        addonBefore: {
+            true: [""],
+            false: [""],
+        },
+        prefix: {
+            true: ["ps-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonBefore: true,
+            prefix: true,
+            className: ["ps-4"],
+        },
+    ],
 });
 const cvaInputAddon = cvaMerge([
     "flex",
@@ -241,7 +287,6 @@ const cvaInputAddon = cvaMerge([
     "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",
@@ -251,21 +296,62 @@ const cvaInputPrefix = cvaMerge([
     "component-baseInput-prefix",
     "component-search-borderless",
     "pl-3",
+    "absolute",
+    "inset-y-0",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonBefore: {
+            true: ["relative"],
+            false: [""],
         },
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
-            false: "",
+            false: [""],
+        },
+        addonAfter: {
+            true: ["relative"],
+            false: [""],
+        },
+        actions: {
+            true: ["right-10"],
+            false: [""],
         },
     },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            actions: true,
+            className: ["right-0"],
+        },
+    ],
+});
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
+const cvaInputAction = cvaMerge(["absolute", "end-0.5"], {
+    variants: {
+        addonAfter: {
+            true: ["relative"],
+            false: [""],
+        },
+        suffix: {
+            true: ["absolute"],
+            false: [""],
+        },
+    },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            suffix: true,
+            className: ["relative"],
+        },
+    ],
 });
 
 /**
@@ -277,7 +363,7 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React.forwardRef((_a, ref) => {
-    var _b, _c;
+    var _b;
     var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "inputClassName", "placeholder", "addonBeforeClassName"]);
     const renderAsDisabled = rest.disabled || rest.readOnly;
     const innerRef = React.useRef(null);
@@ -288,15 +374,29 @@ const BaseInput = React.forwardRef((_a, ref) => {
             invalid: isInvalid,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsx("div", { className: cvaInputPrefix({
+                    disabled: renderAsDisabled,
+                    addonBefore: addonBefore !== undefined,
+                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({
+                    autoFocus: rest.autoFocus,
+                    size: fieldSize,
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ "aria-required": rest.required, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                    className: inputClassName,
+                    addonBefore: addonBefore !== undefined,
+                    prefix: !compareReactNodes(addonBefore, prefix),
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef }, rest, { disabled: renderAsDisabled, readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
+                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
+                    actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
+                }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
-                ((_b = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
-                ((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+                ((_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
+                innerRef.current.value.length > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsx("div", { className: cvaInputAction({
+                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
+                    suffix: !compareReactNodes(addonBefore, suffix),
+                }), children: actions })) : null, addonAfter && !compareReactNodes(addonBefore, addonAfter) && !compareReactNodes(addonAfter, suffix) ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter })) : null] }));
 });
+BaseInput.displayName = "BaseInput";
 
 const cvaLabel = cvaMerge([
     "text-base",
@@ -349,15 +449,11 @@ const cvaCheckbox = cvaMerge([
     "justify-center",
     "box-border",
     "transition",
-    "focus:bg-slate-200",
     "outline-0",
     "active:bg-slate-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
     "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
@@ -365,13 +461,7 @@ const cvaCheckbox = cvaMerge([
 ], {
     variants: {
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700", "group-focus:ring-2", "group-focus:ring-inset"],
             false: "",
         },
         state: {
@@ -381,11 +471,8 @@ const cvaCheckbox = cvaMerge([
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
                 "active:bg-primary-700",
-                "focus:bg-primary-700",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
-                "group-focus:bg-primary-700",
-                "group-focus:border-primary-700",
             ],
             deselected: ["group-hover:bg-slate-100"],
             indeterminate: [
@@ -393,14 +480,10 @@ const cvaCheckbox = cvaMerge([
                 "border-primary-600",
                 "hover:bg-primary-700",
                 "hover:border-primary-700",
-                "focus:bg-primary-800",
-                "focus:border-primary-800",
                 "active:bg-primary-800",
                 "active:border-primary-800",
                 "group-hover:bg-primary-700",
                 "group-hover:border-primary-700",
-                "group-focus:bg-primary-800",
-                "group-focus:border-primary-800",
             ],
         },
         disabled: {
@@ -408,13 +491,8 @@ const cvaCheckbox = cvaMerge([
                 "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-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -489,10 +567,10 @@ const Checkbox = React.forwardRef((_a, ref) => {
         var _a, _b;
         e.preventDefault();
         if ("Space" === e.code) {
-            (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
         if ("Enter" === e.code) {
-            (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
+            (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
         }
     };
     const [labelRef, setLabelRef] = React.useState(null);
@@ -500,16 +578,17 @@ const Checkbox = React.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsx("input", Object.assign({ "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox" }, rest, { ref: ref })), jsx("span", { className: cvaCheckbox({
+    return (jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsx("input", Object.assign({ "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox" }, rest, { ref: ref })), jsx("span", { className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label && (jsx("span", { className: "flex", children: jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsx("span", { className: "flex", children: jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
                         className: "cursor-pointer",
-                    }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })), suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })) : null, suffix] }));
 });
+Checkbox.displayName = "Checkbox";
 
 /**
  * The Label component is used for labels for input fields.
@@ -549,7 +628,7 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, required = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required && jsx("span", { className: "required-asterisk", children: "*" })] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? jsx("span", { className: "required-asterisk", children: "*" }) : null] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
 };
 
 /**
@@ -560,8 +639,9 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
 const CheckboxField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
     const htmlForId = id ? id : "checkboxField-" + v4();
-    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
 });
+CheckboxField.displayName = "CheckboxField";
 
 /**
  * Validates if the given value is a valid hex color.
@@ -594,16 +674,17 @@ const ColorField = forwardRef((_a, ref) => {
         }
     }, [onChange]);
     const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxs("div", { className: cvaInput({
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxs("div", { className: cvaInput({
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId && `${dataTestId}-textField`, onChange: handleChange, type: "text", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
-                        if (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : null, onChange: handleChange, type: "text", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+                        if (innerRef.current) {
                             innerRef.current.click();
                         }
                     }, variant: "ghost-neutral" })] }) }));
 });
+ColorField.displayName = "ColorField";
 
 /**
  * A wrapper around BaseInput with a pop-up day picker.
@@ -615,8 +696,9 @@ const DateInput = forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => isValidDate(date) ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
+    return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value) }, rest)));
 });
+DateInput.displayName = "DateInput";
 
 /**
  * The date field component is used for entering date values.
@@ -629,8 +711,9 @@ const DateField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + v4();
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
 });
+DateField.displayName = "DateField";
 
 const cvaDropZone = cvaMerge([
     "flex",
@@ -720,7 +803,7 @@ const DropZone = (_a) => {
         e.preventDefault();
         e.stopPropagation();
         setDragActive(false);
-        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
+        if (e.dataTransfer.files[0] && !disabled) {
             filesSelected(e.dataTransfer.files);
             setFileDropped(true);
         }
@@ -740,7 +823,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
 };
 
 // Doing the same check as we do on the backend
@@ -770,7 +853,7 @@ const validateEmailAddress = (email) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange", "disableAction"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -781,9 +864,9 @@ const EmailInput = React.forwardRef((_a, ref) => {
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ actions: email &&
-            email.length > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
+    return (jsx(BaseInput, Object.assign({ actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
 });
+EmailInput.displayName = "EmailInput";
 
 /**
  * The EmailField component is used to enter email.
@@ -803,8 +886,9 @@ const EmailField = forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: renderAsInvalid, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: renderAsInvalid, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
+EmailField.displayName = "EmailField";
 
 /**
  * A thin wrapper around the `BaseInput` component for number input fields.
@@ -814,6 +898,7 @@ const EmailField = forwardRef((_a, ref) => {
 const NumberInput = forwardRef((props, ref) => {
     return jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
 });
+NumberInput.displayName = "NumberInput";
 
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
@@ -826,8 +911,9 @@ const NumberField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "numberField-" + v4();
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(NumberInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(NumberInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
+NumberField.displayName = "NumberField";
 
 const cvaOptionCardLabel = cvaMerge([
     cvaInputBase(),
@@ -861,11 +947,11 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
 const OptionCard = forwardRef((_a, ref) => {
     var { icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "contentClassName", "dataTestId", "customImage"]);
     const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
-    return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
-                        icon &&
-                        !customImage &&
-                        cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading && (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsx(Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
+    return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled && icon && !customImage
+                        ? cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
+                        : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
 });
+OptionCard.displayName = "OptionCard";
 
 /**
  * A thin wrapper around the `BaseInput` component for password input fields.
@@ -876,6 +962,7 @@ const PasswordInput = forwardRef((props, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     return (jsx(BaseInput, Object.assign({ ref: ref }, props, { actions: jsx("div", { className: cvaActionContainer(), children: jsx(IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" })));
 });
+PasswordInput.displayName = "PasswordInput";
 
 /**
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -891,8 +978,9 @@ const PasswordField = forwardRef((_a, ref) => {
     const handleChange = useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PasswordInput, Object.assign({}, rest, { "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PasswordInput, Object.assign({}, rest, { "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value })) }));
 });
+PasswordField.displayName = "PasswordField";
 
 /**
  * @param phoneNumber - a phone number as a string
@@ -1003,10 +1091,9 @@ const PhoneInput = forwardRef((_a, ref) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsx(BaseInput, Object.assign({ actions: !disableAction &&
-                innerValue &&
-                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, Object.assign({ actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
 });
+PhoneInput.displayName = "PhoneInput";
 
 /**
  * The PhoneField component is used to enter phone number.
@@ -1028,8 +1115,9 @@ const PhoneField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "name", "onChange", "onBlur"]);
     const htmlForId = id ? id : "phoneField-" + v4();
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsx(FormGroup, { className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
+    return (jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
 });
+PhoneField.displayName = "PhoneField";
 
 /**
  * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
@@ -1040,6 +1128,7 @@ const PhoneFieldWithController = forwardRef((_a, ref) => {
     var { control, controllerProps, name, value } = _a, rest = __rest(_a, ["control", "controllerProps", "name", "value"]);
     return (jsx(Controller, Object.assign({ control: control, defaultValue: value, name: name }, controllerProps, { render: ({ field }) => jsx(PhoneField, Object.assign({}, rest, field, { ref: ref })) })));
 });
+PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
 /**
  * Validates a phone number
@@ -1052,7 +1141,7 @@ const validatePhoneNumber = (phoneNumber) => {
     asYouType.input(phoneNumber);
     const countryCode = asYouType.getCallingCode();
     const national = asYouType.getNationalNumber();
-    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
+    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber.trim());
     const number = parsePhoneNumberFromString(safePhoneNumber);
     if (phoneNumber && isValidPhoneNumber(phoneNumber)) {
         return undefined;
@@ -1103,9 +1192,6 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1121,10 +1207,6 @@ const cvaRadioItem = cvaMerge([
                 "active:ring-2",
                 "active:ring-inset",
                 "active:ring-primary-700",
-                "focus:bg-slate-200",
-                "focus:ring-2",
-                "focus:ring-inset",
-                "focus:ring-primary-700",
                 "group-active:ring-2",
                 "group-active:ring-inset",
                 "group-active:ring-primary-700",
@@ -1132,13 +1214,7 @@ const cvaRadioItem = cvaMerge([
             false: "",
         },
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: ["border-red-600", "active:ring-red-700"],
             false: "",
         },
         disabled: {
@@ -1146,13 +1222,8 @@ const cvaRadioItem = cvaMerge([
                 "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-inset",
                 "group-active:ring-0",
                 "group-active:ring-inset",
             ],
@@ -1193,7 +1264,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(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -1213,11 +1284,11 @@ RadioGroup.displayName = "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("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId && `${dataTestId}-Wrapper`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { checked: isChecked, className: cvaRadioItem({
+    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { 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,
-                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId && `${dataTestId}-Description`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: description }))] })] }));
+                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId ? `${dataTestId}-Label` : undefined, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description ? (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: description })) : null] })] }));
 };
 
 const cvaTimeRange = cvaMerge(["flex", "flex-1", "items-center", "gap-4", "border-transparent", "rounded-md"]);
@@ -1229,7 +1300,6 @@ const cvaTimeRange = cvaMerge(["flex", "flex-1", "items-center", "gap-4", "borde
  * @returns {JSX.Element} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    var _a, _b;
     const [timeRange, setTimeRange] = React__default.useState(range !== null && range !== void 0 ? range : {
         timeFrom: "",
         timeTo: "",
@@ -1241,7 +1311,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeFrom) !== null && _a !== void 0 ? _a : "" }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: (_b = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeTo) !== null && _b !== void 0 ? _b : "" })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
 };
 
 const cvaScheduleItem = cvaMerge(["grid", "pb-4", "gap-2", "grid-cols-[60px,200px,60px,2fr]"]);
@@ -1268,7 +1338,7 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
         onChange(newSchedule);
     };
     return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
-            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDayActive && isActive, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key + label));
+            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDayActive ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key + label));
         }) }));
 };
 
@@ -1316,32 +1386,19 @@ const parseSchedule = (scheduleString) => {
         };
     });
     const filteredSchedule = schedule
-        .filter(daySchedule => daySchedule.range !== null && daySchedule.range !== undefined)
-        .map(daySchedule => ({ day: daySchedule.day, range: daySchedule.range, isAllDay: daySchedule.isAllDay }));
+        .filter(daySchedule => "range" in daySchedule && daySchedule.range)
+        .map(daySchedule => ({
+        day: daySchedule.day,
+        range: daySchedule.range,
+        isAllDay: daySchedule.isAllDay,
+    }));
     let variant;
     switch (schedule.length) {
         case 7:
-            const areEqual = schedule.every((day, _, collection) => {
-                var _a, _b, _c, _d, _e, _f;
-                return ((_b = (_a = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day === null || day === void 0 ? void 0 : day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) &&
-                    ((_e = (_d = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day === null || day === void 0 ? void 0 : day.range) === null || _f === void 0 ? void 0 : _f.timeTo);
-            });
-            if (areEqual) {
-                variant = ScheduleVariant.ALL_DAYS;
-            }
-            else {
-                variant = ScheduleVariant.CUSTOM;
-            }
+            variant = isUniform(schedule) ? ScheduleVariant.ALL_DAYS : ScheduleVariant.CUSTOM;
             break;
         case 5:
-            const days = [1, 2, 3, 4, 5];
-            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
-            if (hasConsecutiveDays) {
-                variant = ScheduleVariant.WEEKDAYS;
-            }
-            else {
-                variant = ScheduleVariant.CUSTOM;
-            }
+            variant = hasConsecutiveDays(schedule) ? ScheduleVariant.WEEKDAYS : ScheduleVariant.CUSTOM;
             break;
         default:
             return {
@@ -1363,7 +1420,7 @@ const parseSchedule = (scheduleString) => {
 const serializeSchedule = (weekSchedule) => {
     return weekSchedule.schedule
         .filter(({ range, day, isAllDay }) => {
-        const hasRange = (range === null || range === void 0 ? void 0 : range.timeFrom) && (range === null || range === void 0 ? void 0 : range.timeTo);
+        const hasRange = range.timeFrom && range.timeTo;
         switch (weekSchedule.variant) {
             case ScheduleVariant.WEEKDAYS:
                 return day <= 5 && hasRange;
@@ -1382,6 +1439,25 @@ const serializeSchedule = (weekSchedule) => {
     })
         .join(",");
 };
+/**
+ * Checks if a list of schedule objects have the same ranges
+ *
+ * @param {RawSchedule[]} schedule List of schedule objects
+ * @returns {boolean} Whether the schedule is uniform
+ */
+const isUniform = (schedule) => {
+    return schedule.every((day, _, collection) => { var _a, _b, _c, _d, _e, _f; return ((_b = (_a = collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) && ((_e = (_d = collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day.range) === null || _f === void 0 ? void 0 : _f.timeTo); });
+};
+/**
+ * Checks if a list of schedule objects are consecutive days
+ *
+ * @param {RawSchedule[]} schedule List of schedule objects
+ * @returns {boolean} Whether the schedule has consecutive days
+ */
+const hasConsecutiveDays = (schedule) => {
+    const days = [1, 2, 3, 4, 5];
+    return schedule.every(({ day }, index) => day === days[index]);
+};
 
 /**
  * A thin wrapper around the `BaseInput` component for text input fields.
@@ -1389,6 +1465,7 @@ const serializeSchedule = (weekSchedule) => {
  * NOTE: If shown with a label, please use the `TextField` component instead.
  */
 const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
+TextInput.displayName = "TextInput";
 
 const cvaSearch = cvaMerge([
     "shadow-none",
@@ -1396,21 +1473,13 @@ const cvaSearch = cvaMerge([
     "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-borderless"], false: "" },
         widenOnFocus: {
-            true: [
-                "component-search-width",
-                "component-search-widen",
-                "hover:component-search-widen",
-                "focus-within:component-search-widen-focus",
-                "focus-within:w-full",
-            ],
+            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
             false: "w-full",
         },
     },
@@ -1424,35 +1493,30 @@ const cvaSearch = cvaMerge([
  */
 const Search = forwardRef((_a, ref) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "hideBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
             }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
 });
+Search.displayName = "Search";
 
 const cvaSelect = cvaMerge([
     "relative",
     "flex",
     "shadow-sm",
     "rounded-lg",
-    "border",
     "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-600",
-    "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
     "bg-white",
     "transition",
-    "overflow-hidden",
 ], {
     variants: {
         invalid: {
-            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: "border border-red-600 text-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: "!bg-slate-100 hover:border-slate-300",
             false: "",
         },
     },
@@ -1461,10 +1525,56 @@ const cvaSelect = cvaMerge([
         disabled: false,
     },
 });
-const cvaSelectIcon = cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500"]);
-const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
-const cvaSelectXIcon = cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500", "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"], {
+const cvaSelectControl = cvaMerge([], {
+    variants: {
+        isDisabled: {
+            true: "!bg-slate-100",
+            false: "",
+        },
+        prefix: {
+            true: ["ps-7"],
+            false: "",
+        },
+        invalid: {
+            true: "!border-0",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+        prefix: false,
+        invalid: false,
+    },
+});
+const cvaSelectIcon = cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+]);
+const cvaSelectPrefix = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "text-slate-400",
+    "pl-2",
+    "absolute",
+    "inset-y-0",
+]);
+const cvaSelectXIcon = cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cvaMerge([], {
     variants: {
         menuIsOpen: {
             true: "animate-fade-in-fast",
@@ -1488,6 +1598,8 @@ function isMultiValue(arg) {
     return Array.isArray(arg);
 }
 function isGroupBase(arg) {
+    // This is apparently needed
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     return arg.options !== undefined;
 }
 const isSelectedOption = (option, selected) => {
@@ -1523,7 +1635,7 @@ const getOrderedOptions = (options, value) => {
             .filter(option => !isSelectedOption(option, value))
             .map(option => removeSelectedFromGroups(option, value));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return orderedValues.concat(selectableOptions) || [];
+        return orderedValues.concat(selectableOptions);
     }
     return options || [];
 };
@@ -1584,7 +1696,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
     const itemsCount = items.length;
     React__default.useLayoutEffect(() => {
         var _a;
-        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        availableWidth.current = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
     }, [containerRef]);
     const onWidthKnownHandler = ({ width: reportedWidth }) => {
         childrenWidth.current.push({ width: reportedWidth + itemsGap });
@@ -1596,7 +1708,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         return previous + current.width;
     }, 0);
     let counter = 0;
-    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
+    const availableSpace = (availableWidth.current || 0) - counterWidth;
     const renderedElements = items
         .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
         .map((item, index) => {
@@ -1645,7 +1757,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
@@ -1653,9 +1765,12 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 var _a;
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
                     const PLACEHOLDER_KEY = "placeholder";
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const key = props && props.children && props.children[0] ? (_a = props.children[0]) === null || _a === void 0 ? void 0 : _a.key : "";
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const values = props && props.children ? props.children[0] : [];
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
                     return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
@@ -1664,27 +1779,26 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                         onClick: disabled
                                             ? undefined
                                             : (e) => {
-                                                var _a, _b;
                                                 refMenuIsEnabled.current = false;
-                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             },
                                         disabled: disabled,
                                     };
                                 })
-                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags &&
-                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a, _b;
-                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, onClose: e => {
-                                                var _a, _b;
+                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags
+                                    ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a;
+                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
-                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
+                                            }, children: tagProps.children }, (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()));
+                                    })
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) })));
                 }
                 return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsx(Spinner, { className: "mt-1.5 mr-1", size: "small" });
+                return jsx(Spinner, { className: "mr-1 mt-1.5", size: "small" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
@@ -1692,9 +1806,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
             }, Control: props => {
-                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
+                return (jsx(components.Control, Object.assign({}, props, { className: cvaSelectControl({
+                        isDisabled: props.isDisabled,
+                        prefix: prefix ? true : false,
+                        invalid: hasError,
+                    }) })));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
@@ -1734,18 +1852,16 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
 const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React.useMemo(() => {
         return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, backgroundColor: "" });
+                return Object.assign(Object.assign({}, base), { borderRadius: "var(--border-radius-lg)", backgroundColor: "" });
             }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
                 width: "0px",
             }), menu: base => {
                 return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
-            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width, transform: "translate(0px, 0px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
                 return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
             }, valueContainer: base => {
                 return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
-            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+            }, container: base => (Object.assign(Object.assign({}, base), { width: "100%" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
                 return Object.assign(Object.assign({}, base), { padding: "0px" });
             } }, styles);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1767,7 +1883,7 @@ const useSelect = (_a) => {
     const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default.useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError);
     const menuPlacement = "auto";
     const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
         onMenuOpen && onMenuOpen();
@@ -1810,7 +1926,7 @@ const useSelect = (_a) => {
  */
 const CreatableSelect = (props) => {
     const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = rest;
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = rest;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const creatableSelectProps = {
         value,
@@ -1840,9 +1956,11 @@ const CreatableSelect = (props) => {
         onInputChange,
         allowCreateWhileLoading,
         onCreateOption,
+        isDisabled: disabled || props.isDisabled,
+        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactCreatableSelect, Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactCreatableSelect, Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -1854,7 +1972,7 @@ CreatableSelect.displayName = "CreatableSelect";
  */
 const Select = (props) => {
     const { className, placeholder } = props, rest = __rest(props, ["className", "placeholder"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = dataTestId, onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -1883,9 +2001,11 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
         hideSelectedOptions,
+        isDisabled: disabled || props.isDisabled,
+        readOnly,
     };
     const renderAsDisabled = rest.disabled || rest.readOnly || rest.isDisabled; // TODO remove one of the disable props from the type
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactSelect, Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsx(ReactSelect, Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
 };
 Select.displayName = "Select";
 
@@ -1938,6 +2058,7 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
                     setInnerValue(!e ? "" : e.value);
                 }, value: selectedOption, defaultValue: selectedOption }))] }));
 });
+FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
 
 /**
  * The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
@@ -1954,6 +2075,7 @@ const CreatableSelectField = forwardRef((_a, ref) => {
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
     return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
 });
+CreatableSelectField.displayName = "CreatableSelectField";
 
 /**
  * The SelectField component is a Select component wrapped in the FromGroup component.
@@ -1969,6 +2091,7 @@ const SelectField = forwardRef((_a, ref) => {
     var props = __rest(_a, []);
     return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsx(Select, Object.assign({}, convertedProps)) })));
 });
+SelectField.displayName = "SelectField";
 
 const cvaTextArea = cvaMerge([
     cvaInputBase(),
@@ -1980,7 +2103,6 @@ const cvaTextArea = cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
-    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2011,6 +2133,7 @@ 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, 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("textarea", Object.assign({ className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value }, rest, { "data-testid": dataTestId, onChange: onChange })));
 });
+TextArea.displayName = "TextArea";
 
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
@@ -2034,9 +2157,10 @@ const TextAreaField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { className: `${className} grid grid-rows-[auto_1fr_auto]`, dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextArea, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: "h-auto", dataTestId: dataTestId, onChange: handleChange })) }));
+    return (jsx(FormGroup, { className: twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextArea, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: "h-auto", dataTestId: dataTestId, onChange: handleChange })) }));
 });
+TextAreaField.displayName = "TextAreaField";
 
 /**
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
@@ -2056,9 +2180,10 @@ const TextField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
+TextField.displayName = "TextField";
 
 /**
  * TimeRangeField Description. <-- Please add a proper Description this is used in Storybook.
@@ -2070,21 +2195,12 @@ const TimeRangeField = (_a) => {
     var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + v4();
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
 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",
-], {
+const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
             small: ["w-8", "h-4"],
@@ -2095,7 +2211,7 @@ const cvaToggleTrack = cvaMerge([
             false: "",
         },
         toggled: {
-            true: ["bg-primary-600", "focus:bg-primary-700", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
             false: "",
         },
     },
@@ -2145,11 +2261,12 @@ const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled,
     const showLabelContainer = Boolean(name || description);
     const showDescription = Boolean(description);
     const getTestId = (suffix) => `${dataTestId}-${suffix}`;
-    return (jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription && (jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description }))] })), jsx("input", { "aria-checked": toggled, checked: toggled, className: cvaToggleInput(), "data-testid": getTestId("input"), disabled: disabled, id: id, name: name, onBlur: onBlur, onChange: e => {
+    return (jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer ? (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription ? (jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })) : null] })) : null, jsx("input", { "aria-checked": toggled, checked: toggled, className: cvaToggleInput(), "data-testid": getTestId("input"), disabled: disabled, id: id, name: name, onBlur: onBlur, onChange: e => {
                         e.stopPropagation();
                         onChange(!toggled, e);
                     }, ref: ref, required: required, tabIndex: tabIndex, type: "checkbox" })] }) }));
 });
+Toggle.displayName = "Toggle";
 
 const cvaUploadInputField = cvaMerge([
     "px-0",
@@ -2178,6 +2295,7 @@ const UploadInput = forwardRef((_a, ref) => {
                 }
             }, ref: ref, type: "file" }, rest)) }));
 });
+UploadInput.displayName = "UploadInput";
 
 /**
  * Upload fields enable the user to upload Files.
@@ -2188,6 +2306,7 @@ const UploadField = forwardRef((_a, ref) => {
     const htmlForId = id ? id : "uploadField-" + v4();
     return (jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UploadInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
 });
+UploadField.displayName = "UploadField";
 
 /**
  * @description Validate given url id.
@@ -2213,8 +2332,9 @@ const UrlInput = forwardRef((_a, ref) => {
     var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
     const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId && `${dataTestId}-url-input`, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
+UrlInput.displayName = "UrlField";
 
 /**
  * The UrlField component is used to enter url.
@@ -2229,8 +2349,9 @@ const UrlField = forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
+UrlField.displayName = "UrlField";
 
 /**
  * Custom hook to get phone number validation rules.
@@ -2247,7 +2368,7 @@ const useGetPhoneValidationRules = () => {
         const pattern = {
             validate: (value) => {
                 const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
-                return !validationResult || value === "" || value === undefined || value === null || validationResult;
+                return !validationResult || !value || validationResult;
             },
         };
         return !skipValidation
@@ -2336,4 +2457,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };