@questpie/admin 3.0.2 → 3.0.4

package/dist/client/components/primitives/select-single.mjs

@@ -2,11 +2,11 @@
 
 import { useResolveText } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
-import { Button } from "../ui/button.mjs";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
 import { useIsMobile } from "../../hooks/use-media-query.mjs";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.mjs";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../ui/drawer.mjs";
+import { FieldSelectTrigger } from "./field-select-control.mjs";
 import { flattenOptions } from "./types.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -16,11 +16,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/primitives/select-single.tsx
 const EMPTY_OPTIONS = [];
+const SEARCH_OPTION_THRESHOLD = 8;
 /**
 * SelectSingle - Single select component with search
 *
 * Features:
-* - Always searchable
+* - Searchable when async or option list is large
 * - Responsive: Popover on desktop, Drawer on mobile
 * - Supports static and async options
 * - Keyboard navigation
@@ -38,55 +39,58 @@ const EMPTY_OPTIONS = [];
 * ```
 */
 function SelectSingle(t0) {
-	const $ = c(114);
-	const { value, onChange, options: staticOptions, loadOptions, queryKey, prefetchOnMount: t1, clearable: t2, loading: t3, emptyMessage: t4, placeholder: t5, disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle: t6 } = t0;
+	const $ = c(134);
+	const { value, onChange, options: staticOptions, loadOptions, queryKey, prefetchOnMount: t1, clearable: t2, loading: t3, emptyMessage: t4, searchable: t5, placeholder: t6, disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle: t7, selectedLabel, isLoadingValue: t8, asInputGroupControl: t9 } = t0;
 	const prefetchOnMount = t1 === void 0 ? false : t1;
 	const clearable = t2 === void 0 ? true : t2;
 	const externalLoading = t3 === void 0 ? false : t3;
 	const emptyMessage = t4 === void 0 ? "No options found" : t4;
-	const placeholder = t5 === void 0 ? "Select..." : t5;
-	const drawerTitle = t6 === void 0 ? "Select option" : t6;
+	const searchable = t5 === void 0 ? "auto" : t5;
+	const placeholder = t6 === void 0 ? "Select..." : t6;
+	const drawerTitle = t7 === void 0 ? "Select option" : t7;
+	const isLoadingValue = t8 === void 0 ? false : t8;
+	const asInputGroupControl = t9 === void 0 ? false : t9;
 	const resolvedStaticOptions = staticOptions ?? EMPTY_OPTIONS;
 	const resolveText = useResolveText();
-	let t7;
+	let t10;
 	if ($[0] !== placeholder || $[1] !== resolveText) {
-		t7 = resolveText(placeholder);
+		t10 = resolveText(placeholder);
 		$[0] = placeholder;
 		$[1] = resolveText;
-		$[2] = t7;
-	} else t7 = $[2];
-	const resolvedPlaceholder = t7;
-	let t8;
+		$[2] = t10;
+	} else t10 = $[2];
+	const resolvedPlaceholder = t10;
+	let t11;
 	if ($[3] !== emptyMessage || $[4] !== resolveText) {
-		t8 = resolveText(emptyMessage);
+		t11 = resolveText(emptyMessage);
 		$[3] = emptyMessage;
 		$[4] = resolveText;
-		$[5] = t8;
-	} else t8 = $[5];
-	const resolvedEmptyMessage = t8;
-	let t9;
+		$[5] = t11;
+	} else t11 = $[5];
+	const resolvedEmptyMessage = t11;
+	let t12;
 	if ($[6] !== drawerTitle || $[7] !== resolveText) {
-		t9 = resolveText(drawerTitle);
+		t12 = resolveText(drawerTitle);
 		$[6] = drawerTitle;
 		$[7] = resolveText;
-		$[8] = t9;
-	} else t9 = $[8];
-	const resolvedDrawerTitle = t9;
+		$[8] = t12;
+	} else t12 = $[8];
+	const resolvedDrawerTitle = t12;
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const instanceId = useId();
 	const deferredSearch = useDeferredValue(search);
 	const isMobile = useIsMobile();
-	let t10;
+	let t13;
 	if ($[9] !== resolvedStaticOptions) {
-		t10 = flattenOptions(resolvedStaticOptions);
+		t13 = flattenOptions(resolvedStaticOptions);
 		$[9] = resolvedStaticOptions;
-		$[10] = t10;
-	} else t10 = $[10];
-	const flatStaticOptions = t10;
-	let t11;
+		$[10] = t13;
+	} else t13 = $[10];
+	const flatStaticOptions = t13;
+	let t14;
 	if ($[11] !== deferredSearch || $[12] !== instanceId || $[13] !== queryKey) {
-		t11 = queryKey ? queryKey(deferredSearch) : [
+		t14 = queryKey ? queryKey(deferredSearch) : [
 			"select-single",
 			instanceId,
 			deferredSearch
@@ -94,246 +98,297 @@ function SelectSingle(t0) {
 		$[11] = deferredSearch;
 		$[12] = instanceId;
 		$[13] = queryKey;
-		$[14] = t11;
-	} else t11 = $[14];
-	const loadOptionsKey = t11;
-	let t12;
+		$[14] = t14;
+	} else t14 = $[14];
+	const loadOptionsKey = t14;
+	let t15;
 	if ($[15] !== deferredSearch || $[16] !== loadOptions) {
-		t12 = () => loadOptions?.(deferredSearch) ?? Promise.resolve([]);
+		t15 = () => loadOptions?.(deferredSearch) ?? Promise.resolve([]);
 		$[15] = deferredSearch;
 		$[16] = loadOptions;
-		$[17] = t12;
-	} else t12 = $[17];
-	const t13 = !!loadOptions && (open || prefetchOnMount);
-	let t14;
-	if ($[18] !== loadOptionsKey || $[19] !== t12 || $[20] !== t13) {
-		t14 = {
+		$[17] = t15;
+	} else t15 = $[17];
+	const t16 = !!loadOptions && (open || prefetchOnMount);
+	let t17;
+	if ($[18] !== loadOptionsKey || $[19] !== t15 || $[20] !== t16) {
+		t17 = {
 			queryKey: loadOptionsKey,
-			queryFn: t12,
-			enabled: t13,
+			queryFn: t15,
+			enabled: t16,
 			staleTime: 3e4,
 			gcTime: 3e5
 		};
 		$[18] = loadOptionsKey;
-		$[19] = t12;
-		$[20] = t13;
-		$[21] = t14;
-	} else t14 = $[21];
-	const { data: t15, isFetching } = useQuery(t14);
-	let t16;
-	if ($[22] !== t15) {
-		t16 = t15 === void 0 ? [] : t15;
-		$[22] = t15;
-		$[23] = t16;
-	} else t16 = $[23];
-	const dynamicOptions = t16;
-	let t17;
+		$[19] = t15;
+		$[20] = t16;
+		$[21] = t17;
+	} else t17 = $[21];
+	const { data: t18, isFetching } = useQuery(t17);
+	let t19;
+	if ($[22] !== t18) {
+		t19 = t18 === void 0 ? [] : t18;
+		$[22] = t18;
+		$[23] = t19;
+	} else t19 = $[23];
+	const dynamicOptions = t19;
+	let t20;
 	bb0: {
 		if (!loadOptions) {
-			t17 = flatStaticOptions;
+			t20 = flatStaticOptions;
 			break bb0;
 		}
 		if (flatStaticOptions.length === 0) {
-			t17 = dynamicOptions;
+			t20 = dynamicOptions;
 			break bb0;
 		}
-		let t18$1;
+		let t21$1;
 		if ($[24] !== dynamicOptions || $[25] !== flatStaticOptions) {
 			const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce(_temp, /* @__PURE__ */ new Map());
-			t18$1 = Array.from(mergedMap.values());
+			t21$1 = Array.from(mergedMap.values());
 			$[24] = dynamicOptions;
 			$[25] = flatStaticOptions;
-			$[26] = t18$1;
-		} else t18$1 = $[26];
-		t17 = t18$1;
+			$[26] = t21$1;
+		} else t21$1 = $[26];
+		t20 = t21$1;
 	}
-	const allOptions = t17;
-	let t18;
+	const allOptions = t20;
+	const showSearchInput = searchable === "auto" ? !!loadOptions || allOptions.length > SEARCH_OPTION_THRESHOLD : searchable;
+	let t21;
 	bb1: {
+		if (!showSearchInput) {
+			t21 = allOptions;
+			break bb1;
+		}
 		if (loadOptions) {
-			t18 = allOptions;
+			t21 = allOptions;
 			break bb1;
 		}
 		if (!search) {
-			t18 = allOptions;
+			t21 = allOptions;
 			break bb1;
 		}
-		let t19$1;
+		let t22$1;
 		if ($[27] !== allOptions || $[28] !== resolveText || $[29] !== search) {
-			let t20$1;
+			let t23$1;
 			if ($[31] !== resolveText || $[32] !== search) {
-				t20$1 = (opt_0) => resolveText(opt_0.label).toLowerCase().includes(search.toLowerCase());
+				t23$1 = (opt_0) => resolveText(opt_0.label).toLowerCase().includes(search.toLowerCase());
 				$[31] = resolveText;
 				$[32] = search;
-				$[33] = t20$1;
-			} else t20$1 = $[33];
-			t19$1 = allOptions.filter(t20$1);
+				$[33] = t23$1;
+			} else t23$1 = $[33];
+			t22$1 = allOptions.filter(t23$1);
 			$[27] = allOptions;
 			$[28] = resolveText;
 			$[29] = search;
-			$[30] = t19$1;
-		} else t19$1 = $[30];
-		t18 = t19$1;
+			$[30] = t22$1;
+		} else t22$1 = $[30];
+		t21 = t22$1;
 	}
-	const filteredOptions = t18;
-	let t19;
-	if ($[34] !== allOptions || $[35] !== resolveText) {
-		t19 = (val) => {
+	const filteredOptions = t21;
+	let t22;
+	if ($[34] !== allOptions || $[35] !== resolveText || $[36] !== selectedLabel) {
+		t22 = (val) => {
 			const option = allOptions.find((opt_1) => opt_1.value === val);
-			return option?.label ? resolveText(option.label) : String(val);
+			if (option?.label) return resolveText(option.label);
+			if (selectedLabel) return selectedLabel;
+			return String(val);
 		};
 		$[34] = allOptions;
 		$[35] = resolveText;
-		$[36] = t19;
-	} else t19 = $[36];
-	const getLabel = t19;
-	let t20;
-	if ($[37] !== onChange) {
-		t20 = (selectedValue) => {
+		$[36] = selectedLabel;
+		$[37] = t22;
+	} else t22 = $[37];
+	const getLabel = t22;
+	let t23;
+	if ($[38] !== onChange) {
+		t23 = (selectedValue) => {
 			onChange(selectedValue);
 			setOpen(false);
 			setSearch("");
 		};
-		$[37] = onChange;
-		$[38] = t20;
-	} else t20 = $[38];
-	const handleSelect = t20;
-	let t21;
-	if ($[39] !== onChange) {
-		t21 = (e) => {
+		$[38] = onChange;
+		$[39] = t23;
+	} else t23 = $[39];
+	const handleSelect = t23;
+	let t24;
+	if ($[40] !== onChange) {
+		t24 = (e) => {
+			e.preventDefault();
 			e.stopPropagation();
 			onChange(null);
 		};
-		$[39] = onChange;
-		$[40] = t21;
-	} else t21 = $[40];
-	const handleClear = t21;
+		$[40] = onChange;
+		$[41] = t24;
+	} else t24 = $[41];
+	const handleClear = t24;
+	let t25;
+	if ($[42] !== clearable || $[43] !== disabled || $[44] !== handleClear || $[45] !== isLoadingValue || $[46] !== value) {
+		t25 = (event) => {
+			if (clearable && value && !disabled && !isLoadingValue && (event.key === "Backspace" || event.key === "Delete")) handleClear(event);
+		};
+		$[42] = clearable;
+		$[43] = disabled;
+		$[44] = handleClear;
+		$[45] = isLoadingValue;
+		$[46] = value;
+		$[47] = t25;
+	} else t25 = $[47];
+	const handleTriggerKeyDown = t25;
 	const showLoading = isFetching || externalLoading;
 	const listboxId = `${instanceId}-listbox`;
-	const t22 = !value && "text-muted-foreground";
-	let t23;
-	if ($[41] !== className || $[42] !== t22) {
-		t23 = cn("qa-select-single w-full justify-between font-normal", t22, className);
-		$[41] = className;
-		$[42] = t22;
-		$[43] = t23;
-	} else t23 = $[43];
-	let t24;
-	if ($[44] !== getLabel || $[45] !== resolvedPlaceholder || $[46] !== value) {
-		t24 = value ? getLabel(value) : resolvedPlaceholder;
-		$[44] = getLabel;
-		$[45] = resolvedPlaceholder;
-		$[46] = value;
-		$[47] = t24;
-	} else t24 = $[47];
-	let t25;
-	if ($[48] !== t24) {
-		t25 = /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: t24
+	const t26 = !!value;
+	let t27;
+	if ($[48] !== className) {
+		t27 = cn(className);
+		$[48] = className;
+		$[49] = t27;
+	} else t27 = $[49];
+	let t28;
+	if ($[50] !== isLoadingValue || $[51] !== value) {
+		t28 = isLoadingValue && value ? /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:circle-notch",
+			className: "text-muted-foreground size-3 shrink-0 animate-spin"
+		}) : null;
+		$[50] = isLoadingValue;
+		$[51] = value;
+		$[52] = t28;
+	} else t28 = $[52];
+	const t29 = isLoadingValue && value && "text-muted-foreground";
+	let t30;
+	if ($[53] !== t29) {
+		t30 = cn("truncate", t29);
+		$[53] = t29;
+		$[54] = t30;
+	} else t30 = $[54];
+	let t31;
+	if ($[55] !== getLabel || $[56] !== resolvedPlaceholder || $[57] !== value) {
+		t31 = value ? getLabel(value) : resolvedPlaceholder;
+		$[55] = getLabel;
+		$[56] = resolvedPlaceholder;
+		$[57] = value;
+		$[58] = t31;
+	} else t31 = $[58];
+	let t32;
+	if ($[59] !== t30 || $[60] !== t31) {
+		t32 = /* @__PURE__ */ jsx("span", {
+			className: t30,
+			children: t31
 		});
-		$[48] = t24;
-		$[49] = t25;
-	} else t25 = $[49];
-	let t26;
-	if ($[50] !== clearable || $[51] !== disabled || $[52] !== handleClear || $[53] !== value) {
-		t26 = clearable && value && !disabled && /* @__PURE__ */ jsx("span", {
-			role: "button",
-			tabIndex: -1,
+		$[59] = t30;
+		$[60] = t31;
+		$[61] = t32;
+	} else t32 = $[61];
+	let t33;
+	if ($[62] !== t28 || $[63] !== t32) {
+		t33 = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 items-center gap-1.5 truncate",
+			children: [t28, t32]
+		});
+		$[62] = t28;
+		$[63] = t32;
+		$[64] = t33;
+	} else t33 = $[64];
+	let t34;
+	if ($[65] !== clearable || $[66] !== disabled || $[67] !== handleClear || $[68] !== isLoadingValue || $[69] !== value) {
+		t34 = clearable && value && !disabled && !isLoadingValue && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			title: "Clear selection",
+			onPointerDown: handleClear,
 			onClick: handleClear,
-			onKeyDown: (event) => {
-				if (event.key === "Enter" || event.key === " ") {
-					event.preventDefault();
-					handleClear(event);
-				}
-			},
-			className: "hover:bg-muted -mr-1 p-0.5 opacity-50 hover:opacity-100",
+			className: "hover:bg-surface-high -mr-1 inline-flex size-6 items-center justify-center rounded-md opacity-60 transition-[background-color,opacity] hover:opacity-100",
 			children: /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:x",
 				className: "size-3"
 			})
 		});
-		$[50] = clearable;
-		$[51] = disabled;
-		$[52] = handleClear;
-		$[53] = value;
-		$[54] = t26;
-	} else t26 = $[54];
-	let t27;
-	if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-		t27 = /* @__PURE__ */ jsx(Icon, {
+		$[65] = clearable;
+		$[66] = disabled;
+		$[67] = handleClear;
+		$[68] = isLoadingValue;
+		$[69] = value;
+		$[70] = t34;
+	} else t34 = $[70];
+	let t35;
+	if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
+		t35 = /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:caret-up-down",
 			className: "size-3.5 opacity-50"
 		});
-		$[55] = t27;
-	} else t27 = $[55];
-	let t28;
-	if ($[56] !== t26) {
-		t28 = /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
-			children: [t26, t27]
+		$[71] = t35;
+	} else t35 = $[71];
+	let t36;
+	if ($[72] !== t34) {
+		t36 = /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full shrink-0 items-center gap-1",
+			children: [t34, t35]
 		});
-		$[56] = t26;
-		$[57] = t28;
-	} else t28 = $[57];
-	let t29;
-	if ($[58] !== ariaInvalid || $[59] !== disabled || $[60] !== id || $[61] !== listboxId || $[62] !== open || $[63] !== t23 || $[64] !== t25 || $[65] !== t28) {
-		t29 = /* @__PURE__ */ jsxs(Button, {
+		$[72] = t34;
+		$[73] = t36;
+	} else t36 = $[73];
+	let t37;
+	if ($[74] !== ariaInvalid || $[75] !== asInputGroupControl || $[76] !== disabled || $[77] !== handleTriggerKeyDown || $[78] !== id || $[79] !== listboxId || $[80] !== open || $[81] !== t26 || $[82] !== t27 || $[83] !== t33 || $[84] !== t36) {
+		t37 = /* @__PURE__ */ jsxs(FieldSelectTrigger, {
 			id,
-			variant: "outline",
 			role: "combobox",
 			"aria-expanded": open,
 			"aria-controls": listboxId,
 			"aria-invalid": ariaInvalid,
 			disabled,
-			className: t23,
-			children: [t25, t28]
+			hasValue: t26,
+			onKeyDown: handleTriggerKeyDown,
+			asInputGroupControl,
+			className: t27,
+			children: [t33, t36]
 		});
-		$[58] = ariaInvalid;
-		$[59] = disabled;
-		$[60] = id;
-		$[61] = listboxId;
-		$[62] = open;
-		$[63] = t23;
-		$[64] = t25;
-		$[65] = t28;
-		$[66] = t29;
-	} else t29 = $[66];
-	const TriggerButton = t29;
-	const t30 = !loadOptions;
-	let t31;
-	if ($[67] !== search) {
-		t31 = /* @__PURE__ */ jsx(CommandInput, {
+		$[74] = ariaInvalid;
+		$[75] = asInputGroupControl;
+		$[76] = disabled;
+		$[77] = handleTriggerKeyDown;
+		$[78] = id;
+		$[79] = listboxId;
+		$[80] = open;
+		$[81] = t26;
+		$[82] = t27;
+		$[83] = t33;
+		$[84] = t36;
+		$[85] = t37;
+	} else t37 = $[85];
+	const TriggerButton = t37;
+	const t38 = showSearchInput && !loadOptions;
+	let t39;
+	if ($[86] !== search || $[87] !== showSearchInput) {
+		t39 = showSearchInput && /* @__PURE__ */ jsx(CommandInput, {
 			placeholder: "Search...",
 			value: search,
 			onValueChange: setSearch
 		});
-		$[67] = search;
-		$[68] = t31;
-	} else t31 = $[68];
-	let t32;
-	if ($[69] !== showLoading) {
-		t32 = showLoading && /* @__PURE__ */ jsx("div", {
+		$[86] = search;
+		$[87] = showSearchInput;
+		$[88] = t39;
+	} else t39 = $[88];
+	let t40;
+	if ($[89] !== showLoading) {
+		t40 = showLoading && /* @__PURE__ */ jsx("div", {
 			className: "flex items-center justify-center py-6",
 			children: /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:circle-notch",
 				className: "text-muted-foreground size-4 animate-spin"
 			})
 		});
-		$[69] = showLoading;
-		$[70] = t32;
-	} else t32 = $[70];
-	let t33;
-	if ($[71] !== resolvedEmptyMessage) {
-		t33 = /* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage });
-		$[71] = resolvedEmptyMessage;
-		$[72] = t33;
-	} else t33 = $[72];
-	let t34;
-	if ($[73] !== filteredOptions || $[74] !== handleSelect || $[75] !== resolveText || $[76] !== value) {
-		let t35$1;
-		if ($[78] !== handleSelect || $[79] !== resolveText || $[80] !== value) {
-			t35$1 = (option_0) => /* @__PURE__ */ jsxs(CommandItem, {
+		$[89] = showLoading;
+		$[90] = t40;
+	} else t40 = $[90];
+	let t41;
+	if ($[91] !== resolvedEmptyMessage) {
+		t41 = /* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage });
+		$[91] = resolvedEmptyMessage;
+		$[92] = t41;
+	} else t41 = $[92];
+	let t42;
+	if ($[93] !== filteredOptions || $[94] !== handleSelect || $[95] !== resolveText || $[96] !== value) {
+		let t43$1;
+		if ($[98] !== handleSelect || $[99] !== resolveText || $[100] !== value) {
+			t43$1 = (option_0) => /* @__PURE__ */ jsxs(CommandItem, {
 				value: String(option_0.value),
 				onSelect: handleSelect,
 				disabled: option_0.disabled,
@@ -343,127 +398,127 @@ function SelectSingle(t0) {
 					children: resolveText(option_0.label)
 				})]
 			}, String(option_0.value));
-			$[78] = handleSelect;
-			$[79] = resolveText;
-			$[80] = value;
-			$[81] = t35$1;
-		} else t35$1 = $[81];
-		t34 = filteredOptions.map(t35$1);
-		$[73] = filteredOptions;
-		$[74] = handleSelect;
-		$[75] = resolveText;
-		$[76] = value;
-		$[77] = t34;
-	} else t34 = $[77];
-	let t35;
-	if ($[82] !== t34) {
-		t35 = /* @__PURE__ */ jsx(CommandGroup, { children: t34 });
-		$[82] = t34;
-		$[83] = t35;
-	} else t35 = $[83];
-	let t36;
-	if ($[84] !== listboxId || $[85] !== t32 || $[86] !== t33 || $[87] !== t35) {
-		t36 = /* @__PURE__ */ jsxs(CommandList, {
+			$[98] = handleSelect;
+			$[99] = resolveText;
+			$[100] = value;
+			$[101] = t43$1;
+		} else t43$1 = $[101];
+		t42 = filteredOptions.map(t43$1);
+		$[93] = filteredOptions;
+		$[94] = handleSelect;
+		$[95] = resolveText;
+		$[96] = value;
+		$[97] = t42;
+	} else t42 = $[97];
+	let t43;
+	if ($[102] !== t42) {
+		t43 = /* @__PURE__ */ jsx(CommandGroup, { children: t42 });
+		$[102] = t42;
+		$[103] = t43;
+	} else t43 = $[103];
+	let t44;
+	if ($[104] !== listboxId || $[105] !== t40 || $[106] !== t41 || $[107] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(CommandList, {
 			id: listboxId,
 			children: [
-				t32,
-				t33,
-				t35
+				t40,
+				t41,
+				t43
 			]
 		});
-		$[84] = listboxId;
-		$[85] = t32;
-		$[86] = t33;
-		$[87] = t35;
-		$[88] = t36;
-	} else t36 = $[88];
-	let t37;
-	if ($[89] !== t30 || $[90] !== t31 || $[91] !== t36) {
-		t37 = /* @__PURE__ */ jsxs(Command, {
-			shouldFilter: t30,
-			children: [t31, t36]
+		$[104] = listboxId;
+		$[105] = t40;
+		$[106] = t41;
+		$[107] = t43;
+		$[108] = t44;
+	} else t44 = $[108];
+	let t45;
+	if ($[109] !== t38 || $[110] !== t39 || $[111] !== t44) {
+		t45 = /* @__PURE__ */ jsxs(Command, {
+			shouldFilter: t38,
+			children: [t39, t44]
 		});
-		$[89] = t30;
-		$[90] = t31;
-		$[91] = t36;
-		$[92] = t37;
-	} else t37 = $[92];
-	const CommandContent = t37;
+		$[109] = t38;
+		$[110] = t39;
+		$[111] = t44;
+		$[112] = t45;
+	} else t45 = $[112];
+	const CommandContent = t45;
 	if (isMobile) {
-		let t38$1;
-		if ($[93] !== TriggerButton) {
-			t38$1 = /* @__PURE__ */ jsx(DrawerTrigger, {
+		let t46$1;
+		if ($[113] !== TriggerButton) {
+			t46$1 = /* @__PURE__ */ jsx(DrawerTrigger, {
 				asChild: true,
 				children: TriggerButton
 			});
-			$[93] = TriggerButton;
-			$[94] = t38$1;
-		} else t38$1 = $[94];
-		let t39$1;
-		if ($[95] !== resolvedDrawerTitle) {
-			t39$1 = /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) });
-			$[95] = resolvedDrawerTitle;
-			$[96] = t39$1;
-		} else t39$1 = $[96];
-		let t40$1;
-		if ($[97] !== CommandContent) {
-			t40$1 = /* @__PURE__ */ jsx("div", {
+			$[113] = TriggerButton;
+			$[114] = t46$1;
+		} else t46$1 = $[114];
+		let t47$1;
+		if ($[115] !== resolvedDrawerTitle) {
+			t47$1 = /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) });
+			$[115] = resolvedDrawerTitle;
+			$[116] = t47$1;
+		} else t47$1 = $[116];
+		let t48$1;
+		if ($[117] !== CommandContent) {
+			t48$1 = /* @__PURE__ */ jsx("div", {
 				className: "px-4 pb-6",
 				children: CommandContent
 			});
-			$[97] = CommandContent;
-			$[98] = t40$1;
-		} else t40$1 = $[98];
-		let t41;
-		if ($[99] !== t39$1 || $[100] !== t40$1) {
-			t41 = /* @__PURE__ */ jsxs(DrawerContent, { children: [t39$1, t40$1] });
-			$[99] = t39$1;
-			$[100] = t40$1;
-			$[101] = t41;
-		} else t41 = $[101];
-		let t42;
-		if ($[102] !== open || $[103] !== t38$1 || $[104] !== t41) {
-			t42 = /* @__PURE__ */ jsxs(Drawer, {
+			$[117] = CommandContent;
+			$[118] = t48$1;
+		} else t48$1 = $[118];
+		let t49;
+		if ($[119] !== t47$1 || $[120] !== t48$1) {
+			t49 = /* @__PURE__ */ jsxs(DrawerContent, { children: [t47$1, t48$1] });
+			$[119] = t47$1;
+			$[120] = t48$1;
+			$[121] = t49;
+		} else t49 = $[121];
+		let t50;
+		if ($[122] !== open || $[123] !== t46$1 || $[124] !== t49) {
+			t50 = /* @__PURE__ */ jsxs(Drawer, {
 				open,
 				onOpenChange: setOpen,
-				children: [t38$1, t41]
+				children: [t46$1, t49]
 			});
-			$[102] = open;
-			$[103] = t38$1;
-			$[104] = t41;
-			$[105] = t42;
-		} else t42 = $[105];
-		return t42;
+			$[122] = open;
+			$[123] = t46$1;
+			$[124] = t49;
+			$[125] = t50;
+		} else t50 = $[125];
+		return t50;
 	}
-	let t38;
-	if ($[106] !== TriggerButton) {
-		t38 = /* @__PURE__ */ jsx(PopoverTrigger, { render: TriggerButton });
-		$[106] = TriggerButton;
-		$[107] = t38;
-	} else t38 = $[107];
-	let t39;
-	if ($[108] !== CommandContent) {
-		t39 = /* @__PURE__ */ jsx(PopoverContent, {
+	let t46;
+	if ($[126] !== TriggerButton) {
+		t46 = /* @__PURE__ */ jsx(PopoverTrigger, { render: TriggerButton });
+		$[126] = TriggerButton;
+		$[127] = t46;
+	} else t46 = $[127];
+	let t47;
+	if ($[128] !== CommandContent) {
+		t47 = /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-(--anchor-width) p-0",
 			align: "start",
 			children: CommandContent
 		});
-		$[108] = CommandContent;
-		$[109] = t39;
-	} else t39 = $[109];
-	let t40;
-	if ($[110] !== open || $[111] !== t38 || $[112] !== t39) {
-		t40 = /* @__PURE__ */ jsxs(Popover, {
+		$[128] = CommandContent;
+		$[129] = t47;
+	} else t47 = $[129];
+	let t48;
+	if ($[130] !== open || $[131] !== t46 || $[132] !== t47) {
+		t48 = /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: setOpen,
-			children: [t38, t39]
+			children: [t46, t47]
 		});
-		$[110] = open;
-		$[111] = t38;
-		$[112] = t39;
-		$[113] = t40;
-	} else t40 = $[113];
-	return t40;
+		$[130] = open;
+		$[131] = t46;
+		$[132] = t47;
+		$[133] = t48;
+	} else t48 = $[133];
+	return t48;
 }
 function _temp(map, opt) {
 	return new Map(map).set(opt.value, opt);