@trackunit/react-form-components 1.8.121 → 1.8.123

package/index.cjs.js

@@ -12,10 +12,11 @@ var usehooksTs = require('usehooks-ts');
 var parsePhoneNumberFromString = require('libphonenumber-js');
 var ReactSelect = require('react-select');
 var ReactAsyncSelect = require('react-select/async');
+var esToolkit = require('es-toolkit');
+var tailwindMerge = require('tailwind-merge');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var sharedUtils = require('@trackunit/shared-utils');
-var tailwindMerge = require('tailwind-merge');
 var reactHookForm = require('react-hook-form');
 var zod = require('zod');
 
@@ -49,6 +50,8 @@ var defaultTranslations = {
 	"schedule.label.allDay": "All Day",
 	"schedule.label.day": "Day",
 	"search.placeholder": "Search",
+	"select.loadingMessage": "Loading...",
+	"select.noOptionsMessage": "No options found",
 	"urlField.error.INVALID_URL": "Please enter a valid URL",
 	"urlField.error.REQUIRED": "The URL is required"
 };
@@ -434,10 +437,8 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestI
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
-const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
+const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, readOnly = false, disabled = false, ...rest }) => {
     // Derive final flags
-    const renderAsDisabled = Boolean(rest.disabled);
-    const renderAsReadonly = Boolean(rest.readOnly);
     const beforeContainerRef = react.useRef(null);
     const afterContainerRef = react.useRef(null);
     react.useEffect(() => {
@@ -467,19 +468,18 @@ const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, pr
     const innerRef = react.useRef(null);
     react.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxRuntime.jsxs("div", { className: cvaInput$1({
-            disabled: renderAsDisabled,
-            readOnly: renderAsReadonly,
+            disabled: Boolean(disabled),
             invalid: isInvalid,
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, "data-testid": dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { "data-testid": dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": required, className: cvaInputElement({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, "data-testid": dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { "data-testid": dataTestId, disabled: Boolean(disabled), prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": required, className: cvaInputElement({
                     size: fieldSize,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, required: required, style: {
+                }), "data-testid": dataTestId, placeholder: Boolean(disabled) ? undefined : placeholder, ref: innerRef, required: required, style: {
                     paddingLeft: `calc(var(--before-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
                     paddingRight: `calc(var(--after-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
-                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { "data-testid": dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { "data-testid": dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { "data-testid": dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, "data-testid": dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
+                }, type: type, ...rest, disabled: Boolean(disabled), readOnly: Boolean(readOnly) }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { "data-testid": dataTestId + "-disabled", lockReason: disabled }), jsxRuntime.jsx(LockReasonRenderer, { "data-testid": dataTestId + "-readonly", lockReason: Boolean(readOnly) && !Boolean(disabled) ? readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { "data-testid": dataTestId, disabled: Boolean(disabled), isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, "data-testid": dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
 
@@ -652,7 +652,7 @@ const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false
         onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize ?? undefined, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, 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 }) }));
+    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, 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 }) }));
 };
 
 const cvaTextAreaBaseInput = cssClassVarianceUtilities.cvaMerge([
@@ -702,62 +702,54 @@ const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readO
  */
 const TextBaseInput = ({ ref, ...rest }) => jsxRuntime.jsx(BaseInput, { ref: ref, type: "text", ...rest });
 
-const cvaSelect = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "flex",
-    "shadow-sm",
-    "rounded-lg",
-    "border-neutral-300",
-    "hover:border-neutral-400",
-    "hover:bg-neutral-50",
-    "bg-white",
-    "transition",
-    "text-sm",
-    "min-h-0",
-], {
+/**
+ * The container for the select component — with state styling
+ * !This is _the_ place in select styles to manage the aperance of the text and background
+ */
+const cvaSelectContainer = cssClassVarianceUtilities.cvaMerge([cvaInputBase(), "relative", "transition", "min-h-0"], {
     variants: {
         fieldSize: {
-            small: ["h-7", "text-xs"],
-            medium: ["h-8"],
-            large: ["h-10"],
-        },
-        invalid: {
-            true: "border border-red-600 text-red-600 hover:border-red-600",
-            false: "",
+            small: cvaInputBaseSize({ size: "small" }),
+            medium: cvaInputBaseSize({ size: "medium" }),
+            large: cvaInputBaseSize({ size: "large" }),
         },
         disabled: {
-            true: "!bg-neutral-100 hover:border-neutral-300",
+            true: cvaInputBaseDisabled(),
             false: "",
         },
-    },
-    defaultVariants: {
-        invalid: false,
-        disabled: false,
-    },
-});
-const cvaSelectControl = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        isDisabled: {
-            true: "!bg-neutral-100",
+        invalid: {
+            true: cvaInputBaseInvalid(),
             false: "",
         },
-        prefix: {
-            true: ["ps-7"],
+        focused: {
+            true: "outline-native",
             false: "",
         },
-        invalid: {
-            true: "!border-0",
+        readOnly: {
+            true: cvaInputBaseReadOnly(),
             false: "",
         },
-    },
-    defaultVariants: {
-        isDisabled: false,
-        prefix: false,
-        invalid: false,
+        defaultVariants: {
+            invalid: false,
+            disabled: false,
+            fieldSize: "medium",
+            focused: false,
+            readOnly: false,
+        },
     },
 });
-const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
+const cvaSelectControl = cssClassVarianceUtilities.cvaMerge(["px-3", "gap-x-1", "flex", "h-full"]);
+const cvaSelectLoadingMessage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-center"]);
+const cvaSelectNoOptionsMessage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-center"]);
+const cvaSelectDropdownIconContainer = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "cursor-pointer",
+    "place-items-center",
+    "text-neutral-400",
+    "hover:text-neutral-500",
+]);
+const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "text-neutral-400"]);
+const cvaSelectClearIndicator = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "cursor-pointer",
     "items-center",
@@ -765,39 +757,88 @@ const cvaSelectIcon = cssClassVarianceUtilities.cvaMerge([
     "text-neutral-400",
     "hover:text-neutral-500",
 ]);
-const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "absolute", "inset-y-0"], {
+const cvaSelectDropdownIndicator = cssClassVarianceUtilities.cvaMerge(["transition-transform", "duration-200"], {
     variants: {
-        kind: {
-            prefix: ["pl-3", "left-0"],
-            suffix: ["pr-3", "right-0"],
+        menuIsOpen: {
+            true: "rotate-180",
+            false: "rotate-0",
         },
     },
 });
-const cvaSelectXIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-2",
+const cvaSelectValueContainer = cssClassVarianceUtilities.cvaMerge([
     "flex",
-    "cursor-pointer",
+    "flex-nowrap",
     "items-center",
-    "justify-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-    "ml-1",
+    "grow",
+    "overflow-hidden",
+    "relative",
+    "gap-x-1",
 ]);
-const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([], {
+// for the placement of items inside the value container
+const insideValueContainerClasses = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-3", "row-start-1", "row-end-2"]);
+const cvaSelectSingleValue = cssClassVarianceUtilities.cvaMerge([
+    insideValueContainerClasses(),
+    "max-w-full",
+    "overflow-hidden",
+    "text-ellipsis",
+    "whitespace-nowrap",
+]);
+const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenu({ limitWidth: false }), "absolute", "w-full"], {
     variants: {
-        menuIsOpen: {
-            true: "animate-fade-in-fast",
-            false: "animate-fade-out-fast",
+        placement: {
+            bottom: "top-[calc(100%+var(--spacing-1))]",
+            top: "bottom-[calc(-100%+var(--spacing-1))]",
         },
     },
+    defaultVariants: {
+        placement: "bottom",
+    },
 });
-const cvaSelectDynamicTagContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "flex", "gap-1", "items-center"], {
+const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenuList(), "relative", "w-full"]);
+const cvaSelectPlaceholder = cssClassVarianceUtilities.cvaMerge(["absolute", "text-neutral-400"]);
+const cvaSelectIndicatorsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-x-1"]);
+const cvaSelectMultiValue = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
-        visible: { true: "visible", false: "invisible" },
+        hidden: {
+            true: "!hidden",
+            false: "",
+        },
+        invisible: {
+            true: "invisible",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        hidden: false,
     },
 });
-const cvaSelectCounter = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "whitespace-nowrap"]);
-const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "grid", "gap-1"]);
+
+/**
+ * Internal component for displaying a counter badge showing hidden multi-select values.
+ * Used for measurement and display when tags overflow the container.
+ */
+const CounterTag = ({ fieldSize, hiddenCount, totalCount, ref, className, "data-testid": dataTestId, }) => {
+    if (hiddenCount === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge("inline-flex shrink-0", className), color: "neutral", "data-testid": dataTestId ?? "select-counter", ref: ref, size: fieldSize === "small" ? "small" : "medium", children: totalCount > hiddenCount ? `+${hiddenCount}` : hiddenCount }));
+};
+
+/**
+ * Internal component for rendering multi-select values with measurement support.
+ * Uses the measurement state to determine if the value should be displayed or hidden based on available width.
+ */
+const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, ref, "data-testid": dataTestId, }) => {
+    const optionPrefix = getOptionPrefix ? getOptionPrefix(data) : null;
+    const handleOnClose = (e) => {
+        if (disabled) {
+            return;
+        }
+        e.stopPropagation();
+        onClose?.(e);
+    };
+    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className, "shrink-0", "inline-flex"), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
+};
 
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
@@ -1030,13 +1071,13 @@ Checkbox.displayName = "Checkbox";
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, fieldSize = "medium", }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
             ? react.cloneElement(optionPrefix, {
                 className: "mr-1 flex items-center",
                 size: "medium",
             })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1047,7 +1088,7 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, "data-t
 const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
-            onClick && onClick(e);
+            onClick?.(e);
         }, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
             ? react.cloneElement(optionPrefix, {
                 className: "mr-1 flex items-center",
@@ -1059,542 +1100,778 @@ const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid":
 };
 
 /**
- * Extended Tag component with information about its own width.
- * Used in the select component.
+ * Custom hook to measure the geometry of multiple elements indexed by number.
+ * Similar to useMeasure but handles multiple elements efficiently with a single ResizeObserver.
  *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} TagWithWidth component
- */
-const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
-    const ref = react.useRef(null);
-    react.useLayoutEffect(() => {
-        onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
-    }, [ref, onWidthKnown]);
-    return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, icon: react.isValidElement(rest.icon) ? react.cloneElement(rest.icon, { size: "small" }) : rest.icon, children: children }));
-};
-
-/**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
- *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {ReactElement} TagsContainer
- */
-const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
-    const containerRef = react.useRef(null);
-    const [isReady, setIsReady] = react.useState(false);
-    const [counterWidth, setCounterWidth] = react.useState(0);
-    const [availableSpaceWidth, setAvailableSpaceWidth] = react.useState(0);
-    const [childrenWidths, setChildrenWidths] = react.useState([]);
-    const itemsCount = items.length;
-    const dimensions = reactComponents.useResize();
-    const { width: windowWidth } = reactComponents.useDebounce(dimensions, { delay: 100 });
+ * @param {UseMultiMeasureOptions} options - Configuration options
+ * @returns {UseMultiMeasureResult} An object containing `geometries` Map and `getRef` function to create refs
+ * @example
+ * ```tsx
+ * const { geometries, getRef } = useMultiMeasure({
+ *   onChange: (geometries) => console.log('Geometries changed', geometries)
+ * });
+ * return items.map((item, index) => (
+ *   <div key={index} ref={getRef(index)}>Item {index}</div>
+ * ));
+ * ```
+ */
+const useMultiMeasure = ({ skip = false, onChange } = {}) => {
+    const [geometries, setGeometries] = react.useState(new Map());
+    const [elementCount, setElementCount] = react.useState(0); // Track element count to trigger useLayoutEffect
+    const elementsRef = react.useRef(new Map());
+    const observerRef = react.useRef(null);
+    const onChangeRef = react.useRef(onChange);
+    const refCallbacksRef = react.useRef(new Map());
+    const updateScheduledRef = react.useRef(false);
     react.useEffect(() => {
-        const containerWidth = containerRef.current?.offsetWidth || 0;
-        setAvailableSpaceWidth(containerWidth);
-    }, [windowWidth]);
-    const onWidthKnownHandler = react.useCallback(({ width: reportedWidth }) => {
-        setChildrenWidths(prev => {
-            const next = [...prev, { width: reportedWidth + itemsGap }];
-            if (next.length === itemsCount) {
-                setIsReady(true);
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Update geometries for all currently tracked elements
+    const updateAllGeometries = react.useCallback(() => {
+        // Batch multiple rapid calls (like during unmount/remount) into a single update
+        if (updateScheduledRef.current) {
+            return;
+        }
+        updateScheduledRef.current = true;
+        queueMicrotask(() => {
+            updateScheduledRef.current = false;
+            const newGeometries = new Map();
+            elementsRef.current.forEach((element, index) => {
+                const rect = element.getBoundingClientRect();
+                newGeometries.set(index, {
+                    width: rect.width,
+                    height: rect.height,
+                    top: rect.top,
+                    bottom: rect.bottom,
+                    left: rect.left,
+                    right: rect.right,
+                    x: rect.x,
+                    y: rect.y,
+                });
+            });
+            setGeometries(prevGeometries => {
+                if (esToolkit.isEqual(prevGeometries, newGeometries)) {
+                    return prevGeometries;
+                }
+                onChangeRef.current?.(newGeometries);
+                return newGeometries;
+            });
+        });
+    }, []);
+    // Measure elements after they're mounted (useLayoutEffect runs synchronously after DOM updates)
+    react.useLayoutEffect(() => {
+        if (skip || elementsRef.current.size === 0) {
+            return;
+        }
+        // Initial synchronous measurement - this runs in the same render cycle, so tests don't need waitFor
+        const newGeometries = new Map();
+        elementsRef.current.forEach((element, index) => {
+            const rect = element.getBoundingClientRect();
+            newGeometries.set(index, {
+                width: rect.width,
+                height: rect.height,
+                top: rect.top,
+                bottom: rect.bottom,
+                left: rect.left,
+                right: rect.right,
+                x: rect.x,
+                y: rect.y,
+            });
+        });
+        setGeometries(prevGeometries => {
+            if (esToolkit.isEqual(prevGeometries, newGeometries)) {
+                return prevGeometries;
             }
-            return next;
+            onChangeRef.current?.(newGeometries);
+            return newGeometries;
         });
-    }, [itemsCount, itemsGap]);
-    const renderedElements = react.useMemo(() => {
-        const requiredSpace = childrenWidths.reduce((previous, current) => {
-            return previous + current.width;
-        }, 0);
-        const availableSpace = availableSpaceWidth - counterWidth;
-        const { elements } = items
-            .concat({ text: "", onClick: () => null, disabled: false })
-            .reduce((acc, item, index) => {
-            const spaceNeeded = childrenWidths.slice(0, index + 1).reduce((previous, current) => {
-                return previous + current.width;
-            }, 0);
-            const isLast = index === items.length;
-            const counterRequired = requiredSpace > availableSpace && acc.counter !== 0;
-            if (isLast && counterRequired) {
-                return {
-                    ...acc,
-                    elements: [
-                        ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { color: "white", disabled: disabled, icon: item.Icon, onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), children: jsxRuntime.jsxs("div", { className: cvaSelectCounter(), "data-testid": "select-counter", children: ["+", acc.counter] }) }, item.text + index),
-                    ],
-                };
+    }, [skip, elementCount]);
+    // Set up ResizeObserver for subsequent changes
+    react.useEffect(() => {
+        if (skip) {
+            return;
+        }
+        if (observerRef.current !== null) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        const observer = new ResizeObserver(() => {
+            updateAllGeometries();
+        });
+        // Observe all current elements
+        elementsRef.current.forEach(element => {
+            observer.observe(element);
+        });
+        observerRef.current = observer;
+        return () => {
+            if (observerRef.current !== null) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
             }
-            if (isLast) {
-                return acc;
+        };
+    }, [skip, updateAllGeometries]);
+    // Create stable ref callbacks per index
+    const getRef = react.useCallback((index) => {
+        const existing = refCallbacksRef.current.get(index);
+        if (existing) {
+            return existing;
+        }
+        const callback = (el) => {
+            if (el) {
+                elementsRef.current.set(index, el);
+                // Observe this new element
+                if (!skip && observerRef.current) {
+                    observerRef.current.observe(el);
+                }
+                // Trigger re-render to measure new element
+                setElementCount(elementsRef.current.size);
             }
-            const itemCanFit = spaceNeeded <= availableSpace;
-            if (itemCanFit) {
-                return {
-                    ...acc,
-                    elements: [
-                        ...acc.elements,
-                        jsxRuntime.jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", "data-testid": `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
-                                e.stopPropagation();
-                                item.onClick();
-                            }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
-                    ],
-                };
+            else {
+                elementsRef.current.delete(index);
+                // Trigger re-render to update measurements
+                setElementCount(elementsRef.current.size);
+            }
+        };
+        refCallbacksRef.current.set(index, callback);
+        return callback;
+    }, [skip]);
+    return { geometries, getRef };
+};
+
+const DEFAULT_STATE = {
+    phase: "uninitialized",
+    visibleCount: 0,
+    totalCount: 0,
+    withCounter: false,
+    multiValueGeometries: new Map(),
+    availableWidthForTags: 0,
+};
+const RESERVED_TEXT_INPUT_WIDTH = 40;
+const GAP_BEFORE_COUNTER = 4;
+const GAP_BEFORE_TEXT_INPUT = 4;
+const measurementReducer = (state, action) => {
+    switch (action.type) {
+        case "UPDATE_GEOMETRIES": {
+            // Only reset phase if the count meaningfully changed from the last completed measurement
+            // Don't reset for hide/show cycles (0 size) - only when actual values added/removed
+            const meaningfulCountChange = action.geometries.size > 0 && action.geometries.size !== state.totalCount;
+            return {
+                ...state,
+                multiValueGeometries: action.geometries,
+                phase: meaningfulCountChange ? "measuring" : state.phase,
+            };
+        }
+        case "SET_AVAILABLE_WIDTH_FOR_TAGS": {
+            // Only update if we have a valid width - prevents temporary 0-width states from breaking measurement
+            const newWidth = action.availableWidthForTags > 0 ? action.availableWidthForTags : state.availableWidthForTags;
+            // If width didn't actually change, don't update state
+            if (newWidth === state.availableWidthForTags) {
+                return state;
             }
             return {
-                elements: acc.elements,
-                counter: item.text !== "" ? acc.counter + 1 : acc.counter,
+                ...state,
+                availableWidthForTags: newWidth,
+                phase: "measuring",
             };
-        }, { elements: [], counter: 0 });
-        return elements;
-    }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
-    return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
-            width: `${width}`,
-        }, children: [preFix, renderedElements, postFix] }));
+        }
+        case "SET_MEASUREMENTS": {
+            return {
+                ...state,
+                phase: action.phase,
+                visibleCount: action.visibleCount,
+                totalCount: action.totalCount,
+                withCounter: action.withCounter,
+            };
+        }
+        case "RESET": {
+            return DEFAULT_STATE;
+        }
+        case "CHANGE_PHASE": {
+            return {
+                ...state,
+                phase: action.phase,
+            };
+        }
+        default: {
+            throw new Error(`${action} is not known`);
+        }
+    }
+};
+/**
+ * Hook to manage multi-value overflow detection and rendering.
+ * Measures which values fit in the container and determines when to show a counter.
+ */
+const useMultiValueOverflow = ({ skip = false }) => {
+    const [measurementState, dispatch] = react.useReducer(measurementReducer, DEFAULT_STATE);
+    const { ref: setValueContainerRef, geometry: containerGeometry } = reactComponents.useMeasure({
+        skip: skip || measurementState.multiValueGeometries.size === 0,
+    });
+    const { ref: setCounterRef } = reactComponents.useMeasure({
+        skip: skip || measurementState.multiValueGeometries.size === 0,
+    });
+    const { ref: setFakeCounterRef, geometry: fakeCounterGeometry } = reactComponents.useMeasure({
+        skip: skip || measurementState.multiValueGeometries.size === 0,
+    });
+    const [menuElement, setMenuElement] = react.useState(null);
+    const setMenuRef = react.useCallback((element) => {
+        setMenuElement(element);
+    }, []);
+    const menuIsOpen = menuElement !== null;
+    const { getRef: setGeometryRef } = useMultiMeasure({
+        skip,
+        onChange: geometries => {
+            dispatch({ type: "UPDATE_GEOMETRIES", geometries });
+        },
+    });
+    const availableWidthForTags = react.useMemo(() => {
+        if (!containerGeometry || skip) {
+            return 0;
+        }
+        const reservedInputWidth = menuIsOpen ? RESERVED_TEXT_INPUT_WIDTH : 0;
+        let availableWidth = containerGeometry.width - reservedInputWidth - GAP_BEFORE_TEXT_INPUT;
+        if (measurementState.phase === "measuring-with-counter") {
+            availableWidth -= (fakeCounterGeometry?.width ?? 0) + GAP_BEFORE_COUNTER;
+        }
+        return Math.max(0, availableWidth);
+    }, [containerGeometry, fakeCounterGeometry?.width, measurementState.phase, menuIsOpen, skip]);
+    reactComponents.useDebounce(availableWidthForTags, {
+        onBounce: debouncedAvailableWidthForTags => {
+            dispatch({ type: "SET_AVAILABLE_WIDTH_FOR_TAGS", availableWidthForTags: debouncedAvailableWidthForTags });
+        },
+        delay: 60,
+    });
+    // Measurement logic
+    react.useLayoutEffect(() => {
+        if (skip) {
+            return;
+        }
+        const hasInvalidMultiItemGeometry = Array.from(measurementState.multiValueGeometries.values()).some(
+        // Don't measure if any geometry has invalid dimensions (not yet laid out)
+        geo => geo.width === 0 || geo.height === 0);
+        if (!containerGeometry ||
+            containerGeometry.width === 0 ||
+            measurementState.multiValueGeometries.size === 0 ||
+            measurementState.availableWidthForTags <= 0 ||
+            hasInvalidMultiItemGeometry) {
+            // Early return
+            return;
+        }
+        const totalCount = measurementState.multiValueGeometries.size;
+        switch (measurementState.phase) {
+            case "uninitialized": {
+                dispatch({ type: "CHANGE_PHASE", phase: "measuring" });
+                break;
+            }
+            case "measuring": {
+                const visibleCount = getVisibleCountFromGeometries({
+                    geometries: measurementState.multiValueGeometries,
+                    availableWidth: measurementState.availableWidthForTags,
+                    containerX: containerGeometry.x,
+                    totalCount,
+                });
+                if (visibleCount === totalCount) {
+                    dispatch({ type: "SET_MEASUREMENTS", totalCount, visibleCount, withCounter: false, phase: "complete" });
+                }
+                else {
+                    dispatch({
+                        type: "SET_MEASUREMENTS",
+                        totalCount,
+                        visibleCount,
+                        withCounter: true,
+                        phase: "measuring-with-counter",
+                    });
+                }
+                break;
+            }
+            case "measuring-with-counter": {
+                if (!fakeCounterGeometry || fakeCounterGeometry.width === 0) {
+                    // Wait another render cycle for the fake counter to be measured
+                    return;
+                }
+                const visibleCount = getVisibleCountFromGeometries({
+                    geometries: measurementState.multiValueGeometries,
+                    availableWidth: measurementState.availableWidthForTags,
+                    containerX: containerGeometry.x,
+                    totalCount,
+                });
+                dispatch({ type: "SET_MEASUREMENTS", totalCount, visibleCount, withCounter: true, phase: "complete" });
+                break;
+            }
+            case "complete": {
+                break;
+            }
+            default: {
+                throw new Error(`${measurementState.phase} is not known`);
+            }
+        }
+    }, [
+        containerGeometry,
+        containerGeometry?.width,
+        fakeCounterGeometry,
+        fakeCounterGeometry?.width,
+        measurementState,
+        measurementState.phase,
+        measurementState.totalCount,
+        measurementState.visibleCount,
+        skip,
+    ]);
+    // Store current values in a ref so getter functions can stay stable
+    const valuesRef = react.useRef({
+        visibleCount: measurementState.visibleCount,
+        totalCount: measurementState.totalCount,
+        withCounter: measurementState.withCounter,
+        isComplete: measurementState.phase === "complete",
+    });
+    // Use state setter to trigger rerenders when values change
+    // The setter itself is stable, but calling it triggers a rerender
+    const [, setVersion] = react.useState(0);
+    // Update ref and trigger rerender when state changes
+    react.useEffect(() => {
+        valuesRef.current = {
+            visibleCount: measurementState.visibleCount,
+            totalCount: measurementState.totalCount,
+            withCounter: measurementState.withCounter,
+            isComplete: measurementState.phase === "complete",
+        };
+        // Trigger rerender so components can read new values from getters
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setVersion(prev => prev + 1);
+    }, [
+        measurementState.visibleCount,
+        measurementState.totalCount,
+        measurementState.withCounter,
+        measurementState.phase,
+    ]);
+    // Create stable getter functions that read from the ref
+    // These functions stay stable (same reference) but always return the latest values
+    const getVisibleCount = react.useCallback(() => valuesRef.current.visibleCount, []);
+    const getTotalCount = react.useCallback(() => valuesRef.current.totalCount, []);
+    const getCounterWidth = react.useCallback(() => valuesRef.current.withCounter, []);
+    const getIsComplete = react.useCallback(() => valuesRef.current.isComplete, []);
+    return react.useMemo(() => ({
+        setValueContainerRef,
+        setCounterRef,
+        setFakeCounterRef,
+        setGeometryRef,
+        setMenuRef,
+        getVisibleCount,
+        getTotalCount,
+        getCounterWidth,
+        getIsComplete,
+    }), [
+        setValueContainerRef,
+        setCounterRef,
+        setFakeCounterRef,
+        setGeometryRef,
+        setMenuRef,
+        getVisibleCount,
+        getTotalCount,
+        getCounterWidth,
+        getIsComplete,
+    ]);
+};
+const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX, totalCount, }) => {
+    const firstGeometry = geometries.get(0);
+    if (firstGeometry === undefined) {
+        throw new Error("First multiValue geometry is not available, this should never happen");
+    }
+    let visibleCount = 0;
+    for (let i = 0; i < totalCount; i++) {
+        const geometry = geometries.get(i);
+        if (geometry === undefined) {
+            throw new Error(`MultiValue geometry at index ${i} is not available, this should never happen`);
+        }
+        const distanceFromFirst = geometry.x + geometry.width - containerX;
+        const fits = distanceFromFirst <= availableWidth;
+        if (fits) {
+            visibleCount = i + 1; //+1 because we want to count, not get the index
+        }
+    }
+    return visibleCount;
 };
 
 /**
  * A hook to retrieve components override object.
  * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
  *
- * @template IsMulti
- * @template Group
- * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
- * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsOpen menu is open state
- * @param {string} dataTestId a test id
- * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {boolean} hasError decide to override hasError variant
- * @param {ReactNode} prefix a prefix element
- * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
- */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, "data-testid": dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
+ * @template TOption
+ * @template TIsMulti
+ * @template TGroup
+ * @param {CustomComponentsProps<TOption>} props - The custom components props
+ * @returns {Partial<SelectComponents<TOption, TIsMulti, TGroup>>} components object to override react-select default components
+ */
+const useCustomComponents = ({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize = "medium", getOptionLabelDescription, getOptionPrefix, className, isMulti, //prefer using the component prop (ala. selectValueContainer.isMulti) inside of customComponents instead of this one.
+autoComplete, // see https://github.com/JedWatson/react-select/issues/758
+ }) => {
     const [t] = useTranslation();
+    const { setValueContainerRef, setCounterRef, setFakeCounterRef, setGeometryRef, setMenuRef, getVisibleCount, getTotalCount, getCounterWidth, getIsComplete, } = useMultiValueOverflow({ skip: !isMulti });
+    const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    // Component functions stay stable (reading from refs), so react-select won't lose focus
     const customComponents = react.useMemo(() => {
         return {
-            ValueContainer: props => {
-                if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
-                    const PLACEHOLDER_KEY = "placeholder";
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const key = props && props.children && props.children[0] ? props.children[0]?.key : "";
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const values = props && props.children ? props.children[0] : [];
-                    const tags = key === PLACEHOLDER_KEY ? [] : values;
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const searchInput = props && props.children && props.children[1];
-                    const placeholderElement = Array.isArray(props.children)
-                        ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
-                        : null;
-                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
-                                ? tags.map(({ props: tagProps }) => {
-                                    const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
-                                    return {
-                                        text: tagProps.children,
-                                        onClick: disabled
-                                            ? undefined
-                                            : (e) => {
-                                                setMenuIsEnabled(false);
-                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            },
-                                        disabled: disabled,
-                                        Icon: optionPrefix,
-                                    };
-                                })
-                                : [], postFix: searchInput, preFix: placeholderElement ? jsxRuntime.jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
-                                    ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", "data-testid": tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
-                                                e.stopPropagation();
-                                                setMenuIsEnabled(false);
-                                                tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            }, children: tagProps.children }, tagProps.children?.toString()));
-                                    })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", "data-testid": "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
-                }
-                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
+            SelectContainer: selectContainer => {
+                return (jsxRuntime.jsx(ReactSelect.components.SelectContainer, { ...selectContainer, className: cvaSelectContainer({
+                        invalid: hasError,
+                        fieldSize,
+                        disabled: Boolean(disabled),
+                        className: [className, selectContainer.className],
+                        readOnly: Boolean(readOnly),
+                        focused: selectContainer.isFocused,
+                    }), getStyles: getNoStyles, innerProps: {
+                        ...selectContainer.innerProps,
+                        ...(dataTestId ? { "data-testid": dataTestId } : {}),
+                    }, children: selectContainer.children }));
+            },
+            Control: selectControl => {
+                return (jsxRuntime.jsxs(ReactSelect.components.Control, { ...selectControl, className: cvaSelectControl({
+                        className: selectControl.className,
+                    }), getStyles: getNoStyles, innerProps: Boolean(readOnly)
+                        ? // We omit the onMouseDown and onTouchEnd events to allow text selection
+                            esToolkit.omit(selectControl.innerProps, ["onMouseDown", "onTouchEnd"])
+                        : selectControl.innerProps, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, selectControl.children, typeof disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-disabled-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...disabled }) })) : null, typeof readOnly === "object" && !Boolean(disabled) ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix(), "data-testid": dataTestId ? `${dataTestId}-readonly-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...readOnly }) })) : null] }));
+            },
+            Placeholder: selectPlaceholder => {
+                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...selectPlaceholder, className: cvaSelectPlaceholder({ className: selectPlaceholder.className }), getStyles: getNoStyles, children: selectPlaceholder.children }));
             },
-            LoadingIndicator: () => {
-                return jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: "mr-2", size: "small" });
+            LoadingIndicator: selectLoadingIndicator => {
+                return jsxRuntime.jsx(reactComponents.Spinner, { ...selectLoadingIndicator.innerProps, centering: "vertically", size: "small" });
             },
-            DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: icon }) }));
+            DropdownIndicator: selectDropdownIndicator => {
+                if (!interactable || selectDropdownIndicator.selectProps.isLoading) {
+                    return null;
+                }
+                return (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...selectDropdownIndicator, className: cvaSelectDropdownIconContainer({ className: selectDropdownIndicator.className }), getStyles: getNoStyles, children: jsxRuntime.jsx(reactComponents.Icon, { className: cvaSelectDropdownIndicator({ menuIsOpen: selectDropdownIndicator.selectProps.menuIsOpen }), name: "ChevronDown", size: "medium" }) }));
+            },
+            // --------------------------------
+            // Inside Popover👇
+            // --------------------------------
+            ValueContainer: selectValueContainer => {
+                // Read latest overflow values using getters (functions stay stable)
+                const currentVisibleCount = getVisibleCount();
+                const currentTotalCount = getTotalCount();
+                const currentWithCounter = getCounterWidth();
+                const currentIsComplete = getIsComplete();
+                return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...selectValueContainer, className: cvaSelectValueContainer({ className: selectValueContainer.className }), getStyles: getNoStyles, innerProps: {
+                        ...selectValueContainer.innerProps,
+                        ref: reactComponents.useMergeRefs([setValueContainerRef, selectValueContainer.innerProps?.ref]),
+                    }, children: selectValueContainer.isMulti ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getPlaceholderElement(selectValueContainer.children), currentWithCounter && !currentIsComplete ? (
+                            // Render the test-counter-tag in the beginning to make sure it's included in the calculation
+                            // will be removed when the calculation is complete
+                            jsxRuntime.jsx(CounterTag, { className: "invisible" // Is invisible because we're only putting it here to measure the width
+                                , "data-testid": "fake-multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setFakeCounterRef, totalCount: currentTotalCount })) : null, getMultiValueComponents(selectValueContainer.children), currentWithCounter && currentIsComplete ? (
+                            // This is the actual tag that will be visible in the UI
+                            jsxRuntime.jsx(CounterTag, { "data-testid": dataTestId ? `${dataTestId}-multiselect-counter` : "multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setCounterRef, totalCount: currentTotalCount })) : null, getInputComponent(selectValueContainer.children)] })) : (selectValueContainer.children) }));
             },
             IndicatorSeparator: () => null,
-            ClearIndicator: props => {
-                if (disabled) {
+            Input: selectInput => {
+                return jsxRuntime.jsx(ReactSelect.components.Input, { ...selectInput, autoComplete: autoComplete });
+            },
+            IndicatorsContainer: selectIndicatorsContainer => {
+                return (jsxRuntime.jsx(ReactSelect.components.IndicatorsContainer, { ...selectIndicatorsContainer, className: cvaSelectIndicatorsContainer({ className: selectIndicatorsContainer.className }), getStyles: getNoStyles, children: selectIndicatorsContainer.children }));
+            },
+            ClearIndicator: selectClearIndicator => {
+                if (Boolean(disabled)) {
                     return null;
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...props, innerProps: {
-                        ...props.innerProps,
-                        onMouseDown: e => {
-                            e.preventDefault();
-                        },
-                    }, children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), "data-testid": dataTestId ? `${dataTestId}-XMarkIcon` : null, onClick: props.clearValue, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) }));
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, { ...selectClearIndicator, className: cvaSelectClearIndicator({ className: selectClearIndicator.className }), getStyles: getNoStyles, children: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("clearIndicator.icon.tooltip.clearAll"), "data-testid": `${dataTestId}-XMarkIcon`, name: "XCircle", size: "medium" }) }));
             },
-            Control: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Control, { ...props, className: cvaSelectControl({
-                        isDisabled: props.isDisabled,
-                        prefix: prefix ? true : false,
-                        invalid: hasError,
-                    }) }));
+            LoadingMessage: selectLoadingMessage => {
+                return (jsxRuntime.jsx(ReactSelect.components.LoadingMessage, { ...selectLoadingMessage, className: cvaSelectLoadingMessage({ className: selectLoadingMessage.className }), getStyles: getNoStyles, children: t("select.loadingMessage") }));
+            },
+            NoOptionsMessage: selectNoOptionsMessage => {
+                return (jsxRuntime.jsx(ReactSelect.components.NoOptionsMessage, { ...selectNoOptionsMessage, className: cvaSelectNoOptionsMessage({ className: selectNoOptionsMessage.className }), getStyles: getNoStyles, children: t("select.noOptionsMessage") }));
+            },
+            SingleValue: selectSingleValue => {
+                const optionPrefix = getOptionPrefix ? getOptionPrefix(selectSingleValue.data) : null;
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...selectSingleValue, className: cvaSelectSingleValue({
+                        className: selectSingleValue.className,
+                    }), getStyles: getNoStyles, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, selectSingleValue.children, getOptionLabelDescription && getOptionLabelDescription(selectSingleValue.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(selectSingleValue.data), ")"] })) : null] }) }));
             },
-            SingleValue: props => {
-                const optionPrefix = getOptionPrefix ? getOptionPrefix(props.data) : null;
-                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-neutral-700" : "", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "data-testid": dataTestId + "-singleValue", children: [optionPrefix !== null ? optionPrefix : null, props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
+            MultiValueContainer: ({ children }) => children, // Just pass on the children
+            MultiValueRemove: () => null, // is built-in to the MultiValue (tag) component
+            MultiValueLabel: ({ children }) => children, // Just pass on the children
+            MultiValue: selectMultiValue => {
+                // Read latest overflow values using getters (functions stay stable)
+                const currentVisibleCount = getVisibleCount();
+                const currentWithCounter = getCounterWidth();
+                const currentIsComplete = getIsComplete();
+                const index = selectMultiValue.index;
+                return (jsxRuntime.jsx(ReactSelect.components.MultiValue, { ...selectMultiValue, getStyles: getNoStyles, children: jsxRuntime.jsx(MultiValue, { className: cvaSelectMultiValue({
+                            hidden: currentIsComplete && index + 1 > currentVisibleCount, // Hide if doesn't fit
+                            invisible: currentWithCounter && !currentIsComplete, // Make invisible if measuring with counter. When there's a counter, it would otherwise briefly change layout to make room for the "fake" counter
+                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), children: selectMultiValue.children }) }));
             },
-            Menu: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
+            Menu: selectMenu => {
+                return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
+                        ...selectMenu.innerProps,
+                        ref: reactComponents.useMergeRefs([setMenuRef, selectMenu.innerProps.ref]),
+                    } }));
             },
-            Placeholder: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.Placeholder, { ...props, className: "!text-neutral-400", children: props.children }));
+            MenuPortal: selectMenuPortal => {
+                return (jsxRuntime.jsx(ReactSelect.components.MenuPortal, { ...selectMenuPortal, className: "!z-overlay", children: selectMenuPortal.children }));
             },
-            MenuList: props => {
-                return (jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, innerProps: {
-                        ...props.innerProps,
+            MenuList: selectMenuList => {
+                return (jsxRuntime.jsx(ReactSelect.components.MenuList, { className: cvaSelectMenuList({
+                        className: selectMenuList.className,
+                    }), ...selectMenuList, getStyles: getNoStyles, innerProps: {
+                        ...selectMenuList.innerProps,
                         onScroll: e => {
                             const listEl = e.currentTarget;
                             if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight &&
-                                props.selectProps.onMenuScrollToBottom) {
-                                /Firefox/.test(navigator.userAgent)
-                                    ? props.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"))
-                                    : props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
+                                selectMenuList.selectProps.onMenuScrollToBottom) {
+                                if (/Firefox/.test(navigator.userAgent)) {
+                                    selectMenuList.selectProps.onMenuScrollToBottom(new WheelEvent("scroll"));
+                                }
+                                else {
+                                    selectMenuList.selectProps.onMenuScrollToBottom(new TouchEvent(""));
+                                }
                             }
                         },
-                    }, children: props.children }));
+                    }, children: selectMenuList.children }));
             },
-            Option: props => {
+            Option: selectOption => {
                 const componentProps = {
-                    label: props.label,
-                    focused: props.isFocused,
-                    selected: props.isSelected,
-                    onClick: props.innerProps.onClick,
+                    label: selectOption.label,
+                    focused: selectOption.isFocused,
+                    selected: selectOption.isSelected,
+                    onClick: selectOption.innerProps.onClick,
                 };
-                return (jsxRuntime.jsx(ReactSelect.components.Option, { ...props, innerProps: {
-                        ...props.innerProps,
+                return (jsxRuntime.jsx(ReactSelect.components.Option, { ...selectOption, innerProps: {
+                        ...selectOption.innerProps,
                         role: "option",
-                        onClick: () => { },
-                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
+                    }, children: selectOption.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled) || selectOption.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
             },
-            ...componentsProps,
         };
     }, [
-        componentsProps,
-        maxSelectedDisplayCount,
+        hasError,
+        fieldSize,
         disabled,
-        setMenuIsEnabled,
+        className,
         readOnly,
         dataTestId,
-        t,
         prefix,
-        hasError,
-        getOptionLabelDescription,
-        fieldSize,
+        interactable,
+        getVisibleCount,
+        getTotalCount,
+        getCounterWidth,
+        getIsComplete,
+        setValueContainerRef,
+        setFakeCounterRef,
+        setCounterRef,
+        autoComplete,
+        t,
         getOptionPrefix,
+        getOptionLabelDescription,
+        setGeometryRef,
+        setMenuRef,
     ]);
     return customComponents;
 };
-
-/**
- * @template IsMulti
- * @template Group
- * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
- * @returns {StylesConfig<Option, boolean>} styles to override in select
- */
-const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = react.useMemo(() => {
-        return {
-            control: base => {
-                return {
-                    ...base,
-                    minHeight: fieldSize === "small" ? "28px" : fieldSize === "large" ? "40px" : "32px",
-                    borderRadius: "var(--border-radius-lg)",
-                    backgroundColor: "inherit",
-                };
-            },
-            singleValue: base => ({
-                ...base,
-            }),
-            multiValue: base => ({
-                ...base,
-            }),
-            multiValueLabel: base => ({
-                ...base,
-            }),
-            indicatorsContainer: base => ({
-                ...base,
-                ...(disabled && { display: "none" }),
-            }),
-            indicatorSeparator: () => ({
-                width: "0px",
-            }),
-            menu: base => {
-                return {
-                    ...base,
-                    width: "100%",
-                    marginTop: "4px",
-                    marginBottom: "18px",
-                    transition: "all 1s ease-in-out",
-                };
-            },
-            input: base => ({
-                ...base,
-                marginLeft: "0px",
-            }),
-            placeholder: base => ({
-                ...base,
-            }),
-            option: () => ({}),
-            menuPortal: base => ({
-                ...base,
-                width: refContainer.current ? `${refContainer.current.clientWidth}px` : base.width,
-                backgroundColor: "#ffffff",
-                borderRadius: "var(--border-radius-lg)",
-                zIndex: "var(--z-overlay)",
-                borderColor: "rgb(var(--color-neutral-300))",
-                boxShadow: "var(--tw-ring-inset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
-            }),
-            menuList: base => {
-                return {
-                    ...base,
-                    position: "relative",
-                    padding: "var(--spacing-1)",
-                    display: "grid",
-                    gap: "var(--spacing-1)",
-                    width: "100%",
-                    borderRadius: "0px",
-                    boxShadow: "none",
-                    paddingTop: "0px",
-                };
-            },
-            valueContainer: base => {
-                return {
-                    ...base,
-                    paddingBlock: 0,
-                    flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap",
-                    gap: "0.25rem",
-                };
-            },
-            container: base => ({
-                ...base,
-                width: "100%",
-            }),
-            dropdownIndicator: base => ({
-                ...base,
-                padding: "0px",
-            }),
-            clearIndicator: base => {
-                return {
-                    ...base,
-                    padding: "0px",
-                };
-            },
-            ...styles,
-        };
-    }, [refContainer, disabled, fieldSize, maxSelectedDisplayCount, styles]);
-    return { customStyles };
+const getNoStyles = () => {
+    // To prevent the default styles from being applied from react-select.
+    return {};
+};
+const getInputComponent = (children) => {
+    return Array.isArray(children)
+        ? children.find(child => child !== null && child !== undefined && /react-select-\d+-input/.test(child?.props?.id))
+        : null;
+};
+const getMultiValueComponents = (children) => {
+    if (!Array.isArray(children)) {
+        return null;
+    }
+    // Only return if children[0] is an array (the multiValue array)
+    return Array.isArray(children[0]) ? children[0] : null;
+};
+const getPlaceholderElement = (children) => {
+    return Array.isArray(children)
+        ? children.find(child => child !== null && child !== undefined && child.key === "placeholder")
+        : null;
 };
 
 /**
  * A hook used by selects to share the common code
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {UseSelectProps} Select component
- */
-const useSelect = ({ id, className, "data-testid": dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize = "medium", ...props }) => {
-    const refContainer = react.useRef(document.createElement("div"));
-    const { customStyles } = useCustomStyles({
-        refContainer,
-        maxSelectedDisplayCount,
-        styles,
-        disabled: Boolean(disabled),
-        fieldSize,
-    });
-    const [menuIsOpen, setMenuIsOpen] = react.useState(props.menuIsOpen ?? false);
-    const [menuIsEnabled, setMenuIsEnabled] = react.useState(true);
+ * @returns {ReactSelectProps} Props for react-select component
+ */
+const useSelect = ({ disabled = false, //renaming to isDisabled, so not directly passed to react-select
+"data-testid": dataTestId, 
+// Extract critical props that must trigger recalculation when they change
+onMenuOpen, onMenuClose, options, value, onChange, defaultValue, 
+// restProps are pur in a ref to keep dependencies stable while always having the latest values
+// See explanation on restPropsRef below for more details 👇
+...restProps }) => {
     const customComponents = useCustomComponents({
-        componentsProps: components,
-        disabled: Boolean(disabled),
-        readOnly: Boolean(props.readOnly),
-        setMenuIsEnabled,
-        "data-testid": dataTestId,
-        maxSelectedDisplayCount,
-        prefix,
-        hasError,
-        fieldSize,
-        getOptionLabelDescription,
-        getOptionPrefix,
+        disabled, // intentionally not evaluated as boolean, since it can be object too!
+        readOnly: restProps.readOnly ?? false, // intentionally not evaluated as boolean, since it can be object too!
+        "data-testid": dataTestId ?? "select",
+        prefix: restProps.prefix,
+        hasError: restProps.hasError,
+        fieldSize: restProps.fieldSize,
+        getOptionLabelDescription: restProps.getOptionLabelDescription,
+        getOptionPrefix: restProps.getOptionPrefix,
+        isMulti: restProps.isMulti ?? false,
+        className: restProps.className,
+        autoComplete: restProps.autoComplete,
     });
-    const menuPlacement = "auto";
-    const openMenuHandler = async () => {
-        onMenuOpen?.();
-        if (menuIsEnabled) {
-            setMenuIsOpen(true);
-        }
-        else {
-            setMenuIsEnabled(true);
-        }
-    };
-    const closeMenuHandler = () => {
-        setMenuIsOpen(false);
-        onMenuClose && onMenuClose();
-    };
-    return {
-        refContainer,
-        customStyles,
-        menuIsOpen,
+    const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(restProps.readOnly), [disabled, restProps.readOnly]);
+    // Determine the portal target for the menu
+    const portalTarget = react.useMemo(() => (restProps.menuPortalTarget !== undefined ? restProps.menuPortalTarget : document.body), [restProps.menuPortalTarget]);
+    // Use custom scroll blocking hook to prevent layout shifts
+    // Pass the portal target so we only block scroll when menu is portaled to document.body
+    const { blockScroll, restoreScroll } = reactComponents.useScrollBlock(portalTarget);
+    // Store callbacks in refs to keep wrapper callbacks stable
+    // This prevents unnecessary re-renders when parent components don't memoize these callbacks
+    const onMenuOpenRef = react.useRef(onMenuOpen);
+    const onMenuCloseRef = react.useRef(onMenuClose);
+    react.useEffect(() => {
+        onMenuOpenRef.current = onMenuOpen;
+    }, [onMenuOpen]);
+    react.useEffect(() => {
+        onMenuCloseRef.current = onMenuClose;
+    }, [onMenuClose]);
+    // Wrap user's onMenuOpen callback to block scrolling
+    // We apply scroll blocking directly instead of using react-select's menuShouldBlockScroll
+    // because it doesn't properly account for existing body padding, causing layout shifts
+    // See commeont next to menuShouldBlockScroll below for more
+    const handleMenuOpen = react.useCallback(() => {
+        blockScroll();
+        onMenuOpenRef.current?.();
+    }, [blockScroll]);
+    // Wrap user's onMenuClose callback to restore scrolling
+    const handleMenuClose = react.useCallback(() => {
+        restoreScroll();
+        onMenuCloseRef.current?.();
+    }, [restoreScroll]);
+    // Store restProps in a ref to keep dependencies stable while always having the latest values
+    // This allows us to access restProps in useMemo without including them in the dependency array
+    // Criteria for props in restProps:
+    // - Props used in computations are already tracked via derived values (interactable, portalTarget, etc.)
+    // - Other props are accessed via ref - they'll always be latest but won't trigger recalculation
+    //   This is a trade-off: we prioritize stability over perfect reactivity for less critical props
+    const restPropsRef = react.useRef(restProps);
+    react.useEffect(() => {
+        restPropsRef.current = restProps;
+    }, [restProps]);
+    // eslint-disable-next-line react-hooks/refs
+    return react.useMemo(() => {
+        const currentRestProps = restPropsRef.current;
+        return {
+            ...currentRestProps,
+            options,
+            value,
+            onChange,
+            defaultValue,
+            components: customComponents,
+            unstyled: true,
+            "aria-label": currentRestProps.label,
+            "data-testid": dataTestId ?? "select",
+            tabSelectsValue: false,
+            blurInputOnSelect: false,
+            // This configuration allows for more flexible positioning control of the dropdown.
+            // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
+            // the parent element instead of 'document.body'.
+            menuPortalTarget: portalTarget,
+            isSearchable: interactable ? (currentRestProps.isSearchable ?? true) : false,
+            // Disable react-select's built-in scroll blocking as we handle it ourselves in onMenuOpen/onMenuClose
+            // to prevent layout shifts caused by not accounting for existing body padding in the react-select implementation.
+            // See: https://github.com/JedWatson/react-select/issues/5342 AND https://github.com/JedWatson/react-select/issues/5020
+            menuShouldBlockScroll: false,
+            menuShouldScrollIntoView: true,
+            openMenuOnClick: interactable ? (currentRestProps.openMenuOnClick ?? true) : false,
+            openMenuOnFocus: Boolean(currentRestProps.openMenuOnFocus),
+            closeMenuOnSelect: !Boolean(currentRestProps.isMulti),
+            isDisabled: Boolean(disabled),
+            isClearable: Boolean(currentRestProps.isClearable),
+            menuPlacement: currentRestProps.menuPlacement ?? "auto",
+            placeholder: interactable ? currentRestProps.placeholder : undefined,
+            hideSelectedOptions: Boolean(currentRestProps.hideSelectedOptions),
+            menuIsOpen: interactable ? undefined : false, // close it if not interactable, otherwise leave state to react-select
+            // Wire up our custom menu open/close handlers
+            onMenuOpen: handleMenuOpen,
+            onMenuClose: handleMenuClose,
+            // 👇 putting these here to avoid them _accidentally_ being overwritten in the future👇
+            maxMenuHeight: undefined, // controlled custom components styling
+            minMenuHeight: undefined, // controlled custom components styling
+            theme: undefined,
+            classNames: undefined,
+            styles: undefined,
+        };
+    }, [
         customComponents,
-        menuPlacement,
-        openMenuHandler,
-        closeMenuHandler,
-    };
+        disabled,
+        interactable,
+        handleMenuOpen,
+        handleMenuClose,
+        dataTestId,
+        portalTarget,
+        // Critical props that must trigger recalculation when they change
+        options,
+        value,
+        onChange,
+        defaultValue,
+        // restPropsRef is intentionally not included - we access restPropsRef.current inside useMemo
+        // to always get the latest restProps without causing recalculation when the object reference changes
+    ]);
 };
 
 // This is here to ensure the bundled react-components can expose the react-select for jest in external iris apps.
 const ReactSyncSelect = ReactSelect.default || ReactSelect;
 /**
- * Selects are input components used to choose a value from a set.
+ * BaseSelect are input components used to choose a value from a set.
  *
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactElement} Select component
  */
 const BaseSelect = (props) => {
-    const { id, "data-testid": dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
-    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactSelectProps = react.useMemo(() => ({
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: false,
-        // This configuration allows for more flexible positioning control of the dropdown.
-        // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
-        // the parent element instead of 'document.body'.
-        menuPortalTarget: props.menuPortalTarget !== undefined ? props.menuPortalTarget : document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: !isMulti,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-        hideSelectedOptions,
-        isDisabled: Boolean(disabled),
-    }), [
-        classNamePrefix,
-        customComponents,
-        customStyles,
-        dataTestId,
-        disabled,
-        hideSelectedOptions,
-        id,
-        isClearable,
-        isLoading,
-        isMulti,
-        isSearchable,
-        label,
-        maxMenuHeight,
-        menuIsOpen,
-        menuPlacement,
-        onChange,
-        onInputChange,
-        onMenuScrollToBottom,
-        openMenuOnClick,
-        openMenuOnFocus,
-        props.menuPortalTarget,
-        readOnly,
-        value,
-    ]);
-    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({
-            invalid: hasError,
-            fieldSize: fieldSize,
-            disabled: renderAsDisabled,
-            className: props.className,
-        }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncSelect, { ...props, ...reactSelectProps, ...async, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactSyncSelect, { ...props, ...reactSelectProps, isMulti: isMulti, menuPosition: menuPosition, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+    const select = useSelect(props);
+    return props.async ? jsxRuntime.jsx(ReactAsyncSelect, { ...select }) : jsxRuntime.jsx(ReactSyncSelect, { ...select });
+};
+
+/**
+ * A hook used by creatable selects that extends useSelect with creatable-specific functionality
+ *
+ * @param props - The props for the CreatableSelect component
+ * @returns {ReactCreatableProps} Props for react-select creatable component
+ */
+const useCreatableSelect = (props) => {
+    const { onCreateOption, allowCreateWhileLoading, isMulti } = props;
+    const baseSelectProps = useSelect(props);
+    // Store onCreateOption in a ref to keep wrapper stable
+    // This prevents unnecessary re-renders when parent components don't memoize this callback
+    const onCreateOptionRef = react.useRef(onCreateOption);
+    react.useEffect(() => {
+        onCreateOptionRef.current = onCreateOption;
+    }, [onCreateOption]);
+    return react.useMemo(() => ({
+        ...baseSelectProps,
+        allowCreateWhileLoading,
+        onCreateOption: onCreateOptionRef.current,
+        // Override some defaults specific to creatable selects
+        closeMenuOnSelect: false, // Keep menu open for multi-creation
+        blurInputOnSelect: !Boolean(isMulti), // Only blur if not multi
+    }), [baseSelectProps, allowCreateWhileLoading, isMulti]);
 };
-BaseSelect.displayName = "BaseSelect";
 
 /**
  * CreatableSelects are input components used to choose a value from a set.
  *
- * @param {CreatableSelectProps} props - The props for the CreatableSelect component
- * @returns {ReactElement} CreatableSelect component
+/**
+ * CreatableSelect is a component that allows users to select from existing options or create new ones.
+ *
+ * @template TOption - The option type.
+ * @template TIsAsync - Indicates whether the component is asynchronous.
+ * @template TIsMulti - Indicates whether multiple selections are allowed.
+ * @template TGroup - The group base type for options.
+ * @param {CreatableSelectProps} props - The props to configure the CreatableSelect component.
+ * @returns {ReactElement} A ReactElement rendering the CreatableSelect.
  */
 const CreatableSelect = (props) => {
-    const { id, "data-testid": dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
-    const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactCreatableSelectProps = react.useMemo(() => ({
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: props.menuPortalTarget || document.body,
-        isSearchable: disabled || readOnly ? false : isSearchable,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus,
-        menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick,
-        closeMenuOnSelect: false,
-        isMulti,
-        classNamePrefix,
-        isLoading,
-        isClearable,
-        id,
-        onMenuScrollToBottom,
-        onInputChange,
-        allowCreateWhileLoading,
-        onCreateOption,
-        isDisabled: Boolean(disabled),
-    }), [
-        allowCreateWhileLoading,
-        classNamePrefix,
-        customComponents,
-        customStyles,
-        dataTestId,
-        disabled,
-        id,
-        isClearable,
-        isLoading,
-        isMulti,
-        isSearchable,
-        label,
-        maxMenuHeight,
-        menuIsOpen,
-        menuPlacement,
-        onChange,
-        onCreateOption,
-        onInputChange,
-        onMenuScrollToBottom,
-        openMenuOnClick,
-        openMenuOnFocus,
-        props.menuPortalTarget,
-        readOnly,
-        value,
-    ]);
-    const renderAsDisabled = Boolean(props.disabled) || props.readOnly;
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: renderAsDisabled, className: props.className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "prefix" }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...props, ...reactCreatableSelectProps, ...async, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, placeholder: renderAsDisabled ? null : props.placeholder })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...props, ...reactCreatableSelectProps, hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: options, placeholder: renderAsDisabled ? null : props.placeholder })), typeof props.disabled === "object" ? (jsxRuntime.jsx("div", { className: cvaSelectPrefixSuffix({ kind: "suffix" }), "data-testid": dataTestId ? `${dataTestId}-locked` : null, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...props.disabled }) })) : null] }));
+    const creatableSelect = useCreatableSelect(props);
+    return props.async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect, { ...creatableSelect })) : (jsxRuntime.jsx(ReactCreatableSelect, { ...creatableSelect }));
 };
-CreatableSelect.displayName = "CreatableSelect";
 
 /**
  * The Label component is used for labels for input fields.
@@ -1637,7 +1914,7 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, }) => {
+const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, }) => {
     const [t] = useTranslation();
     const validationStateIcon = react.useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
@@ -1731,7 +2008,7 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, nonInteractive, isWarning, inputClassName, ...inputProps }, ref) => {
+const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ...inputProps }, ref) => {
     const renderAsDisabled = Boolean(disabled);
     const renderAsReadonly = Boolean(readOnly);
     const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
@@ -1783,7 +2060,7 @@ const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, h
                 className,
             }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: tailwindMerge.twMerge("px-1 focus-visible:outline-none", inputClassName),
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly || nonInteractive, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 
@@ -1969,7 +2246,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid":
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize, type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 };
 
 /**
@@ -2008,14 +2285,17 @@ function isWritableRef(r) {
 }
 /**
  * Multi adapter:
- * - keeps Option[] semantics (via `MultiValue<Option>`)
+ * - keeps TOption[] semantics (via `MultiValue<TOption>`)
  * - renders FormGroup chrome (label, help, error)
  * - exposes a hidden <select> for a stable ref target
  * - optionally renders one hidden <input> per selected option IF `getOptionValue` is provided
  * - passes through all remaining BaseSelect props with isMulti=true
+ *
+ * @param {FormFieldSelectAdapterMultiProps} props - The props for the FormFieldSelectAdapterMulti component
+ * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, ...selectProps } = props;
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = react.useRef(null);
     // Bridge external ref (supports both callback and object refs)
@@ -2030,25 +2310,28 @@ const FormFieldSelectAdapterMulti = (props) => {
     // Determine invalid state
     const renderAsInvalid = react.useMemo(() => (isInvalid === undefined ? Boolean(errorMessage) : isInvalid), [errorMessage, isInvalid]);
     // id to connect label and control
-    const controlId = react.useMemo(() => (id ? id : "multiSelectField-" + sharedUtils.uuidv4()), [id]);
+    const controlId = react.useMemo(() => htmlForProp ?? id ?? "multiSelectField-" + sharedUtils.uuidv4(), [htmlForProp, id]);
     // If consumers provided getOptionValue (from BaseSelect props),
     // we can render hidden inputs for native form submit / RHF.
     const selectPropsWithAccessors = selectProps;
-    const getOptionValue = typeof selectPropsWithAccessors.getOptionValue === "function" ? selectPropsWithAccessors.getOptionValue : undefined;
+    const getOptionValue = react.useMemo(() => typeof selectPropsWithAccessors.getOptionValue === "function"
+        ? selectPropsWithAccessors.getOptionValue
+        : undefined, [selectPropsWithAccessors]);
     // Compute selected options snapshot for hidden inputs (prefer controlled `value`)
     const selectedOptions = react.useMemo(() => value ?? defaultValue ?? [], [value, defaultValue]);
     // Build the exact prop bag for BaseSelect (multi=true).
-    const childProps = {
+    const childProps = react.useMemo(() => ({
         ...selectProps,
+        "data-testid": dataTestId,
         id: controlId,
         onBlur,
         options,
         isMulti: true,
         value: value ?? null,
         defaultValue,
-        onChange: next => onChange?.(next),
-    };
-    return (jsxRuntime.jsxs(FormGroup, { className: className, "data-testid": dataTestId, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
+        onChange,
+    }), [selectProps, dataTestId, controlId, onBlur, options, value, defaultValue, onChange]);
+    return (jsxRuntime.jsxs(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))
             : false, tip: tip, children: [jsxRuntime.jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
@@ -2057,12 +2340,13 @@ const FormFieldSelectAdapterMulti = (props) => {
                     return typeof primitiveValue === "string" ? (jsxRuntime.jsx("input", { name: name, type: "hidden", value: primitiveValue }, `${primitiveValue}-${idx}`)) : null;
                 }), children(childProps)] }));
 };
-FormFieldSelectAdapterMulti.displayName = "FormFieldSelectAdapterMulti";
 
 /**
- * MultiSelectField — validated multi-select field.
- * Types mirror BaseSelect: options: Option[], value/defaultValue: Option[], onChange: (Option[] | null) => void
- * Implemented as a generic const component (no forwardRef, no assertions).
+ * MultiSelectField is a custom Select component wrapped in the FormGroup component
+ * that allows you to select multiple options from a list.
+ *
+ * @param {MultiSelectFieldProps} props - The props for the MultiSelectField component
+ * @returns {ReactElement} MultiSelectField component
  */
 const MultiSelectField = ({ ref, ...props }) => {
     return (jsxRuntime.jsx(FormFieldSelectAdapterMulti, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(BaseSelect, { ...convertedProps }) }));
@@ -2772,15 +3056,16 @@ Search.displayName = "Search";
 /**
  *
  */
-const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }) => {
+const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required = false, ...rest }) => {
     const isFirstRender = reactComponents.useIsFirstRender();
-    const [innerValue, setInnerValue] = react.useState(value || defaultValue);
+    const [innerValue, setInnerValue] = react.useState(value ?? defaultValue);
     react.useEffect(() => {
         setInnerValue(defaultValue);
     }, [defaultValue]);
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = react.useMemo(() => (id ? id : "selectField-" + sharedUtils.uuidv4()), [id]);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlFor = react.useMemo(() => htmlForProp ?? id ?? "selectField-" + sharedUtils.uuidv4(), [htmlForProp, id]);
     const innerRef = react.useRef(null);
+    // eslint-disable-next-line local-rules/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     react.useImperativeHandle(ref, () => innerRef.current, []);
     react.useEffect(() => {
         if (innerValue === undefined) {
@@ -2796,8 +3081,13 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate
-        innerValue && !options.find(option => option.value === innerValue)
-            ? { value: innerValue, label: String(innerValue) }
+        // Only add backup option when innerValue is defined (not undefined) and not an empty string
+        // Note: Empty string is used as a sentinel value for "no selection" (see onChange handler below)
+        //       and should not be added as a backup option. Zero (0) is a valid option value, so we allow it.
+        innerValue !== undefined && innerValue !== "" && !options.find(option => option.value === innerValue)
+            ? // It is safe enough to assert this because the only properties that are used are value and label, and those are present in the TOption type.
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                { value: innerValue, label: String(innerValue) }
             : null,
         ...options,
     ].filter(sharedUtils.nonNullable);
@@ -2805,15 +3095,16 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     return (jsxRuntime.jsxs(FormGroup, { isInvalid: renderAsInvalid,
         htmlFor,
         className,
-        "data-testid": dataTestId,
+        "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined,
         helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
         label,
-        required: rest.required ? !(rest.disabled || rest.readOnly) : false, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
+        required: required ? !Boolean(rest.disabled ?? rest.readOnly) : false, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
                 }) }), children({
                 ...rest,
+                required,
                 id,
                 onBlur,
                 options: optionsWithCurrentSelectionBackupOption,
@@ -2823,6 +3114,7 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
                     // So even if react-select sends a null value, we need to convert it to an empty string
                     setInnerValue(!e ? "" : e.value);
                 },
+                "data-testid": dataTestId,
                 value: selectedOption,
                 defaultValue: selectedOption,
             })] }));
@@ -2838,24 +3130,23 @@ FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
  *
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  */
-const CreatableSelectField = ({ allowCreateWhileLoading, onCreateOption, ref, ...props }) => {
-    const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
+const CreatableSelectField = ({ allowCreateWhileLoading = false, onCreateOption, ref, ...props }) => {
+    const creatableSelectOnlyProps = {
+        allowCreateWhileLoading,
+        onCreateOption,
+    };
     return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(CreatableSelect, { ...convertedProps, ...creatableSelectOnlyProps }) }));
 };
 CreatableSelectField.displayName = "CreatableSelectField";
 
 /**
- * The SelectField component is a Select component wrapped in the FromGroup component.
- *
- * This means that it can easily be added to any form alongside other Field components.
- *
- * This is done to make the field compatible with the React-hook-form library.
+ * MultiSelect is a custom Select component wrapped in the FormGroup component
  *
  * @param {SelectFieldProps} props - The props for the SelectField component
  */
-const SelectField = ({ ref, ...props }) => {
+function SelectField({ ref, ...props }) {
     return (jsxRuntime.jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsxRuntime.jsx(BaseSelect, { ...convertedProps }) }));
-};
+}
 SelectField.displayName = "SelectField";
 
 /**
@@ -3078,7 +3369,7 @@ const cvaUploadInputField = cssClassVarianceUtilities.cvaMerge([
  *
  * NOTE: If shown with a label, please use the `UploadField` component instead.
  */
-const UploadInput = ({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ref, ...rest }) => (jsxRuntime.jsx("label", { className: "tu-upload-input", children: jsxRuntime.jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
+const UploadInput = ({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ref, ...rest }) => (jsxRuntime.jsx("label", { className: "tu-upload-input", children: jsxRuntime.jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, onClick: event => {
             // onClick used to work with nonInteractive option
             if (nonInteractive) {
                 event.preventDefault();
@@ -3133,10 +3424,10 @@ const validateUrl = (url, required) => {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-const UrlBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
+const UrlBaseInput = ({ isInvalid = false, "data-testid": dataTestId, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
     const [url, setUrl] = react.useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize ?? undefined, type: "WEB_ADDRESS", value: url })) }));
+    return (jsxRuntime.jsx(BaseInput, { "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize, type: "WEB_ADDRESS", value: url })) }));
 };
 
 /**
@@ -3295,7 +3586,6 @@ exports.FormFieldSelectAdapter = FormFieldSelectAdapter;
 exports.FormGroup = FormGroup;
 exports.Label = Label;
 exports.MultiSelectField = MultiSelectField;
-exports.MultiSelectMenuItem = MultiSelectMenuItem;
 exports.NumberBaseInput = NumberBaseInput;
 exports.NumberField = NumberField;
 exports.OptionCard = OptionCard;
@@ -3309,7 +3599,6 @@ exports.RadioItem = RadioItem;
 exports.Schedule = Schedule;
 exports.Search = Search;
 exports.SelectField = SelectField;
-exports.SingleSelectMenuItem = SingleSelectMenuItem;
 exports.TextAreaBaseInput = TextAreaBaseInput;
 exports.TextAreaField = TextAreaField;
 exports.TextBaseInput = TextBaseInput;
@@ -3338,15 +3627,21 @@ exports.cvaInputItemPlacementManager = cvaInputItemPlacementManager;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;
 exports.cvaLabel = cvaLabel;
-exports.cvaSelect = cvaSelect;
+exports.cvaSelectClearIndicator = cvaSelectClearIndicator;
+exports.cvaSelectContainer = cvaSelectContainer;
 exports.cvaSelectControl = cvaSelectControl;
-exports.cvaSelectCounter = cvaSelectCounter;
-exports.cvaSelectDynamicTagContainer = cvaSelectDynamicTagContainer;
-exports.cvaSelectIcon = cvaSelectIcon;
+exports.cvaSelectDropdownIconContainer = cvaSelectDropdownIconContainer;
+exports.cvaSelectDropdownIndicator = cvaSelectDropdownIndicator;
+exports.cvaSelectIndicatorsContainer = cvaSelectIndicatorsContainer;
+exports.cvaSelectLoadingMessage = cvaSelectLoadingMessage;
 exports.cvaSelectMenu = cvaSelectMenu;
 exports.cvaSelectMenuList = cvaSelectMenuList;
+exports.cvaSelectMultiValue = cvaSelectMultiValue;
+exports.cvaSelectNoOptionsMessage = cvaSelectNoOptionsMessage;
+exports.cvaSelectPlaceholder = cvaSelectPlaceholder;
 exports.cvaSelectPrefixSuffix = cvaSelectPrefixSuffix;
-exports.cvaSelectXIcon = cvaSelectXIcon;
+exports.cvaSelectSingleValue = cvaSelectSingleValue;
+exports.cvaSelectValueContainer = cvaSelectValueContainer;
 exports.getCountryAbbreviation = getCountryAbbreviation;
 exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;
@@ -3355,9 +3650,11 @@ exports.isValidHEXColor = isValidHEXColor;
 exports.parseSchedule = parseSchedule;
 exports.phoneErrorMessage = phoneErrorMessage;
 exports.serializeSchedule = serializeSchedule;
+exports.useCreatableSelect = useCreatableSelect;
 exports.useCustomComponents = useCustomComponents;
 exports.useGetPhoneValidationRules = useGetPhoneValidationRules;
 exports.usePhoneInput = usePhoneInput;
+exports.useSelect = useSelect;
 exports.useZodValidators = useZodValidators;
 exports.validateEmailAddress = validateEmailAddress;
 exports.validatePhoneNumber = validatePhoneNumber;