@trackunit/react-form-components 1.8.64 → 1.8.65

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');
 
@@ -698,6 +698,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,137 +1021,709 @@ 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.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {ReactElement} Label component
- */
-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"]);
-
-/**
- * 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 single select menu item is a basic wrapper around Menu item designed to be used as a single 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 SingleSelectMenuItem
+ * @returns {ReactElement} SingleSelectMenuItem
  */
-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 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 }));
 };
-
 /**
- * The checkbox field component is used for entering boolean values.
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
- * _**Do use**_ the CheckboxField for boolean input.
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {ReactElement} multi select menu item
  */
-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 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 }));
 };
-CheckboxField.displayName = "CheckboxField";
 
 /**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
  *
- * @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 {TagProps} props - The props for the tag component
+ * @returns {ReactElement} TagWithWidth component
  */
-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 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 }));
 };
 
-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.
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
- * @param value - The string value to be validated.
- * @returns {boolean} True if the value is a valid hex color, otherwise false.
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {ReactElement} TagsContainer
  */
-const isValidHEXColor = (value) => {
-    const hexRegex = /^#([0-9A-F]{6})$/i;
-    return hexRegex.test(value);
-};
-/**
- * The ColorField component is used to enter color.
+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
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {UseSelectProps} Select component
+ */
+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;
+/**
+ * Selects are input components used to choose a value from a set.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {ReactElement} Select component
+ */
+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";
+
+/**
+ * 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 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";
+
+/**
+ * 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 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"]);
+
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
+ *
+ * @param {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.
+ *
+ * _**Do use**_ the CheckboxField for boolean input.
+ */
+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";
+
+/**
+ *
+ * @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
+ */
+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 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.
+ *
+ * @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.
  *
  */
@@ -1311,6 +1980,73 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
 };
 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;
@@ -1352,1333 +2088,664 @@ const validateNumber = (number, required = false, min, max) => {
     }
     // 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, rest.max, rest.min, t]);
-    react.useEffect(() => {
-        if (errorMessage) {
-            setRenderAsInvalid(Boolean(errorMessage));
-        }
-    }, [errorMessage]);
-    const handleBlur = 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);
-        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 }) }));
-};
-NumberField.displayName = "NumberField";
-
-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: {
-            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 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: [""],
-        },
-    },
-});
-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 "LESS_THAN";
     }
-    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)) {
+    // if the value is a number and is valid
+    if (isNumber(parsedNumber) && isNumberValid(parsedNumber)) {
         return undefined;
     }
-    return validatePhoneNumber(phoneNumber);
+    return "INVALID_NUMBER";
 };
 
 /**
- * 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 number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
  *
- * @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.
+ * _**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 PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
-    const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
+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 (value?.toString() || defaultValue?.toString()) ?? undefined;
+        return Number(value?.toString()) || Number(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]);
+        !!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(`phoneField.error.${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 cvaTag = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        layout: {
+            default: ["absolute", "top-2", "right-2"],
+            compact: [],
+        },
+    },
 });
-
-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._
- *
- * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
- *
- * @param {RadioGroupProps} props - The props for the RadioGroup component
- * @returns {ReactElement} RadioGroup component
- */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
-                    id,
-                    value,
-                    name: name || id,
-                    onChange,
-                    disabled,
-                    isInvalid,
-                }, children: children }) }) }));
-};
-RadioGroup.displayName = "RadioGroup";
 
 /**
- * The RadioItem component.
- *
- * @param {RadioItemProps} props - The props for the RadioItem component
- * @returns {ReactElement} RadioItem component
+ * A card version of a radio button that includes an icon, headings and a description.
  */
-const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
-    const groupCtx = react.useContext(RadioGroupContext);
-    const isChecked = groupCtx?.value === value;
-    const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
-    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
-    const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
-    const inputId = `${groupCtx?.id}-${value}`;
-    const hasLabel = label !== undefined && label !== null && label !== "";
-    return (jsxRuntime.jsxs("label", { className: hasLabel
-            ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
-                    checked: isChecked,
-                    disabled: groupCtx?.disabled,
-                    invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
-                        invalid: groupCtx?.isInvalid,
-                        disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+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] })] }) }));
 };
-
-const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-1",
-    "items-center",
-    "gap-4",
-    "max-sm:gap-2",
-    "border-transparent",
-    "rounded-md",
-]);
+OptionCard.displayName = "OptionCard";
 
 /**
- * TimeRange is used to create a time range entry.
+ * A thin wrapper around the `BaseInput` component for password input fields.
  *
- * @param {TimeRangeProps} props - The props for the TimeRange component
- * @returns {ReactElement} TimeRange component
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = react.useState(range ?? {
-        timeFrom: DEFAULT_TIME,
-        timeTo: DEFAULT_TIME,
-    });
-    const onChangeFrom = (timeFrom) => {
-        setTimeRange(prev => ({ ...prev, timeFrom }));
-    };
-    const onChangeTo = (timeTo) => {
-        setTimeRange(prev => ({ ...prev, timeTo }));
-    };
-    const onRangeChange = () => onChange(timeRange);
-    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+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 DEFAULT_TIME = "12:00";
-
-const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "pb-4",
-    "gap-2",
-    "grid-cols-[60px,200px,60px,2fr]",
-    "max-sm:grid-cols-1",
-]);
-const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bold", "self-center"]);
 
 /**
- * Schedule is used to create a time range entries.
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
  *
- * @param {ScheduleProps} props - The props for the Schedule component
- * @returns {ReactElement} Schedule component
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
-    const [t] = useTranslation();
-    const onRangeChange = (range, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
-        onChange(newSchedule);
-    };
-    const onActiveChange = (isActive, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
-            ? {
-                ...day,
-                range: {
-                    timeFrom: day.range.timeFrom ? day.range.timeFrom : DEFAULT_TIME,
-                    timeTo: day.range.timeTo ? day.range.timeTo : DEFAULT_TIME,
-                },
-                isActive,
-            }
-            : day);
-        onChange(newSchedule);
-    };
-    const onAllDayChange = (isAllDayChecked, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
-            ? {
-                ...day,
-                range: {
-                    timeFrom: day.range.timeFrom ? day.range.timeFrom : DEFAULT_TIME,
-                    timeTo: day.range.timeTo ? day.range.timeTo : DEFAULT_TIME,
-                },
-                isAllDay: isAllDayChecked,
-            }
-            : day);
-        onChange(newSchedule);
-    };
-    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
-            return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
-        }) }));
+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";
 
-const weekDay = {
-    Monday: "monday",
-    Tuesday: "tuesday",
-    Wednesday: "wednesday",
-    Thursday: "thursday",
-    Friday: "friday",
-    Saturday: "saturday",
-    Sunday: "sunday",
-};
-exports.ScheduleVariant = void 0;
-(function (ScheduleVariant) {
-    ScheduleVariant["ALL_DAYS"] = "all";
-    ScheduleVariant["WEEKDAYS"] = "week";
-    ScheduleVariant["CUSTOM"] = "custom";
-})(exports.ScheduleVariant || (exports.ScheduleVariant = {}));
 /**
- * Parse a string of week range schedule string to human readable schedule range.
- *
- * @param {string} scheduleString String of week schedule
- * @returns {WeekSchedule} Week schedule range
+ * Validates a phone number
  */
-const parseSchedule = (scheduleString) => {
-    if (!scheduleString) {
-        return {
-            variant: exports.ScheduleVariant.CUSTOM,
-            schedule: [1, 2, 3, 4, 5, 6, 7].map(day => ({
-                day,
-                range: { timeFrom: "", timeTo: "" },
-                isAllDay: false,
-                isActive: false,
-            })),
-        };
+const validatePhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) {
+        return "REQUIRED";
     }
-    const schedule = scheduleString.split(",").map(daySchedule => {
-        const [day, timeRange] = daySchedule.split("#");
-        const [timeFrom, timeTo] = (timeRange ?? "").split("-");
-        const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
-        return {
-            day: Number(day),
-            range: timeFrom === undefined || timeTo === undefined
-                ? undefined
-                : {
-                    timeFrom: timeFrom,
-                    timeTo: timeTo,
-                },
-            isAllDay,
-            isActive: Boolean(timeFrom) && Boolean(timeTo),
-        };
-    });
-    const filteredSchedule = schedule
-        .filter(daySchedule => daySchedule.range)
-        .map(daySchedule => ({
-        day: daySchedule.day,
-        range: daySchedule.range,
-        isAllDay: daySchedule.isAllDay,
-        isActive: daySchedule.isActive,
-    }));
-    let variant;
-    switch (schedule.length) {
-        case 7:
-            variant = isUniform(schedule) ? exports.ScheduleVariant.ALL_DAYS : exports.ScheduleVariant.CUSTOM;
-            break;
-        case 5:
-            variant = hasConsecutiveDays(schedule) ? exports.ScheduleVariant.WEEKDAYS : exports.ScheduleVariant.CUSTOM;
-            break;
-        default:
-            return {
-                variant: exports.ScheduleVariant.CUSTOM,
-                schedule: filteredSchedule,
-            };
+    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;
     }
-    return {
-        variant,
-        schedule: filteredSchedule,
-    };
+    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";
 };
 /**
- * Serialize week schedule to string schedule
+ * 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 {WeekSchedule} weekSchedule Week schedule range
- * @returns {string} Schedule string
+ * @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 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;
+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));
         }
-    })
-        .map(({ day, range, isAllDay }) => {
-        if (isAllDay) {
-            return `${day}#00:00-24:00`;
+        else {
+            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
         }
-        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);
+        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";
+
 /**
- * Checks if a list of schedule objects are consecutive days
+ * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
  *
- * @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 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 cvaSearch = cssClassVarianceUtilities.cvaMerge([
-    "shadow-none",
-    "component-search-border",
-    "component-search-background",
-    "hover:component-search-background",
-    "hover:component-search-focus-hover",
-    "transition-all",
-    "duration-300",
-], {
+const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     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",
+        layout: {
+            inline: ["flex", "gap-3", "flex-row", "items-center"],
         },
     },
 });
-
-/**
- * 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",
+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",
-    "text-sm",
-    "min-h-0",
+    "box-border",
+    "hover:cursor-pointer",
+    "hover:bg-neutral-100",
+    "focus-visible:outline-primary-700",
 ], {
     variants: {
-        fieldSize: {
-            small: ["h-7", "text-xs"],
-            medium: ["h-8"],
-            large: ["h-10"],
+        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 border-red-600 text-red-600 hover:border-red-600",
+            true: ["border-red-600", "active:ring-red-700"],
             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",
+            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: "",
-        },
-    },
-    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 }));
-};
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: ["bg-white"],
+        },
+    ],
+});
+
+const RadioGroupContext = react.createContext(null);
 
 /**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
  *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {ReactElement} TagsContainer
+ * 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._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {ReactElement} RadioGroup component
  */
-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 RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+                    id,
+                    value,
+                    name: name || id,
+                    onChange,
+                    disabled,
+                    isInvalid,
+                }, children: children }) }) }));
 };
+RadioGroup.displayName = "RadioGroup";
 
 /**
- * A hook to retrieve components override object.
- * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ * The RadioItem component.
  *
- * @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
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {ReactElement} RadioItem component
  */
-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;
+const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
+    const groupCtx = react.useContext(RadioGroupContext);
+    const isChecked = groupCtx?.value === value;
+    const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
+    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
+    const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
+    const inputId = `${groupCtx?.id}-${value}`;
+    const hasLabel = label !== undefined && label !== null && label !== "";
+    return (jsxRuntime.jsxs("label", { className: hasLabel
+            ? cvaBinaryControlWrapper({ className })
+            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+                    checked: isChecked,
+                    disabled: groupCtx?.disabled,
+                    invalid: groupCtx?.isInvalid,
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                        invalid: groupCtx?.isInvalid,
+                        disabled: groupCtx?.disabled,
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
+const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-1",
+    "items-center",
+    "gap-4",
+    "max-sm:gap-2",
+    "border-transparent",
+    "rounded-md",
+]);
+
 /**
- * @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
+ * TimeRange is used to create a time range entry.
+ *
+ * @param {TimeRangeProps} props - The props for the TimeRange component
+ * @returns {ReactElement} TimeRange component
  */
-const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = react.useMemo(() => {
+const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
+    const [timeRange, setTimeRange] = react.useState(range ?? {
+        timeFrom: DEFAULT_TIME,
+        timeTo: DEFAULT_TIME,
+    });
+    const onChangeFrom = (timeFrom) => {
+        setTimeRange(prev => ({ ...prev, timeFrom }));
+    };
+    const onChangeTo = (timeTo) => {
+        setTimeRange(prev => ({ ...prev, timeTo }));
+    };
+    const onRangeChange = () => onChange(timeRange);
+    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+};
+const DEFAULT_TIME = "12:00";
+
+const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge([
+    "grid",
+    "pb-4",
+    "gap-2",
+    "grid-cols-[60px,200px,60px,2fr]",
+    "max-sm:grid-cols-1",
+]);
+const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bold", "self-center"]);
+
+/**
+ * Schedule is used to create a time range entries.
+ *
+ * @param {ScheduleProps} props - The props for the Schedule component
+ * @returns {ReactElement} Schedule component
+ */
+const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
+    const [t] = useTranslation();
+    const onRangeChange = (range, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
+        onChange(newSchedule);
+    };
+    const onActiveChange = (isActive, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
+            ? {
+                ...day,
+                range: {
+                    timeFrom: day.range.timeFrom ? day.range.timeFrom : DEFAULT_TIME,
+                    timeTo: day.range.timeTo ? day.range.timeTo : DEFAULT_TIME,
+                },
+                isActive,
+            }
+            : day);
+        onChange(newSchedule);
+    };
+    const onAllDayChange = (isAllDayChecked, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
+            ? {
+                ...day,
+                range: {
+                    timeFrom: day.range.timeFrom ? day.range.timeFrom : DEFAULT_TIME,
+                    timeTo: day.range.timeTo ? day.range.timeTo : DEFAULT_TIME,
+                },
+                isAllDay: isAllDayChecked,
+            }
+            : day);
+        onChange(newSchedule);
+    };
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
+            return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
+        }) }));
+};
+
+const weekDay = {
+    Monday: "monday",
+    Tuesday: "tuesday",
+    Wednesday: "wednesday",
+    Thursday: "thursday",
+    Friday: "friday",
+    Saturday: "saturday",
+    Sunday: "sunday",
+};
+exports.ScheduleVariant = void 0;
+(function (ScheduleVariant) {
+    ScheduleVariant["ALL_DAYS"] = "all";
+    ScheduleVariant["WEEKDAYS"] = "week";
+    ScheduleVariant["CUSTOM"] = "custom";
+})(exports.ScheduleVariant || (exports.ScheduleVariant = {}));
+/**
+ * Parse a string of week range schedule string to human readable schedule range.
+ *
+ * @param {string} scheduleString String of week schedule
+ * @returns {WeekSchedule} Week schedule range
+ */
+const parseSchedule = (scheduleString) => {
+    if (!scheduleString) {
         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,
+            variant: exports.ScheduleVariant.CUSTOM,
+            schedule: [1, 2, 3, 4, 5, 6, 7].map(day => ({
+                day,
+                range: { timeFrom: "", timeTo: "" },
+                isAllDay: false,
+                isActive: false,
+            })),
         };
-    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
-    return { customStyles };
+    }
+    const schedule = scheduleString.split(",").map(daySchedule => {
+        const [day, timeRange] = daySchedule.split("#");
+        const [timeFrom, timeTo] = (timeRange ?? "").split("-");
+        const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
+        return {
+            day: Number(day),
+            range: timeFrom === undefined || timeTo === undefined
+                ? undefined
+                : {
+                    timeFrom: timeFrom,
+                    timeTo: timeTo,
+                },
+            isAllDay,
+            isActive: Boolean(timeFrom) && Boolean(timeTo),
+        };
+    });
+    const filteredSchedule = schedule
+        .filter(daySchedule => daySchedule.range)
+        .map(daySchedule => ({
+        day: daySchedule.day,
+        range: daySchedule.range,
+        isAllDay: daySchedule.isAllDay,
+        isActive: daySchedule.isActive,
+    }));
+    let variant;
+    switch (schedule.length) {
+        case 7:
+            variant = isUniform(schedule) ? exports.ScheduleVariant.ALL_DAYS : exports.ScheduleVariant.CUSTOM;
+            break;
+        case 5:
+            variant = hasConsecutiveDays(schedule) ? exports.ScheduleVariant.WEEKDAYS : exports.ScheduleVariant.CUSTOM;
+            break;
+        default:
+            return {
+                variant: exports.ScheduleVariant.CUSTOM,
+                schedule: filteredSchedule,
+            };
+    }
+    return {
+        variant,
+        schedule: filteredSchedule,
+    };
 };
-
 /**
- * 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 +2832,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 +3248,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 +3264,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 +3278,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;