@trackunit/react-form-components 0.0.330 → 0.0.332

package/index.esm.js

@@ -1,19 +1,21 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useEffect, useRef, useImperativeHandle } from 'react';
+import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useRef, useEffect, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
-import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
+import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
+import { Controller } from 'react-hook-form';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 import { nonNullable } from '@trackunit/shared-utils';
+import { z } from 'zod';
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
@@ -236,7 +238,7 @@ const cvaInputPrefix = cvaMerge([
     "hover:component-search-prefix",
     "component-baseInput-prefix",
     "component-search-borderless",
-    "px-3",
+    "pl-3",
 ], {
     variants: {
         disabled: {
@@ -842,1101 +844,944 @@ const getCountryAbbreviation = (callCode) => {
     return getCountries().find(c => getCountryCallingCode(c) === code) || "";
 };
 
+const DEFAULT_COUNTRY_CODE = undefined;
 /**
- * A custom hook for managing phone number input state and validation.
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
- *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
+ * @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.
+ * @returns {JSX.Element} - The PhoneInput component.
  */
-const usePhoneInput = () => {
-    const getPhoneNumber = ({ country, phone }) => {
-        if (country) {
-            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+const PhoneInput = forwardRef((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "readOnly", "onFocus", "onBlur", "name"]);
+    const [innerValue, setInnerValue] = useState(() => {
+        var _a;
+        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+    });
+    const fieldIsFocused = useRef(false);
+    const [countryCode, setCountryCode] = useState(DEFAULT_COUNTRY_CODE);
+    const determineCountry = useCallback((newValue) => {
+        const asYouType = new AsYouType();
+        asYouType.input(newValue);
+        setCountryCode(asYouType.getCountry());
+    }, []);
+    const handleChange = useCallback(event => {
+        const newValue = event.target.value;
+        const noneFormattedValue = parseIncompletePhoneNumber(newValue);
+        event.target.value = noneFormattedValue;
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        setInnerValue(newValue);
+        determineCountry(newValue);
+    }, [onChange, determineCountry]);
+    const makePretty = useCallback((newValue) => {
+        const asYouType = new AsYouType();
+        const pretty = asYouType.input(newValue);
+        setInnerValue(pretty);
+        setCountryCode(asYouType.getCountry());
+    }, []);
+    useEffect(() => {
+        if (!fieldIsFocused.current) {
+            makePretty(typeof value === "string" ? value : "");
         }
-        return phone || "";
-    };
-    return {
-        getPhoneNumber,
-    };
+    }, [makePretty, value]);
+    const handleBlur = useCallback(event => {
+        const newValue = event.target.value;
+        makePretty(newValue);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        fieldIsFocused.current = false;
+    }, [makePretty, onBlur]);
+    const handleFocus = useCallback(event => {
+        const newValue = event.target.value;
+        const noneFormattedValue = parseIncompletePhoneNumber(newValue);
+        setInnerValue(noneFormattedValue);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        fieldIsFocused.current = true;
+    }, [onFocus]);
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsx(BaseInput, Object.assign({ actions: !disableAction && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
+});
+
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+const PhoneField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "name", "onChange", "onBlur"]);
+    const htmlForId = id ? id : "phoneField-" + v4();
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    return (jsx(FormGroup, { className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value }, rest)) }));
+});
+
+/**
+ * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
+ *
+ * @returns {JSX.Element} - The PhoneFieldWithController component.
+ */
+const PhoneFieldWithController = forwardRef((_a, ref) => {
+    var { control, controllerProps, name, value } = _a, rest = __rest(_a, ["control", "controllerProps", "name", "value"]);
+    return (jsx(Controller, Object.assign({ control: control, defaultValue: value, name: name }, controllerProps, { render: ({ field }) => jsx(PhoneField, Object.assign({}, rest, field, { ref: ref })) })));
+});
+
+/**
+ * Validates a phone number
+ */
+const validatePhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) {
+        return "REQUIRED";
+    }
+    const asYouType = new AsYouType();
+    asYouType.input(phoneNumber);
+    const countryCode = asYouType.getCallingCode();
+    const national = asYouType.getNationalNumber();
+    if (phoneNumber && isValidPhoneNumber(phoneNumber)) {
+        return undefined;
+    }
+    if (!countryCode && national) {
+        return "REQUIRED_COUNTRY";
+    }
+    if (phoneNumber &&
+        (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
+        return "NOT_A_NUMBER";
+    }
+    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
+    if (safePhoneNumber.length <= 5) {
+        //needs to be handled manually, parsePhoneNumberFromString can't parse it
+        return "TOO_SHORT";
+    }
+    const number = parsePhoneNumberFromString(safePhoneNumber);
+    if (!number) {
+        return "NOT_A_NUMBER";
+    }
+    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"));
 
-const cvaSelect = cvaMerge([
-    "relative",
-    "flex",
-    "shadow-sm",
-    "rounded-lg",
+const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+    variants: {
+        layout: {
+            inline: ["flex", "gap-3", "flex-row", "items-center"],
+        },
+    },
+});
+const cvaRadioItem = cvaMerge([
+    "w-4",
+    "h-4",
+    "appearance-none",
+    "rounded-3xl",
+    "bg-white",
+    "border-solid",
     "border",
     "border-slate-300",
-    "focus-within:ring-2",
-    "focus-within:ring-inset",
-    "focus-within:ring-primary-600",
-    "focus-within:border-slate-400",
-    "hover:border-slate-400",
-    "hover:bg-slate-50",
-    "bg-white",
+    "shadow-sm",
+    "shrink-0",
     "transition",
+    "box-border",
+    "hover:cursor-pointer",
+    "hover:bg-slate-100",
+    "focus:ring-2",
+    "focus:ring-inset",
+    "focus:ring-blue-700",
 ], {
     variants: {
+        checked: {
+            true: [
+                "border-solid",
+                "border-4",
+                "border-blue-600",
+                "bg-white",
+                "hover:bg-slate-100",
+                "hover:cursor-pointer",
+                "outline-0",
+                "active:bg-slate-200",
+                "active:ring-2",
+                "active:ring-inset",
+                "active:ring-blue-700",
+                "focus:bg-slate-200",
+                "focus:ring-2",
+                "focus:ring-inset",
+                "focus:ring-blue-700",
+                "group-active:ring-2",
+                "group-active:ring-inset",
+                "group-active:ring-blue-700",
+            ],
+            false: "",
+        },
         invalid: {
-            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
+            true: [
+                "border-red-600",
+                "active:ring-red-700",
+                "focus:ring-red-700",
+                "group-focus:ring-2",
+                "group-focus:ring-inset",
+            ],
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100",
+            true: [
+                "bg-slate-400",
+                "border-slate-300",
+                "cursor-not-allowed",
+                "group-hover:bg-slate-400",
+                "group-focus:bg-slate-400",
+                "hover:bg-slate-400",
+                "focus:bg-slate-400",
+                "active:bg-slate-400",
+                "focus:ring-0",
+                "focus:ring-inset",
+                "group-active:ring-0",
+                "group-active:ring-inset",
+            ],
             false: "",
         },
     },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
-});
-const cvaSelectIcon = cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
-const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
-const cvaSelectXIcon = cvaMerge([
-    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
-    "ml-1",
-]);
-const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
-    variants: {
-        menuIsOpen: {
-            true: "animate-fade-in-fast",
-            false: "animate-fade-out-fast",
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: ["bg-white"],
         },
-    },
+    ],
 });
-const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+const cvaRadioItemWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
+const cvaRadioItemLabelContainer = cvaMerge(["gap-y-1", "grid"]);
+const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
     variants: {
-        visible: { true: "visible", false: "invisible" },
+        disabled: {
+            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
+            false: "",
+        },
     },
 });
-const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
-const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
+
+const RadioGroupContext = React.createContext(null);
 
 /**
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
- * @returns {arg is MultiValue<Option> } is Multivalue
+ * 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 {JSX.Element} RadioGroup component
  */
-function isMultiValue(arg) {
-    return Array.isArray(arg);
-}
-function isGroupBase(arg) {
-    return arg.options !== undefined;
-}
-const isSelectedOption = (option, selected) => {
-    if (isGroupBase(option)) {
-        return false;
-    }
-    return isMultiValue(selected)
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            selected.some(v => v.value === option.value)
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-};
-const removeSelectedFromGroups = (group, selected) => {
-    if (isGroupBase(group)) {
-        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
-    }
-    return group;
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
+                    id,
+                    value,
+                    name: name || id,
+                    onChange,
+                    disabled,
+                    isInvalid,
+                }, children: children }) }) }));
 };
+RadioGroup.displayName = "RadioGroup";
+
 /**
- *  @template IsMulti
- * @template Group
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
- * @param {PropsValue<Option> | undefined} value Selected values
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
  */
-const getOrderedOptions = (options, value) => {
-    if (value && options) {
-        const orderedValues = isMultiValue(value)
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                [...value].sort((a, b) => a.label.localeCompare(b.label))
-            : [value];
-        const selectableOptions = options
-            .filter(option => !isSelectedOption(option, value))
-            .map(option => removeSelectedFromGroups(option, value));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return orderedValues.concat(selectableOptions) || [];
-    }
-    return options || [];
+const RadioItem = ({ label, value, dataTestId, className, description, }) => {
+    const groupCtx = React.useContext(RadioGroupContext);
+    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId && `${dataTestId}-Wrapper`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { checked: isChecked, className: cvaRadioItem({
+                    checked: isChecked,
+                    disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+                    invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId && `${dataTestId}-Description`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: description }))] })] }));
 };
 
+const cvaTimeRange = cvaMerge(["flex", "flex-1", "items-center", "gap-4", "border-transparent", "rounded-md"]);
+
 /**
- * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ * TimeRange is used to create a time range entry.
  *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {JSX.Element} SingleSelectMenuItem
+ * @param {TimeRangeProps} props - The props for the TimeRange component
+ * @returns {JSX.Element} TimeRange component
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
+const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
+    var _a, _b;
+    const [timeRange, setTimeRange] = React__default.useState(range !== null && range !== void 0 ? range : {
+        timeFrom: "",
+        timeTo: "",
+    });
+    const onChangeFrom = (timeFrom) => {
+        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeFrom })));
+    };
+    const onChangeTo = (timeTo) => {
+        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
+    };
+    const onRangeChange = () => onChange(timeRange);
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeFrom) !== null && _a !== void 0 ? _a : "" }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: (_b = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeTo) !== null && _b !== void 0 ? _b : "" })] }));
 };
+
+const cvaScheduleItem = cvaMerge(["grid", "pb-4", "gap-2", "grid-cols-[60px,200px,60px,2fr]"]);
+const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
+
 /**
- * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ * Schedule is used to create a time range entries.
  *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {JSX.Element} multi select menu item
+ * @param {ScheduleProps} props - The props for the Schedule component
+ * @returns {JSX.Element} Schedule component
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: e => {
-            e.stopPropagation();
-            onClick && onClick(e);
-        }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
-                e.stopPropagation();
-            }, readOnly: false }), selected: selected }));
+const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
+    const onRangeChange = (range, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? Object.assign(Object.assign({}, day), { range: Object.assign({}, range) }) : day));
+        onChange(newSchedule);
+    };
+    const onActiveChange = (isActive, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isActive }) : day);
+        onChange(newSchedule);
+    };
+    const onAllDayChange = (isAllDayChecked, index) => {
+        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
+            ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isAllDayActive: isAllDayChecked }) : day);
+        onChange(newSchedule);
+    };
+    return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
+            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDayActive && isActive, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key));
+        }) }));
 };
 
+const weekDay = {
+    Monday: "monday",
+    Tuesday: "tuesday",
+    Wednesday: "wednesday",
+    Thursday: "thursday",
+    Friday: "friday",
+    Saturday: "saturday",
+    Sunday: "sunday",
+};
+var ScheduleVariant;
+(function (ScheduleVariant) {
+    ScheduleVariant["ALL_DAYS"] = "all";
+    ScheduleVariant["WEEKDAYS"] = "week";
+    ScheduleVariant["CUSTOM"] = "custom";
+})(ScheduleVariant || (ScheduleVariant = {}));
 /**
- * Extended Tag component with information about its own width.
- * Used in the select component.
+ * Parse a string of week range schedule string to human readable schedule range.
  *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} TagWithWidth component
+ * @param {string} scheduleString String of week schedule
+ * @returns {WeekSchedule} Week schedule range
  */
-const TagWithWidth = (_a) => {
-    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
-    const ref = React__default.useRef(null);
-    React__default.useLayoutEffect(() => {
-        var _a;
-        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
-    }, [ref, onWidthKnown]);
-    return (jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+const parseSchedule = (scheduleString) => {
+    if (!scheduleString) {
+        return {
+            variant: ScheduleVariant.ALL_DAYS,
+            schedule: [],
+        };
+    }
+    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: isAllDay
+                ? undefined
+                : {
+                    timeFrom,
+                    timeTo,
+                },
+            isAllDay,
+        };
+    });
+    const filteredSchedule = schedule
+        .filter(daySchedule => daySchedule.range !== null && daySchedule.range !== undefined)
+        .map(daySchedule => ({ day: daySchedule.day, range: daySchedule.range, isAllDay: daySchedule.isAllDay }));
+    let variant;
+    switch (schedule.length) {
+        case 7:
+            const areEqual = schedule.every((day, _, collection) => {
+                var _a, _b, _c, _d, _e, _f;
+                return ((_b = (_a = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day === null || day === void 0 ? void 0 : day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) &&
+                    ((_e = (_d = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day === null || day === void 0 ? void 0 : day.range) === null || _f === void 0 ? void 0 : _f.timeTo);
+            });
+            if (areEqual) {
+                variant = ScheduleVariant.ALL_DAYS;
+            }
+            else {
+                variant = ScheduleVariant.CUSTOM;
+            }
+            break;
+        case 5:
+            const days = [1, 2, 3, 4, 5];
+            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
+            if (hasConsecutiveDays) {
+                variant = ScheduleVariant.WEEKDAYS;
+            }
+            else {
+                variant = ScheduleVariant.CUSTOM;
+            }
+            break;
+        default:
+            return {
+                variant: ScheduleVariant.CUSTOM,
+                schedule: filteredSchedule,
+            };
+    }
+    return {
+        variant,
+        schedule: filteredSchedule,
+    };
 };
-
 /**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ * Serialize week schedule to string schedule
  *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {JSX.Element} TagsContainer
+ * @param {WeekSchedule} weekSchedule Week schedule range
+ * @returns {string} Schedule string
  */
-const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
-    const [isReady, setIsReady] = React__default.useState(false);
-    const [counterWidth, setCounterWidth] = React__default.useState(0);
-    const containerRef = React__default.useRef(null);
-    const availableWidth = React__default.useRef();
-    const childrenWidth = React__default.useRef([]);
-    const itemsCount = items.length;
-    React__default.useLayoutEffect(() => {
-        var _a;
-        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    }, [containerRef]);
-    const onWidthKnownHandler = ({ width: reportedWidth }) => {
-        childrenWidth.current.push({ width: reportedWidth + itemsGap });
-        if (childrenWidth.current.length === itemsCount) {
-            setIsReady(true);
-        }
-    };
-    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
-        return previous + current.width;
-    }, 0);
-    let counter = 0;
-    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
-    const renderedElements = items
-        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
-        .map((item, index) => {
-        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
-            return previous + current.width;
-        }, 0);
-        const isLast = index === items.length;
-        const counterRequired = requiredSpace > availableSpace && counter !== 0;
-        if (isLast && counterRequired) {
-            return (jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", counter] }) }, item.text + index));
-        }
-        if (isLast) {
-            return null;
-        }
-        const itemCanFit = spaceNeeded <= availableSpace;
-        if (itemCanFit) {
-            return (jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
-                    e.stopPropagation();
-                    item.onClick();
-                }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index));
+const serializeSchedule = (weekSchedule) => {
+    return weekSchedule.schedule
+        .filter(({ range, day, isAllDay }) => {
+        const hasRange = (range === null || range === void 0 ? void 0 : range.timeFrom) && (range === null || range === void 0 ? void 0 : range.timeTo);
+        switch (weekSchedule.variant) {
+            case ScheduleVariant.WEEKDAYS:
+                return day <= 5 && hasRange;
+            case ScheduleVariant.ALL_DAYS:
+                return day <= 7 && hasRange;
+            case ScheduleVariant.CUSTOM:
+            default:
+                return hasRange || isAllDay;
         }
-        const fromTheItems = item.text !== "";
-        if (fromTheItems) {
-            counter = counter + 1;
+    })
+        .map(({ day, range, isAllDay }) => {
+        if (isAllDay) {
+            return `${day}#00:00-24:00`;
         }
-        return null;
+        return `${day}#${range.timeFrom}-${range.timeTo}`;
     })
-        .filter(element => element !== null);
-    return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
-            width: `${width}`,
-        }, children: [renderedElements, postFix] }));
+        .join(",");
 };
 
 /**
- * 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.
+ * A thin wrapper around the `BaseInput` component for text input fields.
  *
- * @template IsMulti
- * @template Group
- * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
- * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsOpen menu is open state
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
- * @param {string} dataTestId a test id
- * @param {number} maxSelectedDisplayCount a number of max display count
- *  @param {JSX.Element} dropdownIcon an custom dropdown icon
- * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
- */
-const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
-    const [t] = useTranslation();
-    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = React.useMemo(() => {
-        return Object.assign({ ValueContainer: props => {
-                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
-                    const PLACEHOLDER_KEY = "placeholder";
-                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
-                    const values = props && props.children ? props.children[0] : [];
-                    const tags = key === PLACEHOLDER_KEY ? [] : values;
-                    const searchInput = props && props.children && props.children[1];
-                    return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
-                                ? tags.map(({ props: tagProps }) => {
-                                    return {
-                                        text: tagProps.children,
-                                        onClick: disabled
-                                            ? undefined
-                                            : (e) => {
-                                                var _a, _b;
-                                                refMenuIsEnabled.current = false;
-                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            },
-                                        disabled: disabled,
-                                    };
-                                })
-                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags &&
-                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a, _b;
-                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, onClose: e => {
-                                                var _a, _b;
-                                                e.stopPropagation();
-                                                refMenuIsEnabled.current = false;
-                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
-                }
-                return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
-            }, LoadingIndicator: props => {
-                return jsx(Spinner, { className: "mt-1.5 mr-1", size: "small" });
-            }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
-            }, IndicatorSeparator: () => null, ClearIndicator: props => {
-                if (disabled) {
-                    return null;
-                }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
-            }, Control: props => {
-                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
-            }, SingleValue: props => {
-                return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
-            }, Menu: props => {
-                return (jsx(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
-            }, Placeholder: props => {
-                return (jsx(components.Placeholder, Object.assign({}, props, { className: "!text-slate-400", children: props.children })));
-            }, MenuList: props => {
-                return (jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
-                            const listEl = e.currentTarget;
-                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
-                                props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
-                            }
-                        } }), children: props.children })));
-            }, Option: props => {
-                const componentProps = {
-                    label: props.label,
-                    focused: props.isFocused,
-                    selected: props.isSelected,
-                    onClick: props.innerProps.onClick,
-                };
-                return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }), children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled }))) })));
-            } }, componentsProps);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
-    return customComponents;
-};
-
-/**
- * @template IsMulti
- * @template Group
- * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
- * @returns {StylesConfig<Option, boolean>} styles to override in select
- */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
-    const customStyles = React.useMemo(() => {
-        return Object.assign({ control: base => {
-                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
-                        border: "0",
-                    }, marginRight: "2px", backgroundColor: "" });
-            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
-                width: "0px",
-            }), menu: base => {
-                return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
-            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
-                return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
-            }, valueContainer: base => {
-                return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
-            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "calc(100% - 2px)", paddingLeft: "2px" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
-                return Object.assign(Object.assign({}, base), { padding: "0px" });
-            } }, styles);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refContainer, refPrefix]);
-    return { customStyles };
-};
-
-/**
- * A hook used by selects to share the common code
- *
- * @param {SelectProps} props - The props for the Select component
- * @returns {IUseSelect} Select component
- */
-const useSelect = (_a) => {
-    var _b;
-    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
-    const refContainer = React__default.useRef(null);
-    const refPrefix = React__default.useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
-    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
-    const refMenuIsEnabled = React__default.useRef(true);
-    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
-    const menuPlacement = "auto";
-    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
-        onMenuOpen && onMenuOpen();
-        if (refMenuIsEnabled.current) {
-            setMenuIsOpen(true);
-        }
-        else {
-            refMenuIsEnabled.current = true;
-        }
-    });
-    const closeMenuHandler = () => {
-        setMenuIsOpen(false);
-        onMenuClose && onMenuClose();
-    };
-    const orderedOptions = React__default.useMemo(() => {
-        return disabled
-            ? getOrderedOptions(options, value).map(option => {
-                return Object.assign(Object.assign({}, option), { disabled: true });
-            })
-            : getOrderedOptions(options, value);
-    }, [options, value, disabled]);
-    return {
-        refContainer,
-        refPrefix,
-        customStyles,
-        menuIsOpen,
-        customComponents,
-        menuPlacement,
-        openMenuHandler,
-        closeMenuHandler,
-        orderedOptions,
-    };
-};
-
-/**
- * CreatableSelects are input components used to choose a value from a set.
- *
- * @param {CreatableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
- */
-const CreatableSelect = (props) => {
-    const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const creatableSelectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-        allowCreateWhileLoading,
-        onCreateOption,
-    };
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
-};
-CreatableSelect.displayName = "CreatableSelect";
-
-/**
- * Selects are input components used to choose a value from a set.
- *
- * @param {SelectProps} props - The props for the Select component
- * @returns {JSX.Element} Select component
- */
-const Select = (props) => {
-    const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
-    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-    };
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
-};
-Select.displayName = "Select";
-
-const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["+53", "+98", "+211", "+247", "+249", "+383", "+850", "+963"];
-const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
-    "1242",
-    "1246",
-    "1264",
-    "1268",
-    "1284",
-    "1340",
-    "1345",
-    "1441",
-    "1473",
-    "1649",
-    "1664",
-    "1670",
-    "1671",
-    "1684",
-    "1721",
-    "1758",
-    "1767",
-    "1784",
-    "1809",
-    "1868",
-    "1869",
-    "1876",
-    "379",
-    "5999",
-    "881",
-    "882",
-    "883",
-];
-const DUPLICATE_COUNTRY_CODES = [
-    // +1
-    "AG",
-    "AI",
-    "AS",
-    "BB",
-    "BM",
-    "BS",
-    "CA",
-    "DM",
-    "DO",
-    "GD",
-    "GU",
-    "JM",
-    "KN",
-    "KY",
-    "LC",
-    "MP",
-    "MS",
-    "PR",
-    "SX",
-    "TC",
-    "TT",
-    "VC",
-    "VG",
-    "VI",
-    // +7
-    "KZ",
-    // +39
-    "VA",
-    // +44
-    "GG",
-    "IM",
-    "JE",
-    // +47
-    "SJ",
-    // +61
-    "CC",
-    "CX",
-    // 212
-    "EH",
-    // 262
-    "RE",
-    // 290
-    "SH",
-    // 590
-    "BL",
-    "MF",
-    // 599
-    "CW",
-];
-const countries = getCountries()
-    .filter(code => !DUPLICATE_COUNTRY_CODES.includes(code))
-    .map(code => {
-    const c = getCountryCallingCode(code);
-    return {
-        label: `+${c} ${countryCodeToFlagEmoji(code)}`,
-        value: `+${c}`,
-    };
-});
-const additionalCountries = ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND.map(code => ({
-    label: `+${code}`,
-    value: `+${code}`,
-}));
-const countryCodes = [...countries, ...additionalCountries]
-    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code.value))
-    .sort((a, b) => Number(a.value) - Number(b.value));
-
-/**
- * The CountryCodeSelect component is used to select a country code for a phone number.
- *
- * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
- * @returns {JSX.Element} CountryCodeSelect component
- */
-const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, isClearable, }) => {
-    const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
-    useEffect(() => {
-        countryCode && setIsCountryCodeMissing(false);
-    }, [countryCode]);
-    const filteredCodes = countryCodes.filter(code => {
-        return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
-    });
-    return (jsx(Select, { "aria-invalid": isCountryCodeMissing, className: "w-36", closeMenuOnSelect: true, dataTestId: dataTestId, disabled: disabled, hasError: isCountryCodeMissing || isInvalid, isClearable: isClearable, maxMenuHeight: 200, menuIsOpen: readOnly ? false : undefined, onBlur: onBlur, onChange: onChange, options: filteredCodes.map(code => code), placeholder: placeholder, readOnly: readOnly, value: filteredCodes.find(({ value }) => value === `+${countryCode}`) }));
-};
-
-/**
- * A component for inputting phone numbers with an optional action button for initiating a phone call.
- *
- * @param {string} [dataTestId] - The data test ID for the component.
- * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
- * @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.
- * @returns {JSX.Element} - The PhoneInput component.
+ * NOTE: If shown with a label, please use the `TextField` component instead.
  */
-const PhoneInput = forwardRef((_a, ref) => {
-    var _b, _c;
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue, isCountryCodeClearable } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue", "isCountryCodeClearable"]);
-    const DEFAULT_COUNTRY_CODE = "+45";
-    const { getPhoneNumber } = usePhoneInput();
-    const [placeholder, setPlaceholder] = useState();
-    useEffect(() => {
-        if (readOnly) {
-            setPlaceholder("");
-        }
-        else {
-            const countryCode = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
-            setPlaceholder(`${countryCode} ${countryCodeToFlagEmoji(countryCode)}`);
-        }
-    }, [countryCodePlaceholder, readOnly]);
-    const safePhoneNumber = getPhoneNumberWithPlus(value || "");
-    const number = parsePhoneNumberFromString(safePhoneNumber, { defaultCountry: "DK" });
-    const valueHasOnlyCountryCode = (number === null || number === void 0 ? void 0 : number.isPossible) === undefined && typeof value === "string" && value[0] === "+" && value.length < 5;
-    const [phone, setPhone] = useState((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
-    const [code, setCode] = useState(valueHasOnlyCountryCode ? value.replace("+", "") : (_c = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _c !== void 0 ? _c : "");
-    const codeRef = useRef(code); // synchronus reliable source of truth  (country code is calling onblur just after onchange, useState is too slow for this)
-    const phoneRef = useRef(phone); // synchronus reliable source of truth
-    const onChangeHandler = React__default.useCallback(({ newPhone, newCode }) => {
-        onChangeValue &&
-            onChangeValue({
-                phone: getPhoneNumber({ country: newCode, phone: newPhone || "" }),
-                countryCode: newCode,
-                national: newPhone,
-            });
-    }, [onChangeValue, getPhoneNumber]);
-    const onPhoneChangeHandler = React__default.useCallback((ph) => {
-        phoneRef.current = ph;
-        setPhone(ph);
-        onChangeHandler({ newPhone: ph, newCode: code });
-    }, [onChangeHandler, code, phoneRef]);
-    const onCodeChangeHandler = React__default.useCallback((codeNumber) => {
-        codeRef.current = codeNumber;
-        setCode(codeNumber);
-        onChangeHandler({ newPhone: phone, newCode: codeNumber });
-    }, [phone, onChangeHandler, codeRef]);
-    const onBlurHandler = React__default.useCallback(() => {
-        onFieldsBlur &&
-            onFieldsBlur({
-                phone: getPhoneNumber({ country: codeRef.current, phone: phoneRef.current }),
-                countryCode: codeRef.current,
-                national: phoneRef.current,
-            });
-    }, [onFieldsBlur, getPhoneNumber]);
-    const hiddenInputRef = useRef(null);
-    const phoneNumber = getPhoneNumber({ country: code, phone });
-    useEffect(() => {
-        const element = hiddenInputRef.current;
-        const event = new Event("change");
-        element === null || element === void 0 ? void 0 : element.dispatchEvent(event);
-        // The event as unknown as ChangeEvent<HTMLInputElement> assertion is needed because
-        // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
-        onChange && onChange(event);
-    }, [phoneNumber, onChange]);
-    return (jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { "aria-invalid": isInvalid, "data-testid": dataTestId, hidden: true, id: "phone-input", onChange: onChange, readOnly: readOnly, ref: hiddenInputRef, value: phoneNumber }), jsx(CountryCodeSelect, { countryCode: code, dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, disabled: disabled, isClearable: isCountryCodeClearable, isInvalid: isInvalid, onBlur: e => {
-                    onBlurHandler();
-                }, onChange: e => {
-                    var _a;
-                    onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, placeholder: placeholder, readOnly: readOnly }), jsx(BaseInput, Object.assign({ actions: !disableAction && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: phoneNumber })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, onBlur: () => {
-                    onBlurHandler();
-                }, onChange: e => {
-                    onPhoneChangeHandler(e.target.value);
-                }, readOnly: readOnly, type: "tel", value: phone }, rest))] }));
-});
+const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
 
-/**
- * Validates a phone number
- */
-const validatePhoneNumber = ({ phone, countryCode, national, }) => {
-    const phoneNumber = phone ? phone : countryCode || national ? `${countryCode}${national}` : undefined;
-    if (phoneNumber && isValidPhoneNumber(phoneNumber)) {
-        return undefined;
-    }
-    if (!phoneNumber) {
-        return "REQUIRED";
-    }
-    if (!phone && !countryCode && national) {
-        return "REQUIRED_COUNTRY";
-    }
-    if (phoneNumber &&
-        (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
-        return "NOT_A_NUMBER";
-    }
-    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
-    if (safePhoneNumber.length <= 5) {
-        //needs to be handled manually, parsePhoneNumberFromString can't parse it
-        return "TOO_SHORT";
-    }
-    const number = parsePhoneNumberFromString$1(safePhoneNumber);
-    if (!number) {
-        return "NOT_A_NUMBER";
-    }
-    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"));
+const cvaSearch = cvaMerge([
+    "shadow-none",
+    "component-search-borderless",
+    "component-search-background",
+    "hover:component-search-background",
+    "hover:component-search-focus-hover",
+    "focus:component-search-focus-hover",
+    "focus-within:component-search-focus-within",
+    "transition-all",
+    "duration-300",
+], {
+    variants: {
+        border: { true: ["!component-search-border"], false: "" },
+        widenOnFocus: {
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:component-search-widen-focus",
+                "focus-within:w-full",
+            ],
+            false: "w-full",
+        },
+    },
+});
 
 /**
- * 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 Search component is used to render a search input field.
  *
- * @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.
- * @returns {JSX.Element} - The PhoneField component.
+ * @param {SearchProps} props - The props for the Search component
+ * @returns {JSX.Element} Search component
  */
-const PhoneField = forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, onChangeValue, onFieldsBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "onChangeValue", "onFieldsBlur"]);
-    const htmlForId = id ? id : "phoneField-" + v4();
-    const [t] = useTranslation();
-    const [isValid, setIsValid] = useState(true);
-    const [localError, setLocalError] = useState(undefined);
-    const renderAsInvalid = !isValid || isInvalid || Boolean(errorMessage);
-    const validate = ({ phone, national, countryCode }) => {
-        const areFieldsPopulated = Boolean(national && countryCode);
-        const phoneValidationResult = validatePhoneNumber({ phone, national, countryCode });
-        setIsValid(areFieldsPopulated ? !Boolean(phoneValidationResult) : true);
-        setLocalError(Boolean(phoneValidationResult) ? t(`phoneField.error.${phoneValidationResult}`) : undefined);
-    };
-    const onChangeValueHandler = (phoneNumberValue) => {
-        validate(phoneNumberValue);
-        onChangeValue && onChangeValue(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
-    };
-    const handleOnFieldBlur = (phoneNumberValue) => {
-        validate(phoneNumberValue);
-        onFieldsBlur && onFieldsBlur(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
-    };
-    return (jsx(FormGroup, { className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && (errorMessage || localError)) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(PhoneInput, Object.assign({ "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onChangeValue: onChangeValueHandler, onFieldsBlur: handleOnFieldBlur, ref: ref, value: value }, rest)) }));
+const Search = forwardRef((_a, ref) => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
+    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+                onClear();
+            }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
 });
 
-const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
-    variants: {
-        layout: {
-            inline: ["flex", "gap-3", "flex-row", "items-center"],
-        },
-    },
-});
-const cvaRadioItem = cvaMerge([
-    "w-4",
-    "h-4",
-    "appearance-none",
-    "rounded-3xl",
-    "bg-white",
-    "border-solid",
+const cvaSelect = cvaMerge([
+    "relative",
+    "flex",
+    "shadow-sm",
+    "rounded-lg",
     "border",
     "border-slate-300",
-    "shadow-sm",
-    "shrink-0",
+    "focus-within:ring-2",
+    "focus-within:ring-inset",
+    "focus-within:ring-primary-600",
+    "focus-within:border-slate-400",
+    "hover:border-slate-400",
+    "hover:bg-slate-50",
+    "bg-white",
     "transition",
-    "box-border",
-    "hover:cursor-pointer",
-    "hover:bg-slate-100",
-    "focus:ring-2",
-    "focus:ring-inset",
-    "focus:ring-blue-700",
 ], {
     variants: {
-        checked: {
-            true: [
-                "border-solid",
-                "border-4",
-                "border-blue-600",
-                "bg-white",
-                "hover:bg-slate-100",
-                "hover:cursor-pointer",
-                "outline-0",
-                "active:bg-slate-200",
-                "active:ring-2",
-                "active:ring-inset",
-                "active:ring-blue-700",
-                "focus:bg-slate-200",
-                "focus:ring-2",
-                "focus:ring-inset",
-                "focus:ring-blue-700",
-                "group-active:ring-2",
-                "group-active:ring-inset",
-                "group-active:ring-blue-700",
-            ],
-            false: "",
-        },
         invalid: {
-            true: [
-                "border-red-600",
-                "active:ring-red-700",
-                "focus:ring-red-700",
-                "group-focus:ring-2",
-                "group-focus:ring-inset",
-            ],
+            true: "border-red-600 text-red-600 focus-within:ring-red-600 hover:border-red-600",
             false: "",
         },
         disabled: {
-            true: [
-                "bg-slate-400",
-                "border-slate-300",
-                "cursor-not-allowed",
-                "group-hover:bg-slate-400",
-                "group-focus:bg-slate-400",
-                "hover:bg-slate-400",
-                "focus:bg-slate-400",
-                "active:bg-slate-400",
-                "focus:ring-0",
-                "focus:ring-inset",
-                "group-active:ring-0",
-                "group-active:ring-inset",
-            ],
+            true: "!bg-slate-100",
             false: "",
         },
     },
-    compoundVariants: [
-        {
-            checked: true,
-            disabled: true,
-            className: ["bg-white"],
-        },
-    ],
+    defaultVariants: {
+        invalid: false,
+        disabled: false,
+    },
 });
-const cvaRadioItemWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
-const cvaRadioItemLabelContainer = cvaMerge(["gap-y-1", "grid"]);
-const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
+const cvaSelectIcon = cvaMerge("mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500");
+const cvaSelectPrefix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pl-2"]);
+const cvaSelectXIcon = cvaMerge([
+    "mr-2 flex cursor-pointer items-center justify-center text-slate-400 hover:text-slate-500",
+    "ml-1",
+]);
+const cvaSelectMenuList = cvaMerge(["min-w-min", "shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
-        disabled: {
-            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
-            false: "",
+        menuIsOpen: {
+            true: "animate-fade-in-fast",
+            false: "animate-fade-out-fast",
         },
     },
 });
-
-const RadioGroupContext = React.createContext(null);
+const cvaSelectDynamicTagContainer = cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+    variants: {
+        visible: { true: "visible", false: "invisible" },
+    },
+});
+const cvaSelectCounter = cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
+const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
 
 /**
- * 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 {JSX.Element} RadioGroup component
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
-                    id,
-                    value,
-                    name: name || id,
-                    onChange,
-                    disabled,
-                    isInvalid,
-                }, children: children }) }) }));
+function isMultiValue(arg) {
+    return Array.isArray(arg);
+}
+function isGroupBase(arg) {
+    return arg.options !== undefined;
+}
+const isSelectedOption = (option, selected) => {
+    if (isGroupBase(option)) {
+        return false;
+    }
+    return isMultiValue(selected)
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            selected.some(v => v.value === option.value)
+        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+};
+const removeSelectedFromGroups = (group, selected) => {
+    if (isGroupBase(group)) {
+        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
+    }
+    return group;
+};
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+const getOrderedOptions = (options, value) => {
+    if (value && options) {
+        const orderedValues = isMultiValue(value)
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                [...value].sort((a, b) => a.label.localeCompare(b.label))
+            : [value];
+        const selectableOptions = options
+            .filter(option => !isSelectedOption(option, value))
+            .map(option => removeSelectedFromGroups(option, value));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return orderedValues.concat(selectableOptions) || [];
+    }
+    return options || [];
 };
-RadioGroup.displayName = "RadioGroup";
 
 /**
- * The RadioItem component.
+ * 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 {RadioItemProps} props - The props for the RadioItem component
- * @returns {JSX.Element} RadioItem component
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
  */
-const RadioItem = ({ label, value, dataTestId, className, description, }) => {
-    const groupCtx = React.useContext(RadioGroupContext);
-    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId && `${dataTestId}-Wrapper`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: [jsx("input", { checked: isChecked, className: cvaRadioItem({
-                    checked: isChecked,
-                    disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                    invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), "data-testid": dataTestId, id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value }), jsxs("div", { className: cvaRadioItemLabelContainer(), children: [jsx(Label, { dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, children: label }), description && (jsx("label", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId && `${dataTestId}-Description`, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, children: description }))] })] }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
 };
-
-const cvaTimeRange = cvaMerge(["flex", "flex-1", "items-center", "gap-4", "border-transparent", "rounded-md"]);
-
 /**
- * TimeRange is used to create a time range entry.
+ * 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 {TimeRangeProps} props - The props for the TimeRange component
- * @returns {JSX.Element} TimeRange component
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
  */
-const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    var _a, _b;
-    const [timeRange, setTimeRange] = React__default.useState(range !== null && range !== void 0 ? range : {
-        timeFrom: "",
-        timeTo: "",
-    });
-    const onChangeFrom = (timeFrom) => {
-        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeFrom })));
-    };
-    const onChangeTo = (timeTo) => {
-        setTimeRange(prev => (Object.assign(Object.assign({}, prev), { timeTo })));
-    };
-    const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeFrom) !== null && _a !== void 0 ? _a : "" }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: (_b = timeRange === null || timeRange === void 0 ? void 0 : timeRange.timeTo) !== null && _b !== void 0 ? _b : "" })] }));
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
+                e.stopPropagation();
+            }, readOnly: false }), selected: selected }));
 };
 
-const cvaScheduleItem = cvaMerge(["grid", "pb-4", "gap-2", "grid-cols-[60px,200px,60px,2fr]"]);
-const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+const TagWithWidth = (_a) => {
+    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
+    const ref = React__default.useRef(null);
+    React__default.useLayoutEffect(() => {
+        var _a;
+        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+    }, [ref, onWidthKnown]);
+    return (jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+};
 
 /**
- * Schedule is used to create a time range entries.
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
- * @param {ScheduleProps} props - The props for the Schedule component
- * @returns {JSX.Element} Schedule component
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
  */
-const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
-    const onRangeChange = (range, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? Object.assign(Object.assign({}, day), { range: Object.assign({}, range) }) : day));
-        onChange(newSchedule);
-    };
-    const onActiveChange = (isActive, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isActive }) : day);
-        onChange(newSchedule);
-    };
-    const onAllDayChange = (isAllDayChecked, index) => {
-        const newSchedule = schedule.map((day, dayIndex) => index === dayIndex
-            ? Object.assign(Object.assign({}, day), { range: { timeFrom: "", timeTo: "" }, isAllDayActive: isAllDayChecked }) : day);
-        onChange(newSchedule);
+const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
+    const [isReady, setIsReady] = React__default.useState(false);
+    const [counterWidth, setCounterWidth] = React__default.useState(0);
+    const containerRef = React__default.useRef(null);
+    const availableWidth = React__default.useRef();
+    const childrenWidth = React__default.useRef([]);
+    const itemsCount = items.length;
+    React__default.useLayoutEffect(() => {
+        var _a;
+        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    }, [containerRef]);
+    const onWidthKnownHandler = ({ width: reportedWidth }) => {
+        childrenWidth.current.push({ width: reportedWidth + itemsGap });
+        if (childrenWidth.current.length === itemsCount) {
+            setIsReady(true);
+        }
     };
-    return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDayActive }, index) => {
-            return (jsxs("div", { className: cvaScheduleItem(), children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDayActive && isActive, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDayActive, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }, key));
-        }) }));
+    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
+        return previous + current.width;
+    }, 0);
+    let counter = 0;
+    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
+    const renderedElements = items
+        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
+        .map((item, index) => {
+        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+            return previous + current.width;
+        }, 0);
+        const isLast = index === items.length;
+        const counterRequired = requiredSpace > availableSpace && counter !== 0;
+        if (isLast && counterRequired) {
+            return (jsx(TagWithWidth, { color: "white", disabled: disabled, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", counter] }) }, item.text + index));
+        }
+        if (isLast) {
+            return null;
+        }
+        const itemCanFit = spaceNeeded <= availableSpace;
+        if (itemCanFit) {
+            return (jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, onClose: e => {
+                    e.stopPropagation();
+                    item.onClick();
+                }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index));
+        }
+        const fromTheItems = item.text !== "";
+        if (fromTheItems) {
+            counter = counter + 1;
+        }
+        return null;
+    })
+        .filter(element => element !== null);
+    return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
+            width: `${width}`,
+        }, children: [renderedElements, postFix] }));
 };
 
-const weekDay = {
-    Monday: "monday",
-    Tuesday: "tuesday",
-    Wednesday: "wednesday",
-    Thursday: "thursday",
-    Friday: "friday",
-    Saturday: "saturday",
-    Sunday: "sunday",
-};
-var ScheduleVariant;
-(function (ScheduleVariant) {
-    ScheduleVariant["ALL_DAYS"] = "all";
-    ScheduleVariant["WEEKDAYS"] = "week";
-    ScheduleVariant["CUSTOM"] = "custom";
-})(ScheduleVariant || (ScheduleVariant = {}));
 /**
- * Parse a string of week range schedule string to human readable schedule range.
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
  *
- * @param {string} scheduleString String of week schedule
- * @returns {WeekSchedule} Week schedule range
+ * @template IsMulti
+ * @template Group
+ * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
+ * @param {boolean} disabled decide to override disabled variant
+ * @param {boolean} menuIsOpen menu is open state
+ * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {string} dataTestId a test id
+ * @param {number} maxSelectedDisplayCount a number of max display count
+ *  @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const parseSchedule = (scheduleString) => {
-    if (!scheduleString) {
-        return {
-            variant: ScheduleVariant.ALL_DAYS,
-            schedule: [],
-        };
-    }
-    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: isAllDay
-                ? undefined
-                : {
-                    timeFrom,
-                    timeTo,
-                },
-            isAllDay,
-        };
-    });
-    const filteredSchedule = schedule
-        .filter(daySchedule => daySchedule.range !== null && daySchedule.range !== undefined)
-        .map(daySchedule => ({ day: daySchedule.day, range: daySchedule.range, isAllDay: daySchedule.isAllDay }));
-    let variant;
-    switch (schedule.length) {
-        case 7:
-            const areEqual = schedule.every((day, _, collection) => {
-                var _a, _b, _c, _d, _e, _f;
-                return ((_b = (_a = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day === null || day === void 0 ? void 0 : day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) &&
-                    ((_e = (_d = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day === null || day === void 0 ? void 0 : day.range) === null || _f === void 0 ? void 0 : _f.timeTo);
-            });
-            if (areEqual) {
-                variant = ScheduleVariant.ALL_DAYS;
-            }
-            else {
-                variant = ScheduleVariant.CUSTOM;
-            }
-            break;
-        case 5:
-            const days = [1, 2, 3, 4, 5];
-            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
-            if (hasConsecutiveDays) {
-                variant = ScheduleVariant.WEEKDAYS;
-            }
-            else {
-                variant = ScheduleVariant.CUSTOM;
-            }
-            break;
-        default:
-            return {
-                variant: ScheduleVariant.CUSTOM,
-                schedule: filteredSchedule,
-            };
-    }
-    return {
-        variant,
-        schedule: filteredSchedule,
-    };
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    const [t] = useTranslation();
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    const customComponents = React.useMemo(() => {
+        return Object.assign({ ValueContainer: props => {
+                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
+                    const PLACEHOLDER_KEY = "placeholder";
+                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
+                    const values = props && props.children ? props.children[0] : [];
+                    const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    const searchInput = props && props.children && props.children[1];
+                    return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
+                                ? tags.map(({ props: tagProps }) => {
+                                    return {
+                                        text: tagProps.children,
+                                        onClick: disabled
+                                            ? undefined
+                                            : (e) => {
+                                                var _a, _b;
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            },
+                                        disabled: disabled,
+                                    };
+                                })
+                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags &&
+                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a, _b;
+                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, onClose: e => {
+                                                var _a, _b;
+                                                e.stopPropagation();
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            }, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                }
+                return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
+            }, LoadingIndicator: props => {
+                return jsx(Spinner, { className: "mt-1.5 mr-1", size: "small" });
+            }, DropdownIndicator: props => {
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
+            }, IndicatorSeparator: () => null, ClearIndicator: props => {
+                if (disabled) {
+                    return null;
+                }
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, onClick: props.clearValue, children: jsx(Icon, { name: "XCircle", size: "medium", title: t("clearIndicator.icon.tooltip.clearAll") }) }) })));
+            }, Control: props => {
+                return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
+            }, SingleValue: props => {
+                return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? "text-slate-700" : "", children: jsx("div", { "data-testid": dataTestId + "-singleValue", children: props.children }) })));
+            }, Menu: props => {
+                return (jsx(components.Menu, Object.assign({}, props, { className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) })));
+            }, Placeholder: props => {
+                return (jsx(components.Placeholder, Object.assign({}, props, { className: "!text-slate-400", children: props.children })));
+            }, MenuList: props => {
+                return (jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
+                            const listEl = e.currentTarget;
+                            if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
+                                props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
+                            }
+                        } }), children: props.children })));
+            }, Option: props => {
+                const componentProps = {
+                    label: props.label,
+                    focused: props.isFocused,
+                    selected: props.isSelected,
+                    onClick: props.innerProps.onClick,
+                };
+                return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }), children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled }))) })));
+            } }, componentsProps);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    return customComponents;
 };
+
 /**
- * Serialize week schedule to string schedule
+ * @template IsMulti
+ * @template Group
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
+ */
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
+    const customStyles = React.useMemo(() => {
+        return Object.assign({ control: base => {
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, marginRight: "2px", backgroundColor: "" });
+            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
+                width: "0px",
+            }), menu: base => {
+                return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
+                return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
+            }, valueContainer: base => {
+                return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
+            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "calc(100% - 2px)", paddingLeft: "2px" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+                return Object.assign(Object.assign({}, base), { padding: "0px" });
+            } }, styles);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refContainer, refPrefix]);
+    return { customStyles };
+};
+
+/**
+ * A hook used by selects to share the common code
  *
- * @param {WeekSchedule} weekSchedule Week schedule range
- * @returns {string} Schedule string
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
  */
-const serializeSchedule = (weekSchedule) => {
-    return weekSchedule.schedule
-        .filter(({ range, day, isAllDay }) => {
-        const hasRange = (range === null || range === void 0 ? void 0 : range.timeFrom) && (range === null || range === void 0 ? void 0 : range.timeTo);
-        switch (weekSchedule.variant) {
-            case ScheduleVariant.WEEKDAYS:
-                return day <= 5 && hasRange;
-            case ScheduleVariant.ALL_DAYS:
-                return day <= 7 && hasRange;
-            case ScheduleVariant.CUSTOM:
-            default:
-                return hasRange || isAllDay;
+const useSelect = (_a) => {
+    var _b;
+    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
+    const refContainer = React__default.useRef(null);
+    const refPrefix = React__default.useRef(null);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
+    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
+    const refMenuIsEnabled = React__default.useRef(true);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const menuPlacement = "auto";
+    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+        onMenuOpen && onMenuOpen();
+        if (refMenuIsEnabled.current) {
+            setMenuIsOpen(true);
         }
-    })
-        .map(({ day, range, isAllDay }) => {
-        if (isAllDay) {
-            return `${day}#00:00-24:00`;
+        else {
+            refMenuIsEnabled.current = true;
         }
-        return `${day}#${range.timeFrom}-${range.timeTo}`;
-    })
-        .join(",");
+    });
+    const closeMenuHandler = () => {
+        setMenuIsOpen(false);
+        onMenuClose && onMenuClose();
+    };
+    const orderedOptions = React__default.useMemo(() => {
+        return disabled
+            ? getOrderedOptions(options, value).map(option => {
+                return Object.assign(Object.assign({}, option), { disabled: true });
+            })
+            : getOrderedOptions(options, value);
+    }, [options, value, disabled]);
+    return {
+        refContainer,
+        refPrefix,
+        customStyles,
+        menuIsOpen,
+        customComponents,
+        menuPlacement,
+        openMenuHandler,
+        closeMenuHandler,
+        orderedOptions,
+    };
 };
 
 /**
- * A thin wrapper around the `BaseInput` component for text input fields.
+ * CreatableSelects are input components used to choose a value from a set.
  *
- * NOTE: If shown with a label, please use the `TextField` component instead.
+ * @param {CreatableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
  */
-const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
-
-const cvaSearch = cvaMerge([
-    "shadow-none",
-    "component-search-borderless",
-    "component-search-background",
-    "hover:component-search-background",
-    "hover:component-search-focus-hover",
-    "focus:component-search-focus-hover",
-    "focus-within:component-search-focus-within",
-    "transition-all",
-    "duration-300",
-], {
-    variants: {
-        border: { true: ["!component-search-border"], false: "" },
-        widenOnFocus: {
-            true: [
-                "component-search-width",
-                "component-search-widen",
-                "hover:component-search-widen",
-                "focus-within:component-search-widen-focus",
-                "focus-within:w-full",
-            ],
-            false: "w-full",
-        },
-    },
-});
+const CreatableSelect = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const creatableSelectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+        allowCreateWhileLoading,
+        onCreateOption,
+    };
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactCreatableSelect, Object.assign({}, propsNoClassName, creatableSelectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
+};
+CreatableSelect.displayName = "CreatableSelect";
 
 /**
- * The Search component is used to render a search input field.
+ * Selects are input components used to choose a value from a set.
  *
- * @param {SearchProps} props - The props for the Search component
- * @returns {JSX.Element} Search component
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
  */
-const Search = forwardRef((_a, ref) => {
-    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
-                onClear();
-            }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
-});
+const Select = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled || readOnly ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus,
+        menuIsOpen: !readOnly ? menuIsOpen : false,
+        openMenuOnClick,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+    };
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
+};
+Select.displayName = "Select";
 
 const FormFieldSelectAdapter = forwardRef((_a, ref) => {
     var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
@@ -2272,6 +2117,101 @@ const UrlField = forwardRef((_a, ref) => {
     return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
+ */
+const usePhoneInput = () => {
+    const getPhoneNumber = ({ country, phone }) => {
+        if (country) {
+            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+        }
+        return phone || "";
+    };
+    return {
+        getPhoneNumber,
+    };
+};
+
+/**
+ * Provides Zod validation schemas with custom validators.
+ *
+ * @returns {object} An object containing various Zod validators.
+ * @example
+ * const { ZodPhoneValidator } = useZodValidators();
+ */
+const useZodValidators = () => {
+    const [t] = useTranslation();
+    const ZodPhoneValidator = z.string().superRefine((phoneNumber, ctx) => {
+        if (!phoneNumber) {
+            return undefined;
+        }
+        const phoneValidationResult = validatePhoneNumber(phoneNumber);
+        if (phoneValidationResult === "REQUIRED") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.REQUIRED"),
+            });
+        }
+        if (phoneValidationResult === "REQUIRED_COUNTRY") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.REQUIRED_COUNTRY"),
+            });
+        }
+        if (phoneValidationResult === "INVALID_NUMBER" || phoneValidationResult === "INVALID_LENGTH") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.INVALID_NUMBER"),
+            });
+        }
+        if (phoneValidationResult === "NOT_A_NUMBER") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.NOT_A_NUMBER"),
+            });
+        }
+        if (phoneValidationResult === "TOO_LONG") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.TOO_LONG"),
+            });
+        }
+        if (phoneValidationResult === "TOO_SHORT") {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: t("phoneField.error.TOO_SHORT"),
+            });
+        }
+    });
+    return useMemo(() => ({ ZodPhoneValidator }), [ZodPhoneValidator]);
+};
+
+/**
+ * Custom hook to get phone number validation rules.
+ *
+ * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
+ * @example
+ * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
+ * const validationRules = getPhoneNumberValidationRules(false);
+ */
+const useGetPhoneValidationRules = () => {
+    const [t] = useTranslation();
+    const getPhoneNumberValidationRules = useCallback((skipValidation = false) => {
+        const defaultRules = {};
+        const pattern = {
+            validate: (value) => {
+                const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
+                return !validationResult || value === "" || value === undefined || value === null || validationResult;
+            },
+        };
+        return !skipValidation
+            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+    }, [t]);
+    return { getPhoneNumberValidationRules };
+};
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -2281,4 +2221,4 @@ const UrlField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };