@trackunit/react-form-components 1.8.64 → 1.8.66

package/index.cjs.js

@@ -10,12 +10,12 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var stringTs = require('string-ts');
 var usehooksTs = require('usehooks-ts');
 var parsePhoneNumberFromString = require('libphonenumber-js');
-var sharedUtils = require('@trackunit/shared-utils');
-var reactHookForm = require('react-hook-form');
 var ReactSelect = require('react-select');
+var ReactAsyncSelect = require('react-select/async');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
-var ReactAsyncSelect = require('react-select/async');
+var sharedUtils = require('@trackunit/shared-utils');
+var reactHookForm = require('react-hook-form');
 var tailwindMerge = require('tailwind-merge');
 var zod = require('zod');
 
@@ -108,10 +108,28 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
     "hover:bg-neutral-50",
     "transition",
 ]);
-const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300"]);
+const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge([
+    "bg-neutral-100",
+    "hover:bg-neutral-100",
+    "hover:border-neutral-300",
+    "text-neutral-400",
+]);
 const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
+const cvaInputBaseReadOnly = cssClassVarianceUtilities.cvaMerge(["text-neutral-500"]);
+const cvaInputBaseSize = cssClassVarianceUtilities.cvaMerge("", {
+    variants: {
+        size: {
+            small: ["h-7", "text-xs"],
+            medium: ["h-8", "text-sm"],
+            large: ["h-10", "text-sm"],
+        },
+        defaultVariants: {
+            size: "medium",
+        },
+    },
+});
 const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
-    "overflow-hidden",
+    "overflow-clip",
     "grid",
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
     // The min restriction of the middle column (--spacing-20) is
@@ -120,17 +138,22 @@ const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
     "grid-rows-1",
     cvaInputBase(),
     "focus-within:outline-native",
+    "text-neutral-900",
 ], {
     variants: {
         size: {
-            small: ["h-7"],
-            medium: ["h-8"],
-            large: ["h-10"],
+            small: cvaInputBaseSize({ size: "small" }),
+            medium: cvaInputBaseSize({ size: "medium" }),
+            large: cvaInputBaseSize({ size: "large" }),
         },
         disabled: {
             true: cvaInputBaseDisabled(),
             false: [""],
         },
+        readOnly: {
+            true: cvaInputBaseReadOnly(),
+            false: [""],
+        },
         invalid: {
             true: cvaInputBaseInvalid(),
             false: [""],
@@ -146,6 +169,11 @@ const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
             isWarning: true,
             className: ["border-danger-600"], // Ensures that 'invalid' takes precedence
         },
+        {
+            disabled: true,
+            readOnly: true,
+            className: "text-neutral-400",
+        },
     ],
     defaultVariants: {
         size: "medium",
@@ -172,42 +200,19 @@ const cvaInputItemPlacementManager = cssClassVarianceUtilities.cvaMerge([], {
     },
 });
 const cvaAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
-const cvaInputField = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-neutral-900",
-    "placeholder-neutral-400",
-    "text-sm",
-    "truncate",
-], {
+/**
+ * Text size and color is handled by cvaInput
+ */
+const cvaInputElement = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"], {
     variants: {
         size: {
-            small: ["py-0.5", "text-xs"],
+            small: ["py-0.5"],
             medium: ["py-1"],
             large: ["py-2"],
         },
-        disabled: {
-            true: ["text-neutral-400"],
-            false: [""],
-        },
-        readOnly: {
-            true: ["text-neutral-500"],
-            false: [""],
-        },
     },
-    compoundVariants: [
-        {
-            disabled: true,
-            readOnly: true,
-            className: "text-neutral-400",
-        },
-    ],
     defaultVariants: {
         size: "medium",
-        disabled: false,
-        readOnly: false,
     },
 });
 const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
@@ -371,7 +376,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
  */
 const InputLockReasonTooltip = ({ reasons, kind }) => {
     const [t] = useTranslation();
-    if (!reasons || reasons.length === 0) {
+    if (reasons === undefined || reasons.length === 0) {
         return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("field.notEditable.tooltip"), children: jsxRuntime.jsx(reactComponents.Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
     }
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsxRuntime.jsx("li", { children: reasons }) : reasons.map(reason => jsxRuntime.jsx("li", { children: reason }, reason)) }), placement: "top", children: jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) }));
@@ -429,7 +434,7 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, })
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
-const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }) => {
+const BaseInput = ({ className, isInvalid = false, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
@@ -463,19 +468,18 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     react.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxRuntime.jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
+            readOnly: renderAsReadonly,
             invalid: isInvalid,
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
-                    readOnly: renderAsReadonly,
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": required, className: cvaInputElement({
                     size: fieldSize,
-                    disabled: renderAsDisabled,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, required: required, style: {
                     paddingLeft: `calc(var(--before-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
                     paddingRight: `calc(var(--after-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
-                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
+                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
 
@@ -698,6 +702,103 @@ const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readO
  */
 const TextBaseInput = ({ ref, ...rest }) => jsxRuntime.jsx(BaseInput, { ref: ref, type: "text", ...rest });
 
+const cvaSelect = cssClassVarianceUtilities.cvaMerge([
+    "relative",
+    "flex",
+    "shadow-sm",
+    "rounded-lg",
+    "border-neutral-300",
+    "hover:border-neutral-400",
+    "hover:bg-neutral-50",
+    "bg-white",
+    "transition",
+    "text-sm",
+    "min-h-0",
+], {
+    variants: {
+        fieldSize: {
+            small: ["h-7", "text-xs"],
+            medium: ["h-8"],
+            large: ["h-10"],
+        },
+        invalid: {
+            true: "border border-red-600 text-red-600 hover:border-red-600",
+            false: "",
+        },
+        disabled: {
+            true: "!bg-neutral-100 hover:border-neutral-300",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        invalid: false,
+        disabled: false,
+    },
+});
+const cvaSelectControl = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        isDisabled: {
+            true: "!bg-neutral-100",
+            false: "",
+        },
+        prefix: {
+            true: ["ps-7"],
+            false: "",
+        },
+        invalid: {
+            true: "!border-0",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+        prefix: false,
+        invalid: false,
+    },
+});
+const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-neutral-400",
+    "hover:text-neutral-500",
+]);
+const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "absolute", "inset-y-0"], {
+    variants: {
+        kind: {
+            prefix: ["pl-3", "left-0"],
+            suffix: ["pr-3", "right-0"],
+        },
+    },
+});
+const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
+    "mr-2",
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "text-neutral-400",
+    "hover:text-neutral-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        menuIsOpen: {
+            true: "animate-fade-in-fast",
+            false: "animate-fade-out-fast",
+        },
+    },
+});
+const cvaSelectDynamicTagContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+    variants: {
+        visible: { true: "visible", false: "invisible" },
+    },
+});
+const cvaSelectCounter = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
+const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "grid", "gap-1"]);
+
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
  */
@@ -924,800 +1025,1438 @@ const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = fals
 Checkbox.displayName = "Checkbox";
 
 /**
- * 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 {ReactElement} Label component
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {ReactElement} SingleSelectMenuItem
  */
-const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
+            ? react.cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
 };
-
-const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
-const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "mb-1", "items-center"]);
-const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
-    variants: {
-        invalid: {
-            true: "text-danger-500",
-            false: "",
-        },
-        isWarning: {
-            true: "text-default-500  ",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            invalid: true,
-            isWarning: true,
-            className: "text-danger-500 ", // Ensures that 'invalid' takes precedence
-        },
-    ],
-});
-const cvaHelpAddon = cssClassVarianceUtilities.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 {ReactElement} FormGroup component
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {ReactElement} multi select menu item
  */
-const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
-    const [t] = useTranslation();
-    const validationStateIcon = react.useMemo(() => {
-        const color = isInvalid ? "danger" : isWarning ? "warning" : null;
-        return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
-    }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
+            ? react.cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, onClick: e => {
+                e.stopPropagation();
+            }, readOnly: false }), selected: selected }));
 };
 
 /**
- * The checkbox field component is used for entering boolean values.
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
  *
- * _**Do use**_ the CheckboxField for boolean input.
+ * @param {TagProps} props - The props for the tag component
+ * @returns {ReactElement} TagWithWidth component
  */
-const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
-    const htmlForId = id ? id : "checkboxField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
+const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
+    const ref = react.useRef(null);
+    react.useLayoutEffect(() => {
+        onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
+    }, [ref, onWidthKnown]);
+    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, icon: react.isValidElement(rest.icon) ? react.cloneElement(rest.icon, { size: "small" }) : rest.icon, children: children }));
 };
-CheckboxField.displayName = "CheckboxField";
 
 /**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
- * @param inputValue - value to check if it is a string
- * @returns {boolean} - true if value is a string
- */
-const isString = (inputValue) => {
-    return typeof inputValue === "string";
-};
-/**
- *
- * @param inputValue - value to check if it is a number
- * @returns {boolean} - true if value is a number
- */
-const isNumber = (inputValue) => {
-    return typeof inputValue === "number";
-};
-
-/**
- * Validates a url
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {ReactElement} TagsContainer
  */
-const validateColorCode = (colorCode, required) => {
-    if (!colorCode && !required) {
-        return undefined;
-    }
-    if (!colorCode && required) {
-        return "REQUIRED";
-    }
-    if (colorCode && isString(colorCode) && isValidHEXColor(colorCode)) {
-        return undefined;
-    }
-    return "INVALID_HEX_CODE";
+const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
+    const containerRef = react.useRef(null);
+    const [isReady, setIsReady] = react.useState(false);
+    const [counterWidth, setCounterWidth] = react.useState(0);
+    const [availableSpaceWidth, setAvailableSpaceWidth] = react.useState(0);
+    const [childrenWidths, setChildrenWidths] = react.useState([]);
+    const itemsCount = items.length;
+    const dimensions = reactComponents.useResize();
+    const { width: windowWidth } = reactComponents.useDebounce(dimensions, 100);
+    react.useEffect(() => {
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        setAvailableSpaceWidth(containerWidth);
+    }, [windowWidth]);
+    const onWidthKnownHandler = react.useCallback(({ width: reportedWidth }) => {
+        setChildrenWidths(prev => {
+            const next = [...prev, { width: reportedWidth + itemsGap }];
+            if (next.length === itemsCount) {
+                setIsReady(true);
+            }
+            return next;
+        });
+    }, [itemsCount, itemsGap]);
+    const renderedElements = react.useMemo(() => {
+        const requiredSpace = childrenWidths.reduce((previous, current) => {
+            return previous + current.width;
+        }, 0);
+        const availableSpace = availableSpaceWidth - counterWidth;
+        const { elements } = items
+            .concat({ text: "", onClick: () => null, disabled: false })
+            .reduce((acc, item, index) => {
+            const spaceNeeded = childrenWidths.slice(0, index + 1).reduce((previous, current) => {
+                return previous + current.width;
+            }, 0);
+            const isLast = index === items.length;
+            const counterRequired = requiredSpace > availableSpace && acc.counter !== 0;
+            if (isLast && counterRequired) {
+                return {
+                    ...acc,
+                    elements: [
+                        ...acc.elements,
+                        jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, icon: item.Icon, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
+                    ],
+                };
+            }
+            if (isLast) {
+                return acc;
+            }
+            const itemCanFit = spaceNeeded <= availableSpace;
+            if (itemCanFit) {
+                return {
+                    ...acc,
+                    elements: [
+                        ...acc.elements,
+                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
+                                e.stopPropagation();
+                                item.onClick();
+                            }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
+                    ],
+                };
+            }
+            return {
+                elements: acc.elements,
+                counter: item.text !== "" ? acc.counter + 1 : acc.counter,
+            };
+        }, { elements: [], counter: 0 });
+        return elements;
+    }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
+    return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
+            width: `${width}`,
+        }, children: [preFix, renderedElements, postFix] }));
 };
 
-const cvaInputColorField = cssClassVarianceUtilities.cvaMerge([
-    "ml-3",
-    "h-4",
-    "w-4",
-    "self-center",
-    "bg-inherit",
-    "disabled:opacity-50",
-    "disabled:pointer-events-none",
-    "rounded-[4px]",
-], {
-    variants: {
-        readOnly: {
-            true: "pointer-events-none",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            readOnly: true,
-        },
-    ],
-    defaultVariants: {
-        readOnly: false,
-    },
-});
-
 /**
- * Validates if the given value is a valid hex color.
+ * 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.
  *
- * @param value - The string value to be validated.
- * @returns {boolean} True if the value is a valid hex color, otherwise false.
+ * @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 {string} dataTestId a test id
+ * @param {number} maxSelectedDisplayCount a number of max display count
+ * @param {boolean} hasError decide to override hasError variant
+ * @param {ReactNode} prefix a prefix element
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const isValidHEXColor = (value) => {
-    const hexRegex = /^#([0-9A-F]{6})$/i;
-    return hexRegex.test(value);
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
+    const [t] = useTranslation();
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    const customComponents = react.useMemo(() => {
+        return {
+            ValueContainer: props => {
+                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
+                    const PLACEHOLDER_KEY = "placeholder";
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    const key = props && props.children && props.children[0] ? props.children[0]?.key : "";
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    const values = props && props.children ? props.children[0] : [];
+                    const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    const searchInput = props && props.children && props.children[1];
+                    const placeholderElement = Array.isArray(props.children)
+                        ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
+                        : null;
+                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
+                                ? tags.map(({ props: tagProps }) => {
+                                    const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
+                                    return {
+                                        text: tagProps.children,
+                                        onClick: disabled
+                                            ? undefined
+                                            : (e) => {
+                                                setMenuIsEnabled(false);
+                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
+                                            },
+                                        disabled: disabled,
+                                        Icon: optionPrefix,
+                                    };
+                                })
+                                : [], postFix: searchInput, preFix: placeholderElement ? jsxRuntime.jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
+                                    ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
+                                                e.stopPropagation();
+                                                setMenuIsEnabled(false);
+                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
+                                            }, children: tagProps.children }, tagProps.children?.toString()));
+                                    })
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
+                }
+                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
+            },
+            LoadingIndicator: () => {
+                return jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: "mr-2", size: "small" });
+            },
+            DropdownIndicator: props => {
+                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: icon }) }));
+            },
+            IndicatorSeparator: () => null,
+            ClearIndicator: props => {
+                if (disabled) {
+                    return null;
+                }
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, innerProps: {
+                        ...props.innerProps,
+                        onMouseDown: e => {
+                            e.preventDefault();
+                        },
+                    }, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
+            },
+            Control: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Control, { ...props, className: cvaSelectControl({
+                        isDisabled: props.isDisabled,
+                        prefix: prefix ? true : false,
+                        invalid: hasError,
+                    }) }));
+            },
+            SingleValue: props => {
+                const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-neutral-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
+            },
+            Menu: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
+            },
+            Placeholder: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-neutral-400", children: props.children }));
+            },
+            MenuList: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, innerProps: {
+                        ...props.innerProps,
+                        onScroll: e => {
+                            const listEl = e.currentTarget;
+                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight &&
+                                props.selectProps.onMenuScrollToBottom) {
+                                /Firefox/.test(navigator.userAgent)
+                                    ? props.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"))
+                                    : 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 (jsxRuntime.jsx(ReactSelect.components.Option, { ...props, innerProps: {
+                        ...props.innerProps,
+                        role: "option",
+                        onClick: () => { },
+                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
+            },
+            ...componentsProps,
+        };
+    }, [
+        componentsProps,
+        maxSelectedDisplayCount,
+        disabled,
+        setMenuIsEnabled,
+        readOnly,
+        dataTestId,
+        t,
+        prefix,
+        hasError,
+        getOptionLabelDescription,
+        fieldSize,
+        getOptionPrefix,
+    ]);
+    return customComponents;
 };
+
 /**
- * The ColorField component is used to enter color.
- * ColorField validates that user enters a valid color address.
- *
- */
-const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
-    const renderAsDisabled = Boolean(rest.disabled);
-    const renderAsReadonly = Boolean(rest.readOnly);
-    const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
-    const innerRef = react.useRef(null);
-    react.useImperativeHandle(ref, () => innerRef.current, []);
-    const [t] = useTranslation();
-    // Internal state for color value
-    const [innerValue, setInnerValue] = react.useState(propValue || defaultValue || "");
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
-    const errorType = react.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
-    const error = react.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
-    const handleInputChange = react.useCallback((event) => {
-        const newValue = event.target.value;
-        setInnerValue(newValue);
-        if (onChange) {
-            onChange(event);
-        }
-    }, [onChange]);
-    const handleBlur = react.useCallback(event => {
-        const newValue = event.target.value;
-        setInnerValue(newValue);
-        setRenderAsInvalid(!!errorType);
-        onBlur?.(event);
-    }, [errorType, onBlur]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
-                size: fieldSize,
-                disabled: renderAsDisabled,
-                invalid: renderAsInvalid,
-                className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
-                        readOnly: renderAsReadonly,
-                        disabled: renderAsDisabled,
-                        className: "px-1 focus-visible:outline-none",
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
-});
-ColorField.displayName = "ColorField";
-
-/**
- * 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.
+ * @template IsMulti
+ * @template Group
+ * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container 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 DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ref, ...rest }) => {
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlForId = id ? id : "dateField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
+const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
+    const customStyles = react.useMemo(() => {
+        return {
+            control: base => {
+                return {
+                    ...base,
+                    minHeight: fieldSize === "small" ? "28px" : fieldSize === "large" ? "40px" : "32px",
+                    borderRadius: "var(--border-radius-lg)",
+                    backgroundColor: "inherit",
+                };
+            },
+            singleValue: base => ({
+                ...base,
+            }),
+            multiValue: base => ({
+                ...base,
+            }),
+            multiValueLabel: base => ({
+                ...base,
+            }),
+            indicatorsContainer: base => ({
+                ...base,
+                ...(disabled && { display: "none" }),
+            }),
+            indicatorSeparator: () => ({
+                width: "0px",
+            }),
+            menu: base => {
+                return {
+                    ...base,
+                    width: "100%",
+                    marginTop: "4px",
+                    marginBottom: "18px",
+                    transition: "all 1s ease-in-out",
+                };
+            },
+            input: base => ({
+                ...base,
+                marginLeft: "0px",
+            }),
+            placeholder: base => ({
+                ...base,
+            }),
+            option: () => ({}),
+            menuPortal: base => ({
+                ...base,
+                width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width,
+                backgroundColor: "#ffffff",
+                borderRadius: "var(--border-radius-lg)",
+                zIndex: "var(--z-overlay)",
+                borderColor: "rgb(var(--color-neutral-300))",
+                boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+            }),
+            menuList: base => {
+                return {
+                    ...base,
+                    position: "relative",
+                    padding: "var(--spacing-1)",
+                    display: "grid",
+                    gap: "var(--spacing-1)",
+                    width: "100%",
+                    borderRadius: "0px",
+                    boxShadow: "none",
+                    paddingTop: "0px",
+                };
+            },
+            valueContainer: base => {
+                return {
+                    ...base,
+                    paddingBlock: 0,
+                    flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
+                    gap: "0.25rem",
+                };
+            },
+            container: base => ({
+                ...base,
+                width: "100%",
+            }),
+            dropdownIndicator: base => ({
+                ...base,
+                padding: "0px",
+            }),
+            clearIndicator: base => {
+                return {
+                    ...base,
+                    padding: "0px",
+                };
+            },
+            ...styles,
+        };
+    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
+    return { customStyles };
 };
-DateField.displayName = "DateField";
-
-const cvaDropZone = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "component-baseInput-background",
-    "justify-center",
-    "text-neutral-500",
-    "rounded-lg",
-    "border-2",
-    "border-neutral-200",
-    "border-dashed",
-    "hover:bg-neutral-100",
-    "hover:border-solid",
-    "hover:border-primary-500",
-], {
-    variants: {
-        size: {
-            small: ["p-2"],
-            medium: ["p-4"],
-            large: ["p-8"],
-        },
-        disabled: { true: ["bg-neutral-100", "hover:bg-neutral-100"], false: "" },
-        dragActive: { true: ["border-neutral-200", "bg-neutral-100"], false: "" },
-        dropComplete: {
-            true: [
-                "border-solid",
-                "border-primary-500",
-                "bg-neutral-100",
-                "hover:border-solid",
-                "hover:border-neutral-200",
-            ],
-            false: "",
-        },
-        invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
-    },
-});
-const cvaDropZoneLabel = cssClassVarianceUtilities.cvaMerge([
-    "h-full",
-    "pt-1",
-    "pb-1",
-    "gap-2",
-    "items-center",
-    "flex-col",
-    "flex",
-    "justify-center",
-]);
-const cvaDropZoneIconBackground = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
-    variants: {
-        invalid: { true: ["bg-red-100"], false: ["bg-neutral-200"] },
-    },
-});
 
 /**
+ * A hook used by selects to share the common code
  *
- * Default UX-intuitive label for the DropZone - can be overwritten by the label prop
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {UseSelectProps} Select component
  */
-const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
-        clickable: jsxRuntime.jsx("span", { className: "text-primary-600 hover:text-primary-700 cursor-pointer underline" }),
-    }, i18nKey: "dropzone.label.default", values: {} }));
+const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize = "medium", ...props }) => {
+    const refContainer = react.useRef(document.createElement("div"));
+    const { customStyles } = useCustomStyles({
+        refContainer,
+        maxSelectedDisplayCount,
+        styles,
+        disabled: Boolean(disabled),
+        fieldSize,
+    });
+    const [menuIsOpen, setMenuIsOpen] = react.useState(props.menuIsOpen ?? false);
+    const [menuIsEnabled, setMenuIsEnabled] = react.useState(true);
+    const customComponents = useCustomComponents({
+        componentsProps: components,
+        disabled: Boolean(disabled),
+        readOnly: Boolean(props.readOnly),
+        setMenuIsEnabled,
+        dataTestId,
+        maxSelectedDisplayCount,
+        prefix,
+        hasError,
+        fieldSize,
+        getOptionLabelDescription,
+        getOptionPrefix,
+    });
+    const menuPlacement = "auto";
+    const openMenuHandler = async () => {
+        onMenuOpen?.();
+        if (menuIsEnabled) {
+            setMenuIsOpen(true);
+        }
+        else {
+            setMenuIsEnabled(true);
+        }
+    };
+    const closeMenuHandler = () => {
+        setMenuIsOpen(false);
+        onMenuClose && onMenuClose();
+    };
+    return {
+        refContainer,
+        customStyles,
+        menuIsOpen,
+        customComponents,
+        menuPlacement,
+        openMenuHandler,
+        closeMenuHandler,
+    };
+};
 
+// This is here to ensure the bundled react-components can expose the react-select for jest in external iris apps.
+const ReactSyncSelect = ReactSelect.default || ReactSelect;
 /**
- * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
+ * Selects are input components used to choose a value from a set.
  *
- * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {ReactElement} DropZone component
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {ReactElement} Select component
  */
-const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
-    const [dragActive, setDragActive] = react.useState(false);
-    const [fileDropped, setFileDropped] = react.useState(false);
-    const [t] = useTranslation();
-    const inputLabelRef = react.useRef(null);
-    // 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);
-        }
-    };
-    //function to handle drop
-    const handleDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragActive(false);
-        if (e.dataTransfer.files[0] && !disabled) {
-            filesSelected(e.dataTransfer.files);
-            setFileDropped(true);
-        }
-    };
-    //function to handle focusable button click (for accessibility)
-    const handleButtonClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled) {
-            return;
-        }
-        inputLabelRef.current?.click();
-    };
-    return (jsxRuntime.jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
-            if (disabled) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
+const BaseSelect = (props) => {
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
+    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
+    const reactSelectProps = react.useMemo(() => ({
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: false,
+        // This configuration allows for more flexible positioning control of the dropdown.
+        // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
+        // the parent element instead of 'document.body'.
+        menuPortalTarget: props.menuPortalTarget !== undefined ? props.menuPortalTarget : document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick,
+        closeMenuOnSelect: !isMulti,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+        hideSelectedOptions,
+        isDisabled: Boolean(disabled),
+    }), [
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        hideSelectedOptions,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
+        readOnly,
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({
+            invalid: hasError,
+            fieldSize: fieldSize,
+            disabled: renderAsDisabled,
+            className: props.className,
+        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSyncSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
+BaseSelect.displayName = "BaseSelect";
 
-// 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
+ * CreatableSelects are input components used to choose a value from a set.
+ *
+ * @param {CreatableSelectProps} props - The props for the CreatableSelect component
+ * @returns {ReactElement} CreatableSelect component
  */
-const validateEmailAddress = (email) => {
-    if (!email) {
-        return false;
-    }
-    return EMAIL_REGEX.test(email);
+const CreatableSelect = (props) => {
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
+    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
+    const reactCreatableSelectProps = react.useMemo(() => ({
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+        allowCreateWhileLoading,
+        onCreateOption,
+        isDisabled: Boolean(disabled),
+    }), [
+        allowCreateWhileLoading,
+        classNamePrefix,
+        customComponents,
+        customStyles,
+        dataTestId,
+        disabled,
+        id,
+        isClearable,
+        isLoading,
+        isMulti,
+        isSearchable,
+        label,
+        maxMenuHeight,
+        menuIsOpen,
+        menuPlacement,
+        onChange,
+        onCreateOption,
+        onInputChange,
+        onMenuScrollToBottom,
+        openMenuOnClick,
+        openMenuOnFocus,
+        props.menuPortalTarget,
+        readOnly,
+        value,
+    ]);
+    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
 };
+CreatableSelect.displayName = "CreatableSelect";
 
 /**
- * Validates a email id
+ * 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 {ReactElement} Label component
  */
-const validateEmailId = (emailId, required) => {
-    if (!emailId && !required) {
-        return undefined;
-    }
-    if (!emailId && required) {
-        return "REQUIRED";
-    }
-    if (emailId && isString(emailId) && validateEmailAddress(emailId)) {
-        return undefined;
-    }
-    return "INVALID_EMAIL";
+const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
+const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
+const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "mb-1", "items-center"]);
+const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
+    variants: {
+        invalid: {
+            true: "text-danger-500",
+            false: "",
+        },
+        isWarning: {
+            true: "text-default-500  ",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            invalid: true,
+            isWarning: true,
+            className: "text-danger-500 ", // Ensures that 'invalid' takes precedence
+        },
+    ],
+});
+const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
+
 /**
- * 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.
+ * 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.
  *
- * Extends props of BaseInput.
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {ReactElement} FormGroup component
+ */
+const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
+    const [t] = useTranslation();
+    const validationStateIcon = react.useMemo(() => {
+        const color = isInvalid ? "danger" : isWarning ? "warning" : null;
+        return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
+    }, [isInvalid, isWarning]);
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+};
+
+/**
+ * The checkbox field component is used for entering boolean values.
  *
- * A reference to the input element is provided as the `ref` prop.
- * For specific input types make sure to use the corresponding input component.
+ * _**Do use**_ the CheckboxField for boolean input.
  */
-const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
-    const [email, setEmail] = react.useState(rest.value?.toString() || rest.defaultValue?.toString());
-    const sendEmail = () => {
-        return window.open(`mailto:${email}`);
-    };
-    const handleChange = react.useCallback(event => {
-        const newValue = event.target.value;
-        onChange?.(event);
-        setEmail(newValue);
-    }, [onChange]);
-    const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
+    const htmlForId = id ? id : "checkboxField-" + sharedUtils.uuidv4();
+    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
 };
+CheckboxField.displayName = "CheckboxField";
 
 /**
- * The EmailField component is used to enter email.
- * EmailField validates that user enters a valid email address.
  *
+ * @param inputValue - value to check if it is a string
+ * @returns {boolean} - true if value is a string
  */
-const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
-    const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
-    const [t] = useTranslation();
-    const [innerValue, setInnerValue] = react.useState(() => {
-        return (value?.toString() || defaultValue?.toString()) ?? "";
-    });
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
-    const errorType = react.useMemo(() => validateEmailId(innerValue ?? "", rest.required), [rest.required, innerValue]);
-    const error = react.useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
-    const handleBlur = react.useCallback(event => {
-        const newValue = event.target.value;
-        setInnerValue(newValue);
-        setRenderAsInvalid(!!errorType);
-        onBlur?.(event);
-    }, [errorType, onBlur]);
-    const handleChange = react.useCallback((event) => {
-        setInnerValue(event.target.value);
-        if (onChange) {
-            onChange(event);
-        }
-    }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+const isString = (inputValue) => {
+    return typeof inputValue === "string";
 };
-EmailField.displayName = "EmailField";
-
-const isNumberValid = (number) => {
-    if (!isNaN(+number) === false) {
-        return false;
-    }
-    if (typeof number === "number") {
-        return true;
-    }
-    return /^(?=.)([+-]?([0-9]*)(\.([0-9]+))?)$/.test(number);
+/**
+ *
+ * @param inputValue - value to check if it is a number
+ * @returns {boolean} - true if value is a number
+ */
+const isNumber = (inputValue) => {
+    return typeof inputValue === "number";
 };
+
 /**
- * Validates a number
+ * Validates a url
  */
-const validateNumber = (number, required = false, min, max) => {
-    const parsedNumber = Number(number);
-    const minValue = typeof min === "string" ? parseFloat(min) : min;
-    const maxValue = typeof max === "string" ? parseFloat(max) : max;
-    if (number === undefined) {
-        return undefined;
-    }
-    // if the value is a string eg:'test'
-    if (number && !isNaN(+number) === false) {
-        return "INVALID_NUMBER";
-    }
-    // if the value is empty and not required
-    if (!parsedNumber && !required && !min && !max && !!number) {
+const validateColorCode = (colorCode, required) => {
+    if (!colorCode && !required) {
         return undefined;
     }
-    // if the value is empty and required
-    if (required && !!number === false) {
+    if (!colorCode && required) {
         return "REQUIRED";
     }
-    // if the value is not in between min and max
-    if (minValue && maxValue && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
-        return "NOT_IN_BETWEEN";
-    }
-    // if the value is less than min
-    if (isNumberValid(parsedNumber) && minValue !== undefined && parsedNumber < minValue) {
-        return "GREATER_THAN";
-    }
-    // if the value is greater than max
-    if (isNumberValid(parsedNumber) && maxValue !== undefined && parsedNumber > maxValue) {
-        return "LESS_THAN";
-    }
-    // if the value is a number and is valid
-    if (isNumber(parsedNumber) && isNumberValid(parsedNumber)) {
+    if (colorCode && isString(colorCode) && isValidHEXColor(colorCode)) {
         return undefined;
     }
-    return "INVALID_NUMBER";
+    return "INVALID_HEX_CODE";
 };
 
+const cvaInputColorField = cssClassVarianceUtilities.cvaMerge([
+    "ml-3",
+    "h-4",
+    "w-4",
+    "self-center",
+    "bg-inherit",
+    "disabled:opacity-50",
+    "disabled:pointer-events-none",
+    "rounded-[4px]",
+], {
+    variants: {
+        readOnly: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            readOnly: true,
+        },
+    ],
+    defaultVariants: {
+        readOnly: false,
+    },
+});
+
 /**
- * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ * Validates if the given value is a valid hex color.
  *
- * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ * @param value - The string value to be validated.
+ * @returns {boolean} True if the value is a valid hex color, otherwise false.
+ */
+const isValidHEXColor = (value) => {
+    const hexRegex = /^#([0-9A-F]{6})$/i;
+    return hexRegex.test(value);
+};
+/**
+ * The ColorField component is used to enter color.
+ * ColorField validates that user enters a valid color address.
  *
- * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
-    const htmlForId = id ? id : "numberField-" + sharedUtils.uuidv4();
+const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
+    const renderAsDisabled = Boolean(rest.disabled);
+    const renderAsReadonly = Boolean(rest.readOnly);
+    const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
+    const innerRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
-    const [innerValue, setInnerValue] = react.useState(() => {
-        return Number(value?.toString()) || Number(defaultValue?.toString());
-    });
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
-    const errorType = react.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
-    const error = react.useMemo(() => {
-        // for the case when a custom error message is provided
-        if (errorMessage) {
-            return errorMessage;
-        }
-        else if (errorType) {
-            return t(`numberField.error.${errorType}`, { min: rest.min, max: rest.max });
-        }
-        return errorMessage;
-    }, [errorMessage, errorType, rest.max, rest.min, t]);
-    react.useEffect(() => {
-        if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
-        }
-    }, [errorMessage]);
-    const handleBlur = react.useCallback(event => {
+    // Internal state for color value
+    const [innerValue, setInnerValue] = react.useState(propValue || defaultValue || "");
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
+    const errorType = react.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
+    const error = react.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleInputChange = react.useCallback((event) => {
         const newValue = event.target.value;
-        setInnerValue(newValue.toString());
-        // for the case when a custom error message is provided
-        if (errorMessage && !validateNumber(newValue, rest.required, rest.min, rest.max)) {
-            setRenderAsInvalid(Boolean(errorMessage));
-        }
-        else {
-            setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
-        }
-        onBlur?.(event);
-    }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
-    const handleChange = react.useCallback((event) => {
-        setInnerValue(event.target.value);
+        setInnerValue(newValue);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    const handleBlur = react.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        setRenderAsInvalid(!!errorType);
+        onBlur?.(event);
+    }, [errorType, onBlur]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
+                size: fieldSize,
+                disabled: renderAsDisabled,
+                invalid: renderAsInvalid,
+                readOnly: renderAsReadonly,
+                className,
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
+                        className: "px-1 focus-visible:outline-none",
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+});
+ColorField.displayName = "ColorField";
+
+/**
+ * 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 = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ref, ...rest }) => {
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlForId = id ? id : "dateField-" + sharedUtils.uuidv4();
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 };
-NumberField.displayName = "NumberField";
+DateField.displayName = "DateField";
 
-const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
-    "group",
-    "transition",
-    "bg-white",
-    "outline",
-    "outline-1",
-    "outline-neutral-300",
-    "hover:bg-neutral-100",
-    "focus:bg-neutral-200",
-    "active:bg-neutral-200",
-    "peer-checked:bg-primary-50",
-    "peer-checked:outline-primary-600",
-    "peer-checked:outline-2",
+const cvaDropZone = cssClassVarianceUtilities.cvaMerge([
     "flex",
-    "gap-2",
+    "component-baseInput-background",
     "justify-center",
-    "items-center",
-    "text-center",
-    "rounded-md",
-    "relative",
+    "text-neutral-500",
+    "rounded-lg",
+    "border-2",
+    "border-neutral-200",
+    "border-dashed",
+    "hover:bg-neutral-100",
+    "hover:border-solid",
+    "hover:border-primary-500",
 ], {
     variants: {
-        disabled: {
-            true: ["cursor-not-allowed", "bg-neutral-100"],
-            false: ["cursor-pointer"],
-        },
-        layout: {
-            default: ["flex-col", "p-responsive-space", "w-full", "aspect-square"],
-            compact: ["px-3", "py-1.5", "h-8", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]", "flex-row", "w-fit"],
+        size: {
+            small: ["p-2"],
+            medium: ["p-4"],
+            large: ["p-8"],
         },
-    },
-});
-const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
-const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"], {
-    variants: {
-        layout: {
-            default: ["text-lg", "line-clamp-2"],
-            compact: ["text-sm", "line-clamp-1"],
-        },
-        disabled: {
-            true: ["text-neutral-400"],
-            false: ["focus:text-neutral-800", "active:text-neutral-800"],
-        },
-    },
-});
-const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge(["text-neutral-600", "text-sm"], {
-    variants: {
-        type: {
-            subheading: ["font-medium"],
-            description: ["font-normal"],
-        },
-        disabled: {
-            true: ["text-neutral-400"],
-            false: ["focus:text-neutral-800", "active:text-neutral-800"],
-        },
-    },
-});
-const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
-const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"], {
-    variants: {
-        disabled: {
-            true: ["!text-neutral-400"],
-            false: [""],
+        disabled: { true: ["bg-neutral-100", "hover:bg-neutral-100"], false: "" },
+        dragActive: { true: ["border-neutral-200", "bg-neutral-100"], false: "" },
+        dropComplete: {
+            true: [
+                "border-solid",
+                "border-primary-500",
+                "bg-neutral-100",
+                "hover:border-solid",
+                "hover:border-neutral-200",
+            ],
+            false: "",
         },
+        invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
     },
 });
-const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
+const cvaDropZoneLabel = cssClassVarianceUtilities.cvaMerge([
+    "h-full",
+    "pt-1",
+    "pb-1",
+    "gap-2",
+    "items-center",
+    "flex-col",
+    "flex",
+    "justify-center",
+]);
+const cvaDropZoneIconBackground = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
     variants: {
-        layout: {
-            default: ["absolute", "top-2", "right-2"],
-            compact: [],
-        },
+        invalid: { true: ["bg-red-100"], false: ["bg-neutral-200"] },
     },
 });
 
 /**
- * A card version of a radio button that includes an icon, headings and a description.
+ *
+ * Default UX-intuitive label for the DropZone - can be overwritten by the label prop
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
-    const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
-    const subContent = react.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-fit", disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: cvaInput(), "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
-                            ? react.cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
-                            : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsxRuntime.jsx(reactComponents.Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
-};
-OptionCard.displayName = "OptionCard";
+const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
+        clickable: jsxRuntime.jsx("span", { className: "text-primary-600 hover:text-primary-700 cursor-pointer underline" }),
+    }, i18nKey: "dropzone.label.default", values: {} }));
 
 /**
- * A thin wrapper around the `BaseInput` component for password input fields.
+ * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
- * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {ReactElement} DropZone component
  */
-const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
-    const [showPassword, setShowPassword] = react.useState(false);
-    return (jsxRuntime.jsx(BaseInput, { ref: ref, ...rest, actions: jsxRuntime.jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
+    const [dragActive, setDragActive] = react.useState(false);
+    const [fileDropped, setFileDropped] = react.useState(false);
+    const [t] = useTranslation();
+    const inputLabelRef = react.useRef(null);
+    // 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);
+        }
+    };
+    //function to handle drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files[0] && !disabled) {
+            filesSelected(e.dataTransfer.files);
+            setFileDropped(true);
+        }
+    };
+    //function to handle focusable button click (for accessibility)
+    const handleButtonClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        inputLabelRef.current?.click();
+    };
+    return (jsxRuntime.jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", multiple: multiple, onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-neutral-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
 };
 
+// Doing the same check as we do on the backend
+// 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}$/;
 /**
- * Password fields enter a password or other confidential information. Characters are masked as they are typed.
- *
- * _**Do use** when the user has to input a password or something that needs to be obfuscated_
- *
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ * @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 PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
-    const handleChange = react.useCallback((event) => {
-        onChange?.(event);
-    }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
+const validateEmailAddress = (email) => {
+    if (!email) {
+        return false;
+    }
+    return EMAIL_REGEX.test(email);
 };
-PasswordField.displayName = "PasswordField";
 
 /**
- * Validates a phone number
+ * Validates a email id
  */
-const validatePhoneNumber = (phoneNumber) => {
-    if (!phoneNumber) {
-        return "REQUIRED";
-    }
-    const asYouType = new parsePhoneNumberFromString.AsYouType();
-    asYouType.input(phoneNumber);
-    const countryCode = asYouType.getCallingCode();
-    const national = asYouType.getNationalNumber();
-    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber.trim());
-    const number = parsePhoneNumberFromString(safePhoneNumber);
-    if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
+const validateEmailId = (emailId, required) => {
+    if (!emailId && !required) {
         return undefined;
     }
-    if (!countryCode && national) {
-        return "REQUIRED_COUNTRY";
-    }
-    if (phoneNumber &&
-        (checkIfPhoneNumberHasPlus(phoneNumber)
-            ? isNaN(+phoneNumber.slice(1, phoneNumber.length))
-            : isNaN(+phoneNumber) || !number)) {
-        return "NOT_A_NUMBER";
+    if (!emailId && required) {
+        return "REQUIRED";
     }
-    if (safePhoneNumber.length <= 5) {
-        //needs to be handled manually, parsePhoneNumberFromString can't parse it
-        return "TOO_SHORT";
+    if (emailId && isString(emailId) && validateEmailAddress(emailId)) {
+        return undefined;
     }
-    return "INVALID_NUMBER";
+    return "INVALID_EMAIL";
 };
+
 /**
- * Checks if the country code is valid and required
- */
-const isInvalidCountryCode = (error, required) => (!!required && error === "REQUIRED") || error === "REQUIRED_COUNTRY";
-/**
- * Checks if the phone number is valid and required
- */
-const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
-/**
- * Checks if the phone number is valid and returns corresponding error message
+ * 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.
  */
-const phoneErrorMessage = (phoneNumber, required) => {
-    if ((validatePhoneNumber(phoneNumber) === "REQUIRED" && !required) ||
-        (validatePhoneNumber(phoneNumber) === "REQUIRED" && required && phoneNumber === undefined)) {
-        return undefined;
-    }
-    return validatePhoneNumber(phoneNumber);
+const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
+    const [email, setEmail] = react.useState(rest.value?.toString() || rest.defaultValue?.toString());
+    const sendEmail = () => {
+        return window.open(`mailto:${email}`);
+    };
+    const handleChange = react.useCallback(event => {
+        const newValue = event.target.value;
+        onChange?.(event);
+        setEmail(newValue);
+    }, [onChange]);
+    const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
+    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 };
 
 /**
- * The PhoneField component is used to enter phone number.
- * It is a wrapper around the PhoneInput component and the FormGroup component.
- * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
  *
- * @param {string} [label] - The label for the component.
- * @param {string} [tip] - The tip for the component.
- * @param {string} [helpText] - The help text for the component.
- * @param {string} [helpAddon] - The help addon for the component.
- * @param {string} [errorMessage] - The error message for the component.
- * @param {string} [defaultValue] - The default value for the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
-const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
-    const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
+const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
+    const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
-        return (value?.toString() || defaultValue?.toString()) ?? undefined;
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!phoneErrorMessage(value?.toString(), rest.required));
-    const errorType = react.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
-    const error = react.useMemo(() => {
-        // for the case when a custom error message is provided
-        if (errorMessage) {
-            return errorMessage;
-        }
-        else if (errorType) {
-            return t(`phoneField.error.${errorType}`);
-        }
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
+    const errorType = react.useMemo(() => validateEmailId(innerValue ?? "", rest.required), [rest.required, innerValue]);
+    const error = react.useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleBlur = react.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        setRenderAsInvalid(!!errorType);
+        onBlur?.(event);
+    }, [errorType, onBlur]);
+    const handleChange = react.useCallback((event) => {
+        setInnerValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+};
+EmailField.displayName = "EmailField";
+
+/** Type guard for function refs vs. object refs without deprecated types or assertions */
+function isWritableRef(r) {
+    return typeof r === "object" && r !== null && "current" in r;
+}
+/**
+ * Multi adapter:
+ * - keeps Option[] semantics (via `MultiValue<Option>`)
+ * - renders FormGroup chrome (label, help, error)
+ * - exposes a hidden <select> for a stable ref target
+ * - optionally renders one hidden <input> per selected option IF `getOptionValue` is provided
+ * - passes through all remaining BaseSelect props with isMulti=true
+ */
+const FormFieldSelectAdapterMulti = (props) => {
+    const { className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...selectProps } = props;
+    // Hidden select for a stable DOM ref target (API parity with single adapter)
+    const innerRef = react.useRef(null);
+    // Bridge external ref (supports both callback and object refs)
+    react.useEffect(() => {
+        if (typeof ref === "function") {
+            ref(innerRef.current);
+        }
+        else if (isWritableRef(ref)) {
+            ref.current = innerRef.current;
+        }
+    }, [ref]);
+    // Determine invalid state
+    const renderAsInvalid = react.useMemo(() => (isInvalid === undefined ? Boolean(errorMessage) : isInvalid), [errorMessage, isInvalid]);
+    // id to connect label and control
+    const controlId = react.useMemo(() => (id ? id : "multiSelectField-" + sharedUtils.uuidv4()), [id]);
+    // If consumers provided getOptionValue (from BaseSelect props),
+    // we can render hidden inputs for native form submit / RHF.
+    const selectPropsWithAccessors = selectProps;
+    const getOptionValue = typeof selectPropsWithAccessors.getOptionValue === "function" ? selectPropsWithAccessors.getOptionValue : undefined;
+    // Compute selected options snapshot for hidden inputs (prefer controlled `value`)
+    const selectedOptions = react.useMemo(() => value ?? defaultValue ?? [], [value, defaultValue]);
+    // Build the exact prop bag for BaseSelect (multi=true).
+    const childProps = {
+        ...selectProps,
+        id: controlId,
+        onBlur,
+        options,
+        isMulti: true,
+        value: value ?? null,
+        defaultValue,
+        onChange: next => onChange?.(next),
+    };
+    return (jsxRuntime.jsxs(FormGroup, { className: className, dataTestId: dataTestId, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
+            ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
+                ("readOnly" in selectProps && Boolean(selectProps.readOnly)))
+            : false, tip: tip, children: [jsxRuntime.jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
+                selectedOptions.map((opt, idx) => {
+                    const primitiveValue = getOptionValue(opt);
+                    return typeof primitiveValue === "string" ? (jsxRuntime.jsx("input", { name: name, type: "hidden", value: primitiveValue }, `${primitiveValue}-${idx}`)) : null;
+                }), children(childProps)] }));
+};
+FormFieldSelectAdapterMulti.displayName = "FormFieldSelectAdapterMulti";
+
+/**
+ * MultiSelectField — validated multi-select field.
+ * Types mirror BaseSelect: options: Option[], value/defaultValue: Option[], onChange: (Option[] | null) => void
+ * Implemented as a generic const component (no forwardRef, no assertions).
+ */
+const MultiSelectField = ({ ref, ...props }) => {
+    return (jsxRuntime.jsx(FormFieldSelectAdapterMulti, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(BaseSelect, { ...convertedProps }) }));
+};
+MultiSelectField.displayName = "MultiSelectField";
+
+const isNumberValid = (number) => {
+    if (!isNaN(+number) === false) {
+        return false;
+    }
+    if (typeof number === "number") {
+        return true;
+    }
+    return /^(?=.)([+-]?([0-9]*)(\.([0-9]+))?)$/.test(number);
+};
+/**
+ * Validates a number
+ */
+const validateNumber = (number, required = false, min, max) => {
+    const parsedNumber = Number(number);
+    const minValue = typeof min === "string" ? parseFloat(min) : min;
+    const maxValue = typeof max === "string" ? parseFloat(max) : max;
+    if (number === undefined) {
+        return undefined;
+    }
+    // if the value is a string eg:'test'
+    if (number && !isNaN(+number) === false) {
+        return "INVALID_NUMBER";
+    }
+    // if the value is empty and not required
+    if (!parsedNumber && !required && !min && !max && !!number) {
+        return undefined;
+    }
+    // if the value is empty and required
+    if (required && !!number === false) {
+        return "REQUIRED";
+    }
+    // if the value is not in between min and max
+    if (minValue && maxValue && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
+        return "NOT_IN_BETWEEN";
+    }
+    // if the value is less than min
+    if (isNumberValid(parsedNumber) && minValue !== undefined && parsedNumber < minValue) {
+        return "GREATER_THAN";
+    }
+    // if the value is greater than max
+    if (isNumberValid(parsedNumber) && maxValue !== undefined && parsedNumber > maxValue) {
+        return "LESS_THAN";
+    }
+    // if the value is a number and is valid
+    if (isNumber(parsedNumber) && isNumberValid(parsedNumber)) {
+        return undefined;
+    }
+    return "INVALID_NUMBER";
+};
+
+/**
+ * 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.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
+    const htmlForId = id ? id : "numberField-" + sharedUtils.uuidv4();
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = react.useState(() => {
+        return Number(value?.toString()) || Number(defaultValue?.toString());
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
+    const errorType = react.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
+    const error = react.useMemo(() => {
+        // for the case when a custom error message is provided
+        if (errorMessage) {
+            return errorMessage;
+        }
+        else if (errorType) {
+            return t(`numberField.error.${errorType}`, { min: rest.min, max: rest.max });
+        }
         return errorMessage;
-    }, [errorMessage, errorType, t]);
+    }, [errorMessage, errorType, rest.max, rest.min, t]);
     react.useEffect(() => {
-        setRenderAsInvalid(Boolean(errorMessage));
+        if (errorMessage) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
     }, [errorMessage]);
     const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
-        setInnerValue(newValue);
+        setInnerValue(newValue.toString());
         // for the case when a custom error message is provided
-        if (errorMessage && !phoneErrorMessage(newValue.toString(), rest.required)) {
+        if (errorMessage && !validateNumber(newValue, rest.required, rest.min, rest.max)) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
         else {
-            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
+            setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
         }
         onBlur?.(event);
-    }, [errorMessage, onBlur, rest.required]);
-    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
-};
-PhoneField.displayName = "PhoneField";
-
-/**
- * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
- *
- */
-const PhoneFieldWithController = ({ control, controllerProps, name, value, ref, ...rest }) => {
-    return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsxRuntime.jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
+    }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
+    const handleChange = react.useCallback((event) => {
+        setInnerValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 };
-PhoneFieldWithController.displayName = "PhoneFieldWithController";
+NumberField.displayName = "NumberField";
 
-const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
+    "group",
+    "transition",
+    "bg-white",
+    "outline",
+    "outline-1",
+    "outline-neutral-300",
+    "hover:bg-neutral-100",
+    "focus:bg-neutral-200",
+    "active:bg-neutral-200",
+    "peer-checked:bg-primary-50",
+    "peer-checked:outline-primary-600",
+    "peer-checked:outline-2",
+    "flex",
+    "gap-2",
+    "justify-center",
+    "items-center",
+    "text-center",
+    "rounded-md",
+    "relative",
+], {
     variants: {
+        disabled: {
+            true: ["cursor-not-allowed", "bg-neutral-100"],
+            false: ["cursor-pointer"],
+        },
         layout: {
-            inline: ["flex", "gap-3", "flex-row", "items-center"],
+            default: ["flex-col", "p-responsive-space", "w-full", "aspect-square"],
+            compact: ["px-3", "py-1.5", "h-8", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]", "flex-row", "w-fit"],
         },
     },
 });
-const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
-    "self-center",
-    "w-4",
-    "h-4",
-    "appearance-none",
-    "rounded-3xl",
-    "bg-white",
-    "border-solid",
-    "border",
-    "border-neutral-300",
-    "shadow-sm",
-    "shrink-0",
-    "transition",
-    "box-border",
-    "hover:cursor-pointer",
-    "hover:bg-neutral-100",
-    "focus-visible:outline-primary-700",
-], {
+const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
+const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
+const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"], {
     variants: {
-        checked: {
-            true: [
-                "border-solid",
-                "border-4",
-                "border-primary-600",
-                "bg-white",
-                "hover:bg-neutral-100",
-                "hover:cursor-pointer",
-                "outline-0",
-                "active:bg-neutral-200",
-                "active:ring-2",
-                "active:ring-inset",
-                "active:ring-primary-700",
-                "group-active:ring-2",
-                "group-active:ring-inset",
-                "group-active:ring-primary-700",
-            ],
-            false: "",
+        layout: {
+            default: ["text-lg", "line-clamp-2"],
+            compact: ["text-sm", "line-clamp-1"],
         },
-        invalid: {
-            true: ["border-red-600", "active:ring-red-700"],
-            false: "",
+        disabled: {
+            true: ["text-neutral-400"],
+            false: ["focus:text-neutral-800", "active:text-neutral-800"],
+        },
+    },
+});
+const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge(["text-neutral-600", "text-sm"], {
+    variants: {
+        type: {
+            subheading: ["font-medium"],
+            description: ["font-normal"],
         },
         disabled: {
-            true: [
-                "bg-neutral-400",
-                "border-neutral-300",
-                "cursor-not-allowed",
-                "hover:bg-neutral-400",
-                "active:bg-neutral-400",
-                "group-active:ring-0",
-                "group-active:ring-inset",
-            ],
-            false: "",
+            true: ["text-neutral-400"],
+            false: ["focus:text-neutral-800", "active:text-neutral-800"],
         },
     },
-    compoundVariants: [
-        {
-            checked: true,
-            disabled: true,
-            className: ["bg-white"],
+});
+const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
+const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"], {
+    variants: {
+        disabled: {
+            true: ["!text-neutral-400"],
+            false: [""],
         },
-    ],
+    },
 });
-
-const RadioGroupContext = react.createContext(null);
-
-/**
- * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
- *
- * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        layout: {
+            default: ["absolute", "top-2", "right-2"],
+            compact: [],
+        },
+    },
+});
+
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
+    const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
+    const subContent = react.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-fit", disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: cvaInput(), "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
+                            ? react.cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
+                            : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsxRuntime.jsx(reactComponents.Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
+};
+OptionCard.displayName = "OptionCard";
+
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
+    const [showPassword, setShowPassword] = react.useState(false);
+    return (jsxRuntime.jsx(BaseInput, { ref: ref, ...rest, actions: jsxRuntime.jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+};
+
+/**
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ *
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
+    const handleChange = react.useCallback((event) => {
+        onChange?.(event);
+    }, [onChange]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
+};
+PasswordField.displayName = "PasswordField";
+
+/**
+ * Validates a phone number
+ */
+const validatePhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) {
+        return "REQUIRED";
+    }
+    const asYouType = new parsePhoneNumberFromString.AsYouType();
+    asYouType.input(phoneNumber);
+    const countryCode = asYouType.getCallingCode();
+    const national = asYouType.getNationalNumber();
+    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber.trim());
+    const number = parsePhoneNumberFromString(safePhoneNumber);
+    if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
+        return undefined;
+    }
+    if (!countryCode && national) {
+        return "REQUIRED_COUNTRY";
+    }
+    if (phoneNumber &&
+        (checkIfPhoneNumberHasPlus(phoneNumber)
+            ? isNaN(+phoneNumber.slice(1, phoneNumber.length))
+            : isNaN(+phoneNumber) || !number)) {
+        return "NOT_A_NUMBER";
+    }
+    if (safePhoneNumber.length <= 5) {
+        //needs to be handled manually, parsePhoneNumberFromString can't parse it
+        return "TOO_SHORT";
+    }
+    return "INVALID_NUMBER";
+};
+/**
+ * Checks if the country code is valid and required
+ */
+const isInvalidCountryCode = (error, required) => (!!required && error === "REQUIRED") || error === "REQUIRED_COUNTRY";
+/**
+ * Checks if the phone number is valid and required
+ */
+const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
+/**
+ * Checks if the phone number is valid and returns corresponding error message
+ */
+const phoneErrorMessage = (phoneNumber, required) => {
+    if ((validatePhoneNumber(phoneNumber) === "REQUIRED" && !required) ||
+        (validatePhoneNumber(phoneNumber) === "REQUIRED" && required && phoneNumber === undefined)) {
+        return undefined;
+    }
+    return validatePhoneNumber(phoneNumber);
+};
+
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ */
+const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
+    const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = react.useState(() => {
+        return (value?.toString() || defaultValue?.toString()) ?? undefined;
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+        !!phoneErrorMessage(value?.toString(), rest.required));
+    const errorType = react.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
+    const error = react.useMemo(() => {
+        // for the case when a custom error message is provided
+        if (errorMessage) {
+            return errorMessage;
+        }
+        else if (errorType) {
+            return t(`phoneField.error.${errorType}`);
+        }
+        return errorMessage;
+    }, [errorMessage, errorType, t]);
+    react.useEffect(() => {
+        setRenderAsInvalid(Boolean(errorMessage));
+    }, [errorMessage]);
+    const handleBlur = react.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        // for the case when a custom error message is provided
+        if (errorMessage && !phoneErrorMessage(newValue.toString(), rest.required)) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
+        else {
+            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
+        }
+        onBlur?.(event);
+    }, [errorMessage, onBlur, rest.required]);
+    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
+};
+PhoneField.displayName = "PhoneField";
+
+/**
+ * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
+ *
+ */
+const PhoneFieldWithController = ({ control, controllerProps, name, value, ref, ...rest }) => {
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsxRuntime.jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
+};
+PhoneFieldWithController.displayName = "PhoneFieldWithController";
+
+const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+    variants: {
+        layout: {
+            inline: ["flex", "gap-3", "flex-row", "items-center"],
+        },
+    },
+});
+const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
+    "self-center",
+    "w-4",
+    "h-4",
+    "appearance-none",
+    "rounded-3xl",
+    "bg-white",
+    "border-solid",
+    "border",
+    "border-neutral-300",
+    "shadow-sm",
+    "shrink-0",
+    "transition",
+    "box-border",
+    "hover:cursor-pointer",
+    "hover:bg-neutral-100",
+    "focus-visible:outline-primary-700",
+], {
+    variants: {
+        checked: {
+            true: [
+                "border-solid",
+                "border-4",
+                "border-primary-600",
+                "bg-white",
+                "hover:bg-neutral-100",
+                "hover:cursor-pointer",
+                "outline-0",
+                "active:bg-neutral-200",
+                "active:ring-2",
+                "active:ring-inset",
+                "active:ring-primary-700",
+                "group-active:ring-2",
+                "group-active:ring-inset",
+                "group-active:ring-primary-700",
+            ],
+            false: "",
+        },
+        invalid: {
+            true: ["border-red-600", "active:ring-red-700"],
+            false: "",
+        },
+        disabled: {
+            true: [
+                "bg-neutral-400",
+                "border-neutral-300",
+                "cursor-not-allowed",
+                "hover:bg-neutral-400",
+                "active:bg-neutral-400",
+                "group-active:ring-0",
+                "group-active:ring-inset",
+            ],
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: ["bg-white"],
+        },
+    ],
+});
+
+const RadioGroupContext = react.createContext(null);
+
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
  *
  * _**Do use** Radio buttons in forms, settings, or selections in a list._
  *
@@ -1922,763 +2661,94 @@ const parseSchedule = (scheduleString) => {
     return {
         variant,
         schedule: filteredSchedule,
-    };
-};
-/**
- * Serialize week schedule to string schedule
- *
- * @param {WeekSchedule} weekSchedule Week schedule range
- * @returns {string} Schedule string
- */
-const serializeSchedule = (weekSchedule) => {
-    return weekSchedule.schedule
-        .filter(({ range, day, isAllDay }) => {
-        const hasRange = range.timeFrom && range.timeTo;
-        switch (weekSchedule.variant) {
-            case exports.ScheduleVariant.WEEKDAYS:
-                return day <= 5 && hasRange;
-            case exports.ScheduleVariant.ALL_DAYS:
-                return day <= 7 && hasRange;
-            case exports.ScheduleVariant.CUSTOM:
-            default:
-                return hasRange || isAllDay;
-        }
-    })
-        .map(({ day, range, isAllDay }) => {
-        if (isAllDay) {
-            return `${day}#00:00-24:00`;
-        }
-        return `${day}#${range.timeFrom}-${range.timeTo}`;
-    })
-        .join(",");
-};
-/**
- * Checks if a list of schedule objects have the same ranges
- *
- * @param {RawSchedule[]} schedule List of schedule objects
- * @returns {boolean} Whether the schedule is uniform
- */
-const isUniform = (schedule) => {
-    return schedule.every((day, _, collection) => collection[0]?.range?.timeFrom === day.range?.timeFrom && collection[0]?.range?.timeTo === day.range?.timeTo);
-};
-/**
- * Checks if a list of schedule objects are consecutive days
- *
- * @param {RawSchedule[]} schedule List of schedule objects
- * @returns {boolean} Whether the schedule has consecutive days
- */
-const hasConsecutiveDays = (schedule) => {
-    const days = [1, 2, 3, 4, 5];
-    return schedule.every(({ day }, index) => day === days[index]);
-};
-
-const cvaSearch = cssClassVarianceUtilities.cvaMerge([
-    "shadow-none",
-    "component-search-border",
-    "component-search-background",
-    "hover:component-search-background",
-    "hover:component-search-focus-hover",
-    "transition-all",
-    "duration-300",
-], {
-    variants: {
-        border: { true: ["!component-search-borderless"], false: "" },
-        widenOnFocus: {
-            true: [
-                "component-search-width",
-                "component-search-widen",
-                "hover:component-search-widen",
-                "focus-within:w-full",
-                "max-w-sm",
-            ],
-            false: "w-full",
-        },
-    },
-});
-
-/**
- * The Search component is used to render a search input field.
- *
- * @param {SearchProps} props - The props for the Search component
- */
-const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
-    const { t } = useTranslation();
-    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
-        //only show the clear button if there is a value and the onClear function is provided
-        onClear && value ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
-                onClear();
-            }, ref: xMarkRef, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
-};
-Search.displayName = "Search";
-
-const cvaSelect = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "flex",
-    "shadow-sm",
-    "rounded-lg",
-    "border-neutral-300",
-    "hover:border-neutral-400",
-    "hover:bg-neutral-50",
-    "bg-white",
-    "transition",
-    "text-sm",
-    "min-h-0",
-], {
-    variants: {
-        fieldSize: {
-            small: ["h-7", "text-xs"],
-            medium: ["h-8"],
-            large: ["h-10"],
-        },
-        invalid: {
-            true: "border border-red-600 text-red-600 hover:border-red-600",
-            false: "",
-        },
-        disabled: {
-            true: "!bg-neutral-100 hover:border-neutral-300",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
-});
-const cvaSelectControl = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        isDisabled: {
-            true: "!bg-neutral-100",
-            false: "",
-        },
-        prefix: {
-            true: ["ps-7"],
-            false: "",
-        },
-        invalid: {
-            true: "!border-0",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        isDisabled: false,
-        prefix: false,
-        invalid: false,
-    },
-});
-const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-]);
-const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "absolute", "inset-y-0"], {
-    variants: {
-        kind: {
-            prefix: ["pl-3", "left-0"],
-            suffix: ["pr-3", "right-0"],
-        },
-    },
-});
-const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-    "ml-1",
-]);
-const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        menuIsOpen: {
-            true: "animate-fade-in-fast",
-            false: "animate-fade-out-fast",
-        },
-    },
-});
-const cvaSelectDynamicTagContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
-    variants: {
-        visible: { true: "visible", false: "invisible" },
-    },
-});
-const cvaSelectCounter = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
-const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "grid", "gap-1"]);
-
-/**
- * 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 {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {ReactElement} SingleSelectMenuItem
- */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
-            ? react.cloneElement(optionPrefix, {
-                className: "mr-1 flex items-center",
-                size: "medium",
-            })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
-};
-/**
- * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {ReactElement} multi select menu item
- */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
-            e.stopPropagation();
-            onClick && onClick(e);
-        }, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
-            ? react.cloneElement(optionPrefix, {
-                className: "mr-1 flex items-center",
-                size: "medium",
-            })
-            : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, onClick: e => {
-                e.stopPropagation();
-            }, readOnly: false }), selected: selected }));
-};
-
-/**
- * Extended Tag component with information about its own width.
- * Used in the select component.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} TagWithWidth component
- */
-const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
-    const ref = react.useRef(null);
-    react.useLayoutEffect(() => {
-        onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
-    }, [ref, onWidthKnown]);
-    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, icon: react.isValidElement(rest.icon) ? react.cloneElement(rest.icon, { size: "small" }) : rest.icon, children: children }));
-};
-
-/**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
- *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {ReactElement} TagsContainer
- */
-const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
-    const containerRef = react.useRef(null);
-    const [isReady, setIsReady] = react.useState(false);
-    const [counterWidth, setCounterWidth] = react.useState(0);
-    const [availableSpaceWidth, setAvailableSpaceWidth] = react.useState(0);
-    const [childrenWidths, setChildrenWidths] = react.useState([]);
-    const itemsCount = items.length;
-    const dimensions = reactComponents.useResize();
-    const { width: windowWidth } = reactComponents.useDebounce(dimensions, 100);
-    react.useEffect(() => {
-        const containerWidth = containerRef.current?.offsetWidth || 0;
-        setAvailableSpaceWidth(containerWidth);
-    }, [windowWidth]);
-    const onWidthKnownHandler = react.useCallback(({ width: reportedWidth }) => {
-        setChildrenWidths(prev => {
-            const next = [...prev, { width: reportedWidth + itemsGap }];
-            if (next.length === itemsCount) {
-                setIsReady(true);
-            }
-            return next;
-        });
-    }, [itemsCount, itemsGap]);
-    const renderedElements = react.useMemo(() => {
-        const requiredSpace = childrenWidths.reduce((previous, current) => {
-            return previous + current.width;
-        }, 0);
-        const availableSpace = availableSpaceWidth - counterWidth;
-        const { elements } = items
-            .concat({ text: "", onClick: () => null, disabled: false })
-            .reduce((acc, item, index) => {
-            const spaceNeeded = childrenWidths.slice(0, index + 1).reduce((previous, current) => {
-                return previous + current.width;
-            }, 0);
-            const isLast = index === items.length;
-            const counterRequired = requiredSpace > availableSpace && acc.counter !== 0;
-            if (isLast && counterRequired) {
-                return {
-                    ...acc,
-                    elements: [
-                        ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, icon: item.Icon, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
-                    ],
-                };
-            }
-            if (isLast) {
-                return acc;
-            }
-            const itemCanFit = spaceNeeded <= availableSpace;
-            if (itemCanFit) {
-                return {
-                    ...acc,
-                    elements: [
-                        ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
-                                e.stopPropagation();
-                                item.onClick();
-                            }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
-                    ],
-                };
-            }
-            return {
-                elements: acc.elements,
-                counter: item.text !== "" ? acc.counter + 1 : acc.counter,
-            };
-        }, { elements: [], counter: 0 });
-        return elements;
-    }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
-    return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
-            width: `${width}`,
-        }, children: [preFix, renderedElements, postFix] }));
-};
-
-/**
- * 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 {string} dataTestId a test id
- * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {boolean} hasError decide to override hasError variant
- * @param {ReactNode} prefix a prefix element
- * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
- */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
-    const [t] = useTranslation();
-    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = react.useMemo(() => {
-        return {
-            ValueContainer: props => {
-                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
-                    const PLACEHOLDER_KEY = "placeholder";
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const key = props && props.children && props.children[0] ? props.children[0]?.key : "";
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const values = props && props.children ? props.children[0] : [];
-                    const tags = key === PLACEHOLDER_KEY ? [] : values;
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const searchInput = props && props.children && props.children[1];
-                    const placeholderElement = Array.isArray(props.children)
-                        ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
-                        : null;
-                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
-                                ? tags.map(({ props: tagProps }) => {
-                                    const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
-                                    return {
-                                        text: tagProps.children,
-                                        onClick: disabled
-                                            ? undefined
-                                            : (e) => {
-                                                setMenuIsEnabled(false);
-                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            },
-                                        disabled: disabled,
-                                        Icon: optionPrefix,
-                                    };
-                                })
-                                : [], postFix: searchInput, preFix: placeholderElement ? jsxRuntime.jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
-                                    ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
-                                                e.stopPropagation();
-                                                setMenuIsEnabled(false);
-                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            }, children: tagProps.children }, tagProps.children?.toString()));
-                                    })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
-                }
-                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
-            },
-            LoadingIndicator: () => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: "mr-2", size: "small" });
-            },
-            DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: icon }) }));
-            },
-            IndicatorSeparator: () => null,
-            ClearIndicator: props => {
-                if (disabled) {
-                    return null;
-                }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, innerProps: {
-                        ...props.innerProps,
-                        onMouseDown: e => {
-                            e.preventDefault();
-                        },
-                    }, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
-            },
-            Control: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Control, { ...props, className: cvaSelectControl({
-                        isDisabled: props.isDisabled,
-                        prefix: prefix ? true : false,
-                        invalid: hasError,
-                    }) }));
-            },
-            SingleValue: props => {
-                const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
-                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-neutral-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
-            },
-            Menu: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
-            },
-            Placeholder: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-neutral-400", children: props.children }));
-            },
-            MenuList: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, innerProps: {
-                        ...props.innerProps,
-                        onScroll: e => {
-                            const listEl = e.currentTarget;
-                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight &&
-                                props.selectProps.onMenuScrollToBottom) {
-                                /Firefox/.test(navigator.userAgent)
-                                    ? props.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"))
-                                    : 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 (jsxRuntime.jsx(ReactSelect.components.Option, { ...props, innerProps: {
-                        ...props.innerProps,
-                        role: "option",
-                        onClick: () => { },
-                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
-            },
-            ...componentsProps,
-        };
-    }, [
-        componentsProps,
-        maxSelectedDisplayCount,
-        disabled,
-        setMenuIsEnabled,
-        readOnly,
-        dataTestId,
-        t,
-        prefix,
-        hasError,
-        getOptionLabelDescription,
-        fieldSize,
-        getOptionPrefix,
-    ]);
-    return customComponents;
-};
-
-/**
- * @template IsMulti
- * @template Group
- * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
- * @returns {StylesConfig<Option, boolean>} styles to override in select
- */
-const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = react.useMemo(() => {
-        return {
-            control: base => {
-                return {
-                    ...base,
-                    minHeight: fieldSize === "small" ? "28px" : fieldSize === "large" ? "40px" : "32px",
-                    borderRadius: "var(--border-radius-lg)",
-                    backgroundColor: "inherit",
-                };
-            },
-            singleValue: base => ({
-                ...base,
-            }),
-            multiValue: base => ({
-                ...base,
-            }),
-            multiValueLabel: base => ({
-                ...base,
-            }),
-            indicatorsContainer: base => ({
-                ...base,
-                ...(disabled && { display: "none" }),
-            }),
-            indicatorSeparator: () => ({
-                width: "0px",
-            }),
-            menu: base => {
-                return {
-                    ...base,
-                    width: "100%",
-                    marginTop: "4px",
-                    marginBottom: "18px",
-                    transition: "all 1s ease-in-out",
-                };
-            },
-            input: base => ({
-                ...base,
-                marginLeft: "0px",
-            }),
-            placeholder: base => ({
-                ...base,
-            }),
-            option: () => ({}),
-            menuPortal: base => ({
-                ...base,
-                width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width,
-                backgroundColor: "#ffffff",
-                borderRadius: "var(--border-radius-lg)",
-                zIndex: "var(--z-overlay)",
-                borderColor: "rgb(var(--color-neutral-300))",
-                boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
-            }),
-            menuList: base => {
-                return {
-                    ...base,
-                    position: "relative",
-                    padding: "var(--spacing-1)",
-                    display: "grid",
-                    gap: "var(--spacing-1)",
-                    width: "100%",
-                    borderRadius: "0px",
-                    boxShadow: "none",
-                    paddingTop: "0px",
-                };
-            },
-            valueContainer: base => {
-                return {
-                    ...base,
-                    paddingBlock: 0,
-                    flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
-                    gap: "0.25rem",
-                };
-            },
-            container: base => ({
-                ...base,
-                width: "100%",
-            }),
-            dropdownIndicator: base => ({
-                ...base,
-                padding: "0px",
-            }),
-            clearIndicator: base => {
-                return {
-                    ...base,
-                    padding: "0px",
-                };
-            },
-            ...styles,
-        };
-    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
-    return { customStyles };
+    };
 };
-
 /**
- * A hook used by selects to share the common code
+ * Serialize week schedule to string schedule
  *
- * @param {SelectProps} props - The props for the Select component
- * @returns {UseSelectProps} Select component
+ * @param {WeekSchedule} weekSchedule Week schedule range
+ * @returns {string} Schedule string
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize = "medium", ...props }) => {
-    const refContainer = react.useRef(document.createElement("div"));
-    const { customStyles } = useCustomStyles({
-        refContainer,
-        maxSelectedDisplayCount,
-        styles,
-        disabled: Boolean(disabled),
-        fieldSize,
-    });
-    const [menuIsOpen, setMenuIsOpen] = react.useState(props.menuIsOpen ?? false);
-    const [menuIsEnabled, setMenuIsEnabled] = react.useState(true);
-    const customComponents = useCustomComponents({
-        componentsProps: components,
-        disabled: Boolean(disabled),
-        readOnly: Boolean(props.readOnly),
-        setMenuIsEnabled,
-        dataTestId,
-        maxSelectedDisplayCount,
-        prefix,
-        hasError,
-        fieldSize,
-        getOptionLabelDescription,
-        getOptionPrefix,
-    });
-    const menuPlacement = "auto";
-    const openMenuHandler = async () => {
-        onMenuOpen?.();
-        if (menuIsEnabled) {
-            setMenuIsOpen(true);
+const serializeSchedule = (weekSchedule) => {
+    return weekSchedule.schedule
+        .filter(({ range, day, isAllDay }) => {
+        const hasRange = range.timeFrom && range.timeTo;
+        switch (weekSchedule.variant) {
+            case exports.ScheduleVariant.WEEKDAYS:
+                return day <= 5 && hasRange;
+            case exports.ScheduleVariant.ALL_DAYS:
+                return day <= 7 && hasRange;
+            case exports.ScheduleVariant.CUSTOM:
+            default:
+                return hasRange || isAllDay;
         }
-        else {
-            setMenuIsEnabled(true);
+    })
+        .map(({ day, range, isAllDay }) => {
+        if (isAllDay) {
+            return `${day}#00:00-24:00`;
         }
-    };
-    const closeMenuHandler = () => {
-        setMenuIsOpen(false);
-        onMenuClose && onMenuClose();
-    };
-    return {
-        refContainer,
-        customStyles,
-        menuIsOpen,
-        customComponents,
-        menuPlacement,
-        openMenuHandler,
-        closeMenuHandler,
-    };
+        return `${day}#${range.timeFrom}-${range.timeTo}`;
+    })
+        .join(",");
 };
-
 /**
- * CreatableSelects are input components used to choose a value from a set.
+ * Checks if a list of schedule objects have the same ranges
  *
- * @param {CreatableSelectProps} props - The props for the CreatableSelect component
- * @returns {ReactElement} CreatableSelect component
+ * @param {RawSchedule[]} schedule List of schedule objects
+ * @returns {boolean} Whether the schedule is uniform
  */
-const CreatableSelect = (props) => {
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
-    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactCreatableSelectProps = react.useMemo(() => ({
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-        allowCreateWhileLoading,
-        onCreateOption,
-        isDisabled: Boolean(disabled),
-    }), [
-        allowCreateWhileLoading,
-        classNamePrefix,
-        customComponents,
-        customStyles,
-        dataTestId,
-        disabled,
-        id,
-        isClearable,
-        isLoading,
-        isMulti,
-        isSearchable,
-        label,
-        maxMenuHeight,
-        menuIsOpen,
-        menuPlacement,
-        onChange,
-        onCreateOption,
-        onInputChange,
-        onMenuScrollToBottom,
-        openMenuOnClick,
-        openMenuOnFocus,
-        props.menuPortalTarget,
-        readOnly,
-        value,
-    ]);
-    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+const isUniform = (schedule) => {
+    return schedule.every((day, _, collection) => collection[0]?.range?.timeFrom === day.range?.timeFrom && collection[0]?.range?.timeTo === day.range?.timeTo);
+};
+/**
+ * Checks if a list of schedule objects are consecutive days
+ *
+ * @param {RawSchedule[]} schedule List of schedule objects
+ * @returns {boolean} Whether the schedule has consecutive days
+ */
+const hasConsecutiveDays = (schedule) => {
+    const days = [1, 2, 3, 4, 5];
+    return schedule.every(({ day }, index) => day === days[index]);
 };
-CreatableSelect.displayName = "CreatableSelect";
 
-// This is here to ensure the bundled react-components can expose the react-select for jest in external iris apps.
-const ReactSyncSelect = ReactSelect.default || ReactSelect;
+const cvaSearch = cssClassVarianceUtilities.cvaMerge([
+    "shadow-none",
+    "component-search-border",
+    "component-search-background",
+    "hover:component-search-background",
+    "hover:component-search-focus-hover",
+    "transition-all",
+    "duration-300",
+], {
+    variants: {
+        border: { true: ["!component-search-borderless"], false: "" },
+        widenOnFocus: {
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:w-full",
+                "max-w-sm",
+            ],
+            false: "w-full",
+        },
+    },
+});
+
 /**
- * Selects are input components used to choose a value from a set.
+ * The Search component is used to render a search input field.
  *
- * @param {SelectProps} props - The props for the Select component
- * @returns {ReactElement} Select component
+ * @param {SearchProps} props - The props for the Search component
  */
-const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
-    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactSelectProps = react.useMemo(() => ({
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: false,
-        // This configuration allows for more flexible positioning control of the dropdown.
-        // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
-        // the parent element instead of 'document.body'.
-        menuPortalTarget: props.menuPortalTarget !== undefined ? props.menuPortalTarget : document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: !isMulti,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-        hideSelectedOptions,
-        isDisabled: Boolean(disabled),
-    }), [
-        classNamePrefix,
-        customComponents,
-        customStyles,
-        dataTestId,
-        disabled,
-        hideSelectedOptions,
-        id,
-        isClearable,
-        isLoading,
-        isMulti,
-        isSearchable,
-        label,
-        maxMenuHeight,
-        menuIsOpen,
-        menuPlacement,
-        onChange,
-        onInputChange,
-        onMenuScrollToBottom,
-        openMenuOnClick,
-        openMenuOnFocus,
-        props.menuPortalTarget,
-        readOnly,
-        value,
-    ]);
-    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({
-            invalid: hasError,
-            fieldSize: fieldSize,
-            disabled: renderAsDisabled,
-            className: props.className,
-        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSyncSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
+    const { t } = useTranslation();
+    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
+        //only show the clear button if there is a value and the onClear function is provided
+        onClear && value ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
+                onClear();
+            }, ref: xMarkRef, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 };
-Select.displayName = "Select";
+Search.displayName = "Search";
 
 /**
  *
@@ -2765,7 +2835,7 @@ CreatableSelectField.displayName = "CreatableSelectField";
  * @param {SelectFieldProps} props - The props for the SelectField component
  */
 const SelectField = ({ ref, ...props }) => {
-    return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(Select, { ...convertedProps }) }));
+    return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(BaseSelect, { ...convertedProps }) }));
 };
 SelectField.displayName = "SelectField";
 
@@ -3181,6 +3251,7 @@ setupLibraryTranslations();
 exports.ValueType = ReactSelect;
 exports.ActionButton = ActionButton;
 exports.BaseInput = BaseInput;
+exports.BaseSelect = BaseSelect;
 exports.Checkbox = Checkbox;
 exports.CheckboxField = CheckboxField;
 exports.ColorField = ColorField;
@@ -3196,6 +3267,7 @@ exports.EmailField = EmailField;
 exports.FormFieldSelectAdapter = FormFieldSelectAdapter;
 exports.FormGroup = FormGroup;
 exports.Label = Label;
+exports.MultiSelectField = MultiSelectField;
 exports.MultiSelectMenuItem = MultiSelectMenuItem;
 exports.NumberBaseInput = NumberBaseInput;
 exports.NumberField = NumberField;
@@ -3209,7 +3281,6 @@ exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
 exports.Schedule = Schedule;
 exports.Search = Search;
-exports.Select = Select;
 exports.SelectField = SelectField;
 exports.SingleSelectMenuItem = SingleSelectMenuItem;
 exports.TextAreaBaseInput = TextAreaBaseInput;
@@ -3233,7 +3304,9 @@ exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputBase = cvaInputBase;
 exports.cvaInputBaseDisabled = cvaInputBaseDisabled;
 exports.cvaInputBaseInvalid = cvaInputBaseInvalid;
-exports.cvaInputField = cvaInputField;
+exports.cvaInputBaseReadOnly = cvaInputBaseReadOnly;
+exports.cvaInputBaseSize = cvaInputBaseSize;
+exports.cvaInputElement = cvaInputElement;
 exports.cvaInputItemPlacementManager = cvaInputItemPlacementManager;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;