@trackunit/react-form-components 0.0.452 → 0.0.454

package/index.cjs.js

@@ -18,6 +18,7 @@ var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
 var sharedUtils = require('@trackunit/shared-utils');
+var tailwindMerge = require('tailwind-merge');
 var zod = require('zod');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -156,14 +157,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 (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }));
 };
 
@@ -209,21 +210,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 (React.isValidElement(node1) && React.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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
-const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
+const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
 const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
         size: {
@@ -232,24 +268,15 @@ const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10",
         },
         disabled: {
             true: cvaInputBaseDisabled(),
-            false: "",
+            false: [""],
         },
         invalid: {
             true: cvaInputBaseInvalid(),
-            false: "",
+            false: [""],
         },
     },
 });
-const cvaInputField = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "focus-visible:outline-none",
-], {
+const cvaInputField = cssClassVarianceUtilities.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"],
@@ -257,9 +284,28 @@ const cvaInputField = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -271,7 +317,6 @@ const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "bg-slate-50",
 ]);
 const cvaInputAddonBefore = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
-const cvaInputAddonAfter = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
 const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "justify-center",
@@ -281,21 +326,62 @@ const cvaInputPrefix = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaInputSuffix = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"]);
+const cvaInputAction = cssClassVarianceUtilities.cvaMerge(["absolute", "end-0.5"], {
+    variants: {
+        addonAfter: {
+            true: ["relative"],
+            false: [""],
+        },
+        suffix: {
+            true: ["absolute"],
+            false: [""],
+        },
+    },
+    compoundVariants: [
+        {
+            addonAfter: true,
+            suffix: true,
+            className: ["relative"],
+        },
+    ],
 });
 
 /**
@@ -307,7 +393,7 @@ const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cent
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React__namespace.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__namespace.useRef(null);
@@ -318,15 +404,29 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
             invalid: isInvalid,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
+                    disabled: renderAsDisabled,
+                    addonBefore: addonBefore !== undefined,
+                }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsxRuntime.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, jsxRuntime.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 ? (jsxRuntime.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 ? (jsxRuntime.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 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.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 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsxRuntime.jsx("div", { className: cvaInputAction({
+                    addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
+                    suffix: !compareReactNodes(addonBefore, suffix),
+                }), children: actions })) : null, addonAfter && !compareReactNodes(addonBefore, addonAfter) && !compareReactNodes(addonAfter, suffix) ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter })) : null] }));
 });
+BaseInput.displayName = "BaseInput";
 
 const cvaLabel = cssClassVarianceUtilities.cvaMerge([
     "text-base",
@@ -379,15 +479,11 @@ const cvaCheckbox = cssClassVarianceUtilities.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",
@@ -395,13 +491,7 @@ const cvaCheckbox = cssClassVarianceUtilities.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: {
@@ -411,11 +501,8 @@ const cvaCheckbox = cssClassVarianceUtilities.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: [
@@ -423,14 +510,10 @@ const cvaCheckbox = cssClassVarianceUtilities.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: {
@@ -438,13 +521,8 @@ const cvaCheckbox = cssClassVarianceUtilities.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",
             ],
@@ -519,10 +597,10 @@ const Checkbox = React__namespace.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__namespace.useState(null);
@@ -530,16 +608,17 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxRuntime.jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.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 })), jsxRuntime.jsx("span", { className: cvaCheckbox({
+    return (jsxRuntime.jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.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 })), jsxRuntime.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 && (jsxRuntime.jsx("span", { className: "flex", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label ? (jsxRuntime.jsx("span", { className: "flex", children: jsxRuntime.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.
@@ -579,7 +658,7 @@ const cvaHelpAddon = cssClassVarianceUtilities.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 (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required && jsxRuntime.jsx("span", { className: "required-asterisk", children: "*" })] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? jsxRuntime.jsx("span", { className: "required-asterisk", children: "*" }) : null] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText ? jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText }) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })] }));
 };
 
 /**
@@ -590,8 +669,9 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
 const CheckboxField = React.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-" + uuid.v4();
-    return (jsxRuntime.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: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+    return (jsxRuntime.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: jsxRuntime.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.
@@ -624,16 +704,17 @@ const ColorField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
-    return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: cvaInput({
+    return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: cvaInput({
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId && `${dataTestId}-textField`, onChange: handleChange, type: "text", value: value }), jsxRuntime.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 }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
-                        if (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : null, onChange: handleChange, type: "text", value: value }), jsxRuntime.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 }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.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.
@@ -645,8 +726,9 @@ const DateInput = React.forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => isDate.isValidDate(date) ? dateFns.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 (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsxRuntime.jsx(reactComponents.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.
@@ -659,8 +741,9 @@ const DateField = React.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-" + uuid.v4();
-    return (jsxRuntime.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: jsxRuntime.jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.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: jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -750,7 +833,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);
         }
@@ -770,7 +853,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
 };
 
 // Doing the same check as we do on the backend
@@ -800,7 +883,7 @@ const validateEmailAddress = (email) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React__namespace.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__namespace.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -811,9 +894,9 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ actions: email &&
-            email.length > 0 && (jsxRuntime.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 (jsxRuntime.jsx(BaseInput, Object.assign({ actions: email && email.length > 0 ? (jsxRuntime.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.
@@ -833,8 +916,9 @@ const EmailField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.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.
@@ -844,6 +928,7 @@ const EmailField = React.forwardRef((_a, ref) => {
 const NumberInput = React.forwardRef((props, ref) => {
     return jsxRuntime.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.
@@ -856,8 +941,9 @@ const NumberField = React.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-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsxRuntime.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: jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge([
     cvaInputBase(),
@@ -891,11 +977,11 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
 const OptionCard = React.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-" + uuid.v4();
-    return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
-                        icon &&
-                        !customImage &&
-                        React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled && icon && !customImage
+                        ? React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
+                        : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.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.
@@ -906,6 +992,7 @@ const PasswordInput = React.forwardRef((props, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     return (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref }, props, { actions: jsxRuntime.jsx("div", { className: cvaActionContainer(), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsxRuntime.jsx(reactComponents.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.
@@ -921,8 +1008,9 @@ const PasswordField = React.forwardRef((_a, ref) => {
     const handleChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.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
@@ -1033,10 +1121,9 @@ const PhoneInput = React.forwardRef((_a, ref) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction &&
-                innerValue &&
-                (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsxRuntime.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 (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.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.
@@ -1058,8 +1145,9 @@ const PhoneField = React.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-" + uuid.v4();
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.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.
@@ -1070,6 +1158,7 @@ const PhoneFieldWithController = React.forwardRef((_a, ref) => {
     var { control, controllerProps, name, value } = _a, rest = __rest(_a, ["control", "controllerProps", "name", "value"]);
     return (jsxRuntime.jsx(reactHookForm.Controller, Object.assign({ control: control, defaultValue: value, name: name }, controllerProps, { render: ({ field }) => jsxRuntime.jsx(PhoneField, Object.assign({}, rest, field, { ref: ref })) })));
 });
+PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
 /**
  * Validates a phone number
@@ -1082,7 +1171,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__default["default"](safePhoneNumber);
     if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
         return undefined;
@@ -1133,9 +1222,6 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-primary-700",
 ], {
     variants: {
         checked: {
@@ -1151,10 +1237,6 @@ const cvaRadioItem = cssClassVarianceUtilities.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",
@@ -1162,13 +1244,7 @@ const cvaRadioItem = cssClassVarianceUtilities.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: {
@@ -1176,13 +1252,8 @@ const cvaRadioItem = cssClassVarianceUtilities.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",
             ],
@@ -1223,7 +1294,7 @@ const RadioGroupContext = React__namespace.createContext(null);
  * @returns {JSX.Element} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, label: label, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -1243,11 +1314,11 @@ RadioGroup.displayName = "RadioGroup";
 const RadioItem = ({ label, value, dataTestId, className, description, }) => {
     const groupCtx = React__namespace.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId && `${dataTestId}-Wrapper`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsxRuntime.jsx("input", { checked: isChecked, className: cvaRadioItem({
+    return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : null, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsxRuntime.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 }), jsxRuntime.jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsxRuntime.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 && (jsxRuntime.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 }), jsxRuntime.jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsxRuntime.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 ? (jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-1", "items-center", "gap-4", "border-transparent", "rounded-md"]);
@@ -1259,7 +1330,6 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge(["flex", "flex-1", "item
  * @returns {JSX.Element} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    var _a, _b;
     const [timeRange, setTimeRange] = React__default["default"].useState(range !== null && range !== void 0 ? range : {
         timeFrom: "",
         timeTo: "",
@@ -1271,7 +1341,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.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 : jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.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 (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.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 : jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
 };
 
 const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge(["grid", "pb-4", "gap-2", "grid-cols-[60px,200px,60px,2fr]"]);
@@ -1298,7 +1368,7 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
         onChange(newSchedule);
     };
     return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
-            return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDayActive && isActive, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.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 (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDayActive ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key + label));
         }) }));
 };
 
@@ -1346,32 +1416,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 = exports.ScheduleVariant.ALL_DAYS;
-            }
-            else {
-                variant = exports.ScheduleVariant.CUSTOM;
-            }
+            variant = isUniform(schedule) ? exports.ScheduleVariant.ALL_DAYS : exports.ScheduleVariant.CUSTOM;
             break;
         case 5:
-            const days = [1, 2, 3, 4, 5];
-            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
-            if (hasConsecutiveDays) {
-                variant = exports.ScheduleVariant.WEEKDAYS;
-            }
-            else {
-                variant = exports.ScheduleVariant.CUSTOM;
-            }
+            variant = hasConsecutiveDays(schedule) ? exports.ScheduleVariant.WEEKDAYS : exports.ScheduleVariant.CUSTOM;
             break;
         default:
             return {
@@ -1393,7 +1450,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 exports.ScheduleVariant.WEEKDAYS:
                 return day <= 5 && hasRange;
@@ -1412,6 +1469,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.
@@ -1419,6 +1495,7 @@ const serializeSchedule = (weekSchedule) => {
  * NOTE: If shown with a label, please use the `TextField` component instead.
  */
 const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
+TextInput.displayName = "TextInput";
 
 const cvaSearch = cssClassVarianceUtilities.cvaMerge([
     "shadow-none",
@@ -1426,21 +1503,13 @@ const cvaSearch = cssClassVarianceUtilities.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",
         },
     },
@@ -1454,35 +1523,30 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  */
 const Search = React.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 (jsxRuntime.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: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsxRuntime.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: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
             }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
 });
+Search.displayName = "Search";
 
 const cvaSelect = cssClassVarianceUtilities.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: "",
         },
     },
@@ -1491,10 +1555,56 @@ const cvaSelect = cssClassVarianceUtilities.cvaMerge([
         disabled: false,
     },
 });
-const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500"]);
-const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
-const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge(["mr-2", "flex", "cursor-pointer", "items-center", "justify-center", "text-slate-400", "hover:text-slate-500", "ml-1"]);
-const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+const cvaSelectControl = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+]);
+const cvaSelectPrefix = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "text-slate-400",
+    "pl-2",
+    "absolute",
+    "inset-y-0",
+]);
+const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-slate-400",
+    "hover:text-slate-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         menuIsOpen: {
             true: "animate-fade-in-fast",
@@ -1518,6 +1628,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) => {
@@ -1553,7 +1665,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 || [];
 };
@@ -1614,7 +1726,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
     const itemsCount = items.length;
     React__default["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 });
@@ -1626,7 +1738,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) => {
@@ -1675,7 +1787,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__namespace.useMemo(() => {
@@ -1683,9 +1795,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 (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
@@ -1694,27 +1809,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%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags &&
-                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a, _b;
-                                        return (jsxRuntime.jsx(reactComponents.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%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
+                                    ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a;
+                                        return (jsxRuntime.jsx(reactComponents.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 && (jsxRuntime.jsxs(reactComponents.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 ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) })));
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mt-1.5 mr-1", size: "small" });
+                return jsxRuntime.jsx(reactComponents.Spinner, { className: "mr-1 mt-1.5", size: "small" });
             }, DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
@@ -1722,9 +1836,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
             }, Control: props => {
-                return jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
+                return (jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: cvaSelectControl({
+                        isDisabled: props.isDisabled,
+                        prefix: prefix ? true : false,
+                        invalid: hasError,
+                    }) })));
             }, SingleValue: props => {
                 return (jsxRuntime.jsx(ReactSelect.components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
             }, Menu: props => {
@@ -1764,18 +1882,16 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
 const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React__namespace.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
@@ -1797,7 +1913,7 @@ const useSelect = (_a) => {
     const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default["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();
@@ -1840,7 +1956,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,
@@ -1870,9 +1986,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 (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, rest, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
 };
 CreatableSelect.displayName = "CreatableSelect";
 
@@ -1884,7 +2002,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,
@@ -1913,9 +2031,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 (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, rest, selectProps, async, { menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : placeholder }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, rest, selectProps, { isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options, placeholder: renderAsDisabled ? null : placeholder })))] }));
 };
 Select.displayName = "Select";
 
@@ -1968,6 +2088,7 @@ const FormFieldSelectAdapter = React.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.
@@ -1984,6 +2105,7 @@ const CreatableSelectField = React.forwardRef((_a, ref) => {
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
     return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
 });
+CreatableSelectField.displayName = "CreatableSelectField";
 
 /**
  * The SelectField component is a Select component wrapped in the FromGroup component.
@@ -1999,6 +2121,7 @@ const SelectField = React.forwardRef((_a, ref) => {
     var props = __rest(_a, []);
     return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(Select, Object.assign({}, convertedProps)) })));
 });
+SelectField.displayName = "SelectField";
 
 const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     cvaInputBase(),
@@ -2010,7 +2133,6 @@ const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     "text-base",
     "text-slate-900",
     "placeholder-slate-400",
-    "focus-visible:outline-none",
     "w-full",
     "h-20",
     "transition",
@@ -2041,6 +2163,7 @@ const TextArea = React__namespace.forwardRef((_a, ref) => {
     var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "required", "dataTestId", "isInvalid", "className"]);
     return (jsxRuntime.jsx("textarea", Object.assign({ 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.
@@ -2064,9 +2187,10 @@ const TextAreaField = React__namespace.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { className: `${className} grid grid-rows-[auto_1fr_auto]`, dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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 (jsxRuntime.jsx(FormGroup, { className: tailwindMerge.twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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.
@@ -2086,9 +2210,10 @@ const TextField = React__namespace.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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 (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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.
@@ -2100,21 +2225,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-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
 cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge([
-    "shrink-0",
-    "p-1",
-    "cursor-pointer",
-    "rounded-full",
-    "bg-slate-300",
-    "focus:bg-slate-400",
-    "hover:bg-slate-400",
-    "active:bg-slate-500",
-], {
+const cvaToggleTrack = cssClassVarianceUtilities.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"],
@@ -2125,7 +2241,7 @@ const cvaToggleTrack = cssClassVarianceUtilities.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: "",
         },
     },
@@ -2175,11 +2291,12 @@ const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, onClick
     const showLabelContainer = Boolean(name || description);
     const showDescription = Boolean(description);
     const getTestId = (suffix) => `${dataTestId}-${suffix}`;
-    return (jsxRuntime.jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxRuntime.jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsxRuntime.jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsxRuntime.jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxRuntime.jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsxRuntime.jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription && (jsxRuntime.jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description }))] })), jsxRuntime.jsx("input", { "aria-checked": toggled, checked: toggled, className: cvaToggleInput(), "data-testid": getTestId("input"), disabled: disabled, id: id, name: name, onBlur: onBlur, onChange: e => {
+    return (jsxRuntime.jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxRuntime.jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsxRuntime.jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsxRuntime.jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer ? (jsxRuntime.jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsxRuntime.jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription ? (jsxRuntime.jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })) : null] })) : null, jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge([
     "px-0",
@@ -2208,6 +2325,7 @@ const UploadInput = React.forwardRef((_a, ref) => {
                 }
             }, ref: ref, type: "file" }, rest)) }));
 });
+UploadInput.displayName = "UploadInput";
 
 /**
  * Upload fields enable the user to upload Files.
@@ -2218,6 +2336,7 @@ const UploadField = React.forwardRef((_a, ref) => {
     const htmlForId = id ? id : "uploadField-" + uuid.v4();
     return (jsxRuntime.jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.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.
@@ -2243,8 +2362,9 @@ const UrlInput = React.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] = React.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 (jsxRuntime.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 && (jsxRuntime.jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
+    return (jsxRuntime.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 && (jsxRuntime.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.
@@ -2259,8 +2379,9 @@ const UrlField = React.forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.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.
@@ -2277,7 +2398,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
@@ -2418,6 +2539,7 @@ exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaActionButton = cvaActionButton;
 exports.cvaActionContainer = cvaActionContainer;
 exports.cvaInput = cvaInput;
+exports.cvaInputAction = cvaInputAction;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputAddonAfter = cvaInputAddonAfter;
 exports.cvaInputAddonBefore = cvaInputAddonBefore;
@@ -2428,6 +2550,7 @@ exports.cvaInputField = cvaInputField;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;
 exports.cvaSelect = cvaSelect;
+exports.cvaSelectControl = cvaSelectControl;
 exports.cvaSelectCounter = cvaSelectCounter;
 exports.cvaSelectDynamicTagContainer = cvaSelectDynamicTagContainer;
 exports.cvaSelectIcon = cvaSelectIcon;