@keboola/design 13.1.3 → 14.0.0

package/dist/internal/blocks/MultiCombobox.js

@@ -1,14 +1,41 @@
-import { splitEntry } from "../../utils-Bd28bWgm.js";
+import { cn } from "../../classNames-DcGnTh2N.js";
+import { Tooltip, TooltipProvider, splitEntry } from "../../utils-LQ4jJA-9.js";
 import { useArgoDesign } from "../../context-U293r3v-.js";
+import { PanelRightClose, PanelRightOpen, Search } from "../../icons-ZIeZXXS7.js";
+import { Button } from "../../Button-D2JqBAq7.js";
 import { useControllableState } from "../../useControllableState-CUYXMsfz.js";
 import { forwardAccessibleName } from "../utils/accessibleName.js";
-import { Combobox as Combobox$1, ComboboxClearButton, ComboboxOpenButton, ComboboxOptions, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultQueryToCreateLabel, defaultRowLabel, defaultToCreateValue, flatItems, isCreatableItem, isGroupHeaderItem, isSelectAllItem, sanitizeTypedInput, selectAllItem, toEntries, toLabel, useCreatableStringValue, useGroupHeaders, useItemEquality, useQueryReporter, useVirtualList, useWithCreated } from "../../Combobox-BNhW0TDB.js";
+import { Combobox as Combobox$1, ComboboxClearButton, ComboboxOpenButton, ComboboxOptions, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultQueryToCreateLabel, defaultRowLabel, defaultToCreateValue, flatItems, isCreatableItem, isGroupHeaderItem, isSelectAllItem, sanitizeTypedInput, selectAllItem, toEntries, toLabel, useCreatableStringValue, useGroupHeaders, useItemEquality, useQueryReporter, useVirtualList, useWithCreated } from "../../Combobox-CEesMe2M.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/blocks/MultiCombobox/MultiCombobox.tsx
 /** Joins the create row's values with the entry's separator; a `RegExp` uses the default one. */
 const joinCreateParts = (parts, separator) => parts.join(`${typeof separator === "string" ? separator : ","} `);
+/**
+* White group cards on a grey list: each group's row and open items sit on one card.
+*
+* - The grey is `--secondary` at 45% over the popover, about 1.10:1 against white.
+* - The gap is space under each card's last row, so a windowed list measures it with the row.
+* - Base UI's `role="group"` wraps a group's row and items in either list.
+* - Rows are square; the card's first and last rows take its corners. Enabled rows show a pointer.
+*/
+const GROUP_BANDED = [
+	"tw:bg-[color-mix(in_oklab,rgb(var(--secondary))_45%,rgb(var(--popover)))]",
+	"tw:[&_[role=listbox]]:bg-[color-mix(in_oklab,rgb(var(--secondary))_45%,rgb(var(--popover)))]",
+	"tw:[&_[role=group]]:relative tw:[&_[role=group]]:isolate",
+	"tw:[&_[role=group]]:before:absolute tw:[&_[role=group]]:before:inset-x-0 tw:[&_[role=group]]:before:top-0",
+	"tw:[&_[role=group]]:before:bottom-2 tw:[&_[role=group]]:before:-z-10",
+	"tw:[&_[role=group]]:before:rounded-lg tw:[&_[role=group]]:before:bg-popover",
+	"tw:[&_[role=group]>[role=option]:last-child]:mb-2 tw:[&_[data-group-last]]:pb-2",
+	"tw:[&_[role=group]_[role=option]]:rounded-none",
+	"tw:[&_[role=group]>:first-child_[role=option]]:rounded-t-lg",
+	"tw:[&_[role=group]>:last-child_[role=option]]:rounded-b-lg",
+	"tw:[&_[role=option]:not([data-disabled]):not([data-locked])]:cursor-pointer",
+	"tw:[&_[role=option]]:items-start",
+	"tw:[&_[role=option]>:not([data-slot=combobox-item-label]):not([data-slot=combobox-group-toggle])]:mt-0.5",
+	"tw:[&_[role=option]>[data-slot=combobox-group-toggle]]:-mt-0.5"
+].join(" ");
 const NO_ITEMS = [];
 const NO_VALUES = [];
 /**
@@ -17,7 +44,7 @@ const NO_VALUES = [];
 * @see RECIPES.md#creatable-multi-combobox
 * @see RECIPES.md#filter-toolbar
 */
-const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, isItemEqualToValue: isItemEqualToValueProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear = true, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, allowSelectAll = false, empty = "No items", isLoading = false, indicator, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, canCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, createSeparator = ",", itemToDisabled = defaultItemToDisabled, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel, collapsibleGroups = false, selectableGroups = false, itemToChipLabel, itemToChipColor, pinnedChipLabels, renderChips, maxVisible = 3, ...accessibleName }) => {
+const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, isItemEqualToValue: isItemEqualToValueProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear = true, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, allowSelectAll = false, empty = "No items", isLoading = false, indicator, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, canCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, createSeparator = ",", itemToDisabled = defaultItemToDisabled, itemToLocked, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel, collapsibleGroups = false, selectableGroups = false, collapseSelectedGroups = false, groupAppearance = "plain", itemToChipLabel, itemToChipColor, pinnedChipLabels, renderChips, renderAside, asideOpen: asideOpenProp, onAsideOpenChange, defaultOpen = false, onOpenChange, anchor, query: queryProp, maxVisible = 3, ...accessibleName }) => {
 	const itemsProp = _itemsProp ?? NO_ITEMS;
 	const [valueProp, setValueProp] = useControllableState({
 		prop: _valueProp === null ? NO_VALUES : _valueProp,
@@ -27,11 +54,17 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 	const itemToLabel = itemToLabelProp ?? defaultRowLabel(itemToStringLabel);
 	const chipVariant = useArgoDesign() ? "pill" : "default";
 	const [inputValue, setInputValue] = useState("");
+	const [asideOpen, setAsideOpen] = useControllableState({
+		prop: asideOpenProp,
+		defaultProp: true,
+		onChange: onAsideOpenChange
+	});
+	const [lastHighlighted, setLastHighlighted] = useState(null);
 	const [createdItems, setCreatedItems] = useState([]);
-	const query = inputValue.trim();
+	const query = (queryProp ?? inputValue).trim();
 	useQueryReporter(query, onQueryChange);
 	const busy = isLoading || void 0;
-	const ownsInput = Boolean(allowCreate || inputValueSanitizer || onQueryChange || itemToLabelProp || collapsibleGroups || selectableGroups);
+	const ownsInput = Boolean(queryProp !== void 0 || allowCreate || inputValueSanitizer || onQueryChange || itemToLabelProp || collapsibleGroups || selectableGroups);
 	const baseItems = useWithCreated(itemsProp, createdItems);
 	const allFlatItems = flatItems(baseItems);
 	const sampleItem = allFlatItems[0];
@@ -63,7 +96,9 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 		selectable: selectableGroups,
 		query,
 		matches: (item) => itemFilter(item, query, wrappedItemToStringLabel),
-		isItemEqualToValue
+		isItemEqualToValue,
+		startsCollapsed: collapseSelectedGroups ? (group) => group.items.length > 0 && group.items.every((item) => valueProp.some((selected) => isItemEqualToValue(item, selected))) : void 0,
+		startsOpen: defaultOpen
 	});
 	const listItems = useWithCreated(groupHeaders.items, createdItems);
 	const virtualList = useVirtualList(baseItems, virtualized);
@@ -107,7 +142,7 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 	const selectedSet = selectableGroups && !isItemEqualToValueProp ? new Set(valueProp) : void 0;
 	const isSelected = (item) => selectedSet?.has(item) ?? valueProp.some((selected) => isItemEqualToValue(item, selected));
 	/** What a group's row selects: the group's items the query matches, the disabled aside. */
-	const groupTargets = (row) => groupHeaders.headerOf(row)?.matching.filter((item) => !itemToDisabled(item)) ?? [];
+	const groupTargets = (row) => groupHeaders.headerOf(row)?.matching.filter((item) => !itemToDisabled(item) && !itemToLocked?.(item)) ?? [];
 	/**
 	* Replaces a pressed group row in `next` with its items.
 	*
@@ -128,6 +163,7 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 		return selectedCount === targets.length ? true : "mixed";
 	};
 	const handleInputValueChange = (next, { reason }) => {
+		if (queryProp !== void 0) return;
 		setInputValue(sanitizeTypedInput(next, reason, inputValueSanitizer));
 	};
 	const handleValueChange = (next, event) => {
@@ -160,9 +196,68 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 			const selected = new Set(newValue.map(itemToString));
 			setCreatedItems((prev) => [...prev, ...created].filter((item) => selected.has(itemToString(item))));
 		}
-		setValueProp(newValue);
-		onValueChange?.(newValue, event);
+		const kept = itemToLocked ? [...newValue.filter((item) => !itemToLocked(item) || isSelected(item)), ...valueProp.filter((item) => itemToLocked(item) && !newValue.some((picked) => isItemEqualToValue(picked, item)))] : newValue;
+		if (itemToLocked && kept.length === valueProp.length && kept.every(isSelected)) return;
+		setValueProp(kept);
+		onValueChange?.(kept, event);
 	};
+	const toHighlighted = (item) => {
+		if (item === void 0 || isCreatableItem(item) || isSelectAllItem(item)) return null;
+		const header = groupHeaders.headerOf(item);
+		if (header) return {
+			kind: "group",
+			group: header.group
+		};
+		return isGroupHeaderItem(item) ? null : {
+			kind: "item",
+			item
+		};
+	};
+	const options = /* @__PURE__ */ jsx(ComboboxOptions, {
+		isLoading,
+		empty,
+		virtualized: virtualList.enabled,
+		listRef: virtualList.ref,
+		groupHeaders,
+		groupToLabel,
+		indicator,
+		itemToLabel: (item) => itemToLabel(item, query),
+		itemToIcon,
+		itemToDisabled,
+		itemToLocked,
+		createLabel: () => queryToCreateLabel(joinCreateParts(addedCreateParts, createSeparator)),
+		groupRowState: selectableGroups ? (row) => {
+			const targets = groupTargets(row);
+			const shown = (groupHeaders.headerOf(row)?.matching ?? []).filter((item) => !itemToDisabled(item) || isSelected(item));
+			const locked = targets.length === 0 && shown.some((item) => itemToLocked?.(item));
+			return {
+				checked: groupRowChecked(shown),
+				disabled: targets.length === 0 && !locked,
+				locked
+			};
+		} : void 0
+	});
+	const input = /* @__PURE__ */ jsx(Combobox$1.Input, {
+		...forwardAccessibleName(accessibleName),
+		name,
+		onBlur,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-required": ariaRequired,
+		"aria-busy": busy,
+		placeholder,
+		disabled,
+		tabIndex: anchor && queryProp !== void 0 ? -1 : void 0,
+		onKeyDown: groupHeaders.onInputKeyDown,
+		className: anchor ? "tw:min-w-0 tw:grow tw:!px-0 tw:!py-0" : "tw:w-auto tw:min-w-0 tw:grow tw:basis-[120px] tw:!px-0 tw:!py-0"
+	});
+	const popupSearch = anchor && queryProp === void 0 ? /* @__PURE__ */ jsx("div", {
+		className: "tw:flex tw:items-center tw:gap-2 tw:px-3 tw:pt-2.5 tw:pb-1",
+		children: /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
+			className: "tw:h-9 tw:flex-1 tw:gap-2 tw:bg-background tw:px-3",
+			children: [/* @__PURE__ */ jsx(Search, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }), input]
+		})
+	}) : null;
 	return /* @__PURE__ */ jsxs(Combobox$1.Root, {
 		multiple: true,
 		autoHighlight: true,
@@ -171,10 +266,17 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 		filter,
 		isItemEqualToValue,
 		onValueChange: handleValueChange,
-		onOpenChange: groupHeaders.onOpenChange,
+		defaultOpen,
+		onOpenChange: (open) => {
+			groupHeaders.onOpenChange(open);
+			if (!open) setLastHighlighted(null);
+			onOpenChange?.(open);
+		},
 		onItemHighlighted: (item, details) => {
 			groupHeaders.onItemHighlighted(item);
 			virtualList.onItemHighlighted(details);
+			const next = renderAside ? toHighlighted(item) : null;
+			if (next) setLastHighlighted(next);
 		},
 		virtualized: virtualList.enabled,
 		itemToStringLabel: wrappedItemToStringLabel,
@@ -182,70 +284,104 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
 		disabled,
 		inputRef,
 		...ownsInput ? {
-			inputValue,
+			inputValue: queryProp ?? inputValue,
 			onInputValueChange: handleInputValueChange
 		} : {},
-		children: [/* @__PURE__ */ jsx(Combobox$1.InputGroup, {
-			variant,
-			sizing,
-			state,
-			focusVariant,
-			className,
-			children: /* @__PURE__ */ jsxs(Combobox.Chips, {
-				className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5",
-				children: [/* @__PURE__ */ jsx(Combobox$1.Chips, {
-					maxVisible,
-					variant: chipVariant,
-					itemToChipLabel: itemToChipLabel ?? ((item) => itemToLabel(item, "")),
-					itemToChipColor,
-					pinnedChipLabels,
-					children: renderChips
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "tw:flex tw:min-w-0 tw:grow tw:items-center tw:gap-1",
-					children: [
-						/* @__PURE__ */ jsx(Combobox$1.Input, {
-							...forwardAccessibleName(accessibleName),
-							name,
-							onBlur,
-							"aria-describedby": ariaDescribedBy,
-							"aria-invalid": ariaInvalid,
-							"aria-required": ariaRequired,
-							"aria-busy": busy,
-							placeholder,
-							disabled,
-							onKeyDown: groupHeaders.onInputKeyDown,
-							className: "tw:w-auto tw:min-w-0 tw:grow tw:basis-[120px] tw:!px-0 tw:!py-0"
-						}),
-						allowClear && /* @__PURE__ */ jsx(ComboboxClearButton, { disabled }),
-						/* @__PURE__ */ jsx(ComboboxOpenButton, {
-							disabled,
-							isLoading
+		children: [
+			anchor && queryProp !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "tw:sr-only",
+				children: input
+			}),
+			!anchor && /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+				variant,
+				sizing,
+				state,
+				focusVariant,
+				className,
+				children: /* @__PURE__ */ jsxs(Combobox.Chips, {
+					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5",
+					children: [/* @__PURE__ */ jsx(Combobox$1.Chips, {
+						maxVisible,
+						variant: chipVariant,
+						itemToChipLabel: itemToChipLabel ?? ((item) => itemToLabel(item, "")),
+						itemToChipColor,
+						pinnedChipLabels,
+						children: renderChips
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:min-w-0 tw:grow tw:items-center tw:gap-1",
+						children: [
+							input,
+							allowClear && /* @__PURE__ */ jsx(ComboboxClearButton, { disabled }),
+							/* @__PURE__ */ jsx(ComboboxOpenButton, {
+								disabled,
+								isLoading
+							})
+						]
+					})]
+				})
+			}),
+			renderAside ? /* @__PURE__ */ jsxs(Combobox$1.Content, {
+				anchor,
+				className: cn("tw:@container tw:w-[max(var(--anchor-width),48rem)]", "tw:min-h-[min(var(--available-height),22rem)] tw:data-empty:min-h-0", anchor && "tw:max-h-[min(var(--available-height),32rem)]", groupAppearance === "banded" && GROUP_BANDED),
+				children: [
+					popupSearch,
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("tw:grid tw:min-h-0 tw:flex-1 tw:grid-rows-[minmax(0,1fr)]", "tw:motion-safe:transition-[grid-template-columns] tw:motion-safe:duration-200 tw:motion-safe:ease-out", asideOpen ? "tw:grid-cols-[minmax(0,2fr)_1fr]" : "tw:grid-cols-[minmax(0,2fr)_0fr]", "tw:@max-[40rem]:grid-cols-[minmax(0,2fr)_0fr]"),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("tw:flex tw:min-h-0 tw:min-w-0 tw:flex-col tw:group-data-empty/combobox-content:col-span-2", !asideOpen && "tw:pb-10 tw:@max-[40rem]:pb-0 tw:group-data-empty/combobox-content:pb-0"),
+							children: options
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn("tw:relative tw:min-w-0 tw:overflow-hidden tw:border-border", "tw:motion-safe:transition-opacity tw:motion-safe:duration-200", asideOpen ? "tw:border-l tw:opacity-100" : "tw:opacity-0", "tw:@max-[40rem]:invisible tw:@max-[40rem]:border-l-0 tw:@max-[40rem]:opacity-0", "tw:group-data-empty/combobox-content:hidden"),
+							"data-slot": "combobox-inspector",
+							inert: !asideOpen,
+							children: /* @__PURE__ */ jsx("div", {
+								className: "tw:absolute tw:inset-y-0 tw:left-0 tw:w-full tw:min-w-60 tw:overflow-y-auto tw:p-4 tw:pb-12",
+								children: renderAside(lastHighlighted)
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "tw:absolute tw:right-2 tw:bottom-2 tw:@max-[40rem]:hidden tw:group-data-empty/combobox-content:hidden",
+						children: /* @__PURE__ */ jsx(AsideToggle, {
+							open: asideOpen,
+							onOpenChange: setAsideOpen
 						})
-					]
-				})]
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Combobox$1.Content, {
+				anchor,
+				className: cn(anchor && "tw:max-h-[min(var(--available-height),32rem)]", groupAppearance === "banded" && GROUP_BANDED),
+				children: [popupSearch, options]
 			})
-		}), /* @__PURE__ */ jsx(Combobox$1.Content, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
-			isLoading,
-			empty,
-			virtualized: virtualList.enabled,
-			listRef: virtualList.ref,
-			groupHeaders,
-			groupToLabel,
-			indicator,
-			itemToLabel: (item) => itemToLabel(item, query),
-			itemToIcon,
-			itemToDisabled,
-			createLabel: () => queryToCreateLabel(joinCreateParts(addedCreateParts, createSeparator)),
-			groupRowState: selectableGroups ? (row) => {
-				const targets = groupTargets(row);
-				return {
-					checked: groupRowChecked(targets),
-					disabled: targets.length === 0
-				};
-			} : void 0
-		}) })]
+		]
 	});
 };
+/**
+* Hides or shows the inspector beside the list, from the popup's bottom-right corner.
+*
+* - Floats over the list while the inspector is hidden; gone with it when the popup is too narrow.
+* - Keeps the input focused, so the popup stays open.
+*/
+const AsideToggle = ({ open, onOpenChange }) => {
+	const label = open ? "Hide inspector" : "Show inspector";
+	const Icon = open ? PanelRightClose : PanelRightOpen;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "icon-xs",
+			"aria-label": label,
+			"aria-expanded": open,
+			className: "tw:bg-popover tw:shadow-sm",
+			onMouseDown: (event) => event.preventDefault(),
+			onClick: () => onOpenChange(!open),
+			children: /* @__PURE__ */ jsx(Icon, {})
+		})
+	}), /* @__PURE__ */ jsx(Tooltip.Content, {
+		placement: "left",
+		children: label
+	})] }) });
+};
 //#endregion
 export { MultiCombobox };
 

package/dist/internal/blocks/MultiCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiCombobox.js","names":["BaseCombobox","Combobox"],"sources":["../../../src/blocks/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, useCallback, useMemo, useState } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { Combobox } from '../../components/Combobox';\nimport { ComboboxClearButton } from '../../components/Combobox/ComboboxClearButton';\nimport { ComboboxOpenButton } from '../../components/Combobox/ComboboxOpenButton';\nimport { ComboboxOptions } from '../../components/Combobox/ComboboxOptions';\nimport { useWithCreated } from '../../components/Combobox/createdItems';\nimport { useGroupHeaders } from '../../components/Combobox/groupHeaders';\nimport { sanitizeTypedInput, useQueryReporter } from '../../components/Combobox/query';\nimport type { Group } from '../../components/Combobox/types';\nimport {\n  createCreatableItem,\n  defaultGroupToLabel,\n  defaultItemToDisabled,\n  defaultItemToIcon,\n  defaultQueryToCreateLabel,\n  defaultRowLabel,\n  defaultToCreateValue,\n  flatItems,\n  isCreatableItem,\n  isGroupHeaderItem,\n  isSelectAllItem,\n  selectAllItem,\n  toEntries,\n  toLabel,\n  useCreatableStringValue,\n  useItemEquality,\n} from '../../components/Combobox/utils';\nimport { useVirtualList, type VirtualizedProps } from '../../components/Combobox/virtualList';\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { DEFAULT_ENTRY_SEPARATOR, splitEntry } from '../../utils';\nimport { forwardAccessibleName, type WithAccessibleName } from '../../utils/accessibleName';\n\ntype ComboboxProps<Value> = BaseCombobox.Root.Props<Value, true>;\ntype ComboboxInputProps = ComponentProps<typeof Combobox.Input>;\ntype ComboboxInputGroupProps = ComponentProps<typeof Combobox.InputGroup>;\ntype ComboboxItemProps = ComponentProps<typeof Combobox.Item>;\ntype ComboboxChipsProps<Value> = ComponentProps<typeof Combobox.Chips<Value>>;\n\ntype Indicator = Exclude<NonNullable<ComboboxItemProps['indicator']>, 'none'>;\n\n/** Joins the create row's values with the entry's separator; a `RegExp` uses the default one. */\nconst joinCreateParts = (parts: string[], separator: string | RegExp | null) =>\n  parts.join(`${typeof separator === 'string' ? separator : DEFAULT_ENTRY_SEPARATOR} `);\n\ntype CreatableProps<Value> = {\n  allowCreate?: boolean;\n  /** Words the create row. Receives the values it adds, trimmed and re-joined — not the entry as typed. */\n  queryToCreateLabel?: (query: string) => ReactNode;\n  /** Projects one entered value into an item. Called once per trimmed part of a split entry. */\n  queryToCreateValue?: (query: string) => Value;\n  /** Rejects a value `allowCreate` would mint; values naming an item or already selected skip it. */\n  canCreate?: (query: string) => boolean;\n  /** Splits one entry into several values (default `','`). A `RegExp` must not capture; `null` never splits. */\n  createSeparator?: string | RegExp | null;\n};\n\ntype BaseProps<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<\n  ComboboxInputProps,\n  // Go to the input, which is the `combobox` role; on the group they reach nothing.\n  // - The `aria-*` set links a form field's label, help and error text.\n  // - `onBlur` is the gate `FieldItem` reveals errors on.\n  | 'placeholder'\n  | 'id'\n  | 'name'\n  | 'onBlur'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n> &\n  Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> &\n  Pick<\n    ComboboxProps<Value>,\n    | 'disabled'\n    | 'inputRef'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'itemToStringLabel'\n    | 'itemToStringValue'\n    | 'filter'\n    | 'isItemEqualToValue'\n  > &\n  Pick<\n    ComboboxChipsProps<Value>,\n    'itemToChipLabel' | 'itemToChipColor' | 'pinnedChipLabels' | 'maxVisible'\n  > &\n  CreatableProps<Value> &\n  VirtualizedProps & {\n    /** Read as immutable: pass a new array to change it; one mutated in place is not re-filtered. */\n    items?: readonly (Value | GroupShape)[];\n\n    // root specific\n    /** Clear-all button, shown only while chips exist. Chips stay removable either way. */\n    allowClear?: boolean;\n    /** \"Select All\" row for the whole set; hidden while a query is active, clears when all are selected. */\n    allowSelectAll?: boolean;\n    empty?: ReactNode;\n    /** Options still arriving; doesn't disable — pass `disabled` where the user must wait. */\n    isLoading?: boolean;\n    indicator?: Indicator;\n\n    // query specific\n    /** Rewrites typed text before filtering and creating. Sees the whole text per keystroke — don't `trim()`. */\n    inputValueSanitizer?: (input: string) => string;\n    /** Reports the sanitized query, on mount too. Notification only — the control owns the text. */\n    onQueryChange?: (query: string) => void;\n\n    // item specific\n    /**\n     * Row and chip content (unless `itemToChipLabel`), `itemToStringLabel` by default.\n     * - `query` is the search text, for `MarkedText`; a chip gets `''`.\n     */\n    itemToLabel?: (item: Value, query: string) => ReactNode;\n    itemToIcon?: (item: Value) => ReactNode;\n    itemToDisabled?: (item: Value) => boolean;\n\n    // chip specific\n    /** Replaces the default chips; the chip props, `maxVisible` included, are then ignored. */\n    renderChips?: (values: Value[]) => ReactNode;\n\n    // group specific\n    /** Defaults to the group's `label`, as `Select` shows it. */\n    groupToLabel?: (group: GroupShape) => ReactNode;\n    /** A row per group that folds it. A query shows every match regardless; state is keyed by position. */\n    collapsibleGroups?: boolean;\n    /** A group's row selects its matching enabled items. The row itself never enters `value`. */\n    selectableGroups?: boolean;\n  };\n\n/**\n * Props for `MultiCombobox`.\n *\n * - Pass `isItemEqualToValue` when a store recreates item objects — Base UI matches by reference.\n */\ntype Props<Value, GroupShape extends Group<Value> = Group<Value>> = WithAccessibleName<\n  BaseProps<Value, GroupShape>\n>;\n\nconst NO_ITEMS: readonly never[] = [];\nconst NO_VALUES: never[] = [];\n\n/**\n * Searchable multi-select with chips, built on Base UI Combobox.\n *\n * @see RECIPES.md#creatable-multi-combobox\n * @see RECIPES.md#filter-toolbar\n */\nexport const MultiCombobox = <Value, GroupShape extends Group<Value> = Group<Value>>({\n  // root props\n  items: _itemsProp,\n  value: _valueProp,\n  defaultValue,\n  onValueChange,\n  itemToStringLabel,\n  itemToStringValue,\n  disabled,\n  filter: filterProp,\n  isItemEqualToValue: isItemEqualToValueProp,\n  inputRef,\n\n  // input props\n  variant,\n  sizing,\n  focusVariant,\n  state,\n  placeholder,\n  allowClear = true,\n  name,\n  onBlur,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  className,\n\n  // own props\n  allowSelectAll = false,\n  empty = 'No items',\n  isLoading = false,\n  indicator,\n  virtualized = false,\n\n  // query\n  inputValueSanitizer,\n  onQueryChange,\n\n  // creatable\n  allowCreate,\n  canCreate,\n  queryToCreateValue,\n  queryToCreateLabel = defaultQueryToCreateLabel,\n  createSeparator = DEFAULT_ENTRY_SEPARATOR,\n\n  // own item props\n  itemToDisabled = defaultItemToDisabled,\n  itemToLabel: itemToLabelProp,\n  itemToIcon = defaultItemToIcon,\n  groupToLabel = defaultGroupToLabel,\n  collapsibleGroups = false,\n  selectableGroups = false,\n  itemToChipLabel,\n  itemToChipColor,\n  pinnedChipLabels,\n  renderChips,\n  // Value editors pass `Infinity` (a chip inside `+N` can't be removed); single-row filters `1`.\n  maxVisible = 3,\n  ...accessibleName\n}: Props<Value, GroupShape>) => {\n  const itemsProp = _itemsProp ?? NO_ITEMS;\n  // Held here while `value` is absent; Base UI always gets the selection as `value`.\n  const [valueProp, setValueProp] = useControllableState<Value[]>({\n    prop: _valueProp === null ? NO_VALUES : _valueProp,\n    defaultProp: defaultValue ?? NO_VALUES,\n  });\n  const itemToString = useCallback(\n    (item: Value) => itemToStringLabel?.(item) ?? toLabel(item),\n    [itemToStringLabel],\n  );\n  const itemToLabel = itemToLabelProp ?? defaultRowLabel(itemToStringLabel);\n  const renderArgo = useArgoDesign();\n  const chipVariant = renderArgo ? 'pill' : 'default';\n\n  const [inputValue, setInputValue] = useState('');\n  const [createdItems, setCreatedItems] = useState<Value[]>([]);\n  const query = inputValue.trim();\n\n  useQueryReporter(query, onQueryChange);\n\n  // `aria-busy` on the input only (list items stay pickable); absent rather than `false`.\n  const busy = isLoading || undefined;\n\n  // Held here only when needed — owning the text re-renders on every keystroke.\n  // - `itemToLabel` needs it: its rows receive the query.\n  const ownsInput = Boolean(\n    allowCreate ||\n    inputValueSanitizer ||\n    onQueryChange ||\n    itemToLabelProp ||\n    collapsibleGroups ||\n    selectableGroups,\n  );\n\n  const baseItems = useWithCreated(itemsProp, createdItems);\n\n  const allFlatItems = flatItems(baseItems);\n  const sampleItem = allFlatItems[0];\n  // Otherwise `0 === 0` reads as all selected and puts the row's entry into `value`.\n  const hasSelectAllRow = allowSelectAll && allFlatItems.length > 0;\n  const isAllSelected = hasSelectAllRow && allFlatItems.length === (valueProp?.length ?? 0);\n\n  const defaultFilter = BaseCombobox.useFilter({\n    multiple: true,\n    value: valueProp,\n  });\n\n  // Keeps the control's own rows (create, group header) away from the caller's projection.\n  // Stable while the caller's accessor is: Base UI re-filters on every new identity.\n  const wrappedItemToStringLabel = useMemo<ComboboxProps<Value>['itemToStringLabel']>(() => {\n    // No caller projection keeps Base UI's own accessor.\n    if (!allowCreate && !collapsibleGroups && !selectableGroups) {\n      return itemToStringLabel && itemToString;\n    }\n    return (item) => {\n      if (isCreatableItem(item)) return item.value;\n      if (isGroupHeaderItem(item)) return item.label;\n      return itemToString(item);\n    };\n  }, [allowCreate, collapsibleGroups, selectableGroups, itemToStringLabel, itemToString]);\n\n  const itemFilter: NonNullable<ComboboxProps<Value>['filter']> =\n    filterProp ?? defaultFilter.contains;\n\n  const isItemEqualToValue = useItemEquality(isItemEqualToValueProp);\n\n  const groupHeaders = useGroupHeaders<Value, GroupShape>({\n    items: itemsProp,\n    collapsible: collapsibleGroups,\n    selectable: selectableGroups,\n    query,\n    matches: (item) => itemFilter(item, query, wrappedItemToStringLabel),\n    isItemEqualToValue,\n  });\n\n  const listItems = useWithCreated(groupHeaders.items, createdItems);\n\n  const virtualList = useVirtualList(baseItems, virtualized);\n\n  const labelKey = (item: Value) => itemToString(item).toLowerCase();\n\n  const createParts = !allowCreate || disabled || !query ? [] : splitEntry(query, createSeparator);\n\n  const selectedKeys = new Set<string>();\n  if (createParts.length > 0) for (const item of valueProp) selectedKeys.add(labelKey(item));\n\n  // A set only when `canCreate` asks per value; otherwise one early-exiting scan is cheaper.\n  const itemKeys = new Set<string>();\n  if (createParts.length > 0 && canCreate) {\n    for (const item of allFlatItems) itemKeys.add(labelKey(item));\n  }\n  const namesAnItem = (key: string) =>\n    canCreate ? itemKeys.has(key) : allFlatItems.some((item) => labelKey(item) === key);\n\n  /**\n   * The entry's values not yet selected, minus those `canCreate` rejects.\n   *\n   * - Both names the create row and is exactly what committing it adds.\n   * - A value naming an existing item counts and bypasses `canCreate` — committing selects it.\n   */\n  const addedCreateParts = createParts.filter((part) => {\n    const key = part.toLowerCase();\n    if (selectedKeys.has(key)) return false;\n    return !canCreate || namesAnItem(key) || canCreate(part);\n  });\n\n  const soleValueKey = createParts.length === 1 ? createParts[0]!.toLowerCase() : undefined;\n\n  // A single value naming an item already has its own row; a split entry matches no row.\n  const showCreateRow =\n    addedCreateParts.length > 0 && (soleValueKey === undefined || !namesAnItem(soleValueKey));\n\n  const items = useMemo(() => {\n    const withSelectAll = hasSelectAllRow\n      ? [...toEntries(listItems, [selectAllItem]), ...listItems]\n      : listItems;\n    return showCreateRow\n      ? [...withSelectAll, ...toEntries(listItems, [createCreatableItem(query)])]\n      : withSelectAll;\n  }, [hasSelectAllRow, showCreateRow, listItems, query]);\n\n  const filterHeader = groupHeaders.enabled ? groupHeaders.filterHeader : undefined;\n  const filter = useCallback(\n    (item: Value, query: string, itemToString?: (value: Value) => string) => {\n      // Select All covers the whole item set, so it exists only while no query narrows the list.\n      if (isSelectAllItem(item)) return query.trim() === '';\n      if (isCreatableItem(item)) return true;\n\n      return filterHeader?.(item) ?? itemFilter(item, query, itemToString);\n    },\n    [filterHeader, itemFilter],\n  );\n\n  const wrappedItemToStringValue = useCreatableStringValue(itemToStringValue, allowCreate);\n\n  const value = isAllSelected ? [...valueProp, selectAllItem as Value] : valueProp;\n\n  // Without a comparer Base UI compares by identity, so a `Set` suffices.\n  const selectedSet = selectableGroups && !isItemEqualToValueProp ? new Set(valueProp) : undefined;\n  const isSelected = (item: Value) =>\n    selectedSet?.has(item) ?? valueProp.some((selected) => isItemEqualToValue(item, selected));\n\n  /** What a group's row selects: the group's items the query matches, the disabled aside. */\n  const groupTargets = (row: unknown) =>\n    groupHeaders.headerOf(row)?.matching.filter((item) => !itemToDisabled(item)) ?? [];\n\n  /**\n   * Replaces a pressed group row in `next` with its items.\n   *\n   * - Base UI adds the row to `value` like any unselected item.\n   * - A row whose items are all selected deselects them.\n   */\n  const selectGroupRow = (next: Value[]) => {\n    const row = next.find(isGroupHeaderItem);\n    if (row === undefined) return next;\n\n    const rest = next.filter((item) => item !== row);\n    const targets = groupTargets(row);\n    if (!targets.every(isSelected))\n      return [...rest, ...targets.filter((item) => !isSelected(item))];\n    return rest.filter((item) => !targets.some((target) => isItemEqualToValue(target, item)));\n  };\n\n  const groupRowChecked = (targets: Value[]) => {\n    const selectedCount = targets.filter(isSelected).length;\n    if (selectedCount === 0) return false;\n    return selectedCount === targets.length ? true : 'mixed';\n  };\n\n  const handleInputValueChange: NonNullable<ComboboxProps<Value>['onInputValueChange']> = (\n    next,\n    { reason },\n  ) => {\n    setInputValue(sanitizeTypedInput(next, reason, inputValueSanitizer));\n  };\n\n  const handleValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {\n    // Base UI clears the text itself only when it owns it.\n    if (ownsInput) setInputValue((prev) => (prev === '' ? prev : ''));\n    // A pinned `value` with no handler: the change lands nowhere, so nothing is minted either.\n    if (!onValueChange && _valueProp !== undefined) return;\n\n    const picked = selectGroupRow(next);\n    const created: Value[] = [];\n    const converted = (() => {\n      if (!allowCreate || !picked.some(isCreatableItem)) return picked;\n\n      // A value naming an item selects it rather than minting a duplicate chip.\n      const itemsByLabel = new Map<string, Value>();\n      for (const item of allFlatItems) itemsByLabel.set(labelKey(item), item);\n\n      return picked.flatMap((item) => {\n        if (!isCreatableItem(item)) return [item];\n\n        return addedCreateParts.map((part) => {\n          const existing = itemsByLabel.get(part.toLowerCase());\n          if (existing !== undefined) return existing;\n\n          const value = defaultToCreateValue(part, sampleItem, queryToCreateValue) as Value;\n          created.push(value);\n          return value;\n        });\n      });\n    })();\n\n    const hasSelectAll = converted.some((item) => isSelectAllItem(item));\n    const newValue = (() => {\n      if (!hasSelectAllRow) return converted;\n      if (!hasSelectAll) return isAllSelected ? [] : converted;\n      return isAllSelected ? converted.filter((item) => !isSelectAllItem(item)) : allFlatItems;\n    })();\n\n    if (allowCreate) {\n      // Filter by `newValue`: `valueProp` lacks values created in this change.\n      const selected = new Set(newValue.map(itemToString));\n      setCreatedItems((prev) =>\n        [...prev, ...created].filter((item) => selected.has(itemToString(item))),\n      );\n    }\n\n    setValueProp(newValue);\n    onValueChange?.(newValue, event);\n  };\n\n  return (\n    <Combobox.Root<Value, true>\n      multiple\n      // Otherwise Enter after typing selects nothing and closes the popup.\n      autoHighlight\n      items={items}\n      value={value}\n      filter={filter}\n      isItemEqualToValue={isItemEqualToValue}\n      onValueChange={handleValueChange}\n      onOpenChange={groupHeaders.onOpenChange}\n      onItemHighlighted={(item, details) => {\n        groupHeaders.onItemHighlighted(item);\n        virtualList.onItemHighlighted(details);\n      }}\n      virtualized={virtualList.enabled}\n      itemToStringLabel={wrappedItemToStringLabel}\n      itemToStringValue={wrappedItemToStringValue}\n      disabled={disabled}\n      inputRef={inputRef}\n      {...(ownsInput ? { inputValue, onInputValueChange: handleInputValueChange } : {})}\n    >\n      <Combobox.InputGroup\n        variant={variant}\n        sizing={sizing}\n        state={state}\n        focusVariant={focusVariant}\n        className={className}\n      >\n        {/* Chips plus the input row; its press handler focuses the input, arrows move between chips. */}\n        <BaseCombobox.Chips className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5\">\n          <Combobox.Chips<Value>\n            maxVisible={maxVisible}\n            variant={chipVariant}\n            itemToChipLabel={itemToChipLabel ?? ((item) => itemToLabel(item, ''))}\n            itemToChipColor={itemToChipColor}\n            pinnedChipLabels={pinnedChipLabels}\n          >\n            {renderChips}\n          </Combobox.Chips>\n          {/* Wraps below the chips under 120px; alone on its row it shrinks to keep both buttons inside. */}\n          <div className=\"tw:flex tw:min-w-0 tw:grow tw:items-center tw:gap-1\">\n            <Combobox.Input\n              {...forwardAccessibleName(accessibleName)}\n              name={name}\n              onBlur={onBlur}\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={ariaInvalid}\n              aria-required={ariaRequired}\n              aria-busy={busy}\n              placeholder={placeholder}\n              disabled={disabled}\n              onKeyDown={groupHeaders.onInputKeyDown}\n              // Cancels the group's `&_input` padding; the chip row already pads.\n              className=\"tw:w-auto tw:min-w-0 tw:grow tw:basis-[120px] tw:!px-0 tw:!py-0\"\n            />\n            {allowClear && <ComboboxClearButton disabled={disabled} />}\n            <ComboboxOpenButton disabled={disabled} isLoading={isLoading} />\n          </div>\n        </BaseCombobox.Chips>\n      </Combobox.InputGroup>\n      <Combobox.Content>\n        <ComboboxOptions<Value, GroupShape>\n          isLoading={isLoading}\n          empty={empty}\n          virtualized={virtualList.enabled}\n          listRef={virtualList.ref}\n          groupHeaders={groupHeaders}\n          groupToLabel={groupToLabel}\n          indicator={indicator}\n          itemToLabel={(item) => itemToLabel(item, query)}\n          itemToIcon={itemToIcon}\n          itemToDisabled={itemToDisabled}\n          // Names exactly the values committing the row adds.\n          createLabel={() => queryToCreateLabel(joinCreateParts(addedCreateParts, createSeparator))}\n          groupRowState={\n            selectableGroups\n              ? (row) => {\n                  const targets = groupTargets(row);\n                  return { checked: groupRowChecked(targets), disabled: targets.length === 0 };\n                }\n              : undefined\n          }\n        />\n      </Combobox.Content>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MultiCombobox.js","names":["BaseCombobox","Combobox"],"sources":["../../../src/blocks/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, useCallback, useMemo, useState } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { Button } from '../../components/Button';\nimport { Combobox } from '../../components/Combobox';\nimport { ComboboxClearButton } from '../../components/Combobox/ComboboxClearButton';\nimport { ComboboxOpenButton } from '../../components/Combobox/ComboboxOpenButton';\nimport { ComboboxOptions } from '../../components/Combobox/ComboboxOptions';\nimport { useWithCreated } from '../../components/Combobox/createdItems';\nimport { useGroupHeaders } from '../../components/Combobox/groupHeaders';\nimport { sanitizeTypedInput, useQueryReporter } from '../../components/Combobox/query';\nimport type { Group } from '../../components/Combobox/types';\nimport {\n  createCreatableItem,\n  defaultGroupToLabel,\n  defaultItemToDisabled,\n  defaultItemToIcon,\n  defaultQueryToCreateLabel,\n  defaultRowLabel,\n  defaultToCreateValue,\n  flatItems,\n  isCreatableItem,\n  isGroupHeaderItem,\n  isSelectAllItem,\n  selectAllItem,\n  toEntries,\n  toLabel,\n  useCreatableStringValue,\n  useItemEquality,\n} from '../../components/Combobox/utils';\nimport { useVirtualList, type VirtualizedProps } from '../../components/Combobox/virtualList';\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\nimport { Tooltip, TooltipProvider } from '../../components/Tooltip';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { PanelRightClose, PanelRightOpen, Search } from '../../icons';\nimport { cn, DEFAULT_ENTRY_SEPARATOR, splitEntry } from '../../utils';\nimport { forwardAccessibleName, type WithAccessibleName } from '../../utils/accessibleName';\n\ntype ComboboxProps<Value> = BaseCombobox.Root.Props<Value, true>;\ntype ComboboxInputProps = ComponentProps<typeof Combobox.Input>;\ntype ComboboxInputGroupProps = ComponentProps<typeof Combobox.InputGroup>;\ntype ComboboxItemProps = ComponentProps<typeof Combobox.Item>;\ntype ComboboxChipsProps<Value> = ComponentProps<typeof Combobox.Chips<Value>>;\n\ntype Indicator = Exclude<NonNullable<ComboboxItemProps['indicator']>, 'none'>;\n\n/** The row the pointer or the arrow keys are on: one of the items, or a group's own row. */\nexport type MultiComboboxHighlighted<Value, GroupShape> =\n  | { kind: 'item'; item: Value }\n  | { kind: 'group'; group: GroupShape }\n  | null;\n\n/** Joins the create row's values with the entry's separator; a `RegExp` uses the default one. */\nconst joinCreateParts = (parts: string[], separator: string | RegExp | null) =>\n  parts.join(`${typeof separator === 'string' ? separator : DEFAULT_ENTRY_SEPARATOR} `);\n\ntype CreatableProps<Value> = {\n  allowCreate?: boolean;\n  /** Words the create row. Receives the values it adds, trimmed and re-joined — not the entry as typed. */\n  queryToCreateLabel?: (query: string) => ReactNode;\n  /** Projects one entered value into an item. Called once per trimmed part of a split entry. */\n  queryToCreateValue?: (query: string) => Value;\n  /** Rejects a value `allowCreate` would mint; values naming an item or already selected skip it. */\n  canCreate?: (query: string) => boolean;\n  /** Splits one entry into several values (default `','`). A `RegExp` must not capture; `null` never splits. */\n  createSeparator?: string | RegExp | null;\n};\n\ntype BaseProps<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<\n  ComboboxInputProps,\n  // Go to the input, which is the `combobox` role; on the group they reach nothing.\n  // - The `aria-*` set links a form field's label, help and error text.\n  // - `onBlur` is the gate `FieldItem` reveals errors on.\n  | 'placeholder'\n  | 'id'\n  | 'name'\n  | 'onBlur'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n> &\n  Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> &\n  Pick<\n    ComboboxProps<Value>,\n    | 'disabled'\n    | 'inputRef'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'itemToStringLabel'\n    | 'itemToStringValue'\n    | 'filter'\n    | 'isItemEqualToValue'\n  > &\n  Pick<\n    ComboboxChipsProps<Value>,\n    'itemToChipLabel' | 'itemToChipColor' | 'pinnedChipLabels' | 'maxVisible'\n  > &\n  CreatableProps<Value> &\n  VirtualizedProps & {\n    /** Read as immutable: pass a new array to change it; one mutated in place is not re-filtered. */\n    items?: readonly (Value | GroupShape)[];\n\n    // root specific\n    /** Clear-all button, shown only while chips exist. Chips stay removable either way. */\n    allowClear?: boolean;\n    /** \"Select All\" row for the whole set; hidden while a query is active, clears when all are selected. */\n    allowSelectAll?: boolean;\n    empty?: ReactNode;\n    /** Options still arriving; doesn't disable — pass `disabled` where the user must wait. */\n    isLoading?: boolean;\n    indicator?: Indicator;\n\n    // query specific\n    /** Rewrites typed text before filtering and creating. Sees the whole text per keystroke — don't `trim()`. */\n    inputValueSanitizer?: (input: string) => string;\n    /** Reports the sanitized query, on mount too. Notification only — the control owns the text. */\n    onQueryChange?: (query: string) => void;\n\n    // item specific\n    /**\n     * Row and chip content (unless `itemToChipLabel`), `itemToStringLabel` by default.\n     * - `query` is the search text, for `MarkedText`; a chip gets `''`.\n     */\n    itemToLabel?: (item: Value, query: string) => ReactNode;\n    itemToIcon?: (item: Value) => ReactNode;\n    itemToDisabled?: (item: Value) => boolean;\n    /** A selected item no press removes: looks disabled, still highlights for `renderAside`. */\n    itemToLocked?: (item: Value) => boolean;\n\n    // chip specific\n    /** Replaces the default chips; the chip props, `maxVisible` included, are then ignored. */\n    renderChips?: (values: Value[]) => ReactNode;\n\n    // group specific\n    /** Defaults to the group's `label`, as `Select` shows it. */\n    groupToLabel?: (group: GroupShape) => ReactNode;\n    /** A row per group that folds it. A query shows every match regardless; state is keyed by position. */\n    collapsibleGroups?: boolean;\n    /** A group's row selects its matching enabled items. The row itself never enters `value`. */\n    selectableGroups?: boolean;\n    /** Each time the popup opens, a group whose items are all selected starts folded. */\n    collapseSelectedGroups?: boolean;\n    /** `banded`: each group, its row and open items, is a white card on a grey list. */\n    groupAppearance?: 'plain' | 'banded';\n\n    // popup specific\n    /**\n     * An inspector beside the list about the last highlighted row; `null` before any.\n     * Hidden while the popup is under 40rem wide.\n     */\n    renderAside?: (highlighted: MultiComboboxHighlighted<Value, GroupShape>) => ReactNode;\n    /** Whether the inspector shows; a button in the popup toggles it. Uncontrolled, it starts open. */\n    asideOpen?: boolean;\n    onAsideOpenChange?: (open: boolean) => void;\n    /** The popup is open on mount, for a picker shown on demand. */\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    /** No field: the popup opens against this element, its search at the top. Pair with `defaultOpen`. */\n    anchor?: ComponentProps<typeof Combobox.Content>['anchor'];\n    /**\n     * The search text, typed elsewhere (a chat composer): with `anchor`, the popup has no search.\n     * The host forwards ArrowUp, ArrowDown, Enter and Escape to the `combobox` input it renders.\n     */\n    query?: string;\n  };\n\n/**\n * Props for `MultiCombobox`.\n *\n * - Pass `isItemEqualToValue` when a store recreates item objects — Base UI matches by reference.\n */\ntype Props<Value, GroupShape extends Group<Value> = Group<Value>> = WithAccessibleName<\n  BaseProps<Value, GroupShape>\n>;\n\n/**\n * White group cards on a grey list: each group's row and open items sit on one card.\n *\n * - The grey is `--secondary` at 45% over the popover, about 1.10:1 against white.\n * - The gap is space under each card's last row, so a windowed list measures it with the row.\n * - Base UI's `role=\"group\"` wraps a group's row and items in either list.\n * - Rows are square; the card's first and last rows take its corners. Enabled rows show a pointer.\n */\nconst GROUP_BANDED = [\n  'tw:bg-[color-mix(in_oklab,rgb(var(--secondary))_45%,rgb(var(--popover)))]',\n  'tw:[&_[role=listbox]]:bg-[color-mix(in_oklab,rgb(var(--secondary))_45%,rgb(var(--popover)))]',\n  // The card is a layer behind the rows that stops 8px short: the grey below it is the gap.\n  'tw:[&_[role=group]]:relative tw:[&_[role=group]]:isolate',\n  'tw:[&_[role=group]]:before:absolute tw:[&_[role=group]]:before:inset-x-0 tw:[&_[role=group]]:before:top-0',\n  'tw:[&_[role=group]]:before:bottom-2 tw:[&_[role=group]]:before:-z-10',\n  'tw:[&_[role=group]]:before:rounded-lg tw:[&_[role=group]]:before:bg-popover',\n  // The gap itself: below the last row, so a highlighted row never covers it.\n  'tw:[&_[role=group]>[role=option]:last-child]:mb-2 tw:[&_[data-group-last]]:pb-2',\n  'tw:[&_[role=group]_[role=option]]:rounded-none',\n  'tw:[&_[role=group]>:first-child_[role=option]]:rounded-t-lg',\n  'tw:[&_[role=group]>:last-child_[role=option]]:rounded-b-lg',\n  'tw:[&_[role=option]:not([data-disabled]):not([data-locked])]:cursor-pointer',\n  // A row whose name wraps keeps its chevron and checkbox on the first line, beside the name.\n  'tw:[&_[role=option]]:items-start',\n  'tw:[&_[role=option]>:not([data-slot=combobox-item-label]):not([data-slot=combobox-group-toggle])]:mt-0.5',\n  'tw:[&_[role=option]>[data-slot=combobox-group-toggle]]:-mt-0.5',\n].join(' ');\n\nconst NO_ITEMS: readonly never[] = [];\nconst NO_VALUES: never[] = [];\n\n/**\n * Searchable multi-select with chips, built on Base UI Combobox.\n *\n * @see RECIPES.md#creatable-multi-combobox\n * @see RECIPES.md#filter-toolbar\n */\nexport const MultiCombobox = <Value, GroupShape extends Group<Value> = Group<Value>>({\n  // root props\n  items: _itemsProp,\n  value: _valueProp,\n  defaultValue,\n  onValueChange,\n  itemToStringLabel,\n  itemToStringValue,\n  disabled,\n  filter: filterProp,\n  isItemEqualToValue: isItemEqualToValueProp,\n  inputRef,\n\n  // input props\n  variant,\n  sizing,\n  focusVariant,\n  state,\n  placeholder,\n  allowClear = true,\n  name,\n  onBlur,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  className,\n\n  // own props\n  allowSelectAll = false,\n  empty = 'No items',\n  isLoading = false,\n  indicator,\n  virtualized = false,\n\n  // query\n  inputValueSanitizer,\n  onQueryChange,\n\n  // creatable\n  allowCreate,\n  canCreate,\n  queryToCreateValue,\n  queryToCreateLabel = defaultQueryToCreateLabel,\n  createSeparator = DEFAULT_ENTRY_SEPARATOR,\n\n  // own item props\n  itemToDisabled = defaultItemToDisabled,\n  itemToLocked,\n  itemToLabel: itemToLabelProp,\n  itemToIcon = defaultItemToIcon,\n  groupToLabel = defaultGroupToLabel,\n  collapsibleGroups = false,\n  selectableGroups = false,\n  collapseSelectedGroups = false,\n  groupAppearance = 'plain',\n  itemToChipLabel,\n  itemToChipColor,\n  pinnedChipLabels,\n  renderChips,\n  renderAside,\n  asideOpen: asideOpenProp,\n  onAsideOpenChange,\n  defaultOpen = false,\n  onOpenChange,\n  anchor,\n  query: queryProp,\n  // Value editors pass `Infinity` (a chip inside `+N` can't be removed); single-row filters `1`.\n  maxVisible = 3,\n  ...accessibleName\n}: Props<Value, GroupShape>) => {\n  const itemsProp = _itemsProp ?? NO_ITEMS;\n  // Held here while `value` is absent; Base UI always gets the selection as `value`.\n  const [valueProp, setValueProp] = useControllableState<Value[]>({\n    prop: _valueProp === null ? NO_VALUES : _valueProp,\n    defaultProp: defaultValue ?? NO_VALUES,\n  });\n  const itemToString = useCallback(\n    (item: Value) => itemToStringLabel?.(item) ?? toLabel(item),\n    [itemToStringLabel],\n  );\n  const itemToLabel = itemToLabelProp ?? defaultRowLabel(itemToStringLabel);\n  const renderArgo = useArgoDesign();\n  const chipVariant = renderArgo ? 'pill' : 'default';\n\n  const [inputValue, setInputValue] = useState('');\n  const [asideOpen, setAsideOpen] = useControllableState({\n    prop: asideOpenProp,\n    defaultProp: true,\n    onChange: onAsideOpenChange,\n  });\n  const [lastHighlighted, setLastHighlighted] =\n    useState<MultiComboboxHighlighted<Value, GroupShape>>(null);\n  const [createdItems, setCreatedItems] = useState<Value[]>([]);\n  const query = (queryProp ?? inputValue).trim();\n\n  useQueryReporter(query, onQueryChange);\n\n  // `aria-busy` on the input only (list items stay pickable); absent rather than `false`.\n  const busy = isLoading || undefined;\n\n  // Held here only when needed — owning the text re-renders on every keystroke.\n  // - `itemToLabel` needs it: its rows receive the query.\n  const ownsInput = Boolean(\n    queryProp !== undefined ||\n    allowCreate ||\n    inputValueSanitizer ||\n    onQueryChange ||\n    itemToLabelProp ||\n    collapsibleGroups ||\n    selectableGroups,\n  );\n\n  const baseItems = useWithCreated(itemsProp, createdItems);\n\n  const allFlatItems = flatItems(baseItems);\n  const sampleItem = allFlatItems[0];\n  // Otherwise `0 === 0` reads as all selected and puts the row's entry into `value`.\n  const hasSelectAllRow = allowSelectAll && allFlatItems.length > 0;\n  const isAllSelected = hasSelectAllRow && allFlatItems.length === (valueProp?.length ?? 0);\n\n  const defaultFilter = BaseCombobox.useFilter({\n    multiple: true,\n    value: valueProp,\n  });\n\n  // Keeps the control's own rows (create, group header) away from the caller's projection.\n  // Stable while the caller's accessor is: Base UI re-filters on every new identity.\n  const wrappedItemToStringLabel = useMemo<ComboboxProps<Value>['itemToStringLabel']>(() => {\n    // No caller projection keeps Base UI's own accessor.\n    if (!allowCreate && !collapsibleGroups && !selectableGroups) {\n      return itemToStringLabel && itemToString;\n    }\n    return (item) => {\n      if (isCreatableItem(item)) return item.value;\n      if (isGroupHeaderItem(item)) return item.label;\n      return itemToString(item);\n    };\n  }, [allowCreate, collapsibleGroups, selectableGroups, itemToStringLabel, itemToString]);\n\n  const itemFilter: NonNullable<ComboboxProps<Value>['filter']> =\n    filterProp ?? defaultFilter.contains;\n\n  const isItemEqualToValue = useItemEquality(isItemEqualToValueProp);\n\n  const groupHeaders = useGroupHeaders<Value, GroupShape>({\n    items: itemsProp,\n    collapsible: collapsibleGroups,\n    selectable: selectableGroups,\n    query,\n    matches: (item) => itemFilter(item, query, wrappedItemToStringLabel),\n    isItemEqualToValue,\n    // Runs on open, after render: `isSelected` below is in scope by then.\n    startsCollapsed: collapseSelectedGroups\n      ? (group) =>\n          group.items.length > 0 &&\n          // Not `isSelected`: with `defaultOpen` this runs during the first render, before it exists.\n          group.items.every((item) =>\n            valueProp.some((selected) => isItemEqualToValue(item, selected)),\n          )\n      : undefined,\n    startsOpen: defaultOpen,\n  });\n\n  const listItems = useWithCreated(groupHeaders.items, createdItems);\n\n  const virtualList = useVirtualList(baseItems, virtualized);\n\n  const labelKey = (item: Value) => itemToString(item).toLowerCase();\n\n  const createParts = !allowCreate || disabled || !query ? [] : splitEntry(query, createSeparator);\n\n  const selectedKeys = new Set<string>();\n  if (createParts.length > 0) for (const item of valueProp) selectedKeys.add(labelKey(item));\n\n  // A set only when `canCreate` asks per value; otherwise one early-exiting scan is cheaper.\n  const itemKeys = new Set<string>();\n  if (createParts.length > 0 && canCreate) {\n    for (const item of allFlatItems) itemKeys.add(labelKey(item));\n  }\n  const namesAnItem = (key: string) =>\n    canCreate ? itemKeys.has(key) : allFlatItems.some((item) => labelKey(item) === key);\n\n  /**\n   * The entry's values not yet selected, minus those `canCreate` rejects.\n   *\n   * - Both names the create row and is exactly what committing it adds.\n   * - A value naming an existing item counts and bypasses `canCreate` — committing selects it.\n   */\n  const addedCreateParts = createParts.filter((part) => {\n    const key = part.toLowerCase();\n    if (selectedKeys.has(key)) return false;\n    return !canCreate || namesAnItem(key) || canCreate(part);\n  });\n\n  const soleValueKey = createParts.length === 1 ? createParts[0]!.toLowerCase() : undefined;\n\n  // A single value naming an item already has its own row; a split entry matches no row.\n  const showCreateRow =\n    addedCreateParts.length > 0 && (soleValueKey === undefined || !namesAnItem(soleValueKey));\n\n  const items = useMemo(() => {\n    const withSelectAll = hasSelectAllRow\n      ? [...toEntries(listItems, [selectAllItem]), ...listItems]\n      : listItems;\n    return showCreateRow\n      ? [...withSelectAll, ...toEntries(listItems, [createCreatableItem(query)])]\n      : withSelectAll;\n  }, [hasSelectAllRow, showCreateRow, listItems, query]);\n\n  const filterHeader = groupHeaders.enabled ? groupHeaders.filterHeader : undefined;\n  const filter = useCallback(\n    (item: Value, query: string, itemToString?: (value: Value) => string) => {\n      // Select All covers the whole item set, so it exists only while no query narrows the list.\n      if (isSelectAllItem(item)) return query.trim() === '';\n      if (isCreatableItem(item)) return true;\n\n      return filterHeader?.(item) ?? itemFilter(item, query, itemToString);\n    },\n    [filterHeader, itemFilter],\n  );\n\n  const wrappedItemToStringValue = useCreatableStringValue(itemToStringValue, allowCreate);\n\n  const value = isAllSelected ? [...valueProp, selectAllItem as Value] : valueProp;\n\n  // Without a comparer Base UI compares by identity, so a `Set` suffices.\n  const selectedSet = selectableGroups && !isItemEqualToValueProp ? new Set(valueProp) : undefined;\n  const isSelected = (item: Value) =>\n    selectedSet?.has(item) ?? valueProp.some((selected) => isItemEqualToValue(item, selected));\n\n  /** What a group's row selects: the group's items the query matches, the disabled aside. */\n  const groupTargets = (row: unknown) =>\n    groupHeaders\n      .headerOf(row)\n      ?.matching.filter((item) => !itemToDisabled(item) && !itemToLocked?.(item)) ?? [];\n\n  /**\n   * Replaces a pressed group row in `next` with its items.\n   *\n   * - Base UI adds the row to `value` like any unselected item.\n   * - A row whose items are all selected deselects them.\n   */\n  const selectGroupRow = (next: Value[]) => {\n    const row = next.find(isGroupHeaderItem);\n    if (row === undefined) return next;\n\n    const rest = next.filter((item) => item !== row);\n    const targets = groupTargets(row);\n    if (!targets.every(isSelected))\n      return [...rest, ...targets.filter((item) => !isSelected(item))];\n    return rest.filter((item) => !targets.some((target) => isItemEqualToValue(target, item)));\n  };\n\n  const groupRowChecked = (targets: Value[]) => {\n    const selectedCount = targets.filter(isSelected).length;\n    if (selectedCount === 0) return false;\n    return selectedCount === targets.length ? true : 'mixed';\n  };\n\n  const handleInputValueChange: NonNullable<ComboboxProps<Value>['onInputValueChange']> = (\n    next,\n    { reason },\n  ) => {\n    // A host-owned query is not this input's to change.\n    if (queryProp !== undefined) return;\n    setInputValue(sanitizeTypedInput(next, reason, inputValueSanitizer));\n  };\n\n  const handleValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {\n    // Base UI clears the text itself only when it owns it.\n    if (ownsInput) setInputValue((prev) => (prev === '' ? prev : ''));\n    // A pinned `value` with no handler: the change lands nowhere, so nothing is minted either.\n    if (!onValueChange && _valueProp !== undefined) return;\n\n    const picked = selectGroupRow(next);\n    const created: Value[] = [];\n    const converted = (() => {\n      if (!allowCreate || !picked.some(isCreatableItem)) return picked;\n\n      // A value naming an item selects it rather than minting a duplicate chip.\n      const itemsByLabel = new Map<string, Value>();\n      for (const item of allFlatItems) itemsByLabel.set(labelKey(item), item);\n\n      return picked.flatMap((item) => {\n        if (!isCreatableItem(item)) return [item];\n\n        return addedCreateParts.map((part) => {\n          const existing = itemsByLabel.get(part.toLowerCase());\n          if (existing !== undefined) return existing;\n\n          const value = defaultToCreateValue(part, sampleItem, queryToCreateValue) as Value;\n          created.push(value);\n          return value;\n        });\n      });\n    })();\n\n    const hasSelectAll = converted.some((item) => isSelectAllItem(item));\n    const newValue = (() => {\n      if (!hasSelectAllRow) return converted;\n      if (!hasSelectAll) return isAllSelected ? [] : converted;\n      return isAllSelected ? converted.filter((item) => !isSelectAllItem(item)) : allFlatItems;\n    })();\n\n    if (allowCreate) {\n      // Filter by `newValue`: `valueProp` lacks values created in this change.\n      const selected = new Set(newValue.map(itemToString));\n      setCreatedItems((prev) =>\n        [...prev, ...created].filter((item) => selected.has(itemToString(item))),\n      );\n    }\n\n    // Locked items stay exactly as selected; a change that touched only them is no change.\n    const kept = itemToLocked\n      ? [\n          ...newValue.filter((item) => !itemToLocked(item) || isSelected(item)),\n          ...valueProp.filter(\n            (item) =>\n              itemToLocked(item) && !newValue.some((picked) => isItemEqualToValue(picked, item)),\n          ),\n        ]\n      : newValue;\n    if (itemToLocked && kept.length === valueProp.length && kept.every(isSelected)) return;\n\n    setValueProp(kept);\n    onValueChange?.(kept, event);\n  };\n\n  // Only items and group rows have a pane; the create and Select All rows keep the last one.\n  const toHighlighted = (item: Value | undefined): MultiComboboxHighlighted<Value, GroupShape> => {\n    if (item === undefined || isCreatableItem(item) || isSelectAllItem(item)) return null;\n    const header = groupHeaders.headerOf(item);\n    if (header) return { kind: 'group', group: header.group };\n    return isGroupHeaderItem(item) ? null : { kind: 'item', item };\n  };\n\n  const options = (\n    <ComboboxOptions<Value, GroupShape>\n      isLoading={isLoading}\n      empty={empty}\n      virtualized={virtualList.enabled}\n      listRef={virtualList.ref}\n      groupHeaders={groupHeaders}\n      groupToLabel={groupToLabel}\n      indicator={indicator}\n      itemToLabel={(item) => itemToLabel(item, query)}\n      itemToIcon={itemToIcon}\n      itemToDisabled={itemToDisabled}\n      itemToLocked={itemToLocked}\n      // Names exactly the values committing the row adds.\n      createLabel={() => queryToCreateLabel(joinCreateParts(addedCreateParts, createSeparator))}\n      groupRowState={\n        selectableGroups\n          ? (row) => {\n              const targets = groupTargets(row);\n              // Its pickable items plus the locked ones already selected, so locked picks still show.\n              const shown = (groupHeaders.headerOf(row)?.matching ?? []).filter(\n                (item) => !itemToDisabled(item) || isSelected(item),\n              );\n              // A group of only locked items locks its row too: it still highlights for the inspector.\n              const locked = targets.length === 0 && shown.some((item) => itemToLocked?.(item));\n              return {\n                checked: groupRowChecked(shown),\n                disabled: targets.length === 0 && !locked,\n                locked,\n              };\n            }\n          : undefined\n      }\n    />\n  );\n\n  const input = (\n    <Combobox.Input\n      {...forwardAccessibleName(accessibleName)}\n      name={name}\n      onBlur={onBlur}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      aria-required={ariaRequired}\n      aria-busy={busy}\n      placeholder={placeholder}\n      disabled={disabled}\n      // Typed elsewhere, the input is hidden: no Tab stop the user can't see.\n      tabIndex={anchor && queryProp !== undefined ? -1 : undefined}\n      onKeyDown={groupHeaders.onInputKeyDown}\n      // Cancels the group's `&_input` padding; the chip row already pads.\n      className={\n        anchor\n          ? 'tw:min-w-0 tw:grow tw:!px-0 tw:!py-0'\n          : 'tw:w-auto tw:min-w-0 tw:grow tw:basis-[120px] tw:!px-0 tw:!py-0'\n      }\n    />\n  );\n\n  // With an `anchor`, the search sits at the top of the popup instead of in a field.\n  const popupSearch =\n    anchor && queryProp === undefined ? (\n      <div className=\"tw:flex tw:items-center tw:gap-2 tw:px-3 tw:pt-2.5 tw:pb-1\">\n        <Combobox.InputGroup className=\"tw:h-9 tw:flex-1 tw:gap-2 tw:bg-background tw:px-3\">\n          <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n          {input}\n        </Combobox.InputGroup>\n      </div>\n    ) : null;\n\n  return (\n    <Combobox.Root<Value, true>\n      multiple\n      // Otherwise Enter after typing selects nothing and closes the popup.\n      autoHighlight\n      items={items}\n      value={value}\n      filter={filter}\n      isItemEqualToValue={isItemEqualToValue}\n      onValueChange={handleValueChange}\n      defaultOpen={defaultOpen}\n      onOpenChange={(open) => {\n        groupHeaders.onOpenChange(open);\n        // Each opening starts the inspector afresh: the rows may have changed since.\n        if (!open) setLastHighlighted(null);\n        onOpenChange?.(open);\n      }}\n      onItemHighlighted={(item, details) => {\n        groupHeaders.onItemHighlighted(item);\n        virtualList.onItemHighlighted(details);\n        const next = renderAside ? toHighlighted(item) : null;\n        if (next) setLastHighlighted(next);\n      }}\n      virtualized={virtualList.enabled}\n      itemToStringLabel={wrappedItemToStringLabel}\n      itemToStringValue={wrappedItemToStringValue}\n      disabled={disabled}\n      inputRef={inputRef}\n      {...(ownsInput\n        ? { inputValue: queryProp ?? inputValue, onInputValueChange: handleInputValueChange }\n        : {})}\n    >\n      {/* Typed elsewhere: Base UI keeps its input, hidden and outside the popup, for the keys it reads. */}\n      {anchor && queryProp !== undefined && <div className=\"tw:sr-only\">{input}</div>}\n      {!anchor && (\n        <Combobox.InputGroup\n          variant={variant}\n          sizing={sizing}\n          state={state}\n          focusVariant={focusVariant}\n          className={className}\n        >\n          {/* Chips plus the input row; its press handler focuses the input, arrows move between chips. */}\n          <BaseCombobox.Chips className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5\">\n            <Combobox.Chips<Value>\n              maxVisible={maxVisible}\n              variant={chipVariant}\n              itemToChipLabel={itemToChipLabel ?? ((item) => itemToLabel(item, ''))}\n              itemToChipColor={itemToChipColor}\n              pinnedChipLabels={pinnedChipLabels}\n            >\n              {renderChips}\n            </Combobox.Chips>\n            {/* Wraps below the chips under 120px; alone on its row it shrinks to keep both buttons inside. */}\n            <div className=\"tw:flex tw:min-w-0 tw:grow tw:items-center tw:gap-1\">\n              {input}\n              {allowClear && <ComboboxClearButton disabled={disabled} />}\n              <ComboboxOpenButton disabled={disabled} isLoading={isLoading} />\n            </div>\n          </BaseCombobox.Chips>\n        </Combobox.InputGroup>\n      )}\n      {renderAside ? (\n        <Combobox.Content\n          anchor={anchor}\n          className={cn(\n            'tw:@container tw:w-[max(var(--anchor-width),48rem)]',\n            // Tall enough for the inspector's details when only a row or two match; none when nothing does.\n            'tw:min-h-[min(var(--available-height),22rem)] tw:data-empty:min-h-0',\n            // Opened against a composer it has no field to stay near, so it keeps to a list's height.\n            anchor && 'tw:max-h-[min(var(--available-height),32rem)]',\n            groupAppearance === 'banded' && GROUP_BANDED,\n          )}\n        >\n          {popupSearch}\n          {/*\n            `0fr` to `1fr` slides the inspector in and narrows the list; under 40rem it stays out.\n            - Nothing matches: the inspector and its button go at once, and the list takes the width.\n          */}\n          <div\n            className={cn(\n              'tw:grid tw:min-h-0 tw:flex-1 tw:grid-rows-[minmax(0,1fr)]',\n              'tw:motion-safe:transition-[grid-template-columns] tw:motion-safe:duration-200 tw:motion-safe:ease-out',\n              asideOpen ? 'tw:grid-cols-[minmax(0,2fr)_1fr]' : 'tw:grid-cols-[minmax(0,2fr)_0fr]',\n              'tw:@max-[40rem]:grid-cols-[minmax(0,2fr)_0fr]',\n            )}\n          >\n            {/* With the inspector hidden its button sits in the corner, so the list ends above it; no button, no room. */}\n            <div\n              className={cn(\n                'tw:flex tw:min-h-0 tw:min-w-0 tw:flex-col tw:group-data-empty/combobox-content:col-span-2',\n                !asideOpen &&\n                  'tw:pb-10 tw:@max-[40rem]:pb-0 tw:group-data-empty/combobox-content:pb-0',\n              )}\n            >\n              {options}\n            </div>\n            <div\n              className={cn(\n                'tw:relative tw:min-w-0 tw:overflow-hidden tw:border-border',\n                'tw:motion-safe:transition-opacity tw:motion-safe:duration-200',\n                asideOpen ? 'tw:border-l tw:opacity-100' : 'tw:opacity-0',\n                'tw:@max-[40rem]:invisible tw:@max-[40rem]:border-l-0 tw:@max-[40rem]:opacity-0',\n                'tw:group-data-empty/combobox-content:hidden',\n              )}\n              data-slot=\"combobox-inspector\"\n              inert={!asideOpen}\n            >\n              {/* Out of flow: the list alone sets the popup's height, the pane scrolls within it. */}\n              <div className=\"tw:absolute tw:inset-y-0 tw:left-0 tw:w-full tw:min-w-60 tw:overflow-y-auto tw:p-4 tw:pb-12\">\n                {renderAside(lastHighlighted)}\n              </div>\n            </div>\n          </div>\n          <div className=\"tw:absolute tw:right-2 tw:bottom-2 tw:@max-[40rem]:hidden tw:group-data-empty/combobox-content:hidden\">\n            <AsideToggle open={asideOpen} onOpenChange={setAsideOpen} />\n          </div>\n        </Combobox.Content>\n      ) : (\n        <Combobox.Content\n          anchor={anchor}\n          className={cn(\n            anchor && 'tw:max-h-[min(var(--available-height),32rem)]',\n            groupAppearance === 'banded' && GROUP_BANDED,\n          )}\n        >\n          {popupSearch}\n          {options}\n        </Combobox.Content>\n      )}\n    </Combobox.Root>\n  );\n};\n\n/**\n * Hides or shows the inspector beside the list, from the popup's bottom-right corner.\n *\n * - Floats over the list while the inspector is hidden; gone with it when the popup is too narrow.\n * - Keeps the input focused, so the popup stays open.\n */\nconst AsideToggle = ({\n  open,\n  onOpenChange,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) => {\n  const label = open ? 'Hide inspector' : 'Show inspector';\n  const Icon = open ? PanelRightClose : PanelRightOpen;\n  return (\n    // Its own provider, so a host without one still renders the inspector.\n    <TooltipProvider>\n      <Tooltip.Root>\n        <Tooltip.Trigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"icon-xs\"\n            aria-label={label}\n            aria-expanded={open}\n            className=\"tw:bg-popover tw:shadow-sm\"\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => onOpenChange(!open)}\n          >\n            <Icon />\n          </Button>\n        </Tooltip.Trigger>\n        <Tooltip.Content placement=\"left\">{label}</Tooltip.Content>\n      </Tooltip.Root>\n    </TooltipProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAqDA,MAAM,mBAAmB,OAAiB,cACxC,MAAM,KAAK,GAAG,OAAO,cAAc,WAAW,YAAA,IAAoC,EAAE;;;;;;;;;AAoItF,MAAM,eAAe;CACnB;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,WAA6B,CAAC;AACpC,MAAM,YAAqB,CAAC;;;;;;;AAQ5B,MAAa,iBAAwE,EAEnF,OAAO,YACP,OAAO,YACP,cACA,eACA,mBACA,mBACA,UACA,QAAQ,YACR,oBAAoB,wBACpB,UAGA,SACA,QACA,cACA,OACA,aACA,aAAa,MACb,MACA,QACA,oBAAoB,iBACpB,gBAAgB,aAChB,iBAAiB,cACjB,WAGA,iBAAiB,OACjB,QAAQ,YACR,YAAY,OACZ,WACA,cAAc,OAGd,qBACA,eAGA,aACA,WACA,oBACA,qBAAqB,2BACrB,kBAAA,KAGA,iBAAiB,uBACjB,cACA,aAAa,iBACb,aAAa,mBACb,eAAe,qBACf,oBAAoB,OACpB,mBAAmB,OACnB,yBAAyB,OACzB,kBAAkB,SAClB,iBACA,iBACA,kBACA,aACA,aACA,WAAW,eACX,mBACA,cAAc,OACd,cACA,QACA,OAAO,WAEP,aAAa,GACb,GAAG,qBAC2B;CAC9B,MAAM,YAAY,cAAc;CAEhC,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,MAAM,eAAe,OAAO,YAAY;EACxC,aAAa,gBAAgB;CAC/B,CAAC;CACD,MAAM,eAAe,aAClB,SAAgB,oBAAoB,IAAI,KAAK,QAAQ,IAAI,GAC1D,CAAC,iBAAiB,CACpB;CACA,MAAM,cAAc,mBAAmB,gBAAgB,iBAAiB;CAExE,MAAM,cADa,cACU,IAAI,SAAS;CAE1C,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,WAAW,gBAAgB,qBAAqB;EACrD,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,iBAAiB,sBACtB,SAAsD,IAAI;CAC5D,MAAM,CAAC,cAAc,mBAAmB,SAAkB,CAAC,CAAC;CAC5D,MAAM,SAAS,aAAa,WAAA,CAAY,KAAK;CAE7C,iBAAiB,OAAO,aAAa;CAGrC,MAAM,OAAO,aAAa,KAAA;CAI1B,MAAM,YAAY,QAChB,cAAc,KAAA,KACd,eACA,uBACA,iBACA,mBACA,qBACA,gBACF;CAEA,MAAM,YAAY,eAAe,WAAW,YAAY;CAExD,MAAM,eAAe,UAAU,SAAS;CACxC,MAAM,aAAa,aAAa;CAEhC,MAAM,kBAAkB,kBAAkB,aAAa,SAAS;CAChE,MAAM,gBAAgB,mBAAmB,aAAa,YAAY,WAAW,UAAU;CAEvF,MAAM,gBAAgBA,SAAa,UAAU;EAC3C,UAAU;EACV,OAAO;CACT,CAAC;CAID,MAAM,2BAA2B,cAAyD;EAExF,IAAI,CAAC,eAAe,CAAC,qBAAqB,CAAC,kBACzC,OAAO,qBAAqB;EAE9B,QAAQ,SAAS;GACf,IAAI,gBAAgB,IAAI,GAAG,OAAO,KAAK;GACvC,IAAI,kBAAkB,IAAI,GAAG,OAAO,KAAK;GACzC,OAAO,aAAa,IAAI;EAC1B;CACF,GAAG;EAAC;EAAa;EAAmB;EAAkB;EAAmB;CAAY,CAAC;CAEtF,MAAM,aACJ,cAAc,cAAc;CAE9B,MAAM,qBAAqB,gBAAgB,sBAAsB;CAEjE,MAAM,eAAe,gBAAmC;EACtD,OAAO;EACP,aAAa;EACb,YAAY;EACZ;EACA,UAAU,SAAS,WAAW,MAAM,OAAO,wBAAwB;EACnE;EAEA,iBAAiB,0BACZ,UACC,MAAM,MAAM,SAAS,KAErB,MAAM,MAAM,OAAO,SACjB,UAAU,MAAM,aAAa,mBAAmB,MAAM,QAAQ,CAAC,CACjE,IACF,KAAA;EACJ,YAAY;CACd,CAAC;CAED,MAAM,YAAY,eAAe,aAAa,OAAO,YAAY;CAEjE,MAAM,cAAc,eAAe,WAAW,WAAW;CAEzD,MAAM,YAAY,SAAgB,aAAa,IAAI,CAAC,CAAC,YAAY;CAEjE,MAAM,cAAc,CAAC,eAAe,YAAY,CAAC,QAAQ,CAAC,IAAI,WAAW,OAAO,eAAe;CAE/F,MAAM,+BAAe,IAAI,IAAY;CACrC,IAAI,YAAY,SAAS,GAAG,KAAK,MAAM,QAAQ,WAAW,aAAa,IAAI,SAAS,IAAI,CAAC;CAGzF,MAAM,2BAAW,IAAI,IAAY;CACjC,IAAI,YAAY,SAAS,KAAK,WAC5B,KAAK,MAAM,QAAQ,cAAc,SAAS,IAAI,SAAS,IAAI,CAAC;CAE9D,MAAM,eAAe,QACnB,YAAY,SAAS,IAAI,GAAG,IAAI,aAAa,MAAM,SAAS,SAAS,IAAI,MAAM,GAAG;;;;;;;CAQpF,MAAM,mBAAmB,YAAY,QAAQ,SAAS;EACpD,MAAM,MAAM,KAAK,YAAY;EAC7B,IAAI,aAAa,IAAI,GAAG,GAAG,OAAO;EAClC,OAAO,CAAC,aAAa,YAAY,GAAG,KAAK,UAAU,IAAI;CACzD,CAAC;CAED,MAAM,eAAe,YAAY,WAAW,IAAI,YAAY,EAAE,CAAE,YAAY,IAAI,KAAA;CAGhF,MAAM,gBACJ,iBAAiB,SAAS,MAAM,iBAAiB,KAAA,KAAa,CAAC,YAAY,YAAY;CAEzF,MAAM,QAAQ,cAAc;EAC1B,MAAM,gBAAgB,kBAClB,CAAC,GAAG,UAAU,WAAW,CAAC,aAAa,CAAC,GAAG,GAAG,SAAS,IACvD;EACJ,OAAO,gBACH,CAAC,GAAG,eAAe,GAAG,UAAU,WAAW,CAAC,oBAAoB,KAAK,CAAC,CAAC,CAAC,IACxE;CACN,GAAG;EAAC;EAAiB;EAAe;EAAW;CAAK,CAAC;CAErD,MAAM,eAAe,aAAa,UAAU,aAAa,eAAe,KAAA;CACxE,MAAM,SAAS,aACZ,MAAa,OAAe,iBAA4C;EAEvE,IAAI,gBAAgB,IAAI,GAAG,OAAO,MAAM,KAAK,MAAM;EACnD,IAAI,gBAAgB,IAAI,GAAG,OAAO;EAElC,OAAO,eAAe,IAAI,KAAK,WAAW,MAAM,OAAO,YAAY;CACrE,GACA,CAAC,cAAc,UAAU,CAC3B;CAEA,MAAM,2BAA2B,wBAAwB,mBAAmB,WAAW;CAEvF,MAAM,QAAQ,gBAAgB,CAAC,GAAG,WAAW,aAAsB,IAAI;CAGvE,MAAM,cAAc,oBAAoB,CAAC,yBAAyB,IAAI,IAAI,SAAS,IAAI,KAAA;CACvF,MAAM,cAAc,SAClB,aAAa,IAAI,IAAI,KAAK,UAAU,MAAM,aAAa,mBAAmB,MAAM,QAAQ,CAAC;;CAG3F,MAAM,gBAAgB,QACpB,aACG,SAAS,GAAG,CAAC,EACZ,SAAS,QAAQ,SAAS,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC;;;;;;;CAQpF,MAAM,kBAAkB,SAAkB;EACxC,MAAM,MAAM,KAAK,KAAK,iBAAiB;EACvC,IAAI,QAAQ,KAAA,GAAW,OAAO;EAE9B,MAAM,OAAO,KAAK,QAAQ,SAAS,SAAS,GAAG;EAC/C,MAAM,UAAU,aAAa,GAAG;EAChC,IAAI,CAAC,QAAQ,MAAM,UAAU,GAC3B,OAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,QAAQ,SAAS,CAAC,WAAW,IAAI,CAAC,CAAC;EACjE,OAAO,KAAK,QAAQ,SAAS,CAAC,QAAQ,MAAM,WAAW,mBAAmB,QAAQ,IAAI,CAAC,CAAC;CAC1F;CAEA,MAAM,mBAAmB,YAAqB;EAC5C,MAAM,gBAAgB,QAAQ,OAAO,UAAU,CAAC,CAAC;EACjD,IAAI,kBAAkB,GAAG,OAAO;EAChC,OAAO,kBAAkB,QAAQ,SAAS,OAAO;CACnD;CAEA,MAAM,0BACJ,MACA,EAAE,aACC;EAEH,IAAI,cAAc,KAAA,GAAW;EAC7B,cAAc,mBAAmB,MAAM,QAAQ,mBAAmB,CAAC;CACrE;CAEA,MAAM,qBAA4D,MAAM,UAAU;EAEhF,IAAI,WAAW,eAAe,SAAU,SAAS,KAAK,OAAO,EAAG;EAEhE,IAAI,CAAC,iBAAiB,eAAe,KAAA,GAAW;EAEhD,MAAM,SAAS,eAAe,IAAI;EAClC,MAAM,UAAmB,CAAC;EAC1B,MAAM,mBAAmB;GACvB,IAAI,CAAC,eAAe,CAAC,OAAO,KAAK,eAAe,GAAG,OAAO;GAG1D,MAAM,+BAAe,IAAI,IAAmB;GAC5C,KAAK,MAAM,QAAQ,cAAc,aAAa,IAAI,SAAS,IAAI,GAAG,IAAI;GAEtE,OAAO,OAAO,SAAS,SAAS;IAC9B,IAAI,CAAC,gBAAgB,IAAI,GAAG,OAAO,CAAC,IAAI;IAExC,OAAO,iBAAiB,KAAK,SAAS;KACpC,MAAM,WAAW,aAAa,IAAI,KAAK,YAAY,CAAC;KACpD,IAAI,aAAa,KAAA,GAAW,OAAO;KAEnC,MAAM,QAAQ,qBAAqB,MAAM,YAAY,kBAAkB;KACvE,QAAQ,KAAK,KAAK;KAClB,OAAO;IACT,CAAC;GACH,CAAC;EACH,EAAA,CAAG;EAEH,MAAM,eAAe,UAAU,MAAM,SAAS,gBAAgB,IAAI,CAAC;EACnE,MAAM,kBAAkB;GACtB,IAAI,CAAC,iBAAiB,OAAO;GAC7B,IAAI,CAAC,cAAc,OAAO,gBAAgB,CAAC,IAAI;GAC/C,OAAO,gBAAgB,UAAU,QAAQ,SAAS,CAAC,gBAAgB,IAAI,CAAC,IAAI;EAC9E,EAAA,CAAG;EAEH,IAAI,aAAa;GAEf,MAAM,WAAW,IAAI,IAAI,SAAS,IAAI,YAAY,CAAC;GACnD,iBAAiB,SACf,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,QAAQ,SAAS,SAAS,IAAI,aAAa,IAAI,CAAC,CAAC,CACzE;EACF;EAGA,MAAM,OAAO,eACT,CACE,GAAG,SAAS,QAAQ,SAAS,CAAC,aAAa,IAAI,KAAK,WAAW,IAAI,CAAC,GACpE,GAAG,UAAU,QACV,SACC,aAAa,IAAI,KAAK,CAAC,SAAS,MAAM,WAAW,mBAAmB,QAAQ,IAAI,CAAC,CACrF,CACF,IACA;EACJ,IAAI,gBAAgB,KAAK,WAAW,UAAU,UAAU,KAAK,MAAM,UAAU,GAAG;EAEhF,aAAa,IAAI;EACjB,gBAAgB,MAAM,KAAK;CAC7B;CAGA,MAAM,iBAAiB,SAAyE;EAC9F,IAAI,SAAS,KAAA,KAAa,gBAAgB,IAAI,KAAK,gBAAgB,IAAI,GAAG,OAAO;EACjF,MAAM,SAAS,aAAa,SAAS,IAAI;EACzC,IAAI,QAAQ,OAAO;GAAE,MAAM;GAAS,OAAO,OAAO;EAAM;EACxD,OAAO,kBAAkB,IAAI,IAAI,OAAO;GAAE,MAAM;GAAQ;EAAK;CAC/D;CAEA,MAAM,UACJ,oBAAC,iBAAD;EACa;EACJ;EACP,aAAa,YAAY;EACzB,SAAS,YAAY;EACP;EACA;EACH;EACX,cAAc,SAAS,YAAY,MAAM,KAAK;EAClC;EACI;EACF;EAEd,mBAAmB,mBAAmB,gBAAgB,kBAAkB,eAAe,CAAC;EACxF,eACE,oBACK,QAAQ;GACP,MAAM,UAAU,aAAa,GAAG;GAEhC,MAAM,SAAS,aAAa,SAAS,GAAG,CAAC,EAAE,YAAY,CAAC,EAAA,CAAG,QACxD,SAAS,CAAC,eAAe,IAAI,KAAK,WAAW,IAAI,CACpD;GAEA,MAAM,SAAS,QAAQ,WAAW,KAAK,MAAM,MAAM,SAAS,eAAe,IAAI,CAAC;GAChF,OAAO;IACL,SAAS,gBAAgB,KAAK;IAC9B,UAAU,QAAQ,WAAW,KAAK,CAAC;IACnC;GACF;EACF,IACA,KAAA;CAEP,CAAA;CAGH,MAAM,QACJ,oBAACC,WAAS,OAAV;EACE,GAAI,sBAAsB,cAAc;EAClC;EACE;EACR,oBAAkB;EAClB,gBAAc;EACd,iBAAe;EACf,aAAW;EACE;EACH;EAEV,UAAU,UAAU,cAAc,KAAA,IAAY,KAAK,KAAA;EACnD,WAAW,aAAa;EAExB,WACE,SACI,yCACA;CAEP,CAAA;CAIH,MAAM,cACJ,UAAU,cAAc,KAAA,IACtB,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAACA,WAAS,YAAV;GAAqB,WAAU;GAA/B,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA,GACnE,KACkB;;CAClB,CAAA,IACH;CAEN,OACE,qBAACA,WAAS,MAAV;EACE,UAAA;EAEA,eAAA;EACO;EACA;EACC;EACY;EACpB,eAAe;EACF;EACb,eAAe,SAAS;GACtB,aAAa,aAAa,IAAI;GAE9B,IAAI,CAAC,MAAM,mBAAmB,IAAI;GAClC,eAAe,IAAI;EACrB;EACA,oBAAoB,MAAM,YAAY;GACpC,aAAa,kBAAkB,IAAI;GACnC,YAAY,kBAAkB,OAAO;GACrC,MAAM,OAAO,cAAc,cAAc,IAAI,IAAI;GACjD,IAAI,MAAM,mBAAmB,IAAI;EACnC;EACA,aAAa,YAAY;EACzB,mBAAmB;EACnB,mBAAmB;EACT;EACA;EACV,GAAK,YACD;GAAE,YAAY,aAAa;GAAY,oBAAoB;EAAuB,IAClF,CAAC;EA7BP,UAAA;GAgCG,UAAU,cAAc,KAAA,KAAa,oBAAC,OAAD;IAAK,WAAU;IAAc,UAAA;GAAW,CAAA;GAC7E,CAAC,UACA,oBAACA,WAAS,YAAV;IACW;IACD;IACD;IACO;IACH;IAGX,UAAA,qBAACD,SAAa,OAAd;KAAoB,WAAU;KAA9B,UAAA,CACE,oBAACC,WAAS,OAAV;MACc;MACZ,SAAS;MACT,iBAAiB,qBAAqB,SAAS,YAAY,MAAM,EAAE;MAClD;MACC;MAEjB,UAAA;KACa,CAAA,GAEhB,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACG;OACA,cAAc,oBAAC,qBAAD,EAA+B,SAAW,CAAA;OACzD,oBAAC,oBAAD;QAA8B;QAAqB;OAAY,CAAA;MAC5D;KACa,CAAA,CAAA;;GACD,CAAA;GAEtB,cACC,qBAACA,WAAS,SAAV;IACU;IACR,WAAW,GACT,uDAEA,uEAEA,UAAU,iDACV,oBAAoB,YAAY,YAClC;IATF,UAAA;KAWG;KAKD,qBAAC,OAAD;MACE,WAAW,GACT,6DACA,yGACA,YAAY,qCAAqC,oCACjD,+CACF;MANF,UAAA,CASE,oBAAC,OAAD;OACE,WAAW,GACT,6FACA,CAAC,aACC,yEACJ;OAEC,UAAA;MACE,CAAA,GACL,oBAAC,OAAD;OACE,WAAW,GACT,8DACA,iEACA,YAAY,+BAA+B,gBAC3C,kFACA,6CACF;OACA,aAAU;OACV,OAAO,CAAC;OAGR,UAAA,oBAAC,OAAD;QAAK,WAAU;QACZ,UAAA,YAAY,eAAe;OACzB,CAAA;MACF,CAAA,CACF;;KACL,oBAAC,OAAD;MAAK,WAAU;MACb,UAAA,oBAAC,aAAD;OAAa,MAAM;OAAW,cAAc;MAAe,CAAA;KACxD,CAAA;IACW;GAElB,CAAA,IAAA,qBAACA,WAAS,SAAV;IACU;IACR,WAAW,GACT,UAAU,iDACV,oBAAoB,YAAY,YAClC;IALF,UAAA,CAOG,aACA,OACe;;EAEP;;AAEnB;;;;;;;AAQA,MAAM,eAAe,EACnB,MACA,mBAII;CACJ,MAAM,QAAQ,OAAO,mBAAmB;CACxC,MAAM,OAAO,OAAO,kBAAkB;CACtC,OAEE,oBAAC,iBAAD,EAAA,UACE,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EACf,UAAA,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,WAAU;GACV,cAAc,UAAU,MAAM,eAAe;GAC7C,eAAe,aAAa,CAAC,IAAI;GAEjC,UAAA,oBAAC,MAAD,CAAO,CAAA;EACD,CAAA;CACO,CAAA,GACjB,oBAAC,QAAQ,SAAT;EAAiB,WAAU;EAAQ,UAAA;CAAuB,CAAA,CAC9C,EAAA,CAAA,EACC,CAAA;AAErB"}

package/dist/internal/blocks/NumberInput.js

@@ -1,4 +1,4 @@
-import { InputGroup } from "../../InputGroup-CrlMRz4X.js";
+import { InputGroup } from "../../InputGroup-Dm014ruw.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/NumberInput/NumberInput.tsx
 const toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;

package/dist/internal/blocks/OtpInput.js

@@ -1,2 +1,2 @@
-import { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "../../OtpInput-I8B8Vjdl.js";
+import { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "../../OtpInput-CY8yCaJk.js";
 export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/internal/blocks/PageHeader.js

@@ -1,2 +1,2 @@
-import { PageHeader } from "../../PageHeader-CgfyXpf1.js";
+import { PageHeader } from "../../PageHeader-CL1A6jFM.js";
 export { PageHeader };

package/dist/internal/blocks/PageLayout.js

@@ -1,2 +1,2 @@
-import { PageLayout } from "../../PageLayout-DiAAILuS.js";
+import { PageLayout } from "../../PageLayout-C9aXTpqV.js";
 export { PageLayout };

package/dist/internal/blocks/PageToolbar.js

@@ -1,2 +1,2 @@
-import { PageToolbar } from "../../PageToolbar-C06RKIif.js";
+import { PageToolbar } from "../../PageToolbar-B_e7HGva.js";
 export { PageToolbar };

package/dist/internal/blocks/PasswordInput.js

@@ -1,7 +1,7 @@
-import { createChangeInputEvent } from "../../utils-Bd28bWgm.js";
+import { createChangeInputEvent } from "../../utils-LQ4jJA-9.js";
 import { mergeRefs } from "../utils/mergeRefs.js";
-import { ArrowBigUpDash, Eye, EyeOff, X } from "../../icons-wcA70iQx.js";
-import { InputGroup } from "../../InputGroup-CrlMRz4X.js";
+import { ArrowBigUpDash, Eye, EyeOff, X } from "../../icons-ZIeZXXS7.js";
+import { InputGroup } from "../../InputGroup-Dm014ruw.js";
 import { useControllableState } from "../../useControllableState-CUYXMsfz.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/internal/blocks/SearchInput.js

@@ -1,2 +1,2 @@
-import { SearchInput } from "../../SearchInput-D3qMkHaW.js";
+import { SearchInput } from "../../SearchInput-Dxi2GK4n.js";
 export { SearchInput };

package/dist/internal/blocks/SearchInputWithNavigation.js

@@ -1,10 +1,10 @@
-import { cn } from "../../classNames-BzrkDnOD.js";
-import { keyCodes } from "../../utils-Bd28bWgm.js";
-import { ChevronDown, ChevronUp, Search } from "../../icons-wcA70iQx.js";
-import { Button } from "../../Button-B21oVcPU.js";
+import { cn } from "../../classNames-DcGnTh2N.js";
+import { keyCodes } from "../../utils-LQ4jJA-9.js";
+import { ChevronDown, ChevronUp, Search } from "../../icons-ZIeZXXS7.js";
+import { Button } from "../../Button-D2JqBAq7.js";
 import { ButtonGroup } from "../components/ButtonGroup.js";
 import { Separator } from "../components/Separator.js";
-import { TextInput } from "../../TextInput-BWYXbfs4.js";
+import { TextInput } from "../../TextInput-K2DSDs5O.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.tsx
 const SearchInputWithNavigation = ({ ref, value, onValueChange, placeholder = "Search...", variant = "secondary", onClear, focusVariant, currentIndex, totalResults, onNavigateNext, onNavigatePrevious, className }) => {

package/dist/internal/blocks/SectionNav.js

@@ -1,2 +1,2 @@
-import { SectionNav } from "../../SectionNav-I2p2uXTd.js";
+import { SectionNav } from "../../SectionNav-BnHOMLtE.js";
 export { SectionNav };