@trackunit/react-form-components 0.0.304 → 0.0.308

package/index.esm.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
+import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useCallback, useEffect, cloneElement } from 'react';
+import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useEffect, useRef, useImperativeHandle } from 'react';
+import { useCopyToClipboard } from 'react-use';
 import { v4 } from 'uuid';
-import { Tooltip, Text, MenuItem, Icon, Tag, Spinner, IconButton, Heading } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { format } from 'date-fns';
+import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { useCopyToClipboard } from 'react-use';
-import { format } from 'date-fns';
-import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
@@ -69,6 +69,65 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
+    variants: {
+        size: {
+            small: ["w-6", "h-6"],
+            medium: ["w-8", "h-8"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaActionContainer = cvaMerge(["flex", "items-center", "m-1"]);
+
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled, key, className }) => {
+    const [, copyToClipboard] = useCopyToClipboard();
+    const elementKey = useMemo(() => key !== null && key !== void 0 ? key : `ActionButton-${v4()}`, [key]);
+    const getIconName = () => {
+        switch (type) {
+            case "PHONE_NUMBER":
+                return "PhoneArrowUpRight";
+            case "WEB_ADDRESS":
+                return "ArrowTopRightOnSquare";
+            case "EMAIL":
+                return "Envelope";
+            case "COPY":
+            default:
+                return "ClipboardDocument";
+        }
+    };
+    const ButtonAction = () => {
+        var _a, _b;
+        switch (type) {
+            case "EMAIL":
+                return window.open(`mailto:${value}`);
+            case "WEB_ADDRESS":
+                if (value) {
+                    return window.open(value, "_blank", "noopener,noreferrer");
+                }
+                return null;
+            case "PHONE_NUMBER":
+                return window.open(`tel:${value}`);
+            case "COPY":
+                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+            default:
+                return null;
+        }
+    };
+    if (ButtonAction === null) {
+        return null;
+    }
+    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }, elementKey));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -106,95 +165,137 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const cvaLabel = cvaMerge([
-    "text-base",
-    "text-slate-700",
-    "truncate",
-    "hover:text-slate-800",
-    "group-hover:text-slate-800",
-    "active:text-slate-800",
-    "group-active:text-slate-800",
-], {
+const cvaInputBase = cvaMerge([
+    "component-baseInput-shadow",
+    "component-baseInput-border",
+    "component-baseInput-background",
+    "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-500",
+    "focus-within:border-slate-400",
+    "hover:border-slate-400",
+    "hover:bg-slate-50",
+    "transition",
+]);
+const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
+const cvaInputBaseInvalid = cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
+const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     variants: {
+        size: {
+            small: ["h-8"],
+            medium: ["h-10"],
+        },
+        disabled: {
+            true: cvaInputBaseDisabled(),
+            false: "",
+        },
         invalid: {
-            true: "text-red-600 hover:text-red-700 active:text-red-700 group-hover:text-red-700 group-active:text-red-700",
+            true: cvaInputBaseInvalid(),
             false: "",
         },
+    },
+});
+const cvaInputField = cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "focus-visible:outline-none",
+], {
+    variants: {
+        size: {
+            small: ["py-1"],
+            medium: ["py-2"],
+        },
         disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            true: ["text-slate-700"],
             false: "",
         },
     },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
 });
-
-/**
- * The Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsx("label", { id: id || "", htmlFor: htmlFor || "", className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, children: children }));
-};
-
-const cvaFormGroup = cvaMerge(["component-formGroup-gap"], {
+const cvaInputAddon = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "px-3",
+    "border-slate-300",
+    "text-slate-500",
+    "bg-slate-50",
+]);
+const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
+const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
+const cvaInputPrefix = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "text-slate-400",
+    "hover:component-search-prefix",
+    "component-baseInput-prefix",
+    "component-search-borderless",
+    "px-3",
+], {
     variants: {
         disabled: {
-            true: "pointer-events-none",
+            true: ["text-slate-500"],
             false: "",
         },
     },
 });
-const cvaFormGroupContainerBefore = cvaMerge(["flex", "gap-1", "mb-1"]);
-const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
     variants: {
-        invalid: {
-            true: "text-danger-500",
+        disabled: {
+            true: ["text-slate-500"],
             false: "",
         },
     },
 });
-const cvaHelpAddon = cvaMerge(["ml-auto"]);
 
 /**
- * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
+ * A base input component that can be used for text inputs, password inputs, etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  *
- * @param {FormGroupProps} props - The props for the FormGroup component
- * @returns {JSX.Element} FormGroup component
+ * For specific input types make sure to use the corresponding input component.
+ * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
-};
+const BaseInput = React.forwardRef((_a, ref) => {
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
+    const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
+    const renderAsDisabled = rest.disabled || rest.readOnly;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
+    return (jsxs("div", { className: cvaInput({
+            disabled: renderAsDisabled,
+            invalid: isInvalid,
+            size: fieldSize,
+            className,
+        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, ref: innerRef, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true && showDefaultActions ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+});
 
-const cvaSelect = cvaMerge([
-    "relative",
-    "flex",
-    "shadow-sm",
-    "rounded-lg",
-    "border",
-    "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-600",
-    "focus-within:border-slate-400",
-    "hover:border-slate-400",
-    "hover:bg-slate-50",
-    "bg-white",
-    "transition",
+const cvaLabel = cvaMerge([
+    "text-base",
+    "text-slate-700",
+    "truncate",
+    "hover:text-slate-800",
+    "group-hover:text-slate-800",
+    "active:text-slate-800",
+    "group-active:text-slate-800",
 ], {
     variants: {
         invalid: {
-            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: "text-red-600 hover:text-red-700 active:text-red-700 group-hover:text-red-700 group-active:text-red-700",
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
             false: "",
         },
     },
@@ -203,94 +304,15 @@ const cvaSelect = cvaMerge([
         disabled: false,
     },
 });
-const cvaSelectIcon = cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
-const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
-const cvaSelectXIcon = cvaMerge([
-    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
-    "ml-1",
-]);
-const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
-    variants: {
-        menuIsOpen: {
-            true: "animate-fade-in-fast",
-            false: "animate-fade-out-fast",
-        },
-    },
-});
-const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
-    variants: {
-        visible: { true: "visible", false: "invisible" },
-    },
-});
-const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
-const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
 /**
- * The SelectContainer component.
+ * The CheckIcon component is used by the checkbox to display the checked state.
  *
- * @param {SelectContainerProps} props - The props for the SelectContainer component
- * @returns {JSX.Element} SelectContainer component
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
  */
-const SelectContainer = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxs("label", { className: cvaSelect({ invalid: hasError, disabled: isDisabled }), "data-testid": dataTestId, children: [label && !hideLabel && jsx(Label, { htmlFor: id, children: label }), children, (hasError || info) && jsx(Text, { size: "small", children: hasError ? error : info })] }));
-};
-
-/**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
- */
-function isMultiValue(arg) {
-    return Array.isArray(arg);
-}
-function isGroupBase(arg) {
-    return arg.options !== undefined;
-}
-const isSelectedOption = (option, selected) => {
-    if (isGroupBase(option)) {
-        return false;
-    }
-    return isMultiValue(selected)
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            selected.some(v => v.value === option.value)
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-};
-const removeSelectedFromGroups = (group, selected) => {
-    if (isGroupBase(group)) {
-        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
-    }
-    return group;
-};
-/**
- *  @template IsMulti
- * @template Group
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
- * @param {PropsValue<Option> | undefined} value Selected values
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
- */
-const getOrderedOptions = (options, value) => {
-    if (value && options) {
-        const orderedValues = isMultiValue(value)
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                [...value].sort((a, b) => a.label.localeCompare(b.label))
-            : [value];
-        const selectableOptions = options
-            .filter(option => !isSelectedOption(option, value))
-            .map(option => removeSelectedFromGroups(option, value));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return orderedValues.concat(selectableOptions) || [];
-    }
-    return options || [];
-};
-
-/**
- * The CheckIcon component is used by the checkbox to display the checked state.
- *
- * @param {CheckIconProps} props - The props for the CheckIcon component
- * @returns {JSX.Element} CheckIcon component
- */
-const CheckIcon = ({ className, dataTestId }) => {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, "data-testid": dataTestId, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m2 5.5 2 2L8.5 3" }) }));
+const CheckIcon = ({ className, dataTestId }) => {
+    return (jsx("svg", { className: className, "data-testid": dataTestId, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m2 5.5 2 2L8.5 3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
 const cvaCheckbox = cvaMerge([
@@ -423,7 +445,7 @@ const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
  * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
  * @returns {JSX.Element} IndeterminateIcon component
  */
-const IndeterminateIcon = ({ className }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5h4" }) }));
+const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3 5h4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
@@ -459,719 +481,174 @@ const Checkbox = React.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, onClick: e => stopPropagation && e.stopPropagation(), children: [jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+    return (jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsx("input", Object.assign({ "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox" }, rest, { ref: ref })), jsx("span", { className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), children: icon }), label && (jsx("span", { className: "flex", children: jsx("span", { id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), className: cvaLabel({
+                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), label && (jsx("span", { className: "flex", children: jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
                         className: "cursor-pointer",
-                    }), children: label }) })), suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })), suffix] }));
 });
 
 /**
- * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ * A wrapper around BaseInput with a pop-up day picker.
  *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {JSX.Element} SingleSelectMenuItem
+ * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
-};
+const DateInput = forwardRef((_a, ref) => {
+    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
+    // Chrome and Firefox need their default icon to have datepicker functionality.
+    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
+    return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
+});
+
 /**
- * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
  *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {JSX.Element} multi select menu item
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, disabled: disabled, prefix: jsx(Checkbox, { checked: selected, readOnly: false, onChange: () => null, disabled: disabled, onClick: e => {
-                e.stopPropagation();
-            } }), onClick: e => {
-            e.stopPropagation();
-            onClick && onClick(e);
-        }, selected: selected, focused: focused }));
+const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
+const cvaFormGroup = cvaMerge(["component-formGroup-gap"], {
+    variants: {
+        disabled: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+});
+const cvaFormGroupContainerBefore = cvaMerge(["flex", "gap-1", "mb-1"]);
+const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
+    variants: {
+        invalid: {
+            true: "text-danger-500",
+            false: "",
+        },
+    },
+});
+const cvaHelpAddon = cvaMerge(["ml-auto"]);
+
 /**
- * Extended Tag component with information about its own width.
- * Used in the select component.
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} TagWithWidth component
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
  */
-const TagWithWidth = (_a) => {
-    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
-    const ref = React__default.useRef(null);
-    React__default.useLayoutEffect(() => {
-        var _a;
-        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
-    }, [ref, onWidthKnown]);
-    return (jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
+    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
 /**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ * The date field component is used for entering date values.
  *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {JSX.Element} TagsContainer
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
-    const [isReady, setIsReady] = React__default.useState(false);
-    const [counterWidth, setCounterWidth] = React__default.useState(0);
-    const containerRef = React__default.useRef(null);
-    const availableWidth = React__default.useRef();
-    const childrenWidth = React__default.useRef([]);
-    const itemsCount = items.length;
-    React__default.useLayoutEffect(() => {
-        var _a;
-        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    }, [containerRef]);
-    const onWidthKnownHandler = ({ width: reportedWidth }) => {
-        childrenWidth.current.push({ width: reportedWidth + itemsGap });
-        if (childrenWidth.current.length === itemsCount) {
-            setIsReady(true);
-        }
-    };
-    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
-        return previous + current.width;
-    }, 0);
-    let counter = 0;
-    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
-    const renderedElements = items
-        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
-        .map((item, index) => {
-        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
-            return previous + current.width;
-        }, 0);
-        const isLast = index === items.length;
-        const counterRequired = requiredSpace > availableSpace && counter !== 0;
-        if (isLast && counterRequired) {
-            return (jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "white", disabled: disabled, children: jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
+const DateField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlForId = id ? id : "dateField-" + v4();
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(DateInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
+});
+
+const cvaDropZone = cvaMerge([
+    "flex",
+    "component-baseInput-background",
+    "justify-center",
+    "text-slate-500",
+    "rounded-sm",
+    "border-2",
+    "border-gray-200",
+    "border-dashed",
+    "hover:bg-slate-100",
+    "hover:border-solid",
+    "hover:border-primary-500",
+], {
+    variants: {
+        size: {
+            small: ["p-2"],
+            medium: ["p-4"],
+            large: ["p-8"],
+        },
+        disabled: { true: ["bg-slate-100", "hover:bg-slate-100"], false: "" },
+        dragActive: { true: ["border-gray-200", "bg-slate-100"], false: "" },
+        dropComplete: {
+            true: ["border-solid", "border-primary-500", "bg-slate-100", "hover:border-solid", "hover:border-gray-200"],
+            false: "",
+        },
+        invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
+    },
+});
+const cvaDropZoneLabel = cvaMerge([
+    "h-full",
+    "pt-1",
+    "pb-1",
+    "gap-2",
+    "items-center",
+    "flex-col",
+    "flex",
+    "justify-center",
+]);
+
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+const DropZone = (_a) => {
+    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
+    const [dragActive, setDragActive] = React__default.useState(false);
+    const [fileDropped, setFileDropped] = React__default.useState(false);
+    // function that handles drag enter, drag leave and drag over
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if ((e.type === "dragenter" || e.type === "dragover") && !disabled) {
+            setDragActive(true);
         }
-        if (isLast) {
-            return null;
+        else if (e.type === "dragleave") {
+            setDragActive(false);
         }
-        const itemCanFit = spaceNeeded <= availableSpace;
-        if (itemCanFit) {
-            return (jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "inline-flex shrink-0", onClose: e => {
-                    e.stopPropagation();
-                    item.onClick();
-                }, color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, children: item.text }, item.text + index));
+    };
+    //function to handle when user clicks on dropzone to upload
+    const handleChange = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.target.files && !disabled) {
+            filesSelected(e.target.files);
         }
-        const fromTheItems = item.text !== "";
-        if (fromTheItems) {
-            counter = counter + 1;
+    };
+    //funtion to handle drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
+            filesSelected(e.dataTransfer.files);
+            setFileDropped(true);
         }
-        return null;
-    })
-        .filter(element => element !== null);
-    return (jsxs("div", { style: {
-            width: `${width}`,
-        }, className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, children: [renderedElements, postFix] }));
+    };
+    return (jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsx("input", { className: "hidden", id: "input-file-upload", onChange: handleChange, title: "Hidden File Input", type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", children: [jsx(Icon, { color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", style: !isInvalid ? { color: "rgb(156 163 175)" } : {}, type: "solid" }), jsx("span", { children: label })] })] })));
 };
 
-/**
- * A hook to retrieve components override object.
- * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
- *
- * @template IsMulti
- * @template Group
- * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
- * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsOpen menu is open state
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
- * @param {string} dataTestId a test id
- * @param {number} maxSelectedDisplayCount a number of max display count
- *  @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 [t] = useTranslation();
-    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = React.useMemo(() => {
-        return Object.assign({ ValueContainer: props => {
-                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
-                    const PLACEHOLDER_KEY = "placeholder";
-                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
-                    const values = props && props.children ? props.children[0] : [];
-                    const tags = key === PLACEHOLDER_KEY ? [] : values;
-                    const searchInput = props && props.children && props.children[1];
-                    return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { width: "100%", items: tags
-                                ? tags.map(({ props: tagProps }) => {
-                                    return {
-                                        text: tagProps.children,
-                                        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));
-                                            },
-                                        disabled: disabled,
-                                    };
-                                })
-                                : [], postFix: searchInput, disabled: disabled })) : (jsxs(Fragment, { children: [tags &&
-                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a, _b;
-                                        return (jsx(Tag, { className: "inline-flex shrink-0", onClose: e => {
-                                                var _a, _b;
-                                                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));
-                                            }, color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
-                }
-                return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
-            }, LoadingIndicator: props => {
-                return jsx(Spinner, { size: "small", className: "mt-1.5 mr-1" });
-            }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
-            }, IndicatorSeparator: () => null, ClearIndicator: props => {
-                if (disabled) {
-                    return null;
-                }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx(Icon, { title: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) })));
-            }, Control: props => {
-                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
-            }, SingleValue: props => {
-                return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
-            }, Menu: props => {
-                return (jsx(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
-            }, MenuList: props => {
-                return (jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
-                            const listEl = e.currentTarget;
-                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
-                                props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
-                            }
-                        } }), children: props.children })));
-            }, Option: props => {
-                const componentProps = {
-                    label: props.label,
-                    focused: props.isFocused,
-                    selected: props.isSelected,
-                    onClick: props.innerProps.onClick,
-                };
-                return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }), children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: typeof props.label === "string" ? props.label : undefined }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: typeof props.label === "string" ? props.label : undefined }))) })));
-            } }, componentsProps);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
-    return customComponents;
-};
-
-/**
- * @template IsMulti
- * @template Group
- * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
- * @returns {StylesConfig<Option, boolean>} styles to override in select
- */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
-    const customStyles = React.useMemo(() => {
-        return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, marginRight: "2px", 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 => {
-                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: "calc(100% - 2px)", paddingLeft: "2px" })), 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
-    }, [refContainer, refPrefix]);
-    return { customStyles };
-};
-
-/**
- * A hook used by selects to share the common code
- *
- * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
- */
-const useSelect = (_a) => {
-    var _b;
-    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
-    const refContainer = React__default.useRef(null);
-    const refPrefix = React__default.useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
-    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
-    const refMenuIsEnabled = React__default.useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
-    const menuPlacement = "auto";
-    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
-        onMenuOpen && onMenuOpen();
-        if (refMenuIsEnabled.current) {
-            setMenuIsOpen(true);
-        }
-        else {
-            refMenuIsEnabled.current = true;
-        }
-    });
-    const closeMenuHandler = () => {
-        setMenuIsOpen(false);
-        onMenuClose && onMenuClose();
-    };
-    const orderedOptions = React__default.useMemo(() => {
-        return disabled
-            ? getOrderedOptions(options, value).map(option => {
-                return Object.assign(Object.assign({}, option), { disabled: true });
-            })
-            : getOrderedOptions(options, value);
-    }, [options, value, disabled]);
-    return {
-        refContainer,
-        refPrefix,
-        customStyles,
-        menuIsOpen,
-        customComponents,
-        menuPlacement,
-        openMenuHandler,
-        closeMenuHandler,
-        orderedOptions,
-    };
-};
-
-/**
- * The CreatableSelect component.
- *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
- */
-const CreatableSelect = (props) => {
-    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, onInputChange, placeholder, isClearable, } = props;
-    const hasError = !!error;
-    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: document.body,
-        isSearchable: disabled ? false : true,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus: disabled ? false : true,
-        menuIsOpen: disabled ? false : menuIsOpen,
-        openMenuOnClick: true,
-        closeMenuOnSelect: false,
-        isMulti: isMulti,
-        classNamePrefix,
-        isLoading,
-        onInputChange,
-        placeholder,
-        isClearable,
-        id,
-    };
-    return (jsx(SelectContainer, { label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled, children: jsxs(Fragment, { children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } }))) : (jsx(ReactCreatableSelect, Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } })))] }) }));
-};
-
-/**
- * Selects are input components used to choose a value from a set.
- *
- * @param {SelectProps} props - The props for the Select component
- * @returns {JSX.Element} Select component
- */
-const Select = (props) => {
-    const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-    };
-    return (jsxs("div", { ref: refContainer, className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] }));
-};
-Select.displayName = "Select";
-
-/**
- * The SelectField component is a Select component wrapped in the FromGroup component.
- *
- * This means that it can easily be added to any form alongside other Field components.
- *
- * This is done to make the field compatible with the React-hook-form library.
- *
- * @param {SelectFieldProps} props - The props for the SelectField component
- * @returns {JSX.Element} SelectField component
- */
-const SelectField = forwardRef((_a, ref) => {
-    var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange } = _a; __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange"]);
-    const [innerValue, setInnerValue] = useState(value || defaultValue);
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = useMemo(() => (id ? id : "selectField-" + v4()), [id]);
-    const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current, []);
-    const handleChange = useCallback((newValue) => {
-        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
-    }, []);
-    useEffect(() => {
-        var _a;
-        if (!innerValue) {
-            return;
-        }
-        const event = new Event("change");
-        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
-        // The event as unknown as ChangeEvent<HTMLInputElement> assertion is needed because
-        // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange, innerValue]);
-    const selectedOption = useMemo(() => options.find(option => option.value === value), [options, value]);
-    const defaultSelectedOption = options.find(option => option.value === defaultValue);
-    return (jsxs(FormGroup, { isInvalid: renderAsInvalid,
-        htmlFor,
-        className,
-        dataTestId,
-        helpText,
-        helpAddon,
-        tip,
-        label,
-        disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: options.map(option => {
-                    return (jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), jsx(Select, { id,
-                isDisabled: disabled,
-                onBlur,
-                options,
-                onChange: handleChange,
-                value: selectedOption,
-                defaultValue: defaultSelectedOption })] }));
-});
-
-const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
-    variants: {
-        size: {
-            small: ["w-6", "h-6"],
-            medium: ["w-8", "h-8"],
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-    },
-});
-const cvaActionContainer = cvaMerge(["flex", "items-center", "m-1"]);
-
-/**
- * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
- *
- * @param {ActionButtonProps} props - The props for the ActionButton component
- * @returns {JSX.Element} ActionButton component
- */
-const ActionButton = ({ type, value, dataTestId, iconSize, disabled, key, className }) => {
-    const [, copyToClipboard] = useCopyToClipboard();
-    const elementKey = useMemo(() => key !== null && key !== void 0 ? key : `ActionButton-${v4()}`, [key]);
-    const getIconName = () => {
-        switch (type) {
-            case "PHONE_NUMBER":
-                return "PhoneArrowUpRight";
-            case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquare";
-            case "EMAIL":
-                return "Envelope";
-            case "COPY":
-            default:
-                return "ClipboardDocument";
-        }
-    };
-    const ButtonAction = () => {
-        var _a, _b;
-        switch (type) {
-            case "EMAIL":
-                return window.open(`mailto:${value}`);
-            case "WEB_ADDRESS":
-                if (value) {
-                    return window.open(value, "_blank", "noopener,noreferrer");
-                }
-                return null;
-            case "PHONE_NUMBER":
-                return window.open(`tel:${value}`);
-            case "COPY":
-                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
-            default:
-                return null;
-        }
-    };
-    if (ButtonAction === null) {
-        return null;
-    }
-    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", variant: "secondary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }, elementKey));
-};
-
-const cvaInputBase = cvaMerge([
-    "component-baseInput-shadow",
-    "component-baseInput-border",
-    "component-baseInput-background",
-    "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-500",
-    "focus-within:border-slate-400",
-    "hover:border-slate-400",
-    "hover:bg-slate-50",
-    "transition",
-]);
-const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
-const cvaInputBaseInvalid = cvaMerge(["border-danger-600", "focus-within:ring-danger-600"]);
-const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
-    variants: {
-        size: {
-            small: ["h-8"],
-            medium: ["h-10"],
-        },
-        disabled: {
-            true: cvaInputBaseDisabled(),
-            false: "",
-        },
-        invalid: {
-            true: cvaInputBaseInvalid(),
-            false: "",
-        },
-    },
-});
-const cvaInputField = cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "focus-visible:outline-none",
-], {
-    variants: {
-        size: {
-            small: ["py-1"],
-            medium: ["py-2"],
-        },
-        disabled: {
-            true: ["text-slate-700"],
-            false: "",
-        },
-    },
-});
-const cvaInputAddon = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "px-3",
-    "border-slate-300",
-    "text-slate-500",
-    "bg-slate-50",
-]);
-const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"]);
-const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg"]);
-const cvaInputPrefix = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-slate-400",
-    "hover:component-search-prefix",
-    "component-baseInput-prefix",
-    "component-search-borderless",
-    "px-3",
-], {
-    variants: {
-        disabled: {
-            true: ["text-slate-500"],
-            false: "",
-        },
-    },
-});
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
-    variants: {
-        disabled: {
-            true: ["text-slate-500"],
-            false: "",
-        },
-    },
-});
-
-/**
- * A base input component that can be used for text inputs, password inputs, etc.
- * A reference to the input element is provided as the `ref` prop.
- * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
- *
- * For specific input types make sure to use the corresponding input component.
- * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
- */
-const BaseInput = React.forwardRef((_a, ref) => {
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
-    const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
-    const renderAsDisabled = rest.disabled || rest.readOnly;
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current, []);
-    return (jsxs("div", { className: cvaInput({
-            disabled: renderAsDisabled,
-            invalid: isInvalid,
-            size: fieldSize,
-            className,
-        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
-                    disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ ref: innerRef, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
-                    disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true && showDefaultActions ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
-});
-
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-const DateInput = forwardRef((_a, ref) => {
-    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
-    // Chrome and Firefox need their default icon to have datepicker functionality.
-    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) }, rest)));
-});
-
-/**
- * The date field component is used for entering date values.
- *
- * _**Do use**_ the DateField for date input.
- *
- * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
- */
-const DateField = forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlForId = id ? id : "dateField-" + v4();
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
-});
-
-const cvaDropZone = cvaMerge([
-    "flex",
-    "component-baseInput-background",
-    "justify-center",
-    "text-slate-500",
-    "rounded-sm",
-    "border-2",
-    "border-gray-200",
-    "border-dashed",
-    "hover:bg-slate-100",
-    "hover:border-solid",
-    "hover:border-primary-500",
-], {
-    variants: {
-        size: {
-            small: ["p-2"],
-            medium: ["p-4"],
-            large: ["p-8"],
-        },
-        disabled: { true: ["bg-slate-100", "hover:bg-slate-100"], false: "" },
-        dragActive: { true: ["border-gray-200", "bg-slate-100"], false: "" },
-        dropComplete: {
-            true: ["border-solid", "border-primary-500", "bg-slate-100", "hover:border-solid", "hover:border-gray-200"],
-            false: "",
-        },
-        invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
-    },
-});
-const cvaDropZoneLabel = cvaMerge([
-    "h-full",
-    "pt-1",
-    "pb-1",
-    "gap-2",
-    "items-center",
-    "flex-col",
-    "flex",
-    "justify-center",
-]);
-
-/**
- * The Drop Zone can be used to drag and drop files
- *
- * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {JSX.Element} DropZone component
- */
-const DropZone = (_a) => {
-    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
-    const [dragActive, setDragActive] = React__default.useState(false);
-    const [fileDropped, setFileDropped] = React__default.useState(false);
-    // function that handles drag enter, drag leave and drag over
-    const handleDrag = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if ((e.type === "dragenter" || e.type === "dragover") && !disabled) {
-            setDragActive(true);
-        }
-        else if (e.type === "dragleave") {
-            setDragActive(false);
-        }
-    };
-    //function to handle when user clicks on dropzone to upload
-    const handleChange = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.target.files && !disabled) {
-            filesSelected(e.target.files);
-        }
-    };
-    //funtion to handle drop
-    const handleDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragActive(false);
-        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
-            filesSelected(e.dataTransfer.files);
-            setFileDropped(true);
-        }
-    };
-    return (jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
-            if (disabled) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        } }, rest, { children: [jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx(Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx("span", { children: label })] })] })));
-};
-
-// Doing the same check as we do on the backend
-// Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
-const EMAIL_REGEX = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
+// Doing the same check as we do on the backend
+// Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
+const EMAIL_REGEX = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
 /**
  * @description Validate given email id.
  * @param email The address to validate.
@@ -1202,7 +679,7 @@ const EmailInput = React.forwardRef((_a, ref) => {
         return window.open(`mailto:${email}`);
     };
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value), isInvalid: renderAsInvalid, actions: jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) }, rest)));
+    return (jsx(BaseInput, Object.assign({ actions: jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email }), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: e => setEmail(e.target.value), placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
 });
 
 /**
@@ -1223,7 +700,7 @@ const EmailField = forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, value: value, onChange: handleChange, isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(EmailInput, Object.assign({ "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: renderAsInvalid, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
 /**
@@ -1246,7 +723,7 @@ const NumberField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "numberField-" + v4();
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(NumberInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
 const cvaOptionCardLabel = cvaMerge([
@@ -1267,117 +744,573 @@ const cvaOptionCardLabel = cvaMerge([
 ], {
     variants: {
         disabled: {
-            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
-            false: ["cursor-pointer"],
+            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
+            false: ["cursor-pointer"],
+        },
+    },
+});
+const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
+const cvaOptionCardContainer = cvaMerge(["contents"]);
+
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+const OptionCard = forwardRef((_a, ref) => {
+    var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
+    const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
+    return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer hidden", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsx(Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
+});
+
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref }, props))));
+
+/**
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ *
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+const PasswordField = forwardRef((_a, ref) => {
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "passwordField-" + v4();
+    const [showPassword, setShowPassword] = useState(false);
+    const handleChange = useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(PasswordInput, Object.assign({}, rest, { actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", color: "neutral", name: showPassword ? "EyeSlash" : "Eye", onClick: () => setShowPassword(prevState => !prevState), size: "small" }), "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, type: showPassword ? "text" : "password", value: value })) }));
+});
+
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+/**
+ * Generates a flag emoji based on the given country code.
+ *
+ * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
+ * @returns {string} - The corresponding flag emoji for the given country code.
+ * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ */
+const countryCodeToFlagEmoji = (countryCode) => {
+    let code = countryCode;
+    if (countryCode.startsWith("+")) {
+        code = getCountryAbbreviation(countryCode.substring(1));
+    }
+    else if (!isNaN(Number(countryCode))) {
+        code = getCountryAbbreviation(countryCode);
+    }
+    return isSupportedCountry(code.toUpperCase())
+        ? code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)))
+        : "";
+};
+/**
+ * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ *
+ * @param {string} callCode - The international calling code for a country.
+ * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
+ * @example getCountryAbbreviation("45") // "DK"
+ * @example getCountryAbbreviation("+45") // "DK"
+ */
+const getCountryAbbreviation = (callCode) => {
+    let code = callCode;
+    if (callCode.startsWith("+")) {
+        code = callCode.substring(1);
+    }
+    return getCountries().find(c => getCountryCallingCode(c) === code) || "";
+};
+
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
+ */
+const usePhoneInput = () => {
+    const getPhoneNumber = ({ country, phone }) => {
+        if (country) {
+            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+        }
+        return phone || "";
+    };
+    return {
+        getPhoneNumber,
+    };
+};
+
+const cvaSelect = cvaMerge([
+    "relative",
+    "flex",
+    "shadow-sm",
+    "rounded-lg",
+    "border",
+    "border-slate-300",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-600",
+    "focus-within:border-slate-400",
+    "hover:border-slate-400",
+    "hover:bg-slate-50",
+    "bg-white",
+    "transition",
+], {
+    variants: {
+        invalid: {
+            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            false: "",
+        },
+        disabled: {
+            true: "!bg-slate-100",
+            false: "",
         },
     },
+    defaultVariants: {
+        invalid: false,
+        disabled: false,
+    },
 });
-const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cvaMerge(["contents"]);
+const cvaSelectIcon = cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
+const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
+const cvaSelectXIcon = cvaMerge([
+    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+    variants: {
+        menuIsOpen: {
+            true: "animate-fade-in-fast",
+            false: "animate-fade-out-fast",
+        },
+    },
+});
+const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+    variants: {
+        visible: { true: "visible", false: "invisible" },
+    },
+});
+const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
+const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
 /**
- * A card version of a radio button that includes an icon, headings and a description.
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
  */
-const OptionCard = forwardRef((_a, ref) => {
-    var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
-    const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx(Text, { type: "span", weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx(Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
-});
+function isMultiValue(arg) {
+    return Array.isArray(arg);
+}
+function isGroupBase(arg) {
+    return arg.options !== undefined;
+}
+const isSelectedOption = (option, selected) => {
+    if (isGroupBase(option)) {
+        return false;
+    }
+    return isMultiValue(selected)
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            selected.some(v => v.value === option.value)
+        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+};
+const removeSelectedFromGroups = (group, selected) => {
+    if (isGroupBase(group)) {
+        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
+    }
+    return group;
+};
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+const getOrderedOptions = (options, value) => {
+    if (value && options) {
+        const orderedValues = isMultiValue(value)
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                [...value].sort((a, b) => a.label.localeCompare(b.label))
+            : [value];
+        const selectableOptions = options
+            .filter(option => !isSelectedOption(option, value))
+            .map(option => removeSelectedFromGroups(option, value));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return orderedValues.concat(selectableOptions) || [];
+    }
+    return options || [];
+};
 
 /**
- * A thin wrapper around the `BaseInput` component for password input fields.
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
- * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
  */
-const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref }, props))));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
+};
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+                e.stopPropagation();
+            }, readOnly: false }), selected: selected }));
+};
 
 /**
- * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
  *
- * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+const TagWithWidth = (_a) => {
+    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
+    const ref = React__default.useRef(null);
+    React__default.useLayoutEffect(() => {
+        var _a;
+        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+    }, [ref, onWidthKnown]);
+    return (jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+};
+
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
  */
-const PasswordField = forwardRef((_a, ref) => {
-    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "passwordField-" + v4();
-    const [showPassword, setShowPassword] = useState(false);
-    const handleChange = useCallback((event) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PasswordInput, Object.assign({}, rest, { type: showPassword ? "text" : "password", disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
-});
+const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
+    const [isReady, setIsReady] = React__default.useState(false);
+    const [counterWidth, setCounterWidth] = React__default.useState(0);
+    const containerRef = React__default.useRef(null);
+    const availableWidth = React__default.useRef();
+    const childrenWidth = React__default.useRef([]);
+    const itemsCount = items.length;
+    React__default.useLayoutEffect(() => {
+        var _a;
+        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    }, [containerRef]);
+    const onWidthKnownHandler = ({ width: reportedWidth }) => {
+        childrenWidth.current.push({ width: reportedWidth + itemsGap });
+        if (childrenWidth.current.length === itemsCount) {
+            setIsReady(true);
+        }
+    };
+    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
+        return previous + current.width;
+    }, 0);
+    let counter = 0;
+    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
+    const renderedElements = items
+        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
+        .map((item, index) => {
+        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+            return previous + current.width;
+        }, 0);
+        const isLast = index === items.length;
+        const counterRequired = requiredSpace > availableSpace && counter !== 0;
+        if (isLast && counterRequired) {
+            return (jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", counter] }) }, item.text + index));
+        }
+        if (isLast) {
+            return null;
+        }
+        const itemCanFit = spaceNeeded <= availableSpace;
+        if (itemCanFit) {
+            return (jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                    e.stopPropagation();
+                    item.onClick();
+                }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index));
+        }
+        const fromTheItems = item.text !== "";
+        if (fromTheItems) {
+            counter = counter + 1;
+        }
+        return null;
+    })
+        .filter(element => element !== null);
+    return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
+            width: `${width}`,
+        }, children: [renderedElements, postFix] }));
+};
 
 /**
- * @param phoneNumber - a phone number as a string
- * @returns {boolean} true if the phone number starts with a plus sign
- * @example checkIfPhoneNumberHasPlus("123456789") // false
- * checkIfPhoneNumberHasPlus("+123456789") // true
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ *
+ * @template IsMulti
+ * @template Group
+ * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
+ * @param {boolean} disabled decide to override disabled variant
+ * @param {boolean} menuIsOpen menu is open state
+ * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {string} dataTestId a test id
+ * @param {number} maxSelectedDisplayCount a number of max display count
+ *  @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 checkIfPhoneNumberHasPlus = (phoneNumber) => {
-    return phoneNumber.startsWith("+");
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    const [t] = useTranslation();
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    const customComponents = React.useMemo(() => {
+        return Object.assign({ ValueContainer: props => {
+                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
+                    const PLACEHOLDER_KEY = "placeholder";
+                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
+                    const values = props && props.children ? props.children[0] : [];
+                    const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    const searchInput = props && props.children && props.children[1];
+                    return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
+                                ? tags.map(({ props: tagProps }) => {
+                                    return {
+                                        text: tagProps.children,
+                                        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));
+                                            },
+                                        disabled: disabled,
+                                    };
+                                })
+                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags &&
+                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a, _b;
+                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, onClose: e => {
+                                                var _a, _b;
+                                                e.stopPropagation();
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            }, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                }
+                return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
+            }, LoadingIndicator: props => {
+                return jsx(Spinner, { className: "mt-1.5 mr-1", size: "small" });
+            }, DropdownIndicator: props => {
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
+            }, IndicatorSeparator: () => null, ClearIndicator: props => {
+                if (disabled) {
+                    return null;
+                }
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
+            }, Control: props => {
+                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
+            }, SingleValue: props => {
+                return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
+            }, Menu: props => {
+                return (jsx(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
+            }, MenuList: props => {
+                return (jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
+                            const listEl = e.currentTarget;
+                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
+                                props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
+                            }
+                        } }), children: props.children })));
+            }, Option: props => {
+                const componentProps = {
+                    label: props.label,
+                    focused: props.isFocused,
+                    selected: props.isSelected,
+                    onClick: props.innerProps.onClick,
+                };
+                return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }), children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled }))) })));
+            } }, componentsProps);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    return customComponents;
 };
+
 /**
- * @param phoneNumber - a phone number as a string
- * @returns {string|number} the phone number with a plus sign in front of it
- * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ * @template IsMulti
+ * @template Group
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const getPhoneNumberWithPlus = (phoneNumber) => {
-    const stringPhoneNumber = phoneNumber.toString();
-    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
+    const customStyles = React.useMemo(() => {
+        return Object.assign({ control: base => {
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, marginRight: "2px", 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 => {
+                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: "calc(100% - 2px)", paddingLeft: "2px" })), 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
+    }, [refContainer, refPrefix]);
+    return { customStyles };
 };
+
 /**
- * Generates a flag emoji based on the given country code.
+ * A hook used by selects to share the common code
  *
- * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
- * @returns {string} - The corresponding flag emoji for the given country code.
- * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
  */
-const countryCodeToFlagEmoji = (countryCode) => {
-    let code = countryCode;
-    if (countryCode.startsWith("+")) {
-        code = getCountryAbbreviation(countryCode.substring(1));
-    }
-    else if (!isNaN(Number(countryCode))) {
-        code = getCountryAbbreviation(countryCode);
-    }
-    return isSupportedCountry(code.toUpperCase())
-        ? code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)))
-        : "";
+const useSelect = (_a) => {
+    var _b;
+    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
+    const refContainer = React__default.useRef(null);
+    const refPrefix = React__default.useRef(null);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
+    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
+    const refMenuIsEnabled = React__default.useRef(true);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const menuPlacement = "auto";
+    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+        onMenuOpen && onMenuOpen();
+        if (refMenuIsEnabled.current) {
+            setMenuIsOpen(true);
+        }
+        else {
+            refMenuIsEnabled.current = true;
+        }
+    });
+    const closeMenuHandler = () => {
+        setMenuIsOpen(false);
+        onMenuClose && onMenuClose();
+    };
+    const orderedOptions = React__default.useMemo(() => {
+        return disabled
+            ? getOrderedOptions(options, value).map(option => {
+                return Object.assign(Object.assign({}, option), { disabled: true });
+            })
+            : getOrderedOptions(options, value);
+    }, [options, value, disabled]);
+    return {
+        refContainer,
+        refPrefix,
+        customStyles,
+        menuIsOpen,
+        customComponents,
+        menuPlacement,
+        openMenuHandler,
+        closeMenuHandler,
+        orderedOptions,
+    };
 };
+
 /**
- * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ * CreatableSelects are input components used to choose a value from a set.
  *
- * @param {string} callCode - The international calling code for a country.
- * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
- * @example getCountryAbbreviation("45") // "DK"
- * @example getCountryAbbreviation("+45") // "DK"
+ * @param {CreatableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
  */
-const getCountryAbbreviation = (callCode) => {
-    let code = callCode;
-    if (callCode.startsWith("+")) {
-        code = callCode.substring(1);
-    }
-    return getCountries().find(c => getCountryCallingCode(c) === code) || "";
+const CreatableSelect = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    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, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const creatableSelectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: true,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+        allowCreateWhileLoading,
+        onCreateOption,
+    };
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
 };
+CreatableSelect.displayName = "CreatableSelect";
 
 /**
- * A custom hook for managing phone number input state and validation.
+ * Selects are input components used to choose a value from a set.
  *
- *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
  */
-const usePhoneInput = () => {
-    const getPhoneNumber = ({ country, phone }) => {
-        if (country) {
-            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
-        }
-        return phone || "";
-    };
-    return {
-        getPhoneNumber,
+const Select = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
     };
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
 };
+Select.displayName = "Select";
 
 const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["+53", "+98", "+211", "+247", "+249", "+383", "+850", "+963"];
 const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
@@ -1491,7 +1424,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     const filteredCodes = countryCodes.filter(code => {
         return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
     });
-    return (jsx(Select, { dataTestId: dataTestId, className: "w-36", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
+    return (jsx(Select, { "aria-invalid": isCountryCodeMissing, className: "w-36", closeMenuOnSelect: true, dataTestId: dataTestId, disabled: disabled, hasError: isCountryCodeMissing || isInvalid, isClearable: isClearable, maxMenuHeight: 200, menuIsOpen: readOnly ? false : undefined, onBlur: onBlur, onChange: onChange, options: filteredCodes.map(code => code), placeholder: placeholder, readOnly: readOnly, value: filteredCodes.find(({ value }) => value === `+${countryCode}`) }));
 };
 
 /**
@@ -1562,16 +1495,16 @@ const PhoneInput = forwardRef((_a, ref) => {
         // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
         onChange && onChange(event);
     }, [phoneNumber, onChange]);
-    return (jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid, readOnly: readOnly }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
+    return (jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { "aria-invalid": isInvalid, "data-testid": dataTestId, hidden: true, id: "phone-input", onChange: onChange, readOnly: readOnly, ref: hiddenInputRef, value: phoneNumber }), jsx(CountryCodeSelect, { countryCode: code, dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, disabled: disabled, isClearable: isCountryCodeClearable, isInvalid: isInvalid, onBlur: e => {
                     onBlurHandler();
                 }, onChange: e => {
                     var _a;
                     onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: placeholder, isClearable: isCountryCodeClearable }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
-                    onPhoneChangeHandler(e.target.value);
-                }, onBlur: () => {
+                }, placeholder: placeholder, readOnly: readOnly }), jsx(BaseInput, Object.assign({ actions: !disableAction && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: phoneNumber })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, onBlur: () => {
                     onBlurHandler();
-                }, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid, value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+                }, onChange: e => {
+                    onPhoneChangeHandler(e.target.value);
+                }, readOnly: readOnly, type: "tel", value: phone }, rest))] }));
 });
 
 /**
@@ -1649,7 +1582,7 @@ const PhoneField = forwardRef((_a, ref) => {
         validate(phoneNumberValue);
         onFieldsBlur && onFieldsBlur(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
     };
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && (errorMessage || localError)) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValueHandler, onFieldsBlur: handleOnFieldBlur }, rest)) }));
+    return (jsx(FormGroup, { className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && (errorMessage || localError)) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onChangeValue: onChangeValueHandler, onFieldsBlur: handleOnFieldBlur, ref: ref, value: value }, rest)) }));
 });
 
 const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
@@ -1764,7 +1697,7 @@ const RadioGroupContext = React.createContext(null);
  * @returns {JSX.Element} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, { label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -1784,11 +1717,11 @@ RadioGroup.displayName = "RadioGroup";
 const RadioItem = ({ label, value, dataTestId, className, description, }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper`, children: [jsx("input", { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", value: value, checked: isChecked, className: cvaRadioItem({
+    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId && `${dataTestId}-Wrapper`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
                     invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, children: description }))] })] }));
+                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId && `${dataTestId}-Description`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: description }))] })] }));
 };
 
 const cvaTimeRange = cvaMerge(["flex", "flex-1", "items-center", "gap-4", "border-transparent", "rounded-md"]);
@@ -1812,7 +1745,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { id: id, className: cvaTimeRange({ className }), "data-testid": dataTestId, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, type: "time", onChange: (time) => onChangeFrom(time.currentTarget.value), onBlur: onRangeChange, value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeFrom) !== null && _a !== void 0 ? _a : "" }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, type: "time", onChange: (time) => onChangeTo(time.currentTarget.value), onBlur: onRangeChange, value: (_b = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeTo) !== null && _b !== void 0 ? _b : "" })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeFrom) !== null && _a !== void 0 ? _a : "" }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: (_b = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeTo) !== null && _b !== void 0 ? _b : "" })] }));
 };
 
 const cvaScheduleItem = cvaMerge(["grid", "pb-4", "gap-2", "grid-cols-[60px,200px,60px,2fr]"]);
@@ -1838,8 +1771,8 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
             ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isAllDayActive: isAllDayChecked }) : day);
         onChange(newSchedule);
     };
-    return (jsx("div", { "data-testid": dataTestId, className: className, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
-            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { dataTestId: `${dataTestId}-${key}-checkbox`, checked: isActive, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index), label: checkboxLabel }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, checked: isAllDayActive && isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, range: range, onChange: (newRange) => onRangeChange(newRange, index), disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key) })] }, key));
+    return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
+            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDayActive && isActive, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key));
         }) }));
 };
 
@@ -1995,11 +1928,76 @@ const cvaSearch = cvaMerge([
  */
 const Search = forwardRef((_a, ref) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx(TextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
+});
+
+const FormFieldSelectAdapter = forwardRef((_a, ref) => {
+    var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+    const [innerValue, setInnerValue] = useState(value || defaultValue);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = useMemo(() => (id ? id : "selectField-" + v4()), [id]);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
+    const handleChange = useCallback((newValue) => {
+        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (!innerValue) {
+            return;
+        }
+        const event = new Event("change");
+        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange, innerValue]);
+    const selectedOption = options.find(option => { var _a; return option.value === ((_a = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _a === void 0 ? void 0 : _a.value); });
+    const defaultSelectedOption = options.find(option => option.value === defaultValue);
+    return (jsxs(FormGroup, { isInvalid: renderAsInvalid,
+        htmlFor,
+        className,
+        dataTestId,
+        helpText,
+        helpAddon,
+        tip,
+        label,
+        disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: options.map(option => {
+                    return (jsx("option", { value: option.value, children: option.label }, option.value));
+                }) }), children(Object.assign({ id, isDisabled: disabled, onBlur,
+                options, onChange: handleChange, value: selectedOption, defaultValue: defaultSelectedOption }, rest))] }));
 });
 
+/**
+ * The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
+ *
+ * This means that it can easily be added to any form alongside other Field components.
+ *
+ * This is done to make the field compatible with the React-hook-form library.
+ *
+ * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
+ * @returns {JSX.Element} CreatableSelectField component
+ */
+const CreatableSelectField = (_a) => {
+    var { allowCreateWhileLoading, onCreateOption } = _a, props = __rest(_a, ["allowCreateWhileLoading", "onCreateOption"]);
+    const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
+    return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
+};
+
+/**
+ * The SelectField component is a Select component wrapped in the FromGroup component.
+ *
+ * This means that it can easily be added to any form alongside other Field components.
+ *
+ * This is done to make the field compatible with the React-hook-form library.
+ *
+ * @param {SelectFieldProps} props - The props for the SelectField component
+ * @returns {JSX.Element} SelectField component
+ */
+const SelectField = (props) => {
+    return jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsx(Select, Object.assign({}, convertedProps)) }));
+};
+
 const cvaTextArea = cvaMerge([
     cvaInputBase(),
     "block",
@@ -2039,7 +2037,7 @@ const cvaTextArea = cvaMerge([
  */
 const TextArea = React.forwardRef((_a, ref) => {
     var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "required", "dataTestId", "isInvalid", "className"]);
-    return (jsx("textarea", Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, ref: ref, defaultValue: defaultValue, required: required, className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }) }, rest, { onChange: onChange, "data-testid": dataTestId })));
+    return (jsx("textarea", Object.assign({ className: cvaTextArea({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value }, rest, { "data-testid": dataTestId, onChange: onChange })));
 });
 
 /**
@@ -2064,8 +2062,8 @@ const TextAreaField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: `${className} grid grid-rows-[auto_1fr_auto]`, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: "h-auto", onChange: handleChange, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { className: `${className} grid grid-rows-[auto_1fr_auto]`, dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TextArea, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: "h-auto", dataTestId: dataTestId, onChange: handleChange })) }));
 });
 
 /**
@@ -2086,8 +2084,8 @@ const TextField = React.forwardRef((_a, ref) => {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(TextInput, Object.assign({ disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TextInput, Object.assign({ "aria-labelledby": htmlFor + "-label", disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value }, rest, { className: className, dataTestId: dataTestId, onChange: handleChange })) }));
 });
 
 /**
@@ -2100,7 +2098,7 @@ const TimeRangeField = (_a) => {
     var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + v4();
-    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid }, rest, { children: children })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, Object.assign({ className: className, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: onChange }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
@@ -2175,10 +2173,10 @@ const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled,
     const showLabelContainer = Boolean(name || description);
     const showDescription = Boolean(description);
     const getTestId = (suffix) => `${dataTestId}-${suffix}`;
-    return (jsx("span", { className: className, onClick: onClick, "data-testid": getTestId("outer-wrapper"), children: jsxs("label", { className: cvaToggleWrapper(), htmlFor: id, "data-testid": getTestId("wrapper"), children: [jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription && (jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description }))] })), jsx("input", { name: name, className: cvaToggleInput(), type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+    return (jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx("span", { className: cvaToggleThumb({ toggled }), "data-testid": getTestId("thumb") }) }), showLabelContainer && (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription && (jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description }))] })), 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);
-                    }, id: id, "aria-checked": toggled, tabIndex: tabIndex, required: required, ref: ref, "data-testid": getTestId("input"), onBlur: onBlur })] }) }));
+                    }, ref: ref, required: required, tabIndex: tabIndex, type: "checkbox" })] }) }));
 });
 
 const cvaUploadInputField = cvaMerge([
@@ -2200,14 +2198,13 @@ const cvaUploadInputAddonBefore = cvaMerge(["block", "truncate", "w-28", "pt-2"]
  */
 const UploadInput = forwardRef((_a, ref) => {
     var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsx("label", { className: "tu-upload-input", children: jsx(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
-            // onClick used to work with nonInteractive option
-            onClick: event => {
+    return (jsx("label", { className: "tu-upload-input", children: jsx(BaseInput, Object.assign({ accept: acceptedTypes, addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
+                // onClick used to work with nonInteractive option
                 if (nonInteractive) {
                     event.preventDefault();
                     event.stopPropagation();
                 }
-            } }, rest)) }));
+            }, ref: ref, type: "file" }, rest)) }));
 });
 
 /**
@@ -2217,7 +2214,7 @@ const UploadField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "uploadField-" + v4();
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup`, children: jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(UploadInput, Object.assign({ "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
 /**
@@ -2244,7 +2241,7 @@ const UrlInput = forwardRef((_a, ref) => {
     var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
     const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, Object.assign({ id: "url-input", dataTestId: dataTestId && `${dataTestId}-url-input`, ref: ref, type: "url", placeholder: rest.placeholder || "https://www.example.com", onChange: e => setUrl(e.target.value), isInvalid: renderAsInvalid, value: url, disabled: disabled }, rest, { actions: !disableAction && (jsx(ActionButton, { disabled: renderAsInvalid || disabled, value: url, type: "WEB_ADDRESS", dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", iconSize: fieldSize })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId && `${dataTestId}-url-input`, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }, rest, { actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disabled, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) })));
 });
 
 /**
@@ -2260,7 +2257,7 @@ const UrlField = forwardRef((_a, ref) => {
         return typeof inputValue === "string";
     }
     const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: renderAsInvalid ? errorMessage : helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(UrlInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value || defaultValue, isInvalid: renderAsInvalid, disabled: rest.disabled }, rest, { className: className, dataTestId: dataTestId })) }));
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
 /*
@@ -2272,4 +2269,4 @@ const UrlField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };