@trackunit/react-form-components 0.0.288 → 0.0.290

package/index.esm.js

@@ -1,17 +1,17 @@
 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 { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useEffect, useRef } from 'react';
+import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useCallback, useEffect, cloneElement } from 'react';
 import { v4 } from 'uuid';
-import { format } from 'date-fns';
-import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
+import { Tooltip, Text, MenuItem, Icon, Tag, Spinner, IconButton, Heading } from '@trackunit/react-components';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 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 { format } from 'date-fns';
+import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
 
 var defaultTranslations = {
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
@@ -67,54 +67,6 @@ 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, className, }) => {
-    const getIconName = () => {
-        switch (type) {
-            case "PHONE_NUMBER":
-                return "PhoneArrowUpRight";
-            case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquare";
-            case "EMAIL":
-            default:
-                return "Envelope";
-        }
-    };
-    const ButtonAction = () => {
-        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":
-            default:
-                return window.open(`tel:${value}`);
-        }
-    };
-    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -152,135 +104,95 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const cvaInputBase = cvaMerge([
-    "component-baseInput-shadow",
-    "component-baseInput-border",
-    "component-baseInput-background",
-    "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-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",
+const cvaLabel = cvaMerge([
     "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "focus-visible:outline-none",
+    "text-slate-700",
+    "truncate",
+    "hover:text-slate-800",
+    "group-hover:text-slate-800",
+    "active:text-slate-800",
+    "group-active:text-slate-800",
 ], {
     variants: {
-        size: {
-            small: ["py-1"],
-            medium: ["py-2"],
+        invalid: {
+            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: ["text-slate-700"],
+            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
             false: "",
         },
     },
+    defaultVariants: {
+        invalid: false,
+        disabled: 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",
-], {
+
+/**
+ * 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"], {
     variants: {
         disabled: {
-            true: ["text-slate-500"],
+            true: "pointer-events-none",
             false: "",
         },
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
+const cvaFormGroupContainerBefore = cvaMerge(["flex", "gap-1", "mb-1"]);
+const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
     variants: {
-        disabled: {
-            true: ["text-slate-500"],
+        invalid: {
+            true: "text-danger-500",
             false: "",
         },
     },
 });
+const cvaHelpAddon = cvaMerge(["ml-auto"]);
 
 /**
- * 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)
+ * 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.
  *
- * 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.
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
  */
-const BaseInput = React.forwardRef((_a, ref) => {
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type", "inputClassName", "addonBeforeClassName"]);
-    const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
-    const renderAsDisabled = rest.disabled || rest.readOnly;
-    return (jsxs("div", { className: cvaInput({
-            disabled: renderAsDisabled,
-            invalid: isInvalid,
-            size: fieldSize,
-            className,
-        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("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: ref, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
-                    disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
-});
+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 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 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: "text-red-600 hover:text-red-700 active:text-red-700 group-hover:text-red-700 group-active:text-red-700",
+            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            true: "!bg-slate-100",
             false: "",
         },
     },
@@ -289,32 +201,111 @@ const cvaLabel = 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 CheckIcon component is used by the checkbox to display the checked state.
+ * The SelectContainer component.
  *
- * @param {CheckIconProps} props - The props for the CheckIcon component
- * @returns {JSX.Element} CheckIcon component
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer 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 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 })] }));
 };
 
-const cvaCheckbox = cvaMerge([
-    "w-4",
-    "h-4",
-    "border-solid",
-    "border",
-    "shrink-0",
-    "border-slate-300",
-    "flex",
-    "rounded",
-    "hover:bg-slate-100",
-    "bg-white",
-    "items-center",
-    "shadow-sm",
-    "justify-center",
-    "box-border",
+/**
+ * @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 cvaCheckbox = cvaMerge([
+    "w-4",
+    "h-4",
+    "border-solid",
+    "border",
+    "shrink-0",
+    "border-slate-300",
+    "flex",
+    "rounded",
+    "hover:bg-slate-100",
+    "bg-white",
+    "items-center",
+    "shadow-sm",
+    "justify-center",
+    "box-border",
     "transition",
     "focus:bg-slate-200",
     "outline-0",
@@ -478,838 +469,899 @@ const Checkbox = React.forwardRef((_a, ref) => {
 });
 
 /**
- * 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 Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
  */
-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 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 cvaFormGroup = cvaMerge(["component-formGroup-gap"], {
-    variants: {
-        disabled: {
-            true: "pointer-events-none",
-            false: "",
-        },
-    },
-});
-const cvaFormGroupContainerBefore = cvaMerge(["flex", "gap-1", "mb-1"]);
-const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-slate-500"], {
-    variants: {
-        invalid: {
-            true: "text-danger-500",
-            false: "",
-        },
-    },
-});
-const cvaHelpAddon = cvaMerge(["ml-auto"]);
-
 /**
- * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
+ * 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 {FormGroupProps} props - The props for the FormGroup component
- * @returns {JSX.Element} FormGroup component
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
  */
-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 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 }));
 };
 
 /**
- * The date field component is used for entering date values.
- *
- * _**Do use**_ the DateField for date input.
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
  *
- * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
  */
-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",
-]);
+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 })));
+};
 
 /**
- * The Drop Zone can be used to drag and drop files
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
- * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {JSX.Element} DropZone component
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
  */
-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);
+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);
         }
     };
-    //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 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));
         }
-    };
-    //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);
+        if (isLast) {
+            return null;
         }
-    };
-    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 })] })] })));
+        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));
+        }
+        const fromTheItems = item.text !== "";
+        if (fromTheItems) {
+            counter = counter + 1;
+        }
+        return null;
+    })
+        .filter(element => element !== null);
+    return (jsxs("div", { style: {
+            width: `${width}`,
+        }, className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, children: [renderedElements, postFix] }));
 };
 
-// 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.
- * @returns {boolean} Returns true if the email address is valid else false.
- * @example validateEmailAddress(test@gmail.com) // 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 validateEmailAddress = (email) => {
-    if (!email) {
-        return false;
-    }
-    return EMAIL_REGEX.test(email);
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // 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, { 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;
 };
 
 /**
- * A Email Input component is used for input of the type Email.
- *
- * It has an ActionButton which sends an email to the specified address using "mailto:" link.
- *
- * Extends props of BaseInput.
- *
- * A reference to the input element is provided as the `ref` prop.
- * For specific input types make sure to use the corresponding input component.
+ * @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 EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
-    const [email, setEmail] = React.useState("");
-    const sendEmail = () => {
-        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)));
-});
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
+    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({}, base)), 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 };
+};
 
 /**
- * The EmailField component is used to enter email.
- * EmailField validates that user enters a valid email address.
+ * A hook used by selects to share the common code
  *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
  */
-const EmailField = forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "onChange", "isInvalid"]);
-    const htmlForId = id ? id : "emailField-" + v4();
-    // Type guard to check if value is a string
-    function isString(inputValue) {
-        return typeof inputValue === "string";
-    }
-    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid;
-    const handleChange = useCallback((event) => {
-        if (onChange) {
-            onChange(event);
+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);
+    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);
         }
-    }, [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 })) }));
-});
+        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,
+    };
+};
 
 /**
- * A thin wrapper around the `BaseInput` component for number input fields.
+ * The CreatableSelect component.
  *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
  */
-const NumberInput = forwardRef((props, ref) => {
-    return jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
-});
+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();
+                    } })))] }) }));
+};
 
 /**
- * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
- *
- * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ * Selects are input components used to choose a value from a set.
  *
- * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
- */
-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 })) }));
-});
-
-const cvaOptionCardLabel = cvaMerge([
-    cvaInputBase(),
-    "text-center",
-    "component-baseInput-background",
-    "aspect-square",
-    "flex",
-    "flex-col",
-    "gap-2",
-    "justify-center",
-    "items-center",
-    "p-responsive-space",
-    "w-full",
-    "peer-checked:bg-primary-50",
-    "peer-checked:border-primary-600",
-    "peer-checked:border-2",
-], {
-    variants: {
-        disabled: {
-            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
-            false: ["cursor-pointer"],
-        },
-    },
-});
-const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cvaMerge(["contents"]);
-
-/**
- * A card version of a radio button that includes an icon, headings and a description.
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
  */
-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 }))] }))] })] }));
-});
+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, } = 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: true,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick: true,
+        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";
 
 /**
- * A thin wrapper around the `BaseInput` component for password input fields.
+ * The SelectField component is a Select component wrapped in the FromGroup component.
  *
- * NOTE: If shown with a label, please use the `PasswordField` component instead.
- */
-const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
-
-/**
- * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ * This means that it can easily be added to any form alongside other Field components.
  *
- * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ * This is done to make the field compatible with the React-hook-form library.
  *
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ * @param {SelectFieldProps} props - The props for the SelectField component
+ * @returns {JSX.Element} SelectField component
  */
-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 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 = id ? id : "passwordField-" + v4();
-    const [showPassword, setShowPassword] = useState(false);
-    const handleChange = useCallback((event) => {
+    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]);
-    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, { obfuscate: showPassword, 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) }) })) }));
+    }, [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 })] }));
 });
 
-/**
- * @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) || "";
-};
+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"]);
 
 /**
- * A custom hook for managing phone number input state and validation.
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
  *
- *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
  */
-const usePhoneInput = () => {
-    const getPhoneNumber = ({ country, phone }) => {
-        if (country) {
-            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className, }) => {
+    const getIconName = () => {
+        switch (type) {
+            case "PHONE_NUMBER":
+                return "PhoneArrowUpRight";
+            case "WEB_ADDRESS":
+                return "ArrowTopRightOnSquare";
+            case "EMAIL":
+            default:
+                return "Envelope";
+        }
+    };
+    const ButtonAction = () => {
+        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":
+            default:
+                return window.open(`tel:${value}`);
         }
-        return phone || "";
-    };
-    return {
-        getPhoneNumber,
     };
+    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
 };
 
-const cvaSelect = cvaMerge([
-    "relative",
-    "flex",
-    "shadow-sm",
-    "rounded-lg",
-    "border",
+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-600",
+    "focus-within:ring-primary-500",
     "focus-within:border-slate-400",
     "hover:border-slate-400",
     "hover:bg-slate-50",
-    "bg-white",
     "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: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            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: "!bg-slate-100",
+            true: ["text-slate-700"],
             false: "",
         },
     },
-    defaultVariants: {
-        invalid: false,
-        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 cvaInputAddon = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "px-3",
+    "border-slate-300",
+    "text-slate-500",
+    "bg-slate-50",
 ]);
-const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+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: {
-        menuIsOpen: {
-            true: "animate-fade-in-fast",
-            false: "animate-fade-out-fast",
+        disabled: {
+            true: ["text-slate-500"],
+            false: "",
         },
     },
 });
-const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3"], {
     variants: {
-        visible: { true: "visible", false: "invisible" },
+        disabled: {
+            true: ["text-slate-500"],
+            false: "",
+        },
     },
 });
-const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
-const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
 /**
- * The SelectContainer component.
+ * 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 {SelectContainerProps} props - The props for the SelectContainer component
- * @returns {JSX.Element} SelectContainer 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 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 })] }));
-};
+const BaseInput = React.forwardRef((_a, ref) => {
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type", "inputClassName", "addonBeforeClassName"]);
+    const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
+    const renderAsDisabled = rest.disabled || rest.readOnly;
+    return (jsxs("div", { className: cvaInput({
+            disabled: renderAsDisabled,
+            invalid: isInvalid,
+            size: fieldSize,
+            className,
+        }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("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: ref, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                    disabled: renderAsDisabled,
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+});
 
 /**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-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;
+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}$/;
 /**
- *  @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
+ * @description Validate given email id.
+ * @param email The address to validate.
+ * @returns {boolean} Returns true if the email address is valid else false.
+ * @example validateEmailAddress(test@gmail.com) // true
  */
-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) || [];
+const validateEmailAddress = (email) => {
+    if (!email) {
+        return false;
     }
-    return options || [];
+    return EMAIL_REGEX.test(email);
 };
 
 /**
- * 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 Email Input component is used for input of the type Email.
  *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {JSX.Element} SingleSelectMenuItem
- */
-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 }));
-};
-/**
- * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
  *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {JSX.Element} multi select menu item
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input 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 EmailInput = React.forwardRef((_a, ref) => {
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
+    const [email, setEmail] = React.useState("");
+    const sendEmail = () => {
+        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)));
+});
 
 /**
- * Extended Tag component with information about its own width.
- * Used in the select component.
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
  *
- * @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 })));
-};
+const EmailField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "onChange", "isInvalid"]);
+    const htmlForId = id ? id : "emailField-" + v4();
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid;
+    const handleChange = useCallback((event) => {
+        if (onChange) {
+            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 })) }));
+});
 
 /**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ * A thin wrapper around the `BaseInput` component for number input fields.
  *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {JSX.Element} TagsContainer
+ * NOTE: If shown with a label, please use the `NumberField` component 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));
-        }
-        if (isLast) {
-            return null;
-        }
-        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));
-        }
-        const fromTheItems = item.text !== "";
-        if (fromTheItems) {
-            counter = counter + 1;
-        }
-        return null;
-    })
-        .filter(element => element !== null);
-    return (jsxs("div", { style: {
-            width: `${width}`,
-        }, className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, children: [renderedElements, postFix] }));
-};
+const NumberInput = forwardRef((props, ref) => {
+    return jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props, { value: props.value }));
+});
 
 /**
- * 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.
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
  *
- * @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
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
-    // 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, { 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;
-};
+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 })) }));
+});
+
+const cvaOptionCardLabel = cvaMerge([
+    cvaInputBase(),
+    "text-center",
+    "component-baseInput-background",
+    "aspect-square",
+    "flex",
+    "flex-col",
+    "gap-2",
+    "justify-center",
+    "items-center",
+    "p-responsive-space",
+    "w-full",
+    "peer-checked:bg-primary-50",
+    "peer-checked:border-primary-600",
+    "peer-checked:border-2",
+], {
+    variants: {
+        disabled: {
+            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
+            false: ["cursor-pointer"],
+        },
+    },
+});
+const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
+const cvaOptionCardContainer = cvaMerge(["contents"]);
 
 /**
- * @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
+ * A card version of a radio button that includes an icon, headings and a description.
  */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
-    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({}, base)), 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 };
-};
+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 }))] }))] })] }));
+});
 
 /**
- * A hook used by selects to share the common code
+ * A thin wrapper around the `BaseInput` component for password input fields.
  *
- * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-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);
-    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,
-    };
-};
+const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
 
 /**
- * The CreatableSelect component.
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
  *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
+ * _**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 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();
-                    } })))] }) }));
+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, { obfuscate: showPassword, 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) }) })) }));
+});
+
+/**
+ * @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) || "";
 };
 
 /**
- * Selects are input components used to choose a value from a set.
+ * A custom hook for managing phone number input state and validation.
  *
- * @param {SelectProps} props - The props for the Select component
- * @returns {JSX.Element} Select component
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
  */
-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, } = 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: true,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick: true,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
+const usePhoneInput = () => {
+    const getPhoneNumber = ({ country, phone }) => {
+        if (country) {
+            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+        }
+        return phone || "";
+    };
+    return {
+        getPhoneNumber,
     };
-    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";
 
 const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["+53", "+98", "+211", "+247", "+249", "+383", "+850", "+963"];
 const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
@@ -2204,4 +2256,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, 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, 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 };