@ultraviolet/ui 3.11.0 → 3.12.0

package/dist/components/SelectInput/components/Dropdown.js

@@ -1,217 +1,164 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Stack } from "../../Stack/index.js";
-import { Popup } from "../../Popup/index.js";
-import { Text } from "../../Text/index.js";
-import { Skeleton } from "../../Skeleton/index.js";
-import { Checkbox } from "../../Checkbox/index.js";
-import { ModalContext } from "../../Modal/ModalProvider.js";
-import { INPUT_SIZE_HEIGHT, OPTION_SELECTOR } from "../constants.js";
-import { useSelectInput } from "../SelectInputProvider.js";
-import { comboboxCreate, dropdown, dropdownCheckbox, dropdownContainer, dropdownContainerUnGrouped, dropdownEmptyState, dropdownGroup, dropdownGroupSelectable, dropdownGroupWrapper, dropdownItem, dropdownLoadMore, dropdownWidth, emptyStateGroupStyle, footer } from "./dropdown.css.js";
-import { DisplayOption } from "./DropdownOption.js";
-import { SearchBarDropdown } from "./SearchBarDropdown.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { Popup, init_Popup } from "../../Popup/index.js";
+import { Text, init_Text } from "../../Text/index.js";
+import { Checkbox, init_Checkbox } from "../../Checkbox/index.js";
+import { ModalContext, init_ModalProvider } from "../../Modal/ModalProvider.js";
+import { Skeleton, init_Skeleton } from "../../Skeleton/index.js";
+import { INPUT_SIZE_HEIGHT, OPTION_SELECTOR, init_constants } from "../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../styles.css.js";
+import { DisplayOption, init_DropdownOption } from "./DropdownOption.js";
+import { dropdownWidth, init_dropdown_css } from "./dropdown.css.js";
+import { SearchBarDropdown, init_SearchBarDropdown } from "./SearchBarDropdown.js";
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useTheme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
 
 //#region src/components/SelectInput/components/Dropdown.tsx
-const NON_SEARCHABLE_KEYS = [
-	"Tab",
-	" ",
-	"Enter",
-	"CapsLock",
-	"Shift",
-	"ArrowDown",
-	"ArrowUp",
-	"ArrowLeft",
-	"ArrowRight",
-	"Escape"
-];
-const moveFocusDown = () => {
-	const options = document.querySelectorAll(OPTION_SELECTOR);
-	const activeItem = document.activeElement;
-	if (options) for (let i = 0; i < (options === null || options === void 0 ? void 0 : options.length); i += 1) {
-		const listLength = options.length;
-		if (activeItem === options[i] && activeItem !== options[listLength - 1]) options[i + 1].focus();
-	}
-};
-const moveFocusUp = () => {
-	const options = document.querySelectorAll(OPTION_SELECTOR);
-	const activeItem = document.activeElement;
-	if (options) {
-		for (let i = 0; i < options.length; i += 1) if (activeItem === options[i] && activeItem !== options[0]) options[i - 1].focus();
-	}
-};
-const handleKeyDownSelect = (event) => {
-	if (event.key === "ArrowDown") {
-		event.preventDefault();
-		moveFocusDown();
-	}
-	if (event.key === "ArrowUp") {
-		event.preventDefault();
-		moveFocusUp();
-	}
-	if (event.key === " ") event.preventDefault();
-};
-const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
-	var _document$activeEleme;
-	if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.ariaLabel) !== "search-bar") {
-		const currentSearch = search + event.key;
-		setSearch(currentSearch);
-		ref.current.focus();
-		if (Array.isArray(options)) {
-			const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
-			if (closestOption) {
-				var _closestOption$search;
-				setDefaultSearch((_closestOption$search = closestOption.searchText) !== null && _closestOption$search !== void 0 ? _closestOption$search : closestOption.value);
-			} else setDefaultSearch(null);
-		} else {
-			const closestOptions = _objectSpread2({}, options);
-			Object.keys(closestOptions).map((group) => {
-				closestOptions[group] = closestOptions[group].filter((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
-				return null;
-			});
-			const closestOption = closestOptions[Object.keys(closestOptions)[0]][0];
-			if (closestOption) {
-				var _closestOption$search2;
-				setDefaultSearch((_closestOption$search2 = closestOption.searchText) !== null && _closestOption$search2 !== void 0 ? _closestOption$search2 : closestOption.value);
-			} else setDefaultSearch(null);
+var NON_SEARCHABLE_KEYS, moveFocusDown, moveFocusUp, handleKeyDownSelect, handleKeyDown, CreateDropdown, Dropdown;
+var init_Dropdown = __esmMin(() => {
+	init_Checkbox();
+	init_ModalProvider();
+	init_Popup();
+	init_Skeleton();
+	init_Stack();
+	init_Text();
+	init_constants();
+	init_SelectInputProvider();
+	init_styles_css();
+	init_DropdownOption();
+	init_dropdown_css();
+	init_SearchBarDropdown();
+	init_objectSpread2();
+	NON_SEARCHABLE_KEYS = [
+		"Tab",
+		" ",
+		"Enter",
+		"CapsLock",
+		"Shift",
+		"ArrowDown",
+		"ArrowUp",
+		"ArrowLeft",
+		"ArrowRight",
+		"Escape"
+	];
+	moveFocusDown = () => {
+		const options = document.querySelectorAll(OPTION_SELECTOR);
+		const activeItem = document.activeElement;
+		if (options) for (let i = 0; i < (options === null || options === void 0 ? void 0 : options.length); i += 1) {
+			const listLength = options.length;
+			if (activeItem === options[i] && activeItem !== options[listLength - 1]) options[i + 1].focus();
 		}
-	}
-};
-const CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, optionalInfoPlacement, defaultSearchValue, isLoading, groupEmptyState, groupError, addOption, searchable }) => {
-	const { setIsDropdownVisible, onChange, options, multiselect, selectAll, selectAllGroup, displayedOptions, onSearch, setSelectedData, selectedData, searchInput, setSearchInput, size } = useSelectInput();
-	const focusedItemRef = useRef(null);
-	useEffect(() => {
-		if (defaultSearchValue && (focusedItemRef === null || focusedItemRef === void 0 ? void 0 : focusedItemRef.current)) focusedItemRef.current.focus();
-	}, [defaultSearchValue]);
-	const textVariant = useMemo(() => {
-		if (size === "large") return "body";
-		if (size === "medium") return "bodySmall";
-		return "caption";
-	}, [size]);
-	const textVariantSmall = size === "small" ? "captionStrong" : "bodySmallStrong";
-	const sizeVariantIcon = size === "small" ? "xsmall" : "small";
-	const handleClickCustomValue = () => {
-		const newOption = {
-			label: searchInput,
-			value: searchInput
-		};
-		addOption === null || addOption === void 0 || addOption.onClick(searchInput);
-		onSearch([newOption]);
-		setIsDropdownVisible(multiselect);
-		setSearchInput("");
 	};
-	if (isEmpty && !addOption) return /* @__PURE__ */ jsx(Stack, {
-		alignItems: "center",
-		className: dropdownEmptyState,
-		gap: 2,
-		children: emptyState !== null && emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(Text, {
-			as: "p",
-			variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
-			children: "No options"
-		})
-	});
-	if (isEmpty && addOption && searchable) {
-		const option = {
-			label: /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "center",
-				direction: "row",
-				gap: "1",
-				children: [/* @__PURE__ */ jsx(PlusIcon, {
-					sentiment: "primary",
-					size: sizeVariantIcon
-				}), /* @__PURE__ */ jsxs(Text, {
-					as: "span",
-					sentiment: "primary",
-					variant: textVariantSmall,
-					children: [
-						addOption.text,
-						" ",
-						searchInput
-					]
-				})]
-			}),
-			searchText: searchInput,
-			value: `${addOption.text} ${searchInput}`
-		};
-		return /* @__PURE__ */ jsx("div", {
-			"aria-selected": "false",
-			className: comboboxCreate,
-			"data-testid": "add-option",
-			id: "add-option",
-			onClick: handleClickCustomValue,
-			onKeyDown: (event) => {
-				if (["Enter", " "].includes(event.key)) handleClickCustomValue();
-			},
-			role: "option",
-			tabIndex: -1,
-			children: /* @__PURE__ */ jsx(DisplayOption, {
-				descriptionDirection: "row",
-				option,
-				optionalInfoPlacement: "left",
-				textVariant
-			})
-		});
-	}
-	const handleClick = ({ clickedOption, group, event }) => {
-		event.stopPropagation();
-		setSelectedData({
-			clickedOption,
-			group,
-			type: "selectOption"
-		});
-		if (multiselect) if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
-		else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
-		else onChange === null || onChange === void 0 || onChange(clickedOption.value);
-		setIsDropdownVisible(multiselect);
+	moveFocusUp = () => {
+		const options = document.querySelectorAll(OPTION_SELECTOR);
+		const activeItem = document.activeElement;
+		if (options) {
+			for (let i = 0; i < options.length; i += 1) if (activeItem === options[i] && activeItem !== options[0]) options[i - 1].focus();
+		}
 	};
-	const selectAllOptions = () => {
-		if (multiselect) {
-			setSelectedData({ type: "selectAll" });
-			if (selectedData.allSelected && onChange) onChange([]);
-			else {
-				const allValues = [];
-				if (Array.isArray(options)) options.map((option) => allValues.push(option));
-				else Object.keys(options).map((group) => options[group].map((option) => {
-					if (!option.disabled) allValues.push(option);
-					return null;
-				}));
-				onChange === null || onChange === void 0 || onChange(allValues.map((value) => value.value));
-			}
+	handleKeyDownSelect = (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveFocusDown();
 		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			moveFocusUp();
+		}
+		if (event.key === " ") event.preventDefault();
 	};
-	const handleSelectGroup = (group) => {
-		if (multiselect) {
-			setSelectedData({
-				selectedGroup: group,
-				type: "selectGroup"
-			});
-			if (!Array.isArray(options)) if (selectedData.selectedGroups.includes(group)) {
-				const newSelectedValues = [...selectedData.selectedValues].filter((selectedValue) => !options[group].find((option) => option.value === selectedValue));
-				onChange === null || onChange === void 0 || onChange(newSelectedValues);
+	handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
+		var _document$activeEleme;
+		if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.ariaLabel) !== "search-bar") {
+			const currentSearch = search + event.key;
+			setSearch(currentSearch);
+			ref.current.focus();
+			if (Array.isArray(options)) {
+				const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+				if (closestOption) {
+					var _closestOption$search;
+					setDefaultSearch((_closestOption$search = closestOption.searchText) !== null && _closestOption$search !== void 0 ? _closestOption$search : closestOption.value);
+				} else setDefaultSearch(null);
 			} else {
-				const newSelectedValues = [...selectedData.selectedValues];
-				options[group].map((option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
-				onChange === null || onChange === void 0 || onChange(newSelectedValues);
+				const closestOptions = _objectSpread2({}, options);
+				Object.keys(closestOptions).map((group) => {
+					closestOptions[group] = closestOptions[group].filter((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+					return null;
+				});
+				const closestOption = closestOptions[Object.keys(closestOptions)[0]][0];
+				if (closestOption) {
+					var _closestOption$search2;
+					setDefaultSearch((_closestOption$search2 = closestOption.searchText) !== null && _closestOption$search2 !== void 0 ? _closestOption$search2 : closestOption.value);
+				} else setDefaultSearch(null);
 			}
 		}
 	};
-	return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(Stack, {
-		className: cn(dropdownContainer, dropdownContainerUnGrouped),
-		gap: .25,
-		id: "select-dropdown",
-		onKeyDown: handleKeyDownSelect,
-		role: "listbox",
-		children: [
-			addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
+	CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, optionalInfoPlacement, defaultSearchValue, isLoading, groupEmptyState, groupError, addOption, searchable }) => {
+		const { setIsDropdownVisible, onChange, options, multiselect, selectAll, selectAllGroup, displayedOptions, onSearch, setSelectedData, selectedData, searchInput, setSearchInput, size } = useSelectInput();
+		const focusedItemRef = useRef(null);
+		useEffect(() => {
+			if (defaultSearchValue && (focusedItemRef === null || focusedItemRef === void 0 ? void 0 : focusedItemRef.current)) focusedItemRef.current.focus();
+		}, [defaultSearchValue]);
+		const textVariant = useMemo(() => {
+			if (size === "large") return "body";
+			if (size === "medium") return "bodySmall";
+			return "caption";
+		}, [size]);
+		const textVariantSmall = size === "small" ? "captionStrong" : "bodySmallStrong";
+		const sizeVariantIcon = size === "small" ? "xsmall" : "small";
+		const handleClickCustomValue = () => {
+			const newOption = {
+				label: searchInput,
+				value: searchInput
+			};
+			addOption === null || addOption === void 0 || addOption.onClick(searchInput);
+			onSearch([newOption]);
+			setIsDropdownVisible(multiselect);
+			setSearchInput("");
+		};
+		if (isEmpty && !addOption) return /* @__PURE__ */ jsx(Stack, {
+			alignItems: "center",
+			className: selectInputStyle.dropdownEmptyState,
+			gap: 2,
+			children: emptyState !== null && emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
+				children: "No options"
+			})
+		});
+		if (isEmpty && addOption && searchable) {
+			const option = {
+				label: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: "1",
+					children: [/* @__PURE__ */ jsx(PlusIcon, {
+						sentiment: "primary",
+						size: sizeVariantIcon
+					}), /* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						sentiment: "primary",
+						variant: textVariantSmall,
+						children: [
+							addOption.text,
+							" ",
+							searchInput
+						]
+					})]
+				}),
+				searchText: searchInput,
+				value: `${addOption.text} ${searchInput}`
+			};
+			return /* @__PURE__ */ jsx("div", {
 				"aria-selected": "false",
-				className: comboboxCreate,
+				className: selectInputStyle.comboboxCreate,
 				"data-testid": "add-option",
 				id: "add-option",
 				onClick: handleClickCustomValue,
@@ -222,502 +169,573 @@ const CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, o
 				tabIndex: -1,
 				children: /* @__PURE__ */ jsx(DisplayOption, {
 					descriptionDirection: "row",
-					option: {
-						label: /* @__PURE__ */ jsxs(Stack, {
-							alignItems: "center",
-							direction: "row",
-							gap: "1",
-							children: [/* @__PURE__ */ jsx(PlusIcon, {
-								sentiment: "primary",
-								size: sizeVariantIcon
-							}), /* @__PURE__ */ jsxs(Text, {
-								as: "span",
-								sentiment: "primary",
-								variant: textVariantSmall,
-								children: [
-									addOption.text,
-									" ",
-									searchInput
-								]
-							})]
-						}),
-						searchText: searchInput,
-						value: `${addOption.text} ${searchInput}`
-					},
+					option,
 					optionalInfoPlacement: "left",
 					textVariant
 				})
-			}) : null,
-			selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
-				gap: .25,
-				id: "items",
-				tabIndex: -1,
-				children: /* @__PURE__ */ jsx("div", {
-					"aria-disabled": false,
-					"aria-label": "select-all",
-					"aria-selected": selectedData.allSelected,
-					className: cn(dropdownItem({
-						selected: selectedData.allSelected,
-						size: size === "small" ? "small" : "default"
-					})),
-					"data-testid": "select-all",
-					onClick: selectAllOptions,
-					onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
-					role: "option",
-					tabIndex: 0,
-					children: /* @__PURE__ */ jsx(Checkbox, {
-						checked: selectedData.allSelected,
-						className: dropdownCheckbox,
-						"data-testid": "select-all-checkbox",
-						disabled: false,
-						onChange: selectAllOptions,
-						tabIndex: -1,
-						value: "select-all",
-						children: /* @__PURE__ */ jsxs(Stack, {
-							direction: "column",
-							children: [/* @__PURE__ */ jsx(Text, {
-								as: "span",
-								placement: "left",
-								variant: textVariant,
-								children: selectAll.label
-							}), /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								placement: "left",
-								prominence: "weak",
-								sentiment: "neutral",
-								variant: size === "small" ? "captionSmall" : "bodySmall",
-								children: selectAll.description
-							})]
-						})
-					})
-				})
-			}) : null,
-			/* @__PURE__ */ jsxs(Stack, {
-				gap: .25,
-				id: "items",
-				children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__PURE__ */ jsx("div", {
-					"aria-disabled": !!option.disabled,
-					"aria-label": option.value,
-					"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-					className: cn(dropdownItem({
-						disabled: !!option.disabled,
-						selected: selectedData.selectedValues.includes(option.value) && !option.disabled,
-						size: size === "small" ? "small" : "default"
-					})),
-					"data-testid": `option-${option.value}`,
-					id: `option-${index}`,
-					onClick: (event) => {
-						if (!option.disabled) handleClick({
-							clickedOption: option,
-							event
-						});
-					},
+			});
+		}
+		const handleClick = ({ clickedOption, group, event }) => {
+			event.stopPropagation();
+			setSelectedData({
+				clickedOption,
+				group,
+				type: "selectOption"
+			});
+			if (multiselect) if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
+			else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
+			else onChange === null || onChange === void 0 || onChange(clickedOption.value);
+			setIsDropdownVisible(multiselect);
+		};
+		const selectAllOptions = () => {
+			if (multiselect) {
+				setSelectedData({ type: "selectAll" });
+				if (selectedData.allSelected && onChange) onChange([]);
+				else {
+					const allValues = [];
+					if (Array.isArray(options)) options.map((option) => allValues.push(option));
+					else Object.keys(options).map((group) => options[group].map((option) => {
+						if (!option.disabled) allValues.push(option);
+						return null;
+					}));
+					onChange === null || onChange === void 0 || onChange(allValues.map((value) => value.value));
+				}
+			}
+		};
+		const handleSelectGroup = (group) => {
+			if (multiselect) {
+				setSelectedData({
+					selectedGroup: group,
+					type: "selectGroup"
+				});
+				if (!Array.isArray(options)) if (selectedData.selectedGroups.includes(group)) {
+					const newSelectedValues = [...selectedData.selectedValues].filter((selectedValue) => !options[group].find((option) => option.value === selectedValue));
+					onChange === null || onChange === void 0 || onChange(newSelectedValues);
+				} else {
+					const newSelectedValues = [...selectedData.selectedValues];
+					options[group].map((option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+					onChange === null || onChange === void 0 || onChange(newSelectedValues);
+				}
+			}
+		};
+		return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(Stack, {
+			className: cn(selectInputStyle.dropdownContainer, selectInputStyle.dropdownContainerUnGrouped),
+			gap: .25,
+			id: "select-dropdown",
+			onKeyDown: handleKeyDownSelect,
+			role: "listbox",
+			children: [
+				addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
+					"aria-selected": "false",
+					className: selectInputStyle.comboboxCreate,
+					"data-testid": "add-option",
+					id: "add-option",
+					onClick: handleClickCustomValue,
 					onKeyDown: (event) => {
-						if ([" ", "Enter"].includes(event.key)) handleClick({
-							clickedOption: option,
-							event
-						});
+						if (["Enter", " "].includes(event.key)) handleClickCustomValue();
 					},
-					ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
 					role: "option",
-					tabIndex: option.disabled ? -1 : 0,
-					children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
-						checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
-						className: dropdownCheckbox,
-						disabled: option.disabled,
-						onChange: (event) => {
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx(DisplayOption, {
+						descriptionDirection: "row",
+						option: {
+							label: /* @__PURE__ */ jsxs(Stack, {
+								alignItems: "center",
+								direction: "row",
+								gap: "1",
+								children: [/* @__PURE__ */ jsx(PlusIcon, {
+									sentiment: "primary",
+									size: sizeVariantIcon
+								}), /* @__PURE__ */ jsxs(Text, {
+									as: "span",
+									sentiment: "primary",
+									variant: textVariantSmall,
+									children: [
+										addOption.text,
+										" ",
+										searchInput
+									]
+								})]
+							}),
+							searchText: searchInput,
+							value: `${addOption.text} ${searchInput}`
+						},
+						optionalInfoPlacement: "left",
+						textVariant
+					})
+				}) : null,
+				selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
+					gap: .25,
+					id: "items",
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx("div", {
+						"aria-disabled": false,
+						"aria-label": "select-all",
+						"aria-selected": selectedData.allSelected,
+						className: cn(selectInputStyle.dropdownItem({
+							selected: selectedData.allSelected,
+							size: size === "small" ? "small" : "default"
+						})),
+						"data-testid": "select-all",
+						onClick: selectAllOptions,
+						onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+						role: "option",
+						tabIndex: 0,
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedData.allSelected,
+							className: selectInputStyle.dropdownCheckbox,
+							"data-testid": "select-all-checkbox",
+							disabled: false,
+							onChange: selectAllOptions,
+							tabIndex: -1,
+							value: "select-all",
+							children: /* @__PURE__ */ jsxs(Stack, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									as: "span",
+									placement: "left",
+									variant: textVariant,
+									children: selectAll.label
+								}), /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									placement: "left",
+									prominence: "weak",
+									sentiment: "neutral",
+									variant: size === "small" ? "captionSmall" : "bodySmall",
+									children: selectAll.description
+								})]
+							})
+						})
+					})
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, {
+					gap: .25,
+					id: "items",
+					children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__PURE__ */ jsx("div", {
+						"aria-disabled": !!option.disabled,
+						"aria-label": option.value,
+						"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+						className: cn(selectInputStyle.dropdownItem({
+							disabled: !!option.disabled,
+							selected: selectedData.selectedValues.includes(option.value) && !option.disabled,
+							size: size === "small" ? "small" : "default"
+						})),
+						"data-testid": `option-${option.value}`,
+						id: `option-${index}`,
+						onClick: (event) => {
 							if (!option.disabled) handleClick({
 								clickedOption: option,
 								event
 							});
 						},
-						tabIndex: -1,
-						tooltip: option.tooltip,
-						value: option.value,
-						children: /* @__PURE__ */ jsx(DisplayOption, {
+						onKeyDown: (event) => {
+							if ([" ", "Enter"].includes(event.key)) handleClick({
+								clickedOption: option,
+								event
+							});
+						},
+						ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+						role: "option",
+						tabIndex: option.disabled ? -1 : 0,
+						children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+							className: selectInputStyle.dropdownCheckbox,
+							disabled: option.disabled,
+							onChange: (event) => {
+								if (!option.disabled) handleClick({
+									clickedOption: option,
+									event
+								});
+							},
+							tabIndex: -1,
+							tooltip: option.tooltip,
+							value: option.value,
+							children: /* @__PURE__ */ jsx(DisplayOption, {
+								descriptionDirection,
+								option,
+								optionalInfoPlacement,
+								textVariant
+							})
+						}) : /* @__PURE__ */ jsx(DisplayOption, {
 							descriptionDirection,
 							option,
 							optionalInfoPlacement,
 							textVariant
 						})
-					}) : /* @__PURE__ */ jsx(DisplayOption, {
-						descriptionDirection,
-						option,
-						optionalInfoPlacement,
-						textVariant
-					})
-				}, option.value)), loadMore ? /* @__PURE__ */ jsx(Stack, {
-					className: dropdownLoadMore,
-					children: loadMore
-				}) : null]
-			})
-		]
-	}) : /* @__PURE__ */ jsxs(Stack, {
-		className: dropdownContainer,
-		"data-grouped": true,
-		id: "select-dropdown",
-		onKeyDown: handleKeyDownSelect,
-		role: "listbox",
-		children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
-				"aria-selected": "false",
-				className: comboboxCreate,
-				"data-testid": "add-option",
-				id: "add-option",
-				onClick: handleClickCustomValue,
-				onKeyDown: (event) => {
-					if (["Enter", " "].includes(event.key)) handleClickCustomValue();
-				},
-				role: "option",
-				tabIndex: -1,
-				children: /* @__PURE__ */ jsx(DisplayOption, {
-					descriptionDirection: "row",
-					option: {
-						label: /* @__PURE__ */ jsxs(Stack, {
-							alignItems: "center",
-							direction: "row",
-							gap: "1",
-							children: [/* @__PURE__ */ jsx(PlusIcon, {
-								sentiment: "primary",
-								size: sizeVariantIcon
-							}), /* @__PURE__ */ jsxs(Text, {
-								as: "span",
-								sentiment: "primary",
-								variant: textVariantSmall,
-								children: [
-									addOption.text,
-									" ",
-									searchInput
-								]
-							})]
-						}),
-						searchText: searchInput,
-						value: `${addOption.text} ${searchInput}`
-					},
-					optionalInfoPlacement: "left",
-					textVariant
+					}, option.value)), loadMore ? /* @__PURE__ */ jsx(Stack, {
+						className: selectInputStyle.dropdownLoadMore,
+						children: loadMore
+					}) : null]
 				})
-			}) : null,
-			selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
-				id: "items",
-				children: /* @__PURE__ */ jsx("div", {
-					"aria-disabled": false,
-					"aria-label": "select-all",
-					"aria-selected": selectedData.allSelected,
-					className: cn(dropdownItem({
-						selected: selectedData.allSelected,
-						size: size === "small" ? "small" : "default"
-					})),
-					"data-testid": "select-all",
-					id: "select-all",
-					onClick: selectAllOptions,
-					onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+			]
+		}) : /* @__PURE__ */ jsxs(Stack, {
+			className: selectInputStyle.dropdownContainer,
+			"data-grouped": true,
+			id: "select-dropdown",
+			onKeyDown: handleKeyDownSelect,
+			role: "listbox",
+			children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
+					"aria-selected": "false",
+					className: selectInputStyle.comboboxCreate,
+					"data-testid": "add-option",
+					id: "add-option",
+					onClick: handleClickCustomValue,
+					onKeyDown: (event) => {
+						if (["Enter", " "].includes(event.key)) handleClickCustomValue();
+					},
 					role: "option",
-					tabIndex: 0,
-					children: /* @__PURE__ */ jsx(Checkbox, {
-						checked: selectedData.allSelected,
-						className: dropdownCheckbox,
-						"data-testid": "select-all-checkbox",
-						disabled: false,
-						name: "select-all",
-						onChange: selectAllOptions,
-						tabIndex: -1,
-						value: "select-all",
-						children: /* @__PURE__ */ jsxs(Stack, {
-							direction: "column",
-							children: [/* @__PURE__ */ jsx(Text, {
-								as: "span",
-								placement: "left",
-								variant: textVariant,
-								children: selectAll.label
-							}), /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								placement: "left",
-								prominence: "weak",
-								sentiment: "neutral",
-								variant: size === "small" ? "captionSmall" : "bodySmall",
-								children: selectAll.description
-							})]
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx(DisplayOption, {
+						descriptionDirection: "row",
+						option: {
+							label: /* @__PURE__ */ jsxs(Stack, {
+								alignItems: "center",
+								direction: "row",
+								gap: "1",
+								children: [/* @__PURE__ */ jsx(PlusIcon, {
+									sentiment: "primary",
+									size: sizeVariantIcon
+								}), /* @__PURE__ */ jsxs(Text, {
+									as: "span",
+									sentiment: "primary",
+									variant: textVariantSmall,
+									children: [
+										addOption.text,
+										" ",
+										searchInput
+									]
+								})]
+							}),
+							searchText: searchInput,
+							value: `${addOption.text} ${searchInput}`
+						},
+						optionalInfoPlacement: "left",
+						textVariant
+					})
+				}) : null,
+				selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
+					id: "items",
+					children: /* @__PURE__ */ jsx("div", {
+						"aria-disabled": false,
+						"aria-label": "select-all",
+						"aria-selected": selectedData.allSelected,
+						className: cn(selectInputStyle.dropdownItem({
+							selected: selectedData.allSelected,
+							size: size === "small" ? "small" : "default"
+						})),
+						"data-testid": "select-all",
+						id: "select-all",
+						onClick: selectAllOptions,
+						onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+						role: "option",
+						tabIndex: 0,
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedData.allSelected,
+							className: selectInputStyle.dropdownCheckbox,
+							"data-testid": "select-all-checkbox",
+							disabled: false,
+							name: "select-all",
+							onChange: selectAllOptions,
+							tabIndex: -1,
+							value: "select-all",
+							children: /* @__PURE__ */ jsxs(Stack, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									as: "span",
+									placement: "left",
+									variant: textVariant,
+									children: selectAll.label
+								}), /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									placement: "left",
+									prominence: "weak",
+									sentiment: "neutral",
+									variant: size === "small" ? "captionSmall" : "bodySmall",
+									children: selectAll.description
+								})]
+							})
 						})
 					})
-				})
-			}) : null,
-			Object.keys(displayedOptions).map((group, index) => {
-				var _groupEmptyState$grou;
-				var _groupError$group;
-				const hasElements = displayedOptions[group].length > 0;
-				const emptyStateGroup = (_groupEmptyState$grou = groupEmptyState === null || groupEmptyState === void 0 ? void 0 : groupEmptyState[group]) !== null && _groupEmptyState$grou !== void 0 ? _groupEmptyState$grou : null;
-				const errorGroup = (_groupError$group = groupError === null || groupError === void 0 ? void 0 : groupError[group]) !== null && _groupError$group !== void 0 ? _groupError$group : null;
-				return /* @__PURE__ */ jsxs(Stack, {
-					gap: .25,
-					children: [hasElements || emptyStateGroup ? /* @__PURE__ */ jsx("div", {
-						className: dropdownGroupWrapper,
-						id: selectAllGroup ? "items" : void 0,
-						children: group ? /* @__PURE__ */ jsx("button", {
-							className: cn(selectAllGroup ? dropdownGroupSelectable({ size: size === "small" ? "small" : "default" }) : "", dropdownGroup),
-							"data-selectgroup": selectAllGroup,
-							"data-testid": `group-${index}`,
-							onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
-							onKeyDown: (event) => {
-								if ([" ", "Enter"].includes(event.key)) {
-									event.preventDefault();
-									handleSelectGroup(group);
-								}
-							},
-							tabIndex: selectAllGroup ? 0 : -1,
-							type: "button",
-							children: selectAllGroup ? /* @__PURE__ */ jsx(Checkbox, {
-								checked: selectedData.selectedGroups.includes(group),
-								className: dropdownCheckbox,
-								"data-testid": "select-group",
-								disabled: false,
-								onChange: () => selectAllGroup ? handleSelectGroup(group) : null,
-								tabIndex: -1,
-								value: group,
-								children: /* @__PURE__ */ jsx(Text, {
+				}) : null,
+				Object.keys(displayedOptions).map((group, index) => {
+					var _groupEmptyState$grou;
+					var _groupError$group;
+					const hasElements = displayedOptions[group].length > 0;
+					const emptyStateGroup = (_groupEmptyState$grou = groupEmptyState === null || groupEmptyState === void 0 ? void 0 : groupEmptyState[group]) !== null && _groupEmptyState$grou !== void 0 ? _groupEmptyState$grou : null;
+					const errorGroup = (_groupError$group = groupError === null || groupError === void 0 ? void 0 : groupError[group]) !== null && _groupError$group !== void 0 ? _groupError$group : null;
+					return /* @__PURE__ */ jsxs(Stack, {
+						gap: .25,
+						children: [hasElements || emptyStateGroup ? /* @__PURE__ */ jsx("div", {
+							className: selectInputStyle.dropdownGroupWrapper,
+							id: selectAllGroup ? "items" : void 0,
+							children: group ? /* @__PURE__ */ jsx("button", {
+								className: cn(selectAllGroup ? selectInputStyle.dropdownGroupSelectable({ size: size === "small" ? "small" : "default" }) : "", selectInputStyle.dropdownGroup),
+								"data-selectgroup": selectAllGroup,
+								"data-testid": `group-${index}`,
+								onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
+								onKeyDown: (event) => {
+									if ([" ", "Enter"].includes(event.key)) {
+										event.preventDefault();
+										handleSelectGroup(group);
+									}
+								},
+								tabIndex: selectAllGroup ? 0 : -1,
+								type: "button",
+								children: selectAllGroup ? /* @__PURE__ */ jsx(Checkbox, {
+									checked: selectedData.selectedGroups.includes(group),
+									className: selectInputStyle.dropdownCheckbox,
+									"data-testid": "select-group",
+									disabled: false,
+									onChange: () => selectAllGroup ? handleSelectGroup(group) : null,
+									tabIndex: -1,
+									value: group,
+									children: /* @__PURE__ */ jsx(Text, {
+										as: "span",
+										placement: "left",
+										sentiment: "neutral",
+										variant: size === "small" ? "captionSmall" : "caption",
+										children: group.toUpperCase()
+									})
+								}) : /* @__PURE__ */ jsx(Text, {
 									as: "span",
 									placement: "left",
 									sentiment: "neutral",
 									variant: size === "small" ? "captionSmall" : "caption",
 									children: group.toUpperCase()
 								})
-							}) : /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								placement: "left",
-								sentiment: "neutral",
-								variant: size === "small" ? "captionSmall" : "caption",
-								children: group.toUpperCase()
-							})
-						}, group) : null
-					}) : null, /* @__PURE__ */ jsxs(Stack, {
-						gap: "0.25",
-						id: "items",
-						children: [
-							!hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								className: emptyStateGroupStyle,
-								prominence: "weak",
-								sentiment: "neutral",
-								variant: textVariant,
-								children: emptyStateGroup
-							}) : null,
-							errorGroup ? /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								className: emptyStateGroupStyle,
-								sentiment: "danger",
-								variant: textVariant,
-								children: errorGroup
-							}) : null,
-							displayedOptions[group].map((option, indexOption) => errorGroup ? null : /* @__PURE__ */ jsx("div", {
-								"aria-disabled": !!option.disabled,
-								"aria-label": option.value,
-								"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-								className: cn(dropdownItem({
-									disabled: !!option.disabled,
-									size: size === "small" ? "small" : "default",
-									selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-								})),
-								"data-testid": `option-${option.value}`,
-								id: `option-${indexOption}`,
-								onClick: (event) => {
-									if (!option.disabled) handleClick({
-										clickedOption: option,
-										event,
-										group
-									});
-								},
-								onKeyDown: (event) => {
-									if ([" ", "Enter"].includes(event.key)) handleClick({
-										clickedOption: option,
-										event,
-										group
-									});
-								},
-								ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
-								role: "option",
-								tabIndex: option.disabled ? -1 : 0,
-								children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
-									checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
-									className: dropdownCheckbox,
-									disabled: option.disabled,
-									onChange: (event) => {
+							}, group) : null
+						}) : null, /* @__PURE__ */ jsxs(Stack, {
+							gap: "0.25",
+							id: "items",
+							children: [
+								!hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									className: selectInputStyle.emptyStateGroupStyle,
+									prominence: "weak",
+									sentiment: "neutral",
+									variant: textVariant,
+									children: emptyStateGroup
+								}) : null,
+								errorGroup ? /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									className: selectInputStyle.emptyStateGroupStyle,
+									sentiment: "danger",
+									variant: textVariant,
+									children: errorGroup
+								}) : null,
+								displayedOptions[group].map((option, indexOption) => errorGroup ? null : /* @__PURE__ */ jsx("div", {
+									"aria-disabled": !!option.disabled,
+									"aria-label": option.value,
+									"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+									className: cn(selectInputStyle.dropdownItem({
+										disabled: !!option.disabled,
+										size: size === "small" ? "small" : "default",
+										selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+									})),
+									"data-testid": `option-${option.value}`,
+									id: `option-${indexOption}`,
+									onClick: (event) => {
 										if (!option.disabled) handleClick({
 											clickedOption: option,
 											event,
 											group
 										});
 									},
-									tabIndex: -1,
-									tooltip: option.tooltip,
-									value: option.value,
-									children: /* @__PURE__ */ jsx(DisplayOption, {
+									onKeyDown: (event) => {
+										if ([" ", "Enter"].includes(event.key)) handleClick({
+											clickedOption: option,
+											event,
+											group
+										});
+									},
+									ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+									role: "option",
+									tabIndex: option.disabled ? -1 : 0,
+									children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
+										checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+										className: selectInputStyle.dropdownCheckbox,
+										disabled: option.disabled,
+										onChange: (event) => {
+											if (!option.disabled) handleClick({
+												clickedOption: option,
+												event,
+												group
+											});
+										},
+										tabIndex: -1,
+										tooltip: option.tooltip,
+										value: option.value,
+										children: /* @__PURE__ */ jsx(DisplayOption, {
+											descriptionDirection,
+											option,
+											optionalInfoPlacement,
+											textVariant
+										})
+									}) : /* @__PURE__ */ jsx(DisplayOption, {
 										descriptionDirection,
 										option,
 										optionalInfoPlacement,
 										textVariant
 									})
-								}) : /* @__PURE__ */ jsx(DisplayOption, {
-									descriptionDirection,
-									option,
-									optionalInfoPlacement,
-									textVariant
-								})
-							}, option.value))
-						]
-					})]
-				}, group);
-			})
-		] }), loadMore ? /* @__PURE__ */ jsx(Stack, {
-			className: dropdownLoadMore,
-			children: loadMore
-		}) : null]
-	});
-};
-const Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer: footer$1, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption }) => {
-	var _refSelect$current$of;
-	var _refSelect$current;
-	var _refSelect$current2;
-	var _refSelect$current3;
-	const { setIsDropdownVisible, isDropdownVisible, onSearch, searchInput, options, displayedOptions, numberOfOptions } = useSelectInput();
-	const theme = useTheme();
-	const [searchBarActive, setSearchBarActive] = useState(false);
-	const [defaultSearchValue, setDefaultSearch] = useState(null);
-	const ref = useRef(null);
-	const [search, setSearch] = useState("");
-	const [maxWidth, setWidth] = useState((_refSelect$current$of = (_refSelect$current = refSelect.current) === null || _refSelect$current === void 0 ? void 0 : _refSelect$current.offsetWidth) !== null && _refSelect$current$of !== void 0 ? _refSelect$current$of : "100%");
-	const modalContext = useContext(ModalContext);
-	const resizeDropdown = useCallback(() => {
-		if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) setWidth(refSelect.current.getBoundingClientRect().width);
-	}, [refSelect, maxWidth]);
-	useLayoutEffect(() => {
-		if (refSelect.current && isDropdownVisible) {
-			const overflow = refSelect.current.getBoundingClientRect().bottom + 256 + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10) - window.innerHeight + 32;
-			if (overflow > 0 && modalContext) {
-				const currentModal = modalContext.openedModals[0];
-				const modalElement = currentModal === null || currentModal === void 0 ? void 0 : currentModal.ref.current;
-				if (modalElement) {
-					const parentElement = modalElement.parentNode;
-					if (parentElement instanceof HTMLElement) parentElement.scrollBy({
-						behavior: "smooth",
-						top: overflow
-					});
-					else modalElement.scrollBy({
+								}, option.value))
+							]
+						})]
+					}, group);
+				})
+			] }), loadMore ? /* @__PURE__ */ jsx(Stack, {
+				className: selectInputStyle.dropdownLoadMore,
+				children: loadMore
+			}) : null]
+		});
+	};
+	Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption }) => {
+		var _refSelect$current$of;
+		var _refSelect$current;
+		var _refSelect$current2;
+		var _refSelect$current3;
+		const { setIsDropdownVisible, isDropdownVisible, onSearch, searchInput, options, displayedOptions, numberOfOptions } = useSelectInput();
+		const theme = useTheme();
+		const [searchBarActive, setSearchBarActive] = useState(false);
+		const [defaultSearchValue, setDefaultSearch] = useState(null);
+		const ref = useRef(null);
+		const [search, setSearch] = useState("");
+		const [maxWidth, setWidth] = useState((_refSelect$current$of = (_refSelect$current = refSelect.current) === null || _refSelect$current === void 0 ? void 0 : _refSelect$current.offsetWidth) !== null && _refSelect$current$of !== void 0 ? _refSelect$current$of : "100%");
+		const modalContext = useContext(ModalContext);
+		const resizeDropdown = useCallback(() => {
+			if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) setWidth(refSelect.current.getBoundingClientRect().width);
+		}, [refSelect, maxWidth]);
+		useLayoutEffect(() => {
+			if (refSelect.current && isDropdownVisible) {
+				const overflow = refSelect.current.getBoundingClientRect().bottom + 256 + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10) - window.innerHeight + 32;
+				if (overflow > 0 && modalContext) {
+					const currentModal = modalContext.openedModals[0];
+					const modalElement = currentModal === null || currentModal === void 0 ? void 0 : currentModal.ref.current;
+					if (modalElement) {
+						const parentElement = modalElement.parentNode;
+						if (parentElement instanceof HTMLElement) parentElement.scrollBy({
+							behavior: "smooth",
+							top: overflow
+						});
+						else modalElement.scrollBy({
+							behavior: "smooth",
+							top: overflow
+						});
+					} else window.scrollBy({
 						behavior: "smooth",
 						top: overflow
 					});
-				} else window.scrollBy({
-					behavior: "smooth",
-					top: overflow
+				}
+			}
+		}, [
+			isDropdownVisible,
+			refSelect,
+			size,
+			modalContext,
+			theme,
+			resizeDropdown
+		]);
+		useEffect(() => {
+			resizeDropdown();
+			window.addEventListener("resize", resizeDropdown);
+			return () => window.removeEventListener("resize", resizeDropdown);
+		}, [resizeDropdown, (_refSelect$current2 = refSelect.current) === null || _refSelect$current2 === void 0 ? void 0 : _refSelect$current2.offsetWidth]);
+		useEffect(() => {
+			if (!searchInput) onSearch(options);
+		}, [
+			onSearch,
+			options,
+			searchInput
+		]);
+		useEffect(() => {
+			if (!isDropdownVisible) {
+				setDefaultSearch(null);
+				setSearch("");
+			}
+			const eventKeydown = (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search);
+			if (!searchable) document.addEventListener("keydown", eventKeydown);
+			return () => {
+				if (!searchable) document.removeEventListener("keydown", eventKeydown);
+			};
+		}, [
+			isDropdownVisible,
+			searchBarActive,
+			options,
+			onSearch,
+			search,
+			refSelect,
+			setDefaultSearch,
+			setIsDropdownVisible,
+			searchable
+		]);
+		const isEmpty = useMemo(() => {
+			if (numberOfOptions === 0) return true;
+			if (Array.isArray(displayedOptions)) return displayedOptions.length === 0;
+			const groups = Object.keys(displayedOptions);
+			for (const group of groups) if (displayedOptions[group].length > 0) return false;
+			return true;
+		}, [displayedOptions, numberOfOptions]);
+		const computedFooter = useMemo(() => {
+			if (footer && !isEmpty) {
+				if (typeof footer === "function") return /* @__PURE__ */ jsx("div", {
+					className: selectInputStyle.footer,
+					children: footer(() => setIsDropdownVisible(false))
+				});
+				return /* @__PURE__ */ jsx("div", {
+					className: selectInputStyle.footer,
+					children: footer
 				});
 			}
-		}
-	}, [
-		isDropdownVisible,
-		refSelect,
-		size,
-		modalContext,
-		theme,
-		resizeDropdown
-	]);
-	useEffect(() => {
-		resizeDropdown();
-		window.addEventListener("resize", resizeDropdown);
-		return () => window.removeEventListener("resize", resizeDropdown);
-	}, [resizeDropdown, (_refSelect$current2 = refSelect.current) === null || _refSelect$current2 === void 0 ? void 0 : _refSelect$current2.offsetWidth]);
-	useEffect(() => {
-		if (!searchInput) onSearch(options);
-	}, [
-		onSearch,
-		options,
-		searchInput
-	]);
-	useEffect(() => {
-		if (!isDropdownVisible) {
-			setDefaultSearch(null);
-			setSearch("");
-		}
-		const eventKeydown = (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search);
-		if (!searchable) document.addEventListener("keydown", eventKeydown);
-		return () => {
-			if (!searchable) document.removeEventListener("keydown", eventKeydown);
-		};
-	}, [
-		isDropdownVisible,
-		searchBarActive,
-		options,
-		onSearch,
-		search,
-		refSelect,
-		setDefaultSearch,
-		setIsDropdownVisible,
-		searchable
-	]);
-	const isEmpty = useMemo(() => {
-		if (numberOfOptions === 0) return true;
-		if (Array.isArray(displayedOptions)) return displayedOptions.length === 0;
-		const groups = Object.keys(displayedOptions);
-		for (const group of groups) if (displayedOptions[group].length > 0) return false;
-		return true;
-	}, [displayedOptions, numberOfOptions]);
-	const computedFooter = useMemo(() => {
-		if (footer$1 && !isEmpty) {
-			if (typeof footer$1 === "function") return /* @__PURE__ */ jsx("div", {
-				className: footer,
-				children: footer$1(() => setIsDropdownVisible(false))
-			});
-			return /* @__PURE__ */ jsx("div", {
-				className: footer,
-				children: footer$1
-			});
-		}
-		return null;
-	}, [
-		isEmpty,
-		footer$1,
-		setIsDropdownVisible
-	]);
-	return /* @__PURE__ */ jsx(Popup, {
-		align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
-		className: dropdown,
-		containerFullWidth: true,
-		debounceDelay: 0,
-		disableAnimation: true,
-		hasArrow: false,
-		hideOnClickOutside: true,
-		id,
-		maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : (_refSelect$current3 = refSelect.current) === null || _refSelect$current3 === void 0 ? void 0 : _refSelect$current3.offsetWidth,
-		onClose: () => setIsDropdownVisible(false),
-		placement: "bottom",
-		portalTarget,
-		ref,
-		role: "dialog",
-		style: assignInlineVars({ [dropdownWidth]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }),
-		tabIndex: -1,
-		text: /* @__PURE__ */ jsxs(Stack, { children: [
-			searchable && !isLoading && (numberOfOptions >= 6 || addOption) ? /* @__PURE__ */ jsx(SearchBarDropdown, {
-				displayedOptions,
-				placeholder,
-				setSearchBarActive
-			}) : null,
-			/* @__PURE__ */ jsx(CreateDropdown, {
-				addOption,
-				defaultSearchValue,
-				descriptionDirection,
-				emptyState,
-				groupEmptyState,
-				groupError,
-				isEmpty,
-				isLoading,
-				loadMore,
-				optionalInfoPlacement,
-				searchable
-			}),
-			computedFooter
-		] }),
-		visible: isDropdownVisible,
-		children
-	});
-};
+			return null;
+		}, [
+			isEmpty,
+			footer,
+			setIsDropdownVisible
+		]);
+		return /* @__PURE__ */ jsx(Popup, {
+			align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
+			className: selectInputStyle.dropdown,
+			containerFullWidth: true,
+			debounceDelay: 0,
+			disableAnimation: true,
+			hasArrow: false,
+			hideOnClickOutside: true,
+			id,
+			maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : (_refSelect$current3 = refSelect.current) === null || _refSelect$current3 === void 0 ? void 0 : _refSelect$current3.offsetWidth,
+			onClose: () => setIsDropdownVisible(false),
+			placement: "bottom",
+			portalTarget,
+			ref,
+			role: "dialog",
+			style: assignInlineVars({ [dropdownWidth]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }),
+			tabIndex: -1,
+			text: /* @__PURE__ */ jsxs(Stack, { children: [
+				searchable && !isLoading && (numberOfOptions >= 6 || addOption) ? /* @__PURE__ */ jsx(SearchBarDropdown, {
+					displayedOptions,
+					placeholder,
+					setSearchBarActive
+				}) : null,
+				/* @__PURE__ */ jsx(CreateDropdown, {
+					addOption,
+					defaultSearchValue,
+					descriptionDirection,
+					emptyState,
+					groupEmptyState,
+					groupError,
+					isEmpty,
+					isLoading,
+					loadMore,
+					optionalInfoPlacement,
+					searchable
+				}),
+				computedFooter
+			] }),
+			visible: isDropdownVisible,
+			children
+		});
+	};
+});
 
 //#endregion
-export { Dropdown };
+init_Dropdown();
+export { Dropdown, init_Dropdown };