@cube-dev/ui-kit 0.190.1 → 0.190.3

package/dist/components/fields/TagInput/TagInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.3 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -14,20 +14,28 @@ import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
-import { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
+import { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey } from "../ListBoxPopover/listNavigation.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { TagList } from "./TagList.js";
+import { useActiveOption } from "./useActiveOption.js";
+import { useTagError } from "./useTagError.js";
 import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
-import { cloneElement, forwardRef, isValidElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { VisuallyHidden, useFilter, useId as useId$1, useTextField } from "react-aria";
 import { Section, useListState } from "react-stately";
 import { useControlledState } from "@react-stately/utils";
 
 //#region src/components/fields/TagInput/TagInput.tsx
+/**
+* `filter={false}`: the options come filtered already, as from a server.
+* Named rather than inline in the ternary that picks it: SonarJS charges a
+* function in a ternary branch to every later line of the component.
+*/
+const showEveryOption = () => true;
 const TagInputElement = tasty({
 	qa: "TagInputContainer",
 	styles: {
@@ -121,11 +129,180 @@ function withCustomOptions(children, { customKeys, customTerm, hasOptionRows, ha
 		children
 	}, "__options__"), customSection];
 }
+const NO_CUSTOM_ROWS = {
+	keys: [],
+	visibleKeys: [],
+	typedKey: null
+};
+/**
+* The rows listed after the options: the user's own values, so they can be
+* unpicked where they were picked, and the typed text. `unpicked` holds the
+* custom values unpicked during this visit, which stay listed.
+*/
+function getCustomRows({ values, unpicked, isOption, term, isFiltering, matches, termOptionKey }) {
+	const keys = [...new Set([...values, ...unpicked].filter((value) => !isOption(value)))].sort(compareText);
+	return {
+		keys,
+		visibleKeys: isFiltering && term ? keys.filter((key) => matches(key, term)) : keys,
+		typedKey: term && termOptionKey == null && !values.includes(term) && !keys.includes(term) ? term : null
+	};
+}
+/**
+* The row the typed text names: the option it stands for, or else a custom
+* value it spells. Text that names a row only in another case is a value of
+* its own, so its own row wins over that one: Enter adds `paris` as typed, not
+* `Paris`.
+*/
+function getExactRowKey(collection, { term, termOptionKey, customTerm, customValueKeys }) {
+	if (termOptionKey != null) return termOptionKey;
+	if (term && customValueKeys.includes(term)) return term;
+	if (customTerm && (matchOptionText(collection, customTerm).loose != null || customValueKeys.some((key) => isSameText(key, customTerm)))) return customTerm;
+	return null;
+}
+/**
+* The row the focus pass lands on, and Enter with it. The row the typed text
+* names wins over the first match, so typing "build" and pressing Enter picks
+* "build", not "rebuild". Typed text means "add", so past an exact match the
+* first row that is not added yet wins: typing "def" next to a picked
+* "undefined" lands on "def".
+*/
+function getPreferredRowKey(rows, exactKey, term, values) {
+	if (exactKey != null && rows.includes(exactKey)) return exactKey;
+	return (term ? rows.find((key) => !values.includes(String(key))) : void 0) ?? rows[0] ?? null;
+}
 function isComposingKey(e) {
 	return e.nativeEvent.isComposing || e.keyCode === 229;
 }
+/**
+* Why a value is refused, or `null` when it may be added. `optionKey` is the
+* option the part resolved to, if any: an option is not validated. `present`
+* holds the values already there, the ones this commit accepted so far among
+* them.
+*/
+function getRejection(value, optionKey, present, { disabledKeys, isOptionOnly, maxTags, validateTag }) {
+	if (optionKey != null && disabledKeys.has(optionKey)) return { reason: "unavailable" };
+	if (optionKey == null && isOptionOnly) return { reason: "unknown" };
+	if (present.has(value)) return { reason: "duplicate" };
+	if (maxTags != null && present.size >= maxTags) return { reason: "limit" };
+	if (optionKey == null && validateTag) {
+		const result = validateTag(value);
+		if (result === false || typeof result === "string") return {
+			reason: "invalid",
+			message: typeof result === "string" ? result : void 0
+		};
+	}
+	return null;
+}
+/** The input's combobox wiring, for a field with options to suggest. */
+function getComboboxProps(listBoxId, isOpen, activeKey) {
+	return {
+		role: "combobox",
+		"aria-autocomplete": "list",
+		"aria-haspopup": "listbox",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? listBoxId : void 0,
+		"aria-activedescendant": isOpen && activeKey != null ? getListBoxOptionId(listBoxId, activeKey) : void 0
+	};
+}
+/** The button in the input that toggles the suggestions popover. */
+function TagInputTrigger(t0) {
+	const $ = c(18);
+	const { id, size, ariaLabel, fieldLabelledby, onPress, isOpen, isDisabled, styles } = t0;
+	const { t } = useI18n();
+	const t1 = isOpen ? "up" : "down";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ jsx(DirectionIcon, { to: t1 });
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== isOpen) {
+		t3 = { pressed: isOpen };
+		$[2] = isOpen;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== ariaLabel || $[5] !== t) {
+		t4 = ariaLabel ? t("tagInput.showOptionsFor", "Show options, {{label}}", { label: ariaLabel }) : t("tagInput.showOptions", "Show options");
+		$[4] = ariaLabel;
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = fieldLabelledby ? `${id} ${fieldLabelledby}` : void 0;
+	let t6;
+	if ($[7] !== id || $[8] !== isDisabled || $[9] !== isOpen || $[10] !== onPress || $[11] !== size || $[12] !== styles || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ItemAction, {
+			"data-popover-trigger": true,
+			id,
+			qa: "TagInputTrigger",
+			icon: t2,
+			size,
+			isDisabled,
+			styles,
+			mods: t3,
+			tabIndex: -1,
+			"aria-expanded": isOpen,
+			"aria-haspopup": "listbox",
+			"aria-label": t4,
+			"aria-labelledby": t5,
+			onPress
+		});
+		$[7] = id;
+		$[8] = isDisabled;
+		$[9] = isOpen;
+		$[10] = onPress;
+		$[11] = size;
+		$[12] = styles;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+/** The button in the input that clears the typed text. */
+function TagInputClearButton(t0) {
+	const $ = c(10);
+	const { id, size, ariaLabel, fieldLabelledby, onPress } = t0;
+	const { t } = useI18n();
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CloseIcon, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== ariaLabel || $[2] !== t) {
+		t2 = ariaLabel ? t("tagInput.clearTextFor", "Clear text, {{label}}", { label: ariaLabel }) : t("tagInput.clearText", "Clear text");
+		$[1] = ariaLabel;
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = fieldLabelledby ? `${id} ${fieldLabelledby}` : void 0;
+	let t4;
+	if ($[4] !== id || $[5] !== onPress || $[6] !== size || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ItemAction, {
+			id,
+			qa: "TagInputClearButton",
+			icon: t1,
+			size,
+			tabIndex: -1,
+			"aria-label": t2,
+			"aria-labelledby": t3,
+			onPress
+		});
+		$[4] = id;
+		$[5] = onPress;
+		$[6] = size;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
 function TagInput(props, ref) {
-	const $ = c(296);
+	const $ = c(300);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -457,33 +634,16 @@ function TagInput(props, ref) {
 	const [values, setValues] = useControlledState(valueProp, t4, onChange_0);
 	const uniqueValues = [...new Set((values ?? []).map(String))];
 	const [draft, setDraftState] = useControlledState(inputValueProp, defaultInputValue ?? "", onInputChange);
-	const [tagError, setTagErrorState] = useState(null);
-	const tagErrorIdRef = useRef(0);
+	const { tagError, setTagError, clearTagErrorAfterPress, cancelPendingClear } = useTagError();
 	let t5;
 	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = (text) => {
-			if (text == null) {
-				setTagErrorState(null);
-				return;
-			}
-			tagErrorIdRef.current = tagErrorIdRef.current + 1;
-			setTagErrorState({
-				id: tagErrorIdRef.current,
-				text
-			});
-		};
-		$[77] = t5;
-	} else t5 = $[77];
-	const setTagError = useEvent(t5);
-	let t6;
-	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
+		t5 = {
 			id: 0,
 			text: ""
 		};
-		$[78] = t6;
-	} else t6 = $[78];
-	const [announcement, setAnnouncement] = useState(t6);
+		$[77] = t5;
+	} else t5 = $[77];
+	const [announcement, setAnnouncement] = useState(t5);
 	let children = renderChildren;
 	if (items && typeof renderChildren === "function") children = Array.from(items).map((item, index) => {
 		const rendered = renderChildren(item);
@@ -495,66 +655,59 @@ function TagInput(props, ref) {
 		children,
 		selectionMode: "none"
 	}).collection;
-	let t7;
-	if ($[79] !== collection) {
-		t7 = (key) => {
+	let t6;
+	if ($[78] !== collection) {
+		t6 = (key) => {
 			const node = collection.getItem(key);
 			return node?.type === "item" ? node : null;
 		};
-		$[79] = collection;
+		$[78] = collection;
+		$[79] = t6;
+	} else t6 = $[79];
+	const getOption = t6;
+	let t7;
+	if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { sensitivity: "base" };
 		$[80] = t7;
 	} else t7 = $[80];
-	const getOption = t7;
-	let t8;
-	if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = { sensitivity: "base" };
-		$[81] = t8;
-	} else t8 = $[81];
-	const { contains } = useFilter(t8);
-	let t9;
-	if ($[82] !== contains || $[83] !== filter) {
-		t9 = filter === false ? _temp2 : filter || contains;
-		$[82] = contains;
-		$[83] = filter;
-		$[84] = t9;
-	} else t9 = $[84];
-	const textFilterFn = t9;
+	const { contains } = useFilter(t7);
+	const textFilterFn = filter === false ? showEveryOption : filter || contains;
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	const term = draft.trim();
-	const [knownLabels, setKnownLabels] = useState(_temp3);
+	const [knownLabels, setKnownLabels] = useState(_temp2);
+	let t8;
+	if ($[81] !== getOption || $[82] !== knownLabels) {
+		t8 = (key_0) => getOption(key_0)?.textValue || knownLabels.get(key_0) || key_0;
+		$[81] = getOption;
+		$[82] = knownLabels;
+		$[83] = t8;
+	} else t8 = $[83];
+	const getOptionLabel = t8;
+	let t9;
+	if ($[84] !== getOptionLabel || $[85] !== tagProps) {
+		t9 = (key_1) => textLabel(tagProps?.(key_1)?.children) ?? getOptionLabel(key_1);
+		$[84] = getOptionLabel;
+		$[85] = tagProps;
+		$[86] = t9;
+	} else t9 = $[86];
+	const getTagLabel = t9;
 	let t10;
-	if ($[85] !== getOption || $[86] !== knownLabels) {
-		t10 = (key_0) => getOption(key_0)?.textValue || knownLabels.get(key_0) || key_0;
-		$[85] = getOption;
-		$[86] = knownLabels;
-		$[87] = t10;
-	} else t10 = $[87];
-	const getOptionLabel = t10;
+	if ($[87] !== tagProps) {
+		t10 = (key_2) => !!tagProps?.(key_2)?.isDisabled;
+		$[87] = tagProps;
+		$[88] = t10;
+	} else t10 = $[88];
+	const isTagLocked = t10;
 	let t11;
-	if ($[88] !== getOptionLabel || $[89] !== tagProps) {
-		t11 = (key_1) => textLabel(tagProps?.(key_1)?.children) ?? getOptionLabel(key_1);
-		$[88] = getOptionLabel;
-		$[89] = tagProps;
+	if ($[89] !== disabledKeys) {
+		t11 = new Set([...disabledKeys ?? []].map(String));
+		$[89] = disabledKeys;
 		$[90] = t11;
 	} else t11 = $[90];
-	const getTagLabel = t11;
+	const disabledKeySet = t11;
 	let t12;
-	if ($[91] !== tagProps) {
-		t12 = (key_2) => !!tagProps?.(key_2)?.isDisabled;
-		$[91] = tagProps;
-		$[92] = t12;
-	} else t12 = $[92];
-	const isTagLocked = t12;
-	let t13;
-	if ($[93] !== disabledKeys) {
-		t13 = new Set([...disabledKeys ?? []].map(String));
-		$[93] = disabledKeys;
-		$[94] = t13;
-	} else t13 = $[94];
-	const disabledKeySet = t13;
-	let t14;
-	if ($[95] !== getOption || $[96] !== knownLabels) {
-		t14 = (keys) => {
+	if ($[91] !== getOption || $[92] !== knownLabels) {
+		t12 = (keys) => {
 			let next = null;
 			for (const key_3 of keys) {
 				const label_0 = getOption(key_3)?.textValue;
@@ -565,47 +718,47 @@ function TagInput(props, ref) {
 			}
 			if (next) setKnownLabels(next);
 		};
-		$[95] = getOption;
-		$[96] = knownLabels;
-		$[97] = t14;
-	} else t14 = $[97];
-	const rememberLabels = useEvent(t14);
-	let t15;
-	if ($[98] !== allowsCustomValue || $[99] !== collection || $[100] !== hasOptions) {
-		t15 = (text_0) => {
+		$[91] = getOption;
+		$[92] = knownLabels;
+		$[93] = t12;
+	} else t12 = $[93];
+	const rememberLabels = useEvent(t12);
+	let t13;
+	if ($[94] !== allowsCustomValue || $[95] !== collection || $[96] !== hasOptions) {
+		t13 = (text) => {
 			if (!hasOptions) return null;
-			const match = matchOptionText(collection, text_0);
+			const match = matchOptionText(collection, text);
 			return match.exact ?? (allowsCustomValue ? null : match.loose);
 		};
-		$[98] = allowsCustomValue;
-		$[99] = collection;
-		$[100] = hasOptions;
-		$[101] = t15;
-	} else t15 = $[101];
-	const findOptionKey = t15;
-	let t16;
-	if ($[102] !== findOptionKey || $[103] !== normalizeTag) {
-		t16 = (text_1) => {
-			const optionKey = findOptionKey(text_1);
+		$[94] = allowsCustomValue;
+		$[95] = collection;
+		$[96] = hasOptions;
+		$[97] = t13;
+	} else t13 = $[97];
+	const findOptionKey = t13;
+	let t14;
+	if ($[98] !== findOptionKey || $[99] !== normalizeTag) {
+		t14 = (text_0) => {
+			const optionKey = findOptionKey(text_0);
 			if (optionKey != null || !normalizeTag) return {
 				optionKey,
-				typed: text_1
+				typed: text_0
 			};
-			const typed = normalizeTag(text_1).trim();
+			const typed = normalizeTag(text_0).trim();
 			return {
 				optionKey: typed ? findOptionKey(typed) : null,
 				typed
 			};
 		};
-		$[102] = findOptionKey;
-		$[103] = normalizeTag;
-		$[104] = t16;
-	} else t16 = $[104];
-	const resolveTypedText = t16;
-	let t17;
-	if ($[105] !== normalizeTag || $[106] !== resolveTypedText) {
-		t17 = (part, t18) => {
-			const source = t18 === void 0 ? "text" : t18;
+		$[98] = findOptionKey;
+		$[99] = normalizeTag;
+		$[100] = t14;
+	} else t14 = $[100];
+	const resolveTypedText = t14;
+	let t15;
+	if ($[101] !== normalizeTag || $[102] !== resolveTypedText) {
+		t15 = (part, t16) => {
+			const source = t16 === void 0 ? "text" : t16;
 			if (source === "text") return resolveTypedText(part);
 			if (source === "option") return {
 				optionKey: part,
@@ -616,11 +769,11 @@ function TagInput(props, ref) {
 				typed: normalizeTag ? normalizeTag(part).trim() : part
 			};
 		};
-		$[105] = normalizeTag;
-		$[106] = resolveTypedText;
-		$[107] = t17;
-	} else t17 = $[107];
-	const resolvePart = t17;
+		$[101] = normalizeTag;
+		$[102] = resolveTypedText;
+		$[103] = t15;
+	} else t15 = $[103];
+	const resolvePart = t15;
 	const termOptionKey = term ? resolveTypedText(term).optionKey : null;
 	const optionFilterFn = (nodes) => {
 		if (!isFilterActive || !term) return nodes;
@@ -628,21 +781,26 @@ function TagInput(props, ref) {
 	};
 	const visibleOptionKeys = [];
 	if (hasOptions) collectVisibleKeys(optionFilterFn(collection), visibleOptionKeys, disabledKeys ? new Set(disabledKeys) : void 0);
-	let t18;
-	if ($[108] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = [];
-		$[108] = t18;
-	} else t18 = $[108];
-	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t18);
-	const customValueKeys = hasOptions && allowsCustomValue ? [...new Set([...uniqueValues, ...unpickedCustomValues].filter((value_0) => getOption(value_0) == null && !knownLabels.has(value_0)))].sort(compareText) : [];
-	const matchesTerm = typeof filter === "function" ? filter : contains;
-	const visibleCustomKeys = isFilterActive && term ? customValueKeys.filter((key_4) => matchesTerm(key_4, term)) : customValueKeys;
-	const customTerm = hasOptions && allowsCustomValue && term && termOptionKey == null && !uniqueValues.includes(term) && !customValueKeys.includes(term) ? term : null;
+	let t16;
+	if ($[104] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = [];
+		$[104] = t16;
+	} else t16 = $[104];
+	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t16);
+	const { keys: customValueKeys, visibleKeys: visibleCustomKeys, typedKey: customTerm } = hasOptions && allowsCustomValue ? getCustomRows({
+		values: uniqueValues,
+		unpicked: unpickedCustomValues,
+		isOption: (value_0) => getOption(value_0) != null || knownLabels.has(value_0),
+		term,
+		isFiltering: isFilterActive,
+		matches: typeof filter === "function" ? filter : contains,
+		termOptionKey
+	}) : NO_CUSTOM_ROWS;
 	const popoverChildren = withCustomOptions(children, {
 		customKeys: visibleCustomKeys,
 		customTerm,
 		hasOptionRows: visibleOptionKeys.length > 0,
-		hasSections: [...collection].some(_temp4),
+		hasSections: [...collection].some(_temp3),
 		optionsLabel: t("tagInput.options", "Options"),
 		customValuesLabel: t("tagInput.customValues", "Custom values")
 	});
@@ -652,150 +810,79 @@ function TagInput(props, ref) {
 	const isInteractive = !isDisabled && !isReadOnly;
 	const shouldShowPopover = hasOptions && isInteractive && isPopoverOpen && hasResults;
 	const notifiedOpenRef = useRef(false);
-	let t19;
-	let t20;
-	if ($[109] !== onOpenChange || $[110] !== shouldShowPopover) {
-		t19 = () => {
+	let t17;
+	let t18;
+	if ($[105] !== onOpenChange || $[106] !== shouldShowPopover) {
+		t17 = () => {
 			if (notifiedOpenRef.current === shouldShowPopover) return;
 			notifiedOpenRef.current = shouldShowPopover;
 			onOpenChange?.(shouldShowPopover);
 		};
-		t20 = [shouldShowPopover, onOpenChange];
-		$[109] = onOpenChange;
-		$[110] = shouldShowPopover;
-		$[111] = t19;
-		$[112] = t20;
+		t18 = [shouldShowPopover, onOpenChange];
+		$[105] = onOpenChange;
+		$[106] = shouldShowPopover;
+		$[107] = t17;
+		$[108] = t18;
 	} else {
-		t19 = $[111];
-		t20 = $[112];
+		t17 = $[107];
+		t18 = $[108];
 	}
-	useEffect(t19, t20);
-	const [activeOption, setActiveOption] = useState(null);
-	const activeOptionKey = activeOption?.key ?? null;
-	let t21;
-	if ($[113] !== setActiveOption) {
-		t21 = (key_5, source_0, forTerm) => {
-			const listState = listStateRef.current;
-			if (!listState || key_5 == null) return;
-			markKeyboardFocus(listState);
-			listState.selectionManager.setFocusedKey(key_5);
-			setActiveOption({
-				key: key_5,
-				term: forTerm,
-				source: source_0
-			});
-		};
-		$[113] = setActiveOption;
-		$[114] = t21;
-	} else t21 = $[114];
-	const moveVirtualFocus = useEvent(t21);
-	const [popoverMinWidth, setPopoverMinWidth] = useState();
-	let exactOptionKey = termOptionKey;
-	if (exactOptionKey == null && term && customValueKeys.includes(term)) exactOptionKey = term;
-	if (exactOptionKey == null && customTerm && (matchOptionText(collection, customTerm).loose != null || customValueKeys.some((key_6) => isSameText(key_6, customTerm)))) exactOptionKey = customTerm;
+	useEffect(t17, t18);
 	const visibleTargetKeys = [...visibleOptionKeys, ...visibleCustomKeys];
 	if (customTerm) visibleTargetKeys.push(customTerm);
-	let preferredOptionKey = null;
-	if (exactOptionKey != null && visibleTargetKeys.includes(exactOptionKey)) preferredOptionKey = exactOptionKey;
-	else if (term) preferredOptionKey = visibleTargetKeys.find((key_7) => !uniqueValues.includes(String(key_7))) ?? null;
-	if (preferredOptionKey == null) preferredOptionKey = visibleTargetKeys[0] ?? null;
-	const focusTermRef = useRef(null);
-	let t22;
-	if ($[115] !== customTerm || $[116] !== moveVirtualFocus || $[117] !== preferredOptionKey || $[118] !== setActiveOption || $[119] !== setPopoverMinWidth || $[120] !== shouldShowPopover || $[121] !== term || $[122] !== visibleOptionsSignature || $[123] !== wrapperRef) {
-		t22 = () => {
-			if (!shouldShowPopover) {
-				focusTermRef.current = null;
-				return;
-			}
-			setPopoverMinWidth(wrapperRef.current?.offsetWidth);
-			const visibleKeys = visibleOptionsSignature ? visibleOptionsSignature.split("\0") : [];
-			if (customTerm) visibleKeys.push(customTerm);
-			const isNewTerm = !!term && focusTermRef.current !== term;
-			focusTermRef.current = term;
-			let attempts = 0;
-			let isCancelled = false;
-			const tick = () => {
-				if (isCancelled) return;
-				const listState_0 = listStateRef.current;
-				if (!listState_0) {
-					attempts = attempts + 1;
-					if (attempts < 8) requestAnimationFrame(tick);
-					return;
-				}
-				const focused = listState_0.selectionManager.focusedKey;
-				if (focused != null && visibleKeys.includes(focused) && !isNewTerm) setActiveOption((prev) => prev?.key === focused ? {
-					...prev,
-					term
-				} : {
-					key: focused,
-					term,
-					source: "auto"
-				});
-				else moveVirtualFocus(preferredOptionKey, "auto", term);
-			};
-			requestAnimationFrame(() => requestAnimationFrame(tick));
-			return () => {
-				isCancelled = true;
-			};
-		};
-		$[115] = customTerm;
-		$[116] = moveVirtualFocus;
-		$[117] = preferredOptionKey;
-		$[118] = setActiveOption;
-		$[119] = setPopoverMinWidth;
-		$[120] = shouldShowPopover;
-		$[121] = term;
-		$[122] = visibleOptionsSignature;
-		$[123] = wrapperRef;
-		$[124] = t22;
-	} else t22 = $[124];
-	let t23;
-	if ($[125] !== customTerm || $[126] !== moveVirtualFocus || $[127] !== preferredOptionKey || $[128] !== shouldShowPopover || $[129] !== term || $[130] !== visibleOptionsSignature || $[131] !== wrapperRef) {
-		t23 = [
-			shouldShowPopover,
+	const preferredOptionKey = getPreferredRowKey(visibleTargetKeys, getExactRowKey(collection, {
+		term,
+		termOptionKey,
+		customTerm,
+		customValueKeys
+	}), term, uniqueValues);
+	let t19;
+	if ($[109] !== customTerm || $[110] !== preferredOptionKey || $[111] !== shouldShowPopover || $[112] !== term || $[113] !== visibleOptionsSignature || $[114] !== wrapperRef) {
+		t19 = {
+			listStateRef,
+			wrapperRef,
+			isOpen: shouldShowPopover,
 			visibleOptionsSignature,
 			customTerm,
 			term,
-			preferredOptionKey,
-			moveVirtualFocus,
-			wrapperRef
-		];
-		$[125] = customTerm;
-		$[126] = moveVirtualFocus;
-		$[127] = preferredOptionKey;
-		$[128] = shouldShowPopover;
-		$[129] = term;
-		$[130] = visibleOptionsSignature;
-		$[131] = wrapperRef;
-		$[132] = t23;
-	} else t23 = $[132];
-	useLayoutEffect(t22, t23);
-	let t24;
-	if ($[133] !== setDraftState || $[134] !== setIsFilterActive) {
-		t24 = (next_0) => {
+			preferredOptionKey
+		};
+		$[109] = customTerm;
+		$[110] = preferredOptionKey;
+		$[111] = shouldShowPopover;
+		$[112] = term;
+		$[113] = visibleOptionsSignature;
+		$[114] = wrapperRef;
+		$[115] = t19;
+	} else t19 = $[115];
+	const { activeOption, setActiveOption, moveVirtualFocus, popoverMinWidth } = useActiveOption(t19);
+	const activeOptionKey = activeOption?.key ?? null;
+	let t20;
+	if ($[116] !== setDraftState || $[117] !== setIsFilterActive) {
+		t20 = (next_0) => {
 			setDraftState(next_0);
 			setIsFilterActive(!!next_0.trim());
 		};
-		$[133] = setDraftState;
-		$[134] = setIsFilterActive;
-		$[135] = t24;
-	} else t24 = $[135];
-	const setDraft = useEvent(t24);
-	let t25;
-	if ($[136] !== setAnnouncement) {
-		t25 = (text_2) => {
-			setAnnouncement((prev_0) => ({
-				id: prev_0.id + 1,
-				text: text_2
+		$[116] = setDraftState;
+		$[117] = setIsFilterActive;
+		$[118] = t20;
+	} else t20 = $[118];
+	const setDraft = useEvent(t20);
+	let t21;
+	if ($[119] !== setAnnouncement) {
+		t21 = (text_1) => {
+			setAnnouncement((prev) => ({
+				id: prev.id + 1,
+				text: text_1
 			}));
 		};
-		$[136] = setAnnouncement;
-		$[137] = t25;
-	} else t25 = $[137];
-	const announce = useEvent(t25);
-	let t26;
-	if ($[138] !== maxTags || $[139] !== t) {
-		t26 = (rejection) => {
+		$[119] = setAnnouncement;
+		$[120] = t21;
+	} else t21 = $[120];
+	const announce = useEvent(t21);
+	let t22;
+	if ($[121] !== maxTags || $[122] !== t) {
+		t22 = (rejection) => {
 			if (rejection.message) return rejection.message;
 			switch (rejection.reason) {
 				case "duplicate": return t("tagInput.duplicateValue", "\"{{value}}\" is already added", { value: rejection.text });
@@ -805,72 +892,47 @@ function TagInput(props, ref) {
 				default: return t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: rejection.text });
 			}
 		};
-		$[138] = maxTags;
-		$[139] = t;
-		$[140] = t26;
-	} else t26 = $[140];
-	const rejectionMessage = useEvent(t26);
-	let t27;
-	if ($[141] !== delimiters) {
-		t27 = delimiters.find(_temp5);
-		$[141] = delimiters;
-		$[142] = t27;
-	} else t27 = $[142];
-	const joinDelimiter = t27;
+		$[121] = maxTags;
+		$[122] = t;
+		$[123] = t22;
+	} else t22 = $[123];
+	const rejectionMessage = useEvent(t22);
+	let t23;
+	if ($[124] !== delimiters) {
+		t23 = delimiters.find(_temp4);
+		$[124] = delimiters;
+		$[125] = t23;
+	} else t23 = $[125];
+	const joinDelimiter = t23;
 	const joiner = joinDelimiter ? `${joinDelimiter} ` : " ";
 	const hasFieldMessage = !!label || !!props.forceField;
-	const commitParts = useEvent((parts, source_1) => {
+	const commitParts = useEvent((parts, source_0) => {
 		if (!parts.length) return "";
+		const rules = {
+			disabledKeys: disabledKeySet,
+			isOptionOnly: hasOptions && !allowsCustomValue,
+			maxTags,
+			validateTag
+		};
 		const present = new Set(uniqueValues);
 		const accepted = [];
 		const rejected = [];
 		for (const part_0 of parts) {
-			const { optionKey: optionKey_0, typed: typed_0 } = resolvePart(part_0, source_1);
+			const { optionKey: optionKey_0, typed: typed_0 } = resolvePart(part_0, source_0);
 			if (!typed_0) continue;
 			const nextValue = optionKey_0 ?? typed_0;
-			if (optionKey_0 != null && disabledKeySet.has(optionKey_0)) {
-				rejected.push({
-					text: part_0,
-					reason: "unavailable"
-				});
-				continue;
-			}
-			if (optionKey_0 == null && hasOptions && !allowsCustomValue) {
-				rejected.push({
-					text: part_0,
-					reason: "unknown"
-				});
-				continue;
-			}
-			if (present.has(nextValue)) {
-				rejected.push({
-					text: part_0,
-					reason: "duplicate"
-				});
-				continue;
-			}
-			if (maxTags != null && present.size >= maxTags) {
+			const rejection_0 = getRejection(nextValue, optionKey_0, present, rules);
+			if (rejection_0) {
 				rejected.push({
 					text: part_0,
-					reason: "limit"
+					...rejection_0
 				});
 				continue;
 			}
-			if (optionKey_0 == null && validateTag) {
-				const result = validateTag(nextValue);
-				if (result === false || typeof result === "string") {
-					rejected.push({
-						text: part_0,
-						reason: "invalid",
-						message: typeof result === "string" ? result : void 0
-					});
-					continue;
-				}
-			}
 			present.add(nextValue);
 			accepted.push(nextValue);
 		}
-		const returned = rejected.filter(_temp6);
+		const returned = rejected.filter(_temp5);
 		const kept = joinDelimiter ? returned : returned.slice(0, 1);
 		const shown = kept[0] ?? rejected[0];
 		const error = shown ? rejectionMessage(shown) : null;
@@ -883,33 +945,33 @@ function TagInput(props, ref) {
 		if (error && !hasFieldMessage) messages.push(error);
 		if (messages.length) announce(messages.join(" "));
 		setTagError(error);
-		return kept.map(_temp7).join(joiner);
+		return kept.map(_temp6).join(joiner);
 	});
-	let t28;
-	if ($[143] !== commitParts || $[144] !== delimiters || $[145] !== draft || $[146] !== setDraft) {
-		t28 = () => {
+	let t24;
+	if ($[126] !== commitParts || $[127] !== delimiters || $[128] !== draft || $[129] !== setDraft) {
+		t24 = () => {
 			const rest = commitParts(splitTagText(draft, delimiters));
 			setDraft(rest);
 			return rest;
 		};
-		$[143] = commitParts;
-		$[144] = delimiters;
-		$[145] = draft;
-		$[146] = setDraft;
-		$[147] = t28;
-	} else t28 = $[147];
-	const commitDraft = useEvent(t28);
-	let t29;
-	if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
-		t29 = () => {
+		$[126] = commitParts;
+		$[127] = delimiters;
+		$[128] = draft;
+		$[129] = setDraft;
+		$[130] = t24;
+	} else t24 = $[130];
+	const commitDraft = useEvent(t24);
+	let t25;
+	if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = () => {
 			const rows = tagListRef.current?.querySelectorAll("[role=\"row\"]:not([aria-disabled=\"true\"])");
 			rows?.[rows.length - 1]?.focus();
 		};
-		$[148] = t29;
-	} else t29 = $[148];
-	const focusLastTag = useEvent(t29);
+		$[131] = t25;
+	} else t25 = $[131];
+	const focusLastTag = useEvent(t25);
 	const removeValues = useEvent((requested) => {
-		const keys_0 = requested.filter((key_8) => !isTagLocked(key_8));
+		const keys_0 = requested.filter((key_4) => !isTagLocked(key_4));
 		if (!keys_0.length) return;
 		const removed = new Set(keys_0);
 		const next_1 = uniqueValues.filter((value_1) => !removed.has(value_1));
@@ -918,20 +980,20 @@ function TagInput(props, ref) {
 		setTagError(null);
 		announce(t("tagInput.removed", "Removed {{value}}", { value: formatList(keys_0.map(getTagLabel)) }));
 	});
-	const toggleOption = useEvent((key_9) => {
-		if (isTagLocked(key_9)) return;
-		const source_2 = getOption(key_9) != null ? "option" : customValueKeys.includes(key_9) ? "custom" : "text";
+	const toggleOption = useEvent((key_5) => {
+		if (isTagLocked(key_5)) return;
+		const source_1 = getOption(key_5) != null ? "option" : customValueKeys.includes(key_5) ? "custom" : "text";
 		setTagError(null);
-		if (uniqueValues.includes(key_9)) {
-			removeValues([key_9]);
+		if (uniqueValues.includes(key_5)) {
+			removeValues([key_5]);
 			setDraft("");
-			if (customValueKeys.includes(key_9)) setUnpickedCustomValues((prev_1) => prev_1.includes(key_9) ? prev_1 : [...prev_1, key_9]);
-		} else if (!commitParts([key_9], source_2)) setDraft("");
+			if (customValueKeys.includes(key_5)) setUnpickedCustomValues((prev_0) => prev_0.includes(key_5) ? prev_0 : [...prev_0, key_5]);
+		} else if (!commitParts([key_5], source_1)) setDraft("");
 	});
 	const handlePopoverSelection = useEvent((selection) => {
 		if (!Array.isArray(selection)) return;
 		const next_2 = new Set(selection.map(String));
-		const changed = [...[...next_2].filter((key_10) => !uniqueValues.includes(key_10)), ...uniqueValues.filter((value_3) => !next_2.has(value_3) && (getOption(value_3) != null || visibleCustomKeys.includes(value_3)))];
+		const changed = [...[...next_2].filter((key_6) => !uniqueValues.includes(key_6)), ...uniqueValues.filter((value_3) => !next_2.has(value_3) && (getOption(value_3) != null || visibleCustomKeys.includes(value_3)))];
 		changed.forEach(toggleOption);
 		const clicked = changed[changed.length - 1];
 		if (clicked != null) {
@@ -945,12 +1007,9 @@ function TagInput(props, ref) {
 		setTimeout(() => inputRef.current?.focus(), 0);
 	});
 	const isTabbingRef = useRef(false);
-	const handleKeyDown = useEvent((e) => {
-		onKeyDown?.(e);
-		isTabbingRef.current = e.key === "Tab" && !e.defaultPrevented;
-		if (e.defaultPrevented || !isInteractive) return;
-		const listState_1 = listStateRef.current;
-		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+	let t26;
+	if ($[132] !== hasOptions || $[133] !== hasResults || $[134] !== moveVirtualFocus || $[135] !== setIsFilterActive || $[136] !== setIsPopoverOpen || $[137] !== shouldShowPopover || $[138] !== term) {
+		t26 = (e) => {
 			if (!hasOptions) return;
 			e.preventDefault();
 			if (!shouldShowPopover) {
@@ -958,67 +1017,119 @@ function TagInput(props, ref) {
 				setIsPopoverOpen(true);
 				return;
 			}
-			if (listState_1) moveVirtualFocus(getNextVisibleKey(listState_1, e.key === "ArrowDown" ? 1 : -1), "user", term);
-			return;
-		}
-		if ((e.key === "Home" || e.key === "End") && shouldShowPopover) {
-			e.preventDefault();
-			if (listState_1) moveVirtualFocus(getEdgeVisibleKey(listState_1, e.key === "Home" ? "first" : "last"), "user", term);
-			return;
-		}
-		if (e.key === "Backspace" && !draft && uniqueValues.some((value_4) => !isTagLocked(value_4))) {
-			if (isComposingKey(e)) return;
-			e.preventDefault();
-			if (e.repeat) return;
+			const listState = listStateRef.current;
+			if (listState) moveVirtualFocus(getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1), "user", term);
+		};
+		$[132] = hasOptions;
+		$[133] = hasResults;
+		$[134] = moveVirtualFocus;
+		$[135] = setIsFilterActive;
+		$[136] = setIsPopoverOpen;
+		$[137] = shouldShowPopover;
+		$[138] = term;
+		$[139] = t26;
+	} else t26 = $[139];
+	const handleArrowKey = useEvent(t26);
+	let t27;
+	if ($[140] !== moveVirtualFocus || $[141] !== term) {
+		t27 = (e_0) => {
+			e_0.preventDefault();
+			const listState_0 = listStateRef.current;
+			if (listState_0) moveVirtualFocus(getEdgeVisibleKey(listState_0, e_0.key === "Home" ? "first" : "last"), "user", term);
+		};
+		$[140] = moveVirtualFocus;
+		$[141] = term;
+		$[142] = t27;
+	} else t27 = $[142];
+	const handleEdgeKey = useEvent(t27);
+	let t28;
+	if ($[143] !== focusLastTag || $[144] !== setIsPopoverOpen) {
+		t28 = (e_1) => {
+			if (isComposingKey(e_1)) return;
+			e_1.preventDefault();
+			if (e_1.repeat) return;
 			setIsPopoverOpen(false);
 			focusLastTag();
-			return;
-		}
-		if (e.key === "Enter") {
-			if (isComposingKey(e)) return;
-			const isCurrent = activeOption != null && activeOption.term === term;
-			const targetKey = shouldShowPopover ? isCurrent ? activeOption.key : preferredOptionKey : null;
-			if (targetKey != null) {
-				e.preventDefault();
-				const key_11 = String(targetKey);
-				if (term && uniqueValues.includes(key_11) && !(isCurrent && activeOption.source === "user")) {
-					setDraft("");
-					setTagError(rejectionMessage({
-						text: getTagLabel(key_11),
-						reason: "duplicate"
-					}));
-					return;
-				}
-				toggleOption(key_11);
+		};
+		$[143] = focusLastTag;
+		$[144] = setIsPopoverOpen;
+		$[145] = t28;
+	} else t28 = $[145];
+	const handleBackspaceKey = useEvent(t28);
+	const handleEnterKey = useEvent((e_2) => {
+		if (isComposingKey(e_2)) return;
+		const isCurrent = activeOption != null && activeOption.term === term;
+		const targetKey = shouldShowPopover ? isCurrent ? activeOption.key : preferredOptionKey : null;
+		if (targetKey != null) {
+			e_2.preventDefault();
+			const key_7 = String(targetKey);
+			if (term && uniqueValues.includes(key_7) && !(isCurrent && activeOption.source === "user")) {
+				setDraft("");
+				setTagError(rejectionMessage({
+					text: getTagLabel(key_7),
+					reason: "duplicate"
+				}));
 				return;
 			}
-			e.preventDefault();
-			if (term) commitDraft();
+			toggleOption(key_7);
 			return;
 		}
-		if (delimiters.includes(e.key)) {
-			if (isComposingKey(e)) return;
-			e.preventDefault();
-			const el = e.currentTarget;
+		e_2.preventDefault();
+		if (term) commitDraft();
+	});
+	let t29;
+	if ($[146] !== commitParts || $[147] !== delimiters || $[148] !== draft || $[149] !== joiner || $[150] !== setDraft) {
+		t29 = (e_3) => {
+			if (isComposingKey(e_3)) return;
+			e_3.preventDefault();
+			const el = e_3.currentTarget;
 			const start = el.selectionStart ?? draft.length;
 			const end = el.selectionEnd ?? start;
 			setDraft([commitParts(splitTagText(draft.slice(0, start), delimiters)), draft.slice(end).trimStart()].filter(Boolean).join(joiner));
-			return;
-		}
-		if (e.key === "Escape") {
+		};
+		$[146] = commitParts;
+		$[147] = delimiters;
+		$[148] = draft;
+		$[149] = joiner;
+		$[150] = setDraft;
+		$[151] = t29;
+	} else t29 = $[151];
+	const handleDelimiterKey = useEvent(t29);
+	let t30;
+	if ($[152] !== draft || $[153] !== setDraft || $[154] !== setIsPopoverOpen || $[155] !== setTagError || $[156] !== shouldShowPopover || $[157] !== tagError) {
+		t30 = (e_4) => {
 			if (shouldShowPopover) {
-				e.preventDefault();
-				e.stopPropagation();
+				e_4.preventDefault();
+				e_4.stopPropagation();
 				setIsPopoverOpen(false);
 				setTagError(null);
 			} else if (draft || tagError) {
-				e.preventDefault();
-				e.stopPropagation();
+				e_4.preventDefault();
+				e_4.stopPropagation();
 				setDraft("");
 				setTagError(null);
 				setIsPopoverOpen(false);
 			}
-		}
+		};
+		$[152] = draft;
+		$[153] = setDraft;
+		$[154] = setIsPopoverOpen;
+		$[155] = setTagError;
+		$[156] = shouldShowPopover;
+		$[157] = tagError;
+		$[158] = t30;
+	} else t30 = $[158];
+	const handleEscapeKey = useEvent(t30);
+	const handleKeyDown = useEvent((e_5) => {
+		onKeyDown?.(e_5);
+		isTabbingRef.current = e_5.key === "Tab" && !e_5.defaultPrevented;
+		if (e_5.defaultPrevented || !isInteractive) return;
+		if (e_5.key === "ArrowDown" || e_5.key === "ArrowUp") handleArrowKey(e_5);
+		else if ((e_5.key === "Home" || e_5.key === "End") && shouldShowPopover) handleEdgeKey(e_5);
+		else if (e_5.key === "Backspace" && !draft && uniqueValues.some((value_4) => !isTagLocked(value_4))) handleBackspaceKey(e_5);
+		else if (e_5.key === "Enter") handleEnterKey(e_5);
+		else if (delimiters.includes(e_5.key)) handleDelimiterKey(e_5);
+		else if (e_5.key === "Escape") handleEscapeKey(e_5);
 	});
 	const handleInputChange = useEvent((next_3) => {
 		setTagError(null);
@@ -1028,36 +1139,36 @@ function TagInput(props, ref) {
 		let nextDraft = next_3;
 		if (parts_0.length > 1) {
 			const rest_0 = (parts_0.pop() ?? "").trimStart();
-			nextDraft = [commitParts(parts_0.map(_temp8).filter(Boolean)), rest_0].filter(Boolean).join(joiner);
+			nextDraft = [commitParts(parts_0.map(_temp7).filter(Boolean)), rest_0].filter(Boolean).join(joiner);
 		}
 		setDraft(nextDraft);
 		if (hasOptions && popoverTrigger !== "manual" && nextDraft.trim()) setIsPopoverOpen(true);
 	});
-	let t30;
-	if ($[149] !== commitParts || $[150] !== delimiters || $[151] !== draft || $[152] !== isInteractive || $[153] !== setDraft || $[154] !== setTagError) {
-		t30 = (e_0) => {
+	let t31;
+	if ($[159] !== commitParts || $[160] !== delimiters || $[161] !== draft || $[162] !== isInteractive || $[163] !== setDraft || $[164] !== setTagError) {
+		t31 = (e_6) => {
 			if (!isInteractive) return;
-			const pasted = e_0.clipboardData.getData("text");
+			const pasted = e_6.clipboardData.getData("text");
 			if (!pasted || splitTagText(pasted, delimiters).length < 2) return;
-			e_0.preventDefault();
-			const el_0 = e_0.currentTarget;
+			e_6.preventDefault();
+			const el_0 = e_6.currentTarget;
 			const start_0 = el_0.selectionStart ?? draft.length;
 			const end_0 = el_0.selectionEnd ?? draft.length;
 			setTagError(null);
 			setDraft(commitParts(splitTagText(`${draft.slice(0, start_0)}\n${pasted}\n${draft.slice(end_0)}`, delimiters)));
 		};
-		$[149] = commitParts;
-		$[150] = delimiters;
-		$[151] = draft;
-		$[152] = isInteractive;
-		$[153] = setDraft;
-		$[154] = setTagError;
-		$[155] = t30;
-	} else t30 = $[155];
-	const handlePaste = useEvent(t30);
-	let t31;
-	if ($[156] !== allowsCustomValue || $[157] !== commitDraft || $[158] !== draft || $[159] !== hasOptions || $[160] !== isInteractive || $[161] !== setDraft || $[162] !== setTagError || $[163] !== shouldCommitOnBlur || $[164] !== term || $[165] !== termOptionKey) {
-		t31 = () => {
+		$[159] = commitParts;
+		$[160] = delimiters;
+		$[161] = draft;
+		$[162] = isInteractive;
+		$[163] = setDraft;
+		$[164] = setTagError;
+		$[165] = t31;
+	} else t31 = $[165];
+	const handlePaste = useEvent(t31);
+	let t32;
+	if ($[166] !== allowsCustomValue || $[167] !== commitDraft || $[168] !== draft || $[169] !== hasOptions || $[170] !== isInteractive || $[171] !== setDraft || $[172] !== setTagError || $[173] !== shouldCommitOnBlur || $[174] !== term || $[175] !== termOptionKey) {
+		t32 = () => {
 			if (!term) return "";
 			if (!shouldCommitOnBlur || !isInteractive) return draft;
 			if (hasOptions && !allowsCustomValue && termOptionKey == null) {
@@ -1067,79 +1178,34 @@ function TagInput(props, ref) {
 			}
 			return commitDraft();
 		};
-		$[156] = allowsCustomValue;
-		$[157] = commitDraft;
-		$[158] = draft;
-		$[159] = hasOptions;
-		$[160] = isInteractive;
-		$[161] = setDraft;
-		$[162] = setTagError;
-		$[163] = shouldCommitOnBlur;
-		$[164] = term;
-		$[165] = termOptionKey;
-		$[166] = t31;
-	} else t31 = $[166];
-	const settleDraft = useEvent(t31);
-	const pendingClearRef = useRef(null);
-	let t32;
-	if ($[167] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = () => {
-			pendingClearRef.current?.();
-			pendingClearRef.current = null;
-		};
-		$[167] = t32;
-	} else t32 = $[167];
-	const cancelPendingClear = t32;
+		$[166] = allowsCustomValue;
+		$[167] = commitDraft;
+		$[168] = draft;
+		$[169] = hasOptions;
+		$[170] = isInteractive;
+		$[171] = setDraft;
+		$[172] = setTagError;
+		$[173] = shouldCommitOnBlur;
+		$[174] = term;
+		$[175] = termOptionKey;
+		$[176] = t32;
+	} else t32 = $[176];
+	const settleDraft = useEvent(t32);
 	let t33;
-	if ($[168] !== setTagError) {
+	if ($[177] !== cancelPendingClear || $[178] !== onFocus) {
 		t33 = () => {
-			cancelPendingClear();
-			let timer;
-			const handleMouseUp = () => {
-				timer = setTimeout(() => {
-					pendingClearRef.current = null;
-					setTagError(null);
-				}, 0);
-			};
-			document.addEventListener("mouseup", handleMouseUp, {
-				capture: true,
-				once: true
-			});
-			pendingClearRef.current = () => {
-				document.removeEventListener("mouseup", handleMouseUp, true);
-				clearTimeout(timer);
-			};
-		};
-		$[168] = setTagError;
-		$[169] = t33;
-	} else t33 = $[169];
-	const clearTagErrorAfterPress = t33;
-	let t34;
-	let t35;
-	if ($[170] === Symbol.for("react.memo_cache_sentinel")) {
-		t34 = () => () => pendingClearRef.current?.();
-		t35 = [];
-		$[170] = t34;
-		$[171] = t35;
-	} else {
-		t34 = $[170];
-		t35 = $[171];
-	}
-	useEffect(t34, t35);
-	let t36;
-	if ($[172] !== onFocus) {
-		t36 = () => {
 			cancelPendingClear();
 			onFocus?.();
 		};
-		$[172] = onFocus;
-		$[173] = t36;
-	} else t36 = $[173];
-	const handleCompositeFocus = useEvent(t36);
-	let t37;
-	if ($[174] !== clearTagErrorAfterPress || $[175] !== onBlur || $[176] !== setIsPopoverOpen || $[177] !== setTagError || $[178] !== setUnpickedCustomValues || $[179] !== settleDraft || $[180] !== tagError) {
-		t37 = (t38) => {
-			const { isPressing } = t38;
+		$[177] = cancelPendingClear;
+		$[178] = onFocus;
+		$[179] = t33;
+	} else t33 = $[179];
+	const handleCompositeFocus = useEvent(t33);
+	let t34;
+	if ($[180] !== clearTagErrorAfterPress || $[181] !== onBlur || $[182] !== setIsPopoverOpen || $[183] !== setTagError || $[184] !== setUnpickedCustomValues || $[185] !== settleDraft || $[186] !== tagError) {
+		t34 = (t35) => {
+			const { isPressing } = t35;
 			setIsPopoverOpen(false);
 			setUnpickedCustomValues([]);
 			const wasShowingMessage = tagError != null;
@@ -1147,83 +1213,83 @@ function TagInput(props, ref) {
 			else setTagError(null);
 			onBlur?.();
 		};
-		$[174] = clearTagErrorAfterPress;
-		$[175] = onBlur;
-		$[176] = setIsPopoverOpen;
-		$[177] = setTagError;
-		$[178] = setUnpickedCustomValues;
-		$[179] = settleDraft;
-		$[180] = tagError;
-		$[181] = t37;
-	} else t37 = $[181];
-	const handleCompositeBlur = useEvent(t37);
-	const t38 = rootRef;
-	const t39 = popoverRef;
-	let t40;
-	if ($[182] !== handleCompositeBlur || $[183] !== handleCompositeFocus || $[184] !== isDisabled || $[185] !== t38 || $[186] !== t39) {
-		t40 = {
-			wrapperRef: t38,
-			popoverRef: t39,
+		$[180] = clearTagErrorAfterPress;
+		$[181] = onBlur;
+		$[182] = setIsPopoverOpen;
+		$[183] = setTagError;
+		$[184] = setUnpickedCustomValues;
+		$[185] = settleDraft;
+		$[186] = tagError;
+		$[187] = t34;
+	} else t34 = $[187];
+	const handleCompositeBlur = useEvent(t34);
+	const t35 = rootRef;
+	const t36 = popoverRef;
+	let t37;
+	if ($[188] !== handleCompositeBlur || $[189] !== handleCompositeFocus || $[190] !== isDisabled || $[191] !== t35 || $[192] !== t36) {
+		t37 = {
+			wrapperRef: t35,
+			popoverRef: t36,
 			onFocus: handleCompositeFocus,
 			onBlur: handleCompositeBlur,
 			isDisabled
 		};
-		$[182] = handleCompositeBlur;
-		$[183] = handleCompositeFocus;
-		$[184] = isDisabled;
-		$[185] = t38;
-		$[186] = t39;
-		$[187] = t40;
-	} else t40 = $[187];
-	const { compositeFocusProps } = useCompositeFocus(t40);
-	let t41;
-	if ($[188] !== rootRef || $[189] !== setIsPopoverOpen || $[190] !== settleDraft) {
-		t41 = (e_1) => {
+		$[188] = handleCompositeBlur;
+		$[189] = handleCompositeFocus;
+		$[190] = isDisabled;
+		$[191] = t35;
+		$[192] = t36;
+		$[193] = t37;
+	} else t37 = $[193];
+	const { compositeFocusProps } = useCompositeFocus(t37);
+	let t38;
+	if ($[194] !== rootRef || $[195] !== setIsPopoverOpen || $[196] !== settleDraft) {
+		t38 = (e_7) => {
 			const isTabbing = isTabbingRef.current;
-			const next_4 = e_1.relatedTarget;
+			const next_4 = e_7.relatedTarget;
 			isTabbingRef.current = false;
 			if (!isTabbing || !next_4 || !rootRef.current?.contains(next_4)) return;
 			setIsPopoverOpen(false);
 			settleDraft();
 		};
-		$[188] = rootRef;
-		$[189] = setIsPopoverOpen;
-		$[190] = settleDraft;
-		$[191] = t41;
-	} else t41 = $[191];
-	const handleInputBlur = useEvent(t41);
-	let t42;
-	if ($[192] !== hasOptions || $[193] !== isInteractive || $[194] !== popoverTrigger || $[195] !== setIsPopoverOpen) {
-		t42 = () => {
+		$[194] = rootRef;
+		$[195] = setIsPopoverOpen;
+		$[196] = settleDraft;
+		$[197] = t38;
+	} else t38 = $[197];
+	const handleInputBlur = useEvent(t38);
+	let t39;
+	if ($[198] !== hasOptions || $[199] !== isInteractive || $[200] !== popoverTrigger || $[201] !== setIsPopoverOpen) {
+		t39 = () => {
 			if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
 		};
-		$[192] = hasOptions;
-		$[193] = isInteractive;
-		$[194] = popoverTrigger;
-		$[195] = setIsPopoverOpen;
-		$[196] = t42;
-	} else t42 = $[196];
-	const handleInputFocus = useEvent(t42);
+		$[198] = hasOptions;
+		$[199] = isInteractive;
+		$[200] = popoverTrigger;
+		$[201] = setIsPopoverOpen;
+		$[202] = t39;
+	} else t39 = $[202];
+	const handleInputFocus = useEvent(t39);
 	const tags = uniqueValues.map((value_5) => {
 		const ownProps = tagProps?.(value_5);
-		const result_0 = !(getOption(value_5) != null || knownLabels.has(value_5)) && validateTag ? validateTag(value_5) : true;
+		const result = !(getOption(value_5) != null || knownLabels.has(value_5)) && validateTag ? validateTag(value_5) : true;
 		const label_1 = textLabel(ownProps?.children) ?? getOptionLabel(value_5);
 		return {
 			key: value_5,
 			label: label_1,
-			invalidMessage: typeof result_0 === "string" ? result_0 : result_0 === false ? t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: label_1 }) : void 0,
+			invalidMessage: typeof result === "string" ? result : result === false ? t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: label_1 }) : void 0,
 			tagProps: ownProps,
 			isDisabled: !!ownProps?.isDisabled
 		};
 	});
 	const effectiveIsInvalid = tagError ? true : isInvalid;
-	const hasRemovableTags = tags.some(_temp9);
+	const hasRemovableTags = tags.some(_temp8);
 	const hasBackspaceHint = isInteractive && hasRemovableTags;
-	const lockedKeys = tags.filter(_temp0).map(_temp1);
+	const lockedKeys = tags.filter(_temp9).map(_temp0);
 	const optionDisabledKeys = lockedKeys.length ? [...disabledKeySet, ...lockedKeys] : disabledKeys;
-	let t43;
-	if ($[197] !== autoFocus || $[198] !== draft || $[199] !== effectiveIsInvalid || $[200] !== handleInputChange || $[201] !== id || $[202] !== isDisabled || $[203] !== isReadOnly || $[204] !== isRequired || $[205] !== label || $[206] !== otherProps || $[207] !== placeholder) {
-		t43 = {
+	let t40;
+	if ($[203] !== autoFocus || $[204] !== draft || $[205] !== effectiveIsInvalid || $[206] !== handleInputChange || $[207] !== id || $[208] !== isDisabled || $[209] !== isReadOnly || $[210] !== isRequired || $[211] !== label || $[212] !== otherProps || $[213] !== placeholder) {
+		t40 = {
 			...otherProps,
 			id,
 			label,
@@ -1236,31 +1302,31 @@ function TagInput(props, ref) {
 			autoFocus,
 			onChange: handleInputChange
 		};
-		$[197] = autoFocus;
-		$[198] = draft;
-		$[199] = effectiveIsInvalid;
-		$[200] = handleInputChange;
-		$[201] = id;
-		$[202] = isDisabled;
-		$[203] = isReadOnly;
-		$[204] = isRequired;
-		$[205] = label;
-		$[206] = otherProps;
-		$[207] = placeholder;
-		$[208] = t43;
-	} else t43 = $[208];
-	const { labelProps, inputProps } = useTextField(t43, inputRef);
+		$[203] = autoFocus;
+		$[204] = draft;
+		$[205] = effectiveIsInvalid;
+		$[206] = handleInputChange;
+		$[207] = id;
+		$[208] = isDisabled;
+		$[209] = isReadOnly;
+		$[210] = isRequired;
+		$[211] = label;
+		$[212] = otherProps;
+		$[213] = placeholder;
+		$[214] = t40;
+	} else t40 = $[214];
+	const { labelProps, inputProps } = useTextField(t40, inputRef);
 	const ariaLabel = props["aria-label"];
 	const ariaLabelledby = props["aria-labelledby"];
 	const labelId = label ? labelProps.id : void 0;
-	let t44;
-	if ($[209] !== ariaLabelledby || $[210] !== labelId) {
-		t44 = [labelId, ariaLabelledby].filter(Boolean).join(" ") || void 0;
-		$[209] = ariaLabelledby;
-		$[210] = labelId;
-		$[211] = t44;
-	} else t44 = $[211];
-	const fieldLabelledby = t44;
+	let t41;
+	if ($[215] !== ariaLabelledby || $[216] !== labelId) {
+		t41 = [labelId, ariaLabelledby].filter(Boolean).join(" ") || void 0;
+		$[215] = ariaLabelledby;
+		$[216] = labelId;
+		$[217] = t41;
+	} else t41 = $[217];
+	const fieldLabelledby = t41;
 	const describedBy = [];
 	if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
 	if (tags.length) describedBy.push(summaryId);
@@ -1273,117 +1339,99 @@ function TagInput(props, ref) {
 		autoComplete,
 		"data-input-type": "taginput",
 		"aria-describedby": describedBy.join(" ") || void 0
-	}, hasOptions ? {
-		role: "combobox",
-		"aria-autocomplete": "list",
-		"aria-haspopup": "listbox",
-		"aria-expanded": shouldShowPopover,
-		"aria-controls": shouldShowPopover ? listBoxId : void 0,
-		"aria-activedescendant": shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(listBoxId, activeOptionKey) : void 0
-	} : null);
-	let t45;
-	if ($[212] !== hasResults || $[213] !== inputRef || $[214] !== setIsFilterActive || $[215] !== setIsPopoverOpen || $[216] !== shouldShowPopover) {
-		t45 = () => {
+	}, hasOptions ? getComboboxProps(listBoxId, shouldShowPopover, activeOptionKey) : null);
+	let t42;
+	if ($[218] !== hasResults || $[219] !== inputRef || $[220] !== setIsFilterActive || $[221] !== setIsPopoverOpen || $[222] !== shouldShowPopover) {
+		t42 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[212] = hasResults;
-		$[213] = inputRef;
-		$[214] = setIsFilterActive;
-		$[215] = setIsPopoverOpen;
-		$[216] = shouldShowPopover;
-		$[217] = t45;
-	} else t45 = $[217];
-	const handleTriggerPress = useEvent(t45);
-	let t46;
-	if ($[218] !== ariaLabel || $[219] !== fieldLabelledby || $[220] !== handleTriggerPress || $[221] !== hasOptions || $[222] !== hideTrigger || $[223] !== isInteractive || $[224] !== shouldShowPopover || $[225] !== size || $[226] !== t || $[227] !== triggerId || $[228] !== triggerStyles) {
-		t46 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
-			"data-popover-trigger": true,
+		$[218] = hasResults;
+		$[219] = inputRef;
+		$[220] = setIsFilterActive;
+		$[221] = setIsPopoverOpen;
+		$[222] = shouldShowPopover;
+		$[223] = t42;
+	} else t42 = $[223];
+	const handleTriggerPress = useEvent(t42);
+	let t43;
+	if ($[224] !== ariaLabel || $[225] !== fieldLabelledby || $[226] !== handleTriggerPress || $[227] !== hasOptions || $[228] !== hideTrigger || $[229] !== isInteractive || $[230] !== shouldShowPopover || $[231] !== size || $[232] !== triggerId || $[233] !== triggerStyles) {
+		t43 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(TagInputTrigger, {
 			id: triggerId,
-			qa: "TagInputTrigger",
-			icon: /* @__PURE__ */ jsx(DirectionIcon, { to: shouldShowPopover ? "up" : "down" }),
 			size,
+			ariaLabel,
+			fieldLabelledby,
+			isOpen: shouldShowPopover,
 			isDisabled: !isInteractive,
 			styles: triggerStyles,
-			mods: { pressed: shouldShowPopover },
-			tabIndex: -1,
-			"aria-expanded": shouldShowPopover,
-			"aria-haspopup": "listbox",
-			"aria-label": ariaLabel ? t("tagInput.showOptionsFor", "Show options, {{label}}", { label: ariaLabel }) : t("tagInput.showOptions", "Show options"),
-			"aria-labelledby": fieldLabelledby ? `${triggerId} ${fieldLabelledby}` : void 0,
 			onPress: handleTriggerPress
 		}) : null;
-		$[218] = ariaLabel;
-		$[219] = fieldLabelledby;
-		$[220] = handleTriggerPress;
-		$[221] = hasOptions;
-		$[222] = hideTrigger;
-		$[223] = isInteractive;
-		$[224] = shouldShowPopover;
-		$[225] = size;
-		$[226] = t;
-		$[227] = triggerId;
-		$[228] = triggerStyles;
-		$[229] = t46;
-	} else t46 = $[229];
-	const trigger = t46;
-	let t47;
-	if ($[230] !== inputRef || $[231] !== onClear || $[232] !== setDraft || $[233] !== setIsPopoverOpen || $[234] !== setTagError) {
-		t47 = () => {
+		$[224] = ariaLabel;
+		$[225] = fieldLabelledby;
+		$[226] = handleTriggerPress;
+		$[227] = hasOptions;
+		$[228] = hideTrigger;
+		$[229] = isInteractive;
+		$[230] = shouldShowPopover;
+		$[231] = size;
+		$[232] = triggerId;
+		$[233] = triggerStyles;
+		$[234] = t43;
+	} else t43 = $[234];
+	const trigger = t43;
+	let t44;
+	if ($[235] !== inputRef || $[236] !== onClear || $[237] !== setDraft || $[238] !== setIsPopoverOpen || $[239] !== setTagError) {
+		t44 = () => {
 			inputRef.current?.focus();
 			setDraft("");
 			setTagError(null);
 			setIsPopoverOpen(false);
 			onClear?.();
 		};
-		$[230] = inputRef;
-		$[231] = onClear;
-		$[232] = setDraft;
-		$[233] = setIsPopoverOpen;
-		$[234] = setTagError;
-		$[235] = t47;
-	} else t47 = $[235];
-	const clearText = useEvent(t47);
+		$[235] = inputRef;
+		$[236] = onClear;
+		$[237] = setDraft;
+		$[238] = setIsPopoverOpen;
+		$[239] = setTagError;
+		$[240] = t44;
+	} else t44 = $[240];
+	const clearText = useEvent(t44);
 	const canClear = !!isClearable && isInteractive && draft !== "";
-	let t48;
-	if ($[236] !== ariaLabel || $[237] !== canClear || $[238] !== clearId || $[239] !== clearText || $[240] !== fieldLabelledby || $[241] !== size || $[242] !== t) {
-		t48 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
+	let t45;
+	if ($[241] !== ariaLabel || $[242] !== canClear || $[243] !== clearId || $[244] !== clearText || $[245] !== fieldLabelledby || $[246] !== size) {
+		t45 = canClear ? /* @__PURE__ */ jsx(TagInputClearButton, {
 			id: clearId,
-			qa: "TagInputClearButton",
-			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
-			tabIndex: -1,
-			"aria-label": ariaLabel ? t("tagInput.clearTextFor", "Clear text, {{label}}", { label: ariaLabel }) : t("tagInput.clearText", "Clear text"),
-			"aria-labelledby": fieldLabelledby ? `${clearId} ${fieldLabelledby}` : void 0,
+			ariaLabel,
+			fieldLabelledby,
 			onPress: clearText
 		}) : null;
-		$[236] = ariaLabel;
-		$[237] = canClear;
-		$[238] = clearId;
-		$[239] = clearText;
-		$[240] = fieldLabelledby;
-		$[241] = size;
-		$[242] = t;
-		$[243] = t48;
-	} else t48 = $[243];
-	const clearButton = t48;
+		$[241] = ariaLabel;
+		$[242] = canClear;
+		$[243] = clearId;
+		$[244] = clearText;
+		$[245] = fieldLabelledby;
+		$[246] = size;
+		$[247] = t45;
+	} else t45 = $[247];
+	const clearButton = t45;
 	const hasActions = clearButton != null || trigger != null;
 	const T0 = TagInputElement;
-	const t49 = qa || "TagInput";
-	let t50;
-	if ($[244] !== clearButton || $[245] !== hasActions || $[246] !== trigger) {
-		t50 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[244] = clearButton;
-		$[245] = hasActions;
-		$[246] = trigger;
-		$[247] = t50;
-	} else t50 = $[247];
-	let t51;
-	if ($[248] !== autoFocus || $[249] !== effectiveIsInvalid || $[250] !== icon || $[251] !== inputRef || $[252] !== inputStyles || $[253] !== isDisabled || $[254] !== isLoading || $[255] !== isValid || $[256] !== mods || $[257] !== prefix || $[258] !== size || $[259] !== suffix || $[260] !== suffixPosition || $[261] !== t49 || $[262] !== t50 || $[263] !== tagInputProps || $[264] !== wrapperRef || $[265] !== wrapperStyles) {
-		t51 = /* @__PURE__ */ jsx(TextInputBase, {
-			qa: t49,
+	const t46 = qa || "TagInput";
+	let t47;
+	if ($[248] !== clearButton || $[249] !== hasActions || $[250] !== trigger) {
+		t47 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
+		$[248] = clearButton;
+		$[249] = hasActions;
+		$[250] = trigger;
+		$[251] = t47;
+	} else t47 = $[251];
+	let t48;
+	if ($[252] !== autoFocus || $[253] !== effectiveIsInvalid || $[254] !== icon || $[255] !== inputRef || $[256] !== inputStyles || $[257] !== isDisabled || $[258] !== isLoading || $[259] !== isValid || $[260] !== mods || $[261] !== prefix || $[262] !== size || $[263] !== suffix || $[264] !== suffixPosition || $[265] !== t46 || $[266] !== t47 || $[267] !== tagInputProps || $[268] !== wrapperRef || $[269] !== wrapperStyles) {
+		t48 = /* @__PURE__ */ jsx(TextInputBase, {
+			qa: t46,
 			inputRef,
 			wrapperRef,
 			inputProps: tagInputProps,
@@ -1392,7 +1440,7 @@ function TagInput(props, ref) {
 			prefix,
 			suffix,
 			suffixPosition,
-			actions: t50,
+			actions: t47,
 			size,
 			autoFocus,
 			isDisabled,
@@ -1402,27 +1450,27 @@ function TagInput(props, ref) {
 			styles: wrapperStyles,
 			inputStyles
 		});
-		$[248] = autoFocus;
-		$[249] = effectiveIsInvalid;
-		$[250] = icon;
-		$[251] = inputRef;
-		$[252] = inputStyles;
-		$[253] = isDisabled;
-		$[254] = isLoading;
-		$[255] = isValid;
-		$[256] = mods;
-		$[257] = prefix;
-		$[258] = size;
-		$[259] = suffix;
-		$[260] = suffixPosition;
-		$[261] = t49;
-		$[262] = t50;
-		$[263] = tagInputProps;
-		$[264] = wrapperRef;
-		$[265] = wrapperStyles;
-		$[266] = t51;
-	} else t51 = $[266];
-	const t52 = tags.length ? /* @__PURE__ */ jsx(TagList, {
+		$[252] = autoFocus;
+		$[253] = effectiveIsInvalid;
+		$[254] = icon;
+		$[255] = inputRef;
+		$[256] = inputStyles;
+		$[257] = isDisabled;
+		$[258] = isLoading;
+		$[259] = isValid;
+		$[260] = mods;
+		$[261] = prefix;
+		$[262] = size;
+		$[263] = suffix;
+		$[264] = suffixPosition;
+		$[265] = t46;
+		$[266] = t47;
+		$[267] = tagInputProps;
+		$[268] = wrapperRef;
+		$[269] = wrapperStyles;
+		$[270] = t48;
+	} else t48 = $[270];
+	const t49 = tags.length ? /* @__PURE__ */ jsx(TagList, {
 		id: tagListId,
 		listRef: tagListRef,
 		inputRef,
@@ -1436,50 +1484,50 @@ function TagInput(props, ref) {
 		tagStyles,
 		onRemove: removeValues
 	}) : null;
-	const t53 = true;
-	const t54 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp10)) }) : null;
-	let t55;
-	if ($[267] !== summaryId || $[268] !== t54) {
-		t55 = /* @__PURE__ */ jsx("span", {
-			hidden: t53,
+	const t50 = true;
+	const t51 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp1)) }) : null;
+	let t52;
+	if ($[271] !== summaryId || $[272] !== t51) {
+		t52 = /* @__PURE__ */ jsx("span", {
+			hidden: t50,
 			id: summaryId,
-			children: t54
+			children: t51
 		});
-		$[267] = summaryId;
-		$[268] = t54;
-		$[269] = t55;
-	} else t55 = $[269];
-	let t56;
-	if ($[270] !== hasBackspaceHint || $[271] !== t) {
-		t56 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[270] = hasBackspaceHint;
-		$[271] = t;
-		$[272] = t56;
-	} else t56 = $[272];
-	let t57;
-	if ($[273] !== hintId || $[274] !== t56) {
-		t57 = /* @__PURE__ */ jsx("span", {
+		$[271] = summaryId;
+		$[272] = t51;
+		$[273] = t52;
+	} else t52 = $[273];
+	let t53;
+	if ($[274] !== hasBackspaceHint || $[275] !== t) {
+		t53 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
+		$[274] = hasBackspaceHint;
+		$[275] = t;
+		$[276] = t53;
+	} else t53 = $[276];
+	let t54;
+	if ($[277] !== hintId || $[278] !== t53) {
+		t54 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
-			children: t56
+			children: t53
 		});
-		$[273] = hintId;
-		$[274] = t56;
-		$[275] = t57;
-	} else t57 = $[275];
-	let t58;
-	if ($[276] !== announcement.id || $[277] !== announcement.text) {
-		t58 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		$[277] = hintId;
+		$[278] = t53;
+		$[279] = t54;
+	} else t54 = $[279];
+	let t55;
+	if ($[280] !== announcement.id || $[281] !== announcement.text) {
+		t55 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[276] = announcement.id;
-		$[277] = announcement.text;
-		$[278] = t58;
-	} else t58 = $[278];
-	const t59 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
+		$[280] = announcement.id;
+		$[281] = announcement.text;
+		$[282] = t55;
+	} else t55 = $[282];
+	const t56 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
 		isOpen: shouldShowPopover,
 		triggerRef: wrapperRef,
 		popoverRef,
@@ -1514,9 +1562,9 @@ function TagInput(props, ref) {
 		onClose: () => setIsPopoverOpen(false),
 		children: popoverChildren
 	}) : null;
-	let t60;
-	if ($[279] !== T0 || $[280] !== className || $[281] !== compositeFocusProps || $[282] !== qaVal || $[283] !== rootRef || $[284] !== style || $[285] !== styles || $[286] !== t51 || $[287] !== t52 || $[288] !== t55 || $[289] !== t57 || $[290] !== t58 || $[291] !== t59) {
-		t60 = /* @__PURE__ */ jsxs(T0, {
+	let t57;
+	if ($[283] !== T0 || $[284] !== className || $[285] !== compositeFocusProps || $[286] !== qaVal || $[287] !== rootRef || $[288] !== style || $[289] !== styles || $[290] !== t48 || $[291] !== t49 || $[292] !== t52 || $[293] !== t54 || $[294] !== t55 || $[295] !== t56) {
+		t57 = /* @__PURE__ */ jsxs(T0, {
 			ref: rootRef,
 			className,
 			style,
@@ -1524,44 +1572,44 @@ function TagInput(props, ref) {
 			styles,
 			...compositeFocusProps,
 			children: [
-				t51,
+				t48,
+				t49,
 				t52,
+				t54,
 				t55,
-				t57,
-				t58,
-				t59
+				t56
 			]
 		});
-		$[279] = T0;
-		$[280] = className;
-		$[281] = compositeFocusProps;
-		$[282] = qaVal;
-		$[283] = rootRef;
-		$[284] = style;
-		$[285] = styles;
-		$[286] = t51;
-		$[287] = t52;
-		$[288] = t55;
-		$[289] = t57;
-		$[290] = t58;
-		$[291] = t59;
-		$[292] = t60;
-	} else t60 = $[292];
-	const tagInputField = t60;
+		$[283] = T0;
+		$[284] = className;
+		$[285] = compositeFocusProps;
+		$[286] = qaVal;
+		$[287] = rootRef;
+		$[288] = style;
+		$[289] = styles;
+		$[290] = t48;
+		$[291] = t49;
+		$[292] = t52;
+		$[293] = t54;
+		$[294] = t55;
+		$[295] = t56;
+		$[296] = t57;
+	} else t57 = $[296];
+	const tagInputField = t57;
 	const { children: _children, ...fieldProps } = props;
 	const fieldRef = useCombinedRefs();
-	let t61;
-	if ($[293] !== message || $[294] !== tagError) {
-		t61 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[293] = message;
-		$[294] = tagError;
-		$[295] = t61;
-	} else t61 = $[295];
+	let t58;
+	if ($[297] !== message || $[298] !== tagError) {
+		t58 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
+		$[297] = message;
+		$[298] = tagError;
+		$[299] = t58;
+	} else t58 = $[299];
 	return wrapWithField(tagInputField, fieldRef, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
-		message: t61,
+		message: t58,
 		errorMessage: tagError ? void 0 : errorMessage
 	});
 }
@@ -1570,38 +1618,35 @@ function TagInput(props, ref) {
 * input. Values are typed (Enter or a separator commits them) or picked from
 * suggested options.
 */
-function _temp10(tag_2) {
+function _temp1(tag_2) {
 	return tag_2.label;
 }
-function _temp1(tag_1) {
+function _temp0(tag_1) {
 	return tag_1.key;
 }
-function _temp0(tag_0) {
+function _temp9(tag_0) {
 	return tag_0.isDisabled;
 }
-function _temp9(tag) {
+function _temp8(tag) {
 	return !tag.isDisabled;
 }
-function _temp8(part_1) {
+function _temp7(part_1) {
 	return part_1.trim();
 }
-function _temp7(rejection_1) {
-	return rejection_1.text;
+function _temp6(rejection_2) {
+	return rejection_2.text;
 }
-function _temp6(rejection_0) {
-	return rejection_0.reason !== "duplicate";
+function _temp5(rejection_1) {
+	return rejection_1.reason !== "duplicate";
 }
-function _temp5(delimiter) {
+function _temp4(delimiter) {
 	return delimiter && !LINE_BREAK.test(delimiter);
 }
-function _temp4(node_1) {
+function _temp3(node_1) {
 	return node_1.type === "section";
 }
-function _temp3() {
-	return /* @__PURE__ */ new Map();
-}
 function _temp2() {
-	return true;
+	return /* @__PURE__ */ new Map();
 }
 function _temp(t0) {
 	const { value, onChange } = t0;