@povio/ui 6.0.0-rc.1 → 6.0.0-rc.3

package/dist/{Select-Br_3eecr.js → Select-DbZOJ-0u.js}

@@ -1,45 +1,37 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { t as UIConfig } from "./uiConfig.context-CT9EVqC5.js";
+import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as CheckboxCheckmark } from "./CheckboxCheckmark-BzT6MwH5.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
-import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, p as $263ab7fc0f95ccdb$export$2dbbd341daed716d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
+import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
 import { n as $dbdc5e6e7ce01b4b$export$c02625b26074192c, t as $dbdc5e6e7ce01b4b$export$72b9695b8216309a } from "./ComboBox-DFlz6HJ8.js";
 import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BG0Xjw5X.js";
-import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CoUk0kkt.js";
-import { i as $a3be900807531178$re_export$useFilter, n as $a3be900807531178$re_export$ListLayout, r as $a3be900807531178$re_export$Rect } from "./exports-BNrTn8Tj.js";
+import { i as $a3be900807531178$re_export$useFilter } from "./exports-BNrTn8Tj.js";
 import "./popoverAnimation-DEZSvKP8.js";
-import { t as Spinner } from "./Spinner-BeVTUzzx.js";
-import { t as Button } from "./Button-DER_6cxv.js";
+import { t as Button } from "./Button-DU1Q8GDB.js";
 import { BottomSheet } from "./components/bottom-sheet.js";
-import { t as useBreakpoint } from "./useBreakpoint-BzYqQEBO.js";
+import { t as useBreakpoint } from "./useBreakpoint-DOUmXVZ2.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
-import { n as FormFieldLabel, t as FormField } from "./FormField-D7KKJ6kG.js";
-import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-w7ZEVQAM.js";
+import { n as FormFieldLabel, t as FormField } from "./FormField-DyqEbqx3.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-AHLI_M3K.js";
 import "./i18n-BjNKHh_D.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-BrftXInI.js";
+import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
 import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-D7HUZLsP.js";
-import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { InputFrame } from "./components/input-frame.js";
+import { t as Input } from "./Input-CPPDOg7b.js";
 import { Tag } from "./components/tag.js";
-import { n as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-RzxvSBkd.js";
-import { t as selectListBoxItemDefinition } from "./selectItem.cva-BWfEkNs_.js";
-import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
-import { t as Input } from "./Input-CG4Irgae.js";
-import $ahdqC$react, { Fragment, createContext, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { n as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CGBkscBY.js";
+import { Fragment, Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizerState } from "react-stately/useVirtualizerState";
-import { useScrollView } from "react-aria/private/virtualizer/ScrollView";
-import { VirtualizerItem } from "react-aria/private/virtualizer/VirtualizerItem";
 import { usePreventScroll } from "react-aria";
 import { useLabel } from "@react-aria/label";
-import { useTranslation } from "react-i18next";
 import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+import { useTranslation } from "react-i18next";
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/search.mjs
 /**
 * @license lucide-react v1.43.0 - ISC
@@ -63,96 +55,6 @@ const __iconData = {
 __iconData.node;
 const Search = createLucideIcon(__iconData);
 //#endregion
-//#region ../../node_modules/.bun/react-aria-components@1.22.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Virtualizer.mjs
-const $143fb904d86051ce$var$VirtualizerContext = /*#__PURE__*/ createContext(null);
-const $143fb904d86051ce$var$VirtualizerOptionsContext = /*#__PURE__*/ createContext(null);
-function $143fb904d86051ce$export$89be5a243e59c4b2(props) {
-	let { children, layout: layoutProp, layoutOptions, shouldObserveItemSize } = props;
-	let layout = useMemo(() => typeof layoutProp === "function" ? new layoutProp() : layoutProp, [layoutProp]);
-	let renderer = useMemo(() => ({
-		isVirtualized: true,
-		layoutDelegate: layout,
-		dropTargetDelegate: layout.getDropTargetFromPoint ? layout : void 0,
-		CollectionRoot: $143fb904d86051ce$var$CollectionRoot,
-		CollectionBranch: $143fb904d86051ce$var$CollectionBranch
-	}), [layout]);
-	return /*#__PURE__*/ $ahdqC$react.createElement($263ab7fc0f95ccdb$export$4feb769f8ddf26c5.Provider, { value: renderer }, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerOptionsContext.Provider, { value: {
-		layout,
-		layoutOptions,
-		shouldObserveItemSize
-	} }, children));
-}
-function $143fb904d86051ce$var$CollectionRoot({ collection, persistedKeys, scrollRef, renderDropIndicator }) {
-	let { layout, layoutOptions, shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
-	let layoutOptions2 = layout.useLayoutOptions?.();
-	let state = useVirtualizerState({
-		allowsWindowScrolling: true,
-		layout,
-		collection,
-		renderView: (type, item) => {
-			return item?.render?.(item);
-		},
-		onVisibleRectChange(rect) {
-			let element = scrollRef?.current;
-			if (element) {
-				element.scrollLeft = rect.x;
-				element.scrollTop = rect.y;
-			}
-		},
-		persistedKeys,
-		layoutOptions: useMemo(() => layoutOptions && layoutOptions2 ? {
-			...layoutOptions,
-			...layoutOptions2
-		} : layoutOptions || layoutOptions2, [layoutOptions, layoutOptions2])
-	});
-	let { contentProps } = useScrollView({
-		onVisibleRectChange: state.setVisibleRect,
-		onSizeChange: state.setSize,
-		contentSize: state.contentSize,
-		onScrollStart: state.startScrolling,
-		onScrollEnd: state.endScrolling,
-		allowsWindowScrolling: true
-	}, scrollRef);
-	return /*#__PURE__*/ $ahdqC$react.createElement("div", contentProps, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerContext.Provider, { value: state }, $143fb904d86051ce$var$renderChildren(null, state.visibleViews, renderDropIndicator, shouldObserveItemSize)));
-}
-function $143fb904d86051ce$var$CollectionBranch({ parent, renderDropIndicator }) {
-	let parentView = useContext($143fb904d86051ce$var$VirtualizerContext).virtualizer.getVisibleView(parent.key);
-	let { shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
-	return $143fb904d86051ce$var$renderChildren(parentView, Array.from(parentView.children), renderDropIndicator, shouldObserveItemSize);
-}
-function $143fb904d86051ce$var$renderChildren(parent, children, renderDropIndicator, shouldObserveItemSize) {
-	return children.map((view) => $143fb904d86051ce$var$renderWrapper(parent, view, renderDropIndicator, shouldObserveItemSize));
-}
-function $143fb904d86051ce$var$renderWrapper(parent, reusableView, renderDropIndicator, shouldObserveItemSize) {
-	let rendered = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
-		key: reusableView.key,
-		layoutInfo: reusableView.layoutInfo,
-		virtualizer: reusableView.virtualizer,
-		parent: parent?.layoutInfo,
-		shouldObserveItemSize
-	}, reusableView.rendered);
-	let { collection, layout } = reusableView.virtualizer;
-	let node = reusableView.content;
-	if (node?.type === "item" && renderDropIndicator && layout.getDropTargetLayoutInfo) rendered = /*#__PURE__*/ $ahdqC$react.createElement($ahdqC$react.Fragment, { key: reusableView.key }, $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, {
-		type: "item",
-		key: reusableView.content.key,
-		dropPosition: "before"
-	}, renderDropIndicator), rendered, $263ab7fc0f95ccdb$export$2dbbd341daed716d(collection, node, (target) => $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator)));
-	return rendered;
-}
-function $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator) {
-	let indicator = renderDropIndicator(target);
-	if (indicator) {
-		let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo(target);
-		indicator = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
-			layoutInfo,
-			virtualizer: reusableView.virtualizer,
-			parent: parent?.layoutInfo
-		}, indicator);
-	}
-	return indicator;
-}
-//#endregion
 //#region src/components/inputs/Selection/shared/SelectInputTags.tsx
 const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
 	const { displayedItems, remainingCount } = useMemo(() => {
@@ -717,7 +619,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		...focusWithinProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
+				className: clsx("relative flex flex-1 items-center gap-2 truncate pr-2!", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
 					as,
 					size,
 					...props
@@ -730,7 +632,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						labelProps
 					}),
 					leadingContent && /* @__PURE__ */ jsx("div", {
-						className: "ml-input-side-default flex shrink-0 items-center",
+						className: "flex shrink-0 items-center",
 						children: leadingContent
 					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
@@ -745,7 +647,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							ref: inputRef,
 							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
-							className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-content-muted", "disabled:text-inherit disabled:placeholder:text-content-muted", inputClassName),
+							className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-muted-foreground", "disabled:text-inherit disabled:placeholder:text-muted-foreground", inputClassName),
 							onKeyDown,
 							onKeyDownCapture: onInputKeyDownCapture,
 							...fieldProps
@@ -760,7 +662,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						onKeyDown: onTriggerKeyDown,
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs("span", {
-							className: clsx("block truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-content-muted"),
+							className: clsx("block truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-muted-foreground"),
 							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
 						})]
 					})
@@ -771,7 +673,8 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 					onClear();
 				},
 				as,
-				show: showClearButton
+				show: showClearButton,
+				className: "mr-2"
 			}),
 			trailingContent && /* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center",
@@ -780,15 +683,14 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 			!hideDropdownIcon && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
-				className: clsx("flex shrink-0 items-center justify-center self-stretch py-0! pl-1.5 outline-none disabled:text-inherit", inputSizeCva({ size })),
+				className: clsx("flex shrink-0 items-center justify-center self-stretch py-0! pl-0! outline-none disabled:text-inherit", inputSizeCva({ size })),
 				isDisabled,
 				onPress: () => {
 					if (!isSearchable) setIsOpen(!isOpen);
 				},
 				children: /* @__PURE__ */ jsx(IconSlot, {
 					icon: ChevronDown,
-					className: clsx("text-inherit", isOpen && "rotate-180"),
-					iconClassName: "fill-current stroke-0",
+					className: clsx("opacity-50 transition-transform", isOpen && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			})
@@ -796,253 +698,21 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 	});
 };
 //#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
-const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const ref = useRef(null);
-	const { t } = useTranslation("ui");
-	const { selectedIds, isMultiple } = SelectContext.useSelect();
-	const itemContent = useMemo(() => {
-		if (isNewItem) return newItemRender?.(label) ?? `${t(($) => $.ui.autocomplete.createNewBtn)} '${label}'`;
-		return content ?? label;
-	}, [
-		isNewItem,
-		newItemRender,
-		label,
-		content,
-		t
-	]);
-	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
-		ref,
-		id,
-		textValue: label,
-		isDisabled,
-		className: selectListItemCva({
-			isSingle: !isMultiple,
-			isNewItem
-		}),
-		children: [
-			isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
-				variant: "default",
-				className: "group-focus-visible:outline-none!"
-			}),
-			isMultiple && isSearchable && /* @__PURE__ */ jsx("div", {
-				className: "group",
-				"data-rac": "",
-				"data-selected": selectedIds.includes(id) || void 0,
-				children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
-					variant: "default",
-					className: "group-focus-visible:outline-none!"
-				})
-			}),
-			itemContent
-		]
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
-const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const ref = useRef(null);
-	const { t } = useTranslation("ui");
-	const { selectableListItems, selectedIds } = SelectContext.useSelect();
-	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
-		ref,
-		id,
-		textValue: label || t(($) => $.ui.select.allOption),
-		isDisabled,
-		className: selectListItemCva({}),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "group",
-			"data-rac": "",
-			"data-selected": selectedIds.length === selectableListItems.length || void 0,
-			"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
-			children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
-				variant: "default",
-				className: "group-focus-visible:outline-none!"
-			})
-		}), t(($) => $.ui.select.allOption)]
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
-const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const { t } = useTranslation("ui");
-	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
-	const onIntersection = useCallback(() => {
-		if (!isDebouncing && !isLoading && hasLoadMore) onLoadMore?.();
-	}, [
-		isDebouncing,
-		isLoading,
-		hasLoadMore,
-		onLoadMore
-	]);
-	const { ref } = useIntersectionObserver({
-		onIntersection,
-		rootMargin: "40px"
-	});
-	return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
-		id,
-		textValue: label || t(($) => $.ui.loadingState.text),
-		isDisabled: true,
-		className: selectListItemCva({}),
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: "flex flex-1 justify-center text-interactive-subtle-primary-foreground",
-			children: /* @__PURE__ */ jsx(Spinner, {})
-		})
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBox.tsx
-var ReversedListLayout = class extends $a3be900807531178$re_export$ListLayout {
-	reverseLayoutInfo(layoutInfo) {
-		const reversedLayoutInfo = layoutInfo.copy();
-		reversedLayoutInfo.rect.y = this.getContentSize().height - reversedLayoutInfo.rect.maxY;
-		return reversedLayoutInfo;
-	}
-	getLayoutInfo(key) {
-		const layoutInfo = super.getLayoutInfo(key);
-		return layoutInfo ? this.reverseLayoutInfo(layoutInfo) : null;
-	}
-	getVisibleLayoutInfos(rect) {
-		const mirroredRect = new $a3be900807531178$re_export$Rect(rect.x, Math.max(0, this.getContentSize().height - rect.maxY), rect.width, rect.height);
-		return super.getVisibleLayoutInfos(mirroredRect).map((layoutInfo) => this.reverseLayoutInfo(layoutInfo));
-	}
-};
-const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, isReversed = false, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
-	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore, isLoading } = SelectContext.useSelect();
-	const listBoxRef = useRef(null);
-	const hasRequestedAtTopRef = useRef(false);
-	const isReverseScrollAnchoredRef = useRef(!isReversed);
-	const reverseScrollBottomOffsetRef = useRef(0);
-	const previousLoadedItemIdsRef = useRef([]);
-	const shouldVirtualize = !!virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore;
-	const usesReversedLayout = isReversed && isSearchable && shouldVirtualize;
-	const displayedListItems = isReversed && !usesReversedLayout ? listItems.toReversed() : listItems;
-	const loadedItemIds = useMemo(() => listItems.filter((item) => item.id !== LoadingItemId).map((item) => item.id), [listItems]);
-	const loadMoreResetKey = loadedItemIds.join("\0");
-	useLayoutEffect(() => {
-		hasRequestedAtTopRef.current = false;
-	}, [loadMoreResetKey]);
-	useLayoutEffect(() => {
-		const previousLoadedItemIds = previousLoadedItemIdsRef.current;
-		const preservesExistingItems = previousLoadedItemIds.length > 0 && previousLoadedItemIds.every((itemId, index) => loadedItemIds[index] === itemId);
-		previousLoadedItemIdsRef.current = loadedItemIds;
-		if (!preservesExistingItems) reverseScrollBottomOffsetRef.current = 0;
-		const listBox = listBoxRef.current;
-		if (!listBox) {
-			isReverseScrollAnchoredRef.current = true;
-			return;
-		}
-		if (!isReversed) {
-			listBox.scrollTop = 0;
-			isReverseScrollAnchoredRef.current = true;
-			return;
-		}
-		isReverseScrollAnchoredRef.current = false;
-		const finishAnchoring = () => {
-			if (listBox.scrollHeight <= listBox.clientHeight) return false;
-			listBox.scrollTop = listBox.scrollHeight - listBox.clientHeight - reverseScrollBottomOffsetRef.current;
-			isReverseScrollAnchoredRef.current = true;
-			return true;
-		};
-		let scrollFrame = requestAnimationFrame(() => {
-			scrollFrame = requestAnimationFrame(() => {
-				if (!finishAnchoring()) isReverseScrollAnchoredRef.current = true;
-			});
-		});
-		return () => {
-			cancelAnimationFrame(scrollFrame);
-			reverseScrollBottomOffsetRef.current = listBox.scrollHeight - listBox.clientHeight - listBox.scrollTop;
-		};
-	}, [
-		isReversed,
-		loadMoreResetKey,
-		loadedItemIds
-	]);
-	const onSelectionChange = (value) => {
-		const ids = Array.from(value);
-		if (!isMultiple && ids.length === 0) {
-			if (fieldState.value) {
-				onClose?.();
-				onChange(fieldState.value);
-			}
-			return;
-		}
-		if (isMultiple && ids.includes("all-item-id")) {
-			if (ids.length > selectableListItems.length) onClear();
-			else onSelectAll();
-			return;
-		}
-		if (isMultiple) onChange(ids);
-		else {
-			onClose?.();
-			onChange(ids[0]);
-		}
-	};
-	const requestLoadMore = useCallback(() => {
-		if (isLoading) return;
-		if (isReversed && (!isReverseScrollAnchoredRef.current || (listBoxRef.current?.scrollTop ?? 0) > 1 || hasRequestedAtTopRef.current)) return;
-		if (isReversed) hasRequestedAtTopRef.current = true;
-		onLoadMore?.();
-	}, [
-		isLoading,
-		isReversed,
-		onLoadMore
-	]);
-	const onScroll = (event) => {
-		if (!isReversed || !hasLoadMore || !isReverseScrollAnchoredRef.current) return;
-		if (event.currentTarget.scrollTop > 48) hasRequestedAtTopRef.current = false;
-		else requestLoadMore();
-	};
-	const renderItem = (item) => {
-		if (item.isSelectAllItem) return /* @__PURE__ */ jsx(SelectListBoxItemSelectAll, { ...item }, item.id);
-		if (item.isLoadingItem) return /* @__PURE__ */ jsx(SelectListBoxLoadingItem, {
-			...item,
-			onLoadMore: requestLoadMore
-		}, item.id);
-		return /* @__PURE__ */ jsx(SelectListBoxItem, {
-			...item,
-			isSearchable,
-			isNewItem: item.isNewItem,
-			newItemRender
-		}, item.id);
-	};
-	if (shouldVirtualize) return /* @__PURE__ */ jsx($143fb904d86051ce$export$89be5a243e59c4b2, {
-		layout: usesReversedLayout ? ReversedListLayout : $a3be900807531178$re_export$ListLayout,
-		layoutOptions: virtualizerOptions,
-		children: /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
-			ref: listBoxRef,
-			...props,
-			"aria-label": label,
-			selectionMode,
-			className: clsx("flex-1 outline-none [&>div:last-child>*]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
-			items: displayedListItems,
-			selectedKeys: selectedIds,
-			onSelectionChange,
-			onScroll,
-			escapeKeyBehavior: "none",
-			shouldSelectOnPressUp: true,
-			children: renderItem
-		})
-	});
-	return /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
-		ref: listBoxRef,
-		...props,
-		"aria-label": label,
-		selectionMode,
-		className: clsx("flex-1 outline-none [&>div:last-child]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
-		items: displayedListItems,
-		selectedKeys: selectedIds,
-		onSelectionChange,
-		onScroll,
-		escapeKeyBehavior: "none",
-		shouldSelectOnPressUp: true,
-		children: renderItem
-	});
+//#region src/components/inputs/Selection/shared/SelectListBox.lazy.tsx
+const loadSelectListBox = () => import("./SelectListBox-CFOH3brT.js");
+const SelectListBoxRenderer = lazy(() => loadSelectListBox().then(({ SelectListBox }) => ({ default: SelectListBox })));
+/** Fetches the list box chunk ahead of the list opening (hover, focus). */
+const preloadSelectListBox = () => {
+	loadSelectListBox();
 };
+/**
+* List box (items, virtualizer and list layouts) that only loads when a select opens.
+* The popover and bottom sheet already render nothing while closed, so the fallback is empty.
+*/
+const SelectListBox = (props) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: null,
+	children: /* @__PURE__ */ jsx(SelectListBoxRenderer, { ...props })
+});
 //#endregion
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
@@ -1161,8 +831,14 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					className: clsx("group w-full", containerClassName)
 				},
 				as,
-				onMouseEnter,
-				onFocusCapture,
+				onMouseEnter: (event) => {
+					preloadSelectListBox();
+					onMouseEnter?.(event);
+				},
+				onFocusCapture: (event) => {
+					preloadSelectListBox();
+					onFocusCapture?.(event);
+				},
 				ref: wrapperRef,
 				children: [customTrigger ? /* @__PURE__ */ jsx($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
 					...dialogTriggerProps,
@@ -1225,10 +901,10 @@ const FormFieldHeaderClose = ({ onClose }) => {
 	return /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 		onPress: onClose,
 		"aria-label": t(($) => $.ui.closeAlt),
-		className: "shrink-0 focus-visible:outline-interactive-ring",
+		className: "shrink-0 rounded-sm opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50",
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: X,
-			className: "text-content-secondary"
+			className: "text-muted-foreground"
 		})
 	});
 };
@@ -1238,7 +914,7 @@ const SelectListBoxSelectionBar = ({ className }) => {
 	const { t } = useTranslation("ui");
 	const { onClear, onSelectAll } = SelectContext.useSelect();
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center justify-between border-border-default-subtle border-b px-4 py-3", className),
+		className: clsx("flex items-center justify-between border-border border-b px-4 py-3", className),
 		children: [/* @__PURE__ */ jsx(Button, {
 			type: "button",
 			color: "primary",
@@ -1303,7 +979,10 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 		labelProps,
 		className: clsx("group w-full", containerClassName),
 		onMouseEnter,
-		onFocusCapture,
+		onFocusCapture: (event) => {
+			preloadSelectListBox();
+			onFocusCapture?.(event);
+		},
 		children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
@@ -1354,8 +1033,8 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 						onChange: onInputChange,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
-						className: "mb-list-height-title-bottom px-list-side-title",
-						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(Search, { className: "size-6" }) : void 0,
+						className: "mb-2 px-4",
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(Search, { className: "size-4" }) : void 0,
 						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
@@ -1410,13 +1089,12 @@ const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size,
 	}), !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		tabIndex: -1,
-		className: clsx("flex shrink-0 items-center justify-center self-stretch border-0! py-0! pl-1.5 outline-none disabled:text-inherit", inputSizeCva({ size })),
+		className: clsx("flex shrink-0 items-center justify-center self-stretch border-0! py-0! pl-0! outline-none disabled:text-inherit", inputSizeCva({ size })),
 		disabled: isDisabled,
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: ChevronDown,
-			className: "text-inherit",
-			iconClassName: "fill-current stroke-0"
+			className: "opacity-50"
 		})
 	}) : void 0] });
 };
@@ -1541,7 +1219,7 @@ function SelectInner({ renderStaticInput, isFormControlDisabled, list, ...inputP
 			dataHasSearch: false
 		};
 		const buttonContent = as === "floating" && isEmpty || isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
-			className: "block truncate text-content-muted empty:before:inline-block empty:before:content-['']",
+			className: "block truncate text-muted-foreground empty:before:inline-block empty:before:content-['']",
 			children: placeholder
 		}) : /* @__PURE__ */ jsx("span", {
 			className: "block truncate",
@@ -1555,13 +1233,15 @@ function SelectInner({ renderStaticInput, isFormControlDisabled, list, ...inputP
 			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),
 			contentGroup: "select",
+			contentClassName: "pr-2!",
+			clearClassName: "mr-2",
 			labelPlacement: "content-row",
 			dataAttributes,
 			wrapTrailingContent: false,
 			onStaticInteract: renderRealInput,
 			onStaticPress: replayStaticInputPress,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
-				className: "ml-input-side-default flex shrink-0 items-center",
+				className: "flex shrink-0 items-center",
 				children: props.leadingContent
 			}),
 			onClear: () => props.onChange?.(isMultiple ? [] : null),
@@ -1576,7 +1256,7 @@ function SelectInner({ renderStaticInput, isFormControlDisabled, list, ...inputP
 				"aria-expanded": false,
 				value: inputValue,
 				placeholder: shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
-				className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-content-muted disabled:text-inherit", props.inputClassName),
+				className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:text-inherit", props.inputClassName),
 				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true
@@ -1602,4 +1282,4 @@ function Select(props) {
 	return /* @__PURE__ */ jsx(SelectInner, { ...props });
 }
 //#endregion
-export { useKeyInteractions as a, getKeyInteractionAction as i, SelectInner as n, useDebounceCallback as o, createKeyInteractionsHandler as r, Select as t };
+export { useKeyInteractions as a, LoadingItemId as c, getKeyInteractionAction as i, SelectAllItemId as l, SelectInner as n, SelectContext as o, createKeyInteractionsHandler as r, useDebounceCallback as s, Select as t };

package/dist/{Select-DHYddedn.d.ts → Select-NNohxr1t.d.ts}

@@ -1,6 +1,6 @@
-import { t as BottomSheetProps } from "./BottomSheet-BQXSdxoX.js";
-import { n as FormFieldProps } from "./FormField-BIRMlgu4.js";
-import { n as InputVariantProps } from "./input.cva-L7jKDv6q.js";
+import { t as BottomSheetProps } from "./BottomSheet-C-jdDmO7.js";
+import { n as FormFieldProps } from "./FormField-BsR2Cjxm.js";
+import { n as InputVariantProps } from "./input.cva-CEFEpKml.js";
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
 import { t as AsyncList } from "./useAsyncList-Cu-Y8If2.js";
 import { FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref } from "react";

package/dist/{Select.bound-CgLKMzLn.js → Select.bound-B9c9mP8o.js}

@@ -1,4 +1,4 @@
-import { n as SelectInner } from "./Select-Br_3eecr.js";
+import { n as SelectInner } from "./Select-DbZOJ-0u.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
 import { t as FieldController } from "./form.binding-B-2id68q.js";
 import { memo } from "react";

package/dist/{Select.bound-CJ-tCsmX.d.ts → Select.bound-Dh5kywfV.d.ts}

@@ -1,5 +1,5 @@
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
-import { a as SelectProps$1, c as MultiSelectProps, f as SingleSelectProps, n as SelectDataProps, o as DefaultInitialSelectItem, s as GroupedSelectProps } from "./Select-DHYddedn.js";
+import { a as SelectProps$1, c as MultiSelectProps, f as SingleSelectProps, n as SelectDataProps, o as DefaultInitialSelectItem, s as GroupedSelectProps } from "./Select-NNohxr1t.js";
 import { n as FieldValues, t as FormControlProps } from "./form.types-C8P4sznq.js";
 import { ReactElement } from "react";
 import { Key } from "react-aria-components";