@cube-dev/ui-kit 0.0.0-canary-0b79a39 → 0.0.0-canary-c02e70f

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0b79a39 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c02e70f | 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";
@@ -60,11 +60,45 @@ function splitTagText(text, delimiters) {
 function textLabel(node) {
 	return typeof node === "string" && node !== "" ? node : void 0;
 }
+const textCollator = new Intl.Collator(void 0, { sensitivity: "base" });
+const textSorter = new Intl.Collator(void 0, { numeric: true });
+function isSameText(a, b) {
+	return textCollator.compare(a, b) === 0;
+}
+function compareText(a, b) {
+	return textSorter.compare(a, b);
+}
+/**
+* The popover's rows: the options, then the user's own values and the typed
+* text. Those go in a section of their own when there are options to set them
+* apart from.
+*/
+function withCustomOptions(children, { customKeys, customTerm, hasOptionRows, hasSections, optionsLabel, customValuesLabel }) {
+	if (!customTerm && !customKeys.length) return children;
+	const customOptions = customKeys.map((key) => /* @__PURE__ */ jsx(_CollectionItem, {
+		textValue: key,
+		children: key
+	}, key));
+	if (customTerm) customOptions.push(/* @__PURE__ */ jsx(_CollectionItem, {
+		textValue: customTerm,
+		children: customTerm
+	}, customTerm));
+	if (!hasOptionRows) return customOptions;
+	const customSection = /* @__PURE__ */ jsx(Section, {
+		"aria-label": customValuesLabel,
+		children: customOptions
+	}, "__custom_values__");
+	if (hasSections) return [...Array.isArray(children) ? children : [children], customSection];
+	return [/* @__PURE__ */ jsx(Section, {
+		"aria-label": optionsLabel,
+		children
+	}, "__options__"), customSection];
+}
 function isComposingKey(e) {
 	return e.nativeEvent.isComposing || e.keyCode === 229;
 }
 function TagInput(props, ref) {
-	const $ = c(484);
+	const $ = c(268);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -390,25 +424,13 @@ function TagInput(props, ref) {
 		$[75] = t4;
 	} else t4 = $[75];
 	const [values, setValues] = useControlledState(valueProp, t4, onChange_0);
-	let t5;
-	if ($[76] !== values) {
-		t5 = new Set((values ?? []).map(String));
-		$[76] = values;
-		$[77] = t5;
-	} else t5 = $[77];
-	let t6;
-	if ($[78] !== t5) {
-		t6 = [...t5];
-		$[78] = t5;
-		$[79] = t6;
-	} else t6 = $[79];
-	const uniqueValues = t6;
+	const uniqueValues = [...new Set((values ?? []).map(String))];
 	const [draft, setDraftState] = useControlledState(inputValueProp, defaultInputValue ?? "", onInputChange);
 	const [tagError, setTagErrorState] = useState(null);
 	const tagErrorIdRef = useRef(0);
-	let t7;
-	if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = (text) => {
+	let t5;
+	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (text) => {
 			if (text == null) {
 				setTagErrorState(null);
 				return;
@@ -419,119 +441,79 @@ function TagInput(props, ref) {
 				text
 			});
 		};
-		$[80] = t7;
-	} else t7 = $[80];
-	const setTagError = useEvent(t7);
-	let t8;
-	if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = {
+		$[76] = t5;
+	} else t5 = $[76];
+	const setTagError = useEvent(t5);
+	let t6;
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
 			id: 0,
 			text: ""
 		};
+		$[77] = t6;
+	} else t6 = $[77];
+	const [announcement, setAnnouncement] = useState(t6);
+	let children = renderChildren;
+	if (items && typeof renderChildren === "function") children = Array.from(items).map((item, index) => {
+		const rendered = renderChildren(item);
+		if (isValidElement(rendered) && rendered.key == null) return cloneElement(rendered, { key: item?.key ?? item?.id ?? index });
+		return rendered;
+	});
+	const hasOptions = children != null && children !== false;
+	const collection = useListState({
+		children,
+		selectionMode: "none"
+	}).collection;
+	let t7;
+	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { sensitivity: "base" };
+		$[78] = t7;
+	} else t7 = $[78];
+	const { contains } = useFilter(t7);
+	let t8;
+	if ($[79] !== contains || $[80] !== filter) {
+		t8 = filter === false ? _temp2 : filter || contains;
+		$[79] = contains;
+		$[80] = filter;
 		$[81] = t8;
 	} else t8 = $[81];
-	const [announcement, setAnnouncement] = useState(t8);
-	let children;
-	if ($[82] !== items || $[83] !== renderChildren) {
-		children = renderChildren;
-		if (items && typeof renderChildren === "function") children = Array.from(items).map((item, index) => {
-			const rendered = renderChildren(item);
-			if (isValidElement(rendered) && rendered.key == null) return cloneElement(rendered, { key: item?.key ?? item?.id ?? index });
-			return rendered;
-		});
-		$[82] = items;
-		$[83] = renderChildren;
-		$[84] = children;
-	} else children = $[84];
-	const hasOptions = children != null && children !== false;
-	const t9 = children;
+	const textFilterFn = t8;
+	const [isFilterActive, setIsFilterActive] = useState(false);
+	const term = draft.trim();
+	const [knownLabels, setKnownLabels] = useState(_temp3);
+	let t9;
+	if ($[82] !== collection || $[83] !== knownLabels) {
+		t9 = (key) => collection.getItem(key)?.textValue || knownLabels.get(key) || key;
+		$[82] = collection;
+		$[83] = knownLabels;
+		$[84] = t9;
+	} else t9 = $[84];
+	const getOptionLabel = t9;
 	let t10;
-	if ($[85] !== t9) {
-		t10 = {
-			children: t9,
-			selectionMode: "none"
-		};
-		$[85] = t9;
-		$[86] = t10;
-	} else t10 = $[86];
-	const collection = useListState(t10).collection;
+	if ($[85] !== getOptionLabel || $[86] !== tagProps) {
+		t10 = (key_0) => textLabel(tagProps?.(key_0)?.children) ?? getOptionLabel(key_0);
+		$[85] = getOptionLabel;
+		$[86] = tagProps;
+		$[87] = t10;
+	} else t10 = $[87];
+	const getTagLabel = t10;
 	let t11;
-	if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = { sensitivity: "base" };
-		$[87] = t11;
-	} else t11 = $[87];
-	const { contains } = useFilter(t11);
+	if ($[88] !== tagProps) {
+		t11 = (key_1) => !!tagProps?.(key_1)?.isDisabled;
+		$[88] = tagProps;
+		$[89] = t11;
+	} else t11 = $[89];
+	const isTagLocked = t11;
 	let t12;
-	if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = new Intl.Collator(void 0, { sensitivity: "base" });
-		$[88] = t12;
-	} else t12 = $[88];
-	const collator = t12;
+	if ($[90] !== disabledKeys) {
+		t12 = new Set([...disabledKeys ?? []].map(String));
+		$[90] = disabledKeys;
+		$[91] = t12;
+	} else t12 = $[91];
+	const disabledKeySet = t12;
 	let t13;
-	if ($[89] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = new Intl.Collator(void 0, { numeric: true });
-		$[89] = t13;
-	} else t13 = $[89];
-	const sorter = t13;
-	let t14;
-	if ($[90] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = {
-			isEqual: (a, b) => collator.compare(a, b) === 0,
-			compare: (a_0, b_0) => sorter.compare(a_0, b_0)
-		};
-		$[90] = t14;
-	} else t14 = $[90];
-	const { isEqual: isSameText, compare: compareText } = t14;
-	let t15;
-	if ($[91] !== contains || $[92] !== filter) {
-		t15 = filter === false ? _temp2 : filter || contains;
-		$[91] = contains;
-		$[92] = filter;
-		$[93] = t15;
-	} else t15 = $[93];
-	const textFilterFn = t15;
-	const [isFilterActive, setIsFilterActive] = useState(false);
-	let t16;
-	if ($[94] !== draft) {
-		t16 = draft.trim();
-		$[94] = draft;
-		$[95] = t16;
-	} else t16 = $[95];
-	const term = t16;
-	const [knownLabels, setKnownLabels] = useState(_temp3);
-	let t17;
-	if ($[96] !== collection || $[97] !== knownLabels) {
-		t17 = (key) => collection.getItem(key)?.textValue || knownLabels.get(key) || key;
-		$[96] = collection;
-		$[97] = knownLabels;
-		$[98] = t17;
-	} else t17 = $[98];
-	const getOptionLabel = t17;
-	let t18;
-	if ($[99] !== getOptionLabel || $[100] !== tagProps) {
-		t18 = (key_0) => textLabel(tagProps?.(key_0)?.children) ?? getOptionLabel(key_0);
-		$[99] = getOptionLabel;
-		$[100] = tagProps;
-		$[101] = t18;
-	} else t18 = $[101];
-	const getTagLabel = t18;
-	let t19;
-	if ($[102] !== tagProps) {
-		t19 = (key_1) => !!tagProps?.(key_1)?.isDisabled;
-		$[102] = tagProps;
-		$[103] = t19;
-	} else t19 = $[103];
-	const isTagLocked = t19;
-	let t20;
-	if ($[104] !== disabledKeys) {
-		t20 = new Set([...disabledKeys ?? []].map(String));
-		$[104] = disabledKeys;
-		$[105] = t20;
-	} else t20 = $[105];
-	const disabledKeySet = t20;
-	let t21;
-	if ($[106] !== collection || $[107] !== knownLabels) {
-		t21 = (keys) => {
+	if ($[92] !== collection || $[93] !== knownLabels) {
+		t13 = (keys) => {
 			let next = null;
 			for (const key_2 of keys) {
 				const label_0 = collection.getItem(key_2)?.textValue;
@@ -542,14 +524,14 @@ function TagInput(props, ref) {
 			}
 			if (next) setKnownLabels(next);
 		};
-		$[106] = collection;
-		$[107] = knownLabels;
-		$[108] = t21;
-	} else t21 = $[108];
-	const rememberLabels = useEvent(t21);
-	let t22;
-	if ($[109] !== collection || $[110] !== hasOptions) {
-		t22 = (text_0) => {
+		$[92] = collection;
+		$[93] = knownLabels;
+		$[94] = t13;
+	} else t13 = $[94];
+	const rememberLabels = useEvent(t13);
+	let t14;
+	if ($[95] !== collection || $[96] !== hasOptions) {
+		t14 = (text_0) => {
 			if (!hasOptions) return null;
 			for (const node of collection) {
 				const nodes = node.type === "section" ? [...node.childNodes] : [node];
@@ -560,279 +542,91 @@ function TagInput(props, ref) {
 			}
 			return null;
 		};
-		$[109] = collection;
-		$[110] = hasOptions;
-		$[111] = t22;
-	} else t22 = $[111];
-	const findOptionKey = t22;
-	let t23;
-	if ($[112] !== isFilterActive || $[113] !== term || $[114] !== textFilterFn) {
-		t23 = (nodes_0) => {
-			if (!isFilterActive || !term) return nodes_0;
-			return filterCollectionNodes(nodes_0, term, textFilterFn);
-		};
-		$[112] = isFilterActive;
-		$[113] = term;
-		$[114] = textFilterFn;
-		$[115] = t23;
-	} else t23 = $[115];
-	const optionFilterFn = t23;
-	let t24;
-	bb0: {
-		if (!hasOptions) {
-			let t25;
-			if ($[116] === Symbol.for("react.memo_cache_sentinel")) {
-				t25 = [];
-				$[116] = t25;
-			} else t25 = $[116];
-			t24 = t25;
-			break bb0;
-		}
-		let keys_0;
-		if ($[117] !== collection || $[118] !== disabledKeys || $[119] !== optionFilterFn) {
-			keys_0 = [];
-			collectVisibleKeys(optionFilterFn(collection), keys_0, disabledKeys ? new Set(disabledKeys) : void 0);
-			$[117] = collection;
-			$[118] = disabledKeys;
-			$[119] = optionFilterFn;
-			$[120] = keys_0;
-		} else keys_0 = $[120];
-		t24 = keys_0;
-	}
-	const visibleOptionKeys = t24;
-	let t25;
-	if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
-		t25 = [];
-		$[121] = t25;
-	} else t25 = $[121];
-	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t25);
-	let t26;
-	bb1: {
-		if (!hasOptions || !allowsCustomValue) {
-			let t27;
-			if ($[122] === Symbol.for("react.memo_cache_sentinel")) {
-				t27 = [];
-				$[122] = t27;
-			} else t27 = $[122];
-			t26 = t27;
-			break bb1;
-		}
-		let t27;
-		if ($[123] !== collection || $[124] !== knownLabels || $[125] !== uniqueValues || $[126] !== unpickedCustomValues) {
-			t27 = [...new Set([...uniqueValues, ...unpickedCustomValues].filter((value_0) => collection.getItem(value_0) == null && !knownLabels.has(value_0)))].sort(compareText);
-			$[123] = collection;
-			$[124] = knownLabels;
-			$[125] = uniqueValues;
-			$[126] = unpickedCustomValues;
-			$[127] = t27;
-		} else t27 = $[127];
-		t26 = t27;
-	}
-	const customValueKeys = t26;
-	let t27;
-	bb2: {
-		if (!isFilterActive || !term) {
-			t27 = customValueKeys;
-			break bb2;
-		}
-		const matches = typeof filter === "function" ? filter : contains;
-		let t28;
-		if ($[128] !== customValueKeys || $[129] !== matches || $[130] !== term) {
-			let t29;
-			if ($[132] !== matches || $[133] !== term) {
-				t29 = (key_3) => matches(key_3, term);
-				$[132] = matches;
-				$[133] = term;
-				$[134] = t29;
-			} else t29 = $[134];
-			t28 = customValueKeys.filter(t29);
-			$[128] = customValueKeys;
-			$[129] = matches;
-			$[130] = term;
-			$[131] = t28;
-		} else t28 = $[131];
-		t27 = t28;
-	}
-	const visibleCustomKeys = t27;
-	let t28;
-	if ($[135] !== allowsCustomValue || $[136] !== customValueKeys || $[137] !== findOptionKey || $[138] !== hasOptions || $[139] !== term || $[140] !== uniqueValues) {
-		t28 = hasOptions && allowsCustomValue && term && findOptionKey(term) == null && !uniqueValues.includes(term) && !customValueKeys.includes(term) ? term : null;
-		$[135] = allowsCustomValue;
-		$[136] = customValueKeys;
-		$[137] = findOptionKey;
-		$[138] = hasOptions;
-		$[139] = term;
-		$[140] = uniqueValues;
-		$[141] = t28;
-	} else t28 = $[141];
-	const customTerm = t28;
-	let t29;
-	bb3: {
-		if (!customTerm && !visibleCustomKeys.length) {
-			t29 = children;
-			break bb3;
-		}
-		let customOptions;
-		if ($[142] !== customTerm || $[143] !== visibleCustomKeys) {
-			customOptions = visibleCustomKeys.map(_temp4);
-			if (customTerm) {
-				let t30;
-				if ($[145] !== customTerm) {
-					t30 = /* @__PURE__ */ jsx(_CollectionItem, {
-						textValue: customTerm,
-						children: customTerm
-					}, customTerm);
-					$[145] = customTerm;
-					$[146] = t30;
-				} else t30 = $[146];
-				customOptions.push(t30);
-			}
-			$[142] = customTerm;
-			$[143] = visibleCustomKeys;
-			$[144] = customOptions;
-		} else customOptions = $[144];
-		if (!visibleOptionKeys.length) {
-			t29 = customOptions;
-			break bb3;
-		}
-		let t30;
-		if ($[147] !== t) {
-			t30 = t("tagInput.customValues", "Custom values");
-			$[147] = t;
-			$[148] = t30;
-		} else t30 = $[148];
-		let t31;
-		if ($[149] !== customOptions || $[150] !== t30) {
-			t31 = /* @__PURE__ */ jsx(Section, {
-				"aria-label": t30,
-				children: customOptions
-			}, "__custom_values__");
-			$[149] = customOptions;
-			$[150] = t30;
-			$[151] = t31;
-		} else t31 = $[151];
-		const customSection = t31;
-		if ([...collection].some(_temp5)) {
-			let t32;
-			if ($[152] !== children) {
-				t32 = Array.isArray(children) ? children : [children];
-				$[152] = children;
-				$[153] = t32;
-			} else t32 = $[153];
-			let t33;
-			if ($[154] !== customSection || $[155] !== t32) {
-				t33 = [...t32, customSection];
-				$[154] = customSection;
-				$[155] = t32;
-				$[156] = t33;
-			} else t33 = $[156];
-			t29 = t33;
-			break bb3;
-		}
-		let t32;
-		if ($[157] !== t) {
-			t32 = t("tagInput.options", "Options");
-			$[157] = t;
-			$[158] = t32;
-		} else t32 = $[158];
-		const t33 = children;
-		let t34;
-		if ($[159] !== t32 || $[160] !== t33) {
-			t34 = /* @__PURE__ */ jsx(Section, {
-				"aria-label": t32,
-				children: t33
-			}, "__options__");
-			$[159] = t32;
-			$[160] = t33;
-			$[161] = t34;
-		} else t34 = $[161];
-		let t35;
-		if ($[162] !== customSection || $[163] !== t34) {
-			t35 = [t34, customSection];
-			$[162] = customSection;
-			$[163] = t34;
-			$[164] = t35;
-		} else t35 = $[164];
-		t29 = t35;
-	}
-	const popoverChildren = t29;
+		$[95] = collection;
+		$[96] = hasOptions;
+		$[97] = t14;
+	} else t14 = $[97];
+	const findOptionKey = t14;
+	const optionFilterFn = (nodes_0) => {
+		if (!isFilterActive || !term) return nodes_0;
+		return filterCollectionNodes(nodes_0, term, textFilterFn);
+	};
+	const visibleOptionKeys = [];
+	if (hasOptions) collectVisibleKeys(optionFilterFn(collection), visibleOptionKeys, disabledKeys ? new Set(disabledKeys) : void 0);
+	let t15;
+	if ($[98] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = [];
+		$[98] = t15;
+	} else t15 = $[98];
+	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t15);
+	const customValueKeys = hasOptions && allowsCustomValue ? [...new Set([...uniqueValues, ...unpickedCustomValues].filter((value_0) => collection.getItem(value_0) == null && !knownLabels.has(value_0)))].sort(compareText) : [];
+	const matchesTerm = typeof filter === "function" ? filter : contains;
+	const visibleCustomKeys = isFilterActive && term ? customValueKeys.filter((key_3) => matchesTerm(key_3, term)) : customValueKeys;
+	const customTerm = hasOptions && allowsCustomValue && term && findOptionKey(term) == null && !uniqueValues.includes(term) && !customValueKeys.includes(term) ? term : null;
+	const popoverChildren = withCustomOptions(children, {
+		customKeys: visibleCustomKeys,
+		customTerm,
+		hasOptionRows: visibleOptionKeys.length > 0,
+		hasSections: [...collection].some(_temp4),
+		optionsLabel: t("tagInput.options", "Options"),
+		customValuesLabel: t("tagInput.customValues", "Custom values")
+	});
 	const hasResults = visibleOptionKeys.length > 0 || visibleCustomKeys.length > 0 || customTerm != null;
-	let t30;
-	if ($[165] !== visibleCustomKeys || $[166] !== visibleOptionKeys) {
-		t30 = [...visibleOptionKeys, ...visibleCustomKeys];
-		$[165] = visibleCustomKeys;
-		$[166] = visibleOptionKeys;
-		$[167] = t30;
-	} else t30 = $[167];
-	const visibleOptionsSignature = t30.join("\0");
+	const visibleOptionsSignature = [...visibleOptionKeys, ...visibleCustomKeys].join("\0");
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	const isInteractive = !isDisabled && !isReadOnly;
 	const shouldShowPopover = hasOptions && isInteractive && isPopoverOpen && hasResults;
 	const notifiedOpenRef = useRef(false);
-	let t31;
-	let t32;
-	if ($[168] !== onOpenChange || $[169] !== shouldShowPopover) {
-		t31 = () => {
+	let t16;
+	let t17;
+	if ($[99] !== onOpenChange || $[100] !== shouldShowPopover) {
+		t16 = () => {
 			if (notifiedOpenRef.current === shouldShowPopover) return;
 			notifiedOpenRef.current = shouldShowPopover;
 			onOpenChange?.(shouldShowPopover);
 		};
-		t32 = [shouldShowPopover, onOpenChange];
-		$[168] = onOpenChange;
-		$[169] = shouldShowPopover;
-		$[170] = t31;
-		$[171] = t32;
+		t17 = [shouldShowPopover, onOpenChange];
+		$[99] = onOpenChange;
+		$[100] = shouldShowPopover;
+		$[101] = t16;
+		$[102] = t17;
 	} else {
-		t31 = $[170];
-		t32 = $[171];
+		t16 = $[101];
+		t17 = $[102];
 	}
-	useEffect(t31, t32);
+	useEffect(t16, t17);
 	const [activeOption, setActiveOption] = useState(null);
 	const activeOptionKey = activeOption?.key ?? null;
-	let t33;
-	if ($[172] === Symbol.for("react.memo_cache_sentinel")) {
-		t33 = (key_5, source, forTerm) => {
+	let t18;
+	if ($[103] !== setActiveOption) {
+		t18 = (key_4, source, forTerm) => {
 			const listState = listStateRef.current;
-			if (!listState || key_5 == null) return;
+			if (!listState || key_4 == null) return;
 			markKeyboardFocus(listState);
-			listState.selectionManager.setFocusedKey(key_5);
+			listState.selectionManager.setFocusedKey(key_4);
 			setActiveOption({
-				key: key_5,
+				key: key_4,
 				term: forTerm,
 				source
 			});
 		};
-		$[172] = t33;
-	} else t33 = $[172];
-	const moveVirtualFocus = useEvent(t33);
+		$[103] = setActiveOption;
+		$[104] = t18;
+	} else t18 = $[104];
+	const moveVirtualFocus = useEvent(t18);
 	const [popoverMinWidth, setPopoverMinWidth] = useState();
 	let exactOptionKey = term ? findOptionKey(term) : null;
 	if (exactOptionKey == null && term && customValueKeys.includes(term)) exactOptionKey = term;
-	let visibleTargetKeys;
-	if ($[173] !== customTerm || $[174] !== visibleCustomKeys || $[175] !== visibleOptionKeys) {
-		visibleTargetKeys = [...visibleOptionKeys, ...visibleCustomKeys];
-		if (customTerm) visibleTargetKeys.push(customTerm);
-		$[173] = customTerm;
-		$[174] = visibleCustomKeys;
-		$[175] = visibleOptionKeys;
-		$[176] = visibleTargetKeys;
-	} else visibleTargetKeys = $[176];
-	let preferredOptionKey;
-	if ($[177] !== exactOptionKey || $[178] !== term || $[179] !== uniqueValues || $[180] !== visibleTargetKeys) {
-		preferredOptionKey = null;
-		if (exactOptionKey != null && visibleTargetKeys.includes(exactOptionKey)) preferredOptionKey = exactOptionKey;
-		else if (term) preferredOptionKey = visibleTargetKeys.find((key_6) => !uniqueValues.includes(String(key_6))) ?? null;
-		if (preferredOptionKey == null) preferredOptionKey = visibleTargetKeys[0] ?? null;
-		$[177] = exactOptionKey;
-		$[178] = term;
-		$[179] = uniqueValues;
-		$[180] = visibleTargetKeys;
-		$[181] = preferredOptionKey;
-	} else preferredOptionKey = $[181];
+	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_5) => !uniqueValues.includes(String(key_5))) ?? null;
+	if (preferredOptionKey == null) preferredOptionKey = visibleTargetKeys[0] ?? null;
 	const focusTermRef = useRef(null);
-	let t34;
-	if ($[182] !== customTerm || $[183] !== moveVirtualFocus || $[184] !== preferredOptionKey || $[185] !== shouldShowPopover || $[186] !== term || $[187] !== visibleOptionsSignature || $[188] !== wrapperRef) {
-		t34 = () => {
+	let t19;
+	if ($[105] !== customTerm || $[106] !== moveVirtualFocus || $[107] !== preferredOptionKey || $[108] !== setActiveOption || $[109] !== setPopoverMinWidth || $[110] !== shouldShowPopover || $[111] !== term || $[112] !== visibleOptionsSignature || $[113] !== wrapperRef) {
+		t19 = () => {
 			if (!shouldShowPopover) {
 				focusTermRef.current = null;
 				return;
@@ -868,18 +662,20 @@ function TagInput(props, ref) {
 				isCancelled = true;
 			};
 		};
-		$[182] = customTerm;
-		$[183] = moveVirtualFocus;
-		$[184] = preferredOptionKey;
-		$[185] = shouldShowPopover;
-		$[186] = term;
-		$[187] = visibleOptionsSignature;
-		$[188] = wrapperRef;
-		$[189] = t34;
-	} else t34 = $[189];
-	let t35;
-	if ($[190] !== customTerm || $[191] !== moveVirtualFocus || $[192] !== preferredOptionKey || $[193] !== shouldShowPopover || $[194] !== term || $[195] !== visibleOptionsSignature || $[196] !== wrapperRef) {
-		t35 = [
+		$[105] = customTerm;
+		$[106] = moveVirtualFocus;
+		$[107] = preferredOptionKey;
+		$[108] = setActiveOption;
+		$[109] = setPopoverMinWidth;
+		$[110] = shouldShowPopover;
+		$[111] = term;
+		$[112] = visibleOptionsSignature;
+		$[113] = wrapperRef;
+		$[114] = t19;
+	} else t19 = $[114];
+	let t20;
+	if ($[115] !== customTerm || $[116] !== moveVirtualFocus || $[117] !== preferredOptionKey || $[118] !== shouldShowPopover || $[119] !== term || $[120] !== visibleOptionsSignature || $[121] !== wrapperRef) {
+		t20 = [
 			shouldShowPopover,
 			visibleOptionsSignature,
 			customTerm,
@@ -888,40 +684,42 @@ function TagInput(props, ref) {
 			moveVirtualFocus,
 			wrapperRef
 		];
-		$[190] = customTerm;
-		$[191] = moveVirtualFocus;
-		$[192] = preferredOptionKey;
-		$[193] = shouldShowPopover;
-		$[194] = term;
-		$[195] = visibleOptionsSignature;
-		$[196] = wrapperRef;
-		$[197] = t35;
-	} else t35 = $[197];
-	useLayoutEffect(t34, t35);
-	let t36;
-	if ($[198] !== setDraftState) {
-		t36 = (next_0) => {
+		$[115] = customTerm;
+		$[116] = moveVirtualFocus;
+		$[117] = preferredOptionKey;
+		$[118] = shouldShowPopover;
+		$[119] = term;
+		$[120] = visibleOptionsSignature;
+		$[121] = wrapperRef;
+		$[122] = t20;
+	} else t20 = $[122];
+	useLayoutEffect(t19, t20);
+	let t21;
+	if ($[123] !== setDraftState || $[124] !== setIsFilterActive) {
+		t21 = (next_0) => {
 			setDraftState(next_0);
 			setIsFilterActive(!!next_0.trim());
 		};
-		$[198] = setDraftState;
-		$[199] = t36;
-	} else t36 = $[199];
-	const setDraft = useEvent(t36);
-	let t37;
-	if ($[200] === Symbol.for("react.memo_cache_sentinel")) {
-		t37 = (text_1) => {
+		$[123] = setDraftState;
+		$[124] = setIsFilterActive;
+		$[125] = t21;
+	} else t21 = $[125];
+	const setDraft = useEvent(t21);
+	let t22;
+	if ($[126] !== setAnnouncement) {
+		t22 = (text_1) => {
 			setAnnouncement((prev_0) => ({
 				id: prev_0.id + 1,
 				text: text_1
 			}));
 		};
-		$[200] = t37;
-	} else t37 = $[200];
-	const announce = useEvent(t37);
-	let t38;
-	if ($[201] !== maxTags || $[202] !== t) {
-		t38 = (rejection) => {
+		$[126] = setAnnouncement;
+		$[127] = t22;
+	} else t22 = $[127];
+	const announce = useEvent(t22);
+	let t23;
+	if ($[128] !== maxTags || $[129] !== t) {
+		t23 = (rejection) => {
 			if (rejection.message) return rejection.message;
 			switch (rejection.reason) {
 				case "duplicate": return t("tagInput.duplicateValue", "\"{{value}}\" is already added", { value: rejection.text });
@@ -931,327 +729,227 @@ function TagInput(props, ref) {
 				default: return t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: rejection.text });
 			}
 		};
-		$[201] = maxTags;
-		$[202] = t;
-		$[203] = t38;
-	} else t38 = $[203];
-	const rejectionMessage = useEvent(t38);
+		$[128] = maxTags;
+		$[129] = t;
+		$[130] = t23;
+	} else t23 = $[130];
+	const rejectionMessage = useEvent(t23);
 	const joiner = delimiters[0] ? `${delimiters[0]} ` : " ";
 	const hasFieldMessage = !!label || !!props.forceField;
-	let t39;
-	if ($[204] !== allowsCustomValue || $[205] !== announce || $[206] !== disabledKeySet || $[207] !== findOptionKey || $[208] !== formatList || $[209] !== getTagLabel || $[210] !== hasFieldMessage || $[211] !== hasOptions || $[212] !== joiner || $[213] !== maxTags || $[214] !== normalizeTag || $[215] !== rejectionMessage || $[216] !== rememberLabels || $[217] !== setTagError || $[218] !== setValues || $[219] !== t || $[220] !== uniqueValues || $[221] !== validateTag) {
-		t39 = (parts) => {
-			if (!parts.length) return "";
-			const present = new Set(uniqueValues);
-			const accepted = [];
-			const rejected = [];
-			for (const part of parts) {
-				let optionKey = findOptionKey(part);
-				let typed = part;
-				if (optionKey == null && normalizeTag) {
-					typed = normalizeTag(part).trim();
-					if (!typed) continue;
-					optionKey = findOptionKey(typed);
-				}
-				const nextValue = optionKey ?? typed;
-				if (optionKey != null && disabledKeySet.has(optionKey)) {
-					rejected.push({
-						text: part,
-						reason: "unavailable"
-					});
-					continue;
-				}
-				if (optionKey == null && hasOptions && !allowsCustomValue) {
-					rejected.push({
-						text: part,
-						reason: "unknown"
-					});
-					continue;
-				}
-				if (present.has(nextValue)) {
-					rejected.push({
-						text: part,
-						reason: "duplicate"
-					});
-					continue;
-				}
-				if (maxTags != null && present.size >= maxTags) {
+	const commitParts = useEvent((parts) => {
+		if (!parts.length) return "";
+		const present = new Set(uniqueValues);
+		const accepted = [];
+		const rejected = [];
+		for (const part of parts) {
+			let optionKey = findOptionKey(part);
+			let typed = part;
+			if (optionKey == null && normalizeTag) {
+				typed = normalizeTag(part).trim();
+				if (!typed) continue;
+				optionKey = findOptionKey(typed);
+			}
+			const nextValue = optionKey ?? typed;
+			if (optionKey != null && disabledKeySet.has(optionKey)) {
+				rejected.push({
+					text: part,
+					reason: "unavailable"
+				});
+				continue;
+			}
+			if (optionKey == null && hasOptions && !allowsCustomValue) {
+				rejected.push({
+					text: part,
+					reason: "unknown"
+				});
+				continue;
+			}
+			if (present.has(nextValue)) {
+				rejected.push({
+					text: part,
+					reason: "duplicate"
+				});
+				continue;
+			}
+			if (maxTags != null && present.size >= maxTags) {
+				rejected.push({
+					text: part,
+					reason: "limit"
+				});
+				continue;
+			}
+			if (optionKey == null && validateTag) {
+				const result = validateTag(nextValue);
+				if (result === false || typeof result === "string") {
 					rejected.push({
 						text: part,
-						reason: "limit"
+						reason: "invalid",
+						message: typeof result === "string" ? result : void 0
 					});
 					continue;
 				}
-				if (optionKey == null && validateTag) {
-					const result = validateTag(nextValue);
-					if (result === false || typeof result === "string") {
-						rejected.push({
-							text: part,
-							reason: "invalid",
-							message: typeof result === "string" ? result : void 0
-						});
-						continue;
-					}
-				}
-				present.add(nextValue);
-				accepted.push(nextValue);
-			}
-			const error = rejected.length ? rejectionMessage(rejected[0]) : null;
-			const messages = [];
-			if (accepted.length) {
-				rememberLabels(accepted);
-				setValues([...uniqueValues, ...accepted]);
-				messages.push(t("tagInput.added", "Added {{value}}", { value: formatList(accepted.map(getTagLabel)) }));
 			}
-			if (error && !hasFieldMessage) messages.push(error);
-			if (messages.length) announce(messages.join(" "));
-			setTagError(error);
-			return rejected.map(_temp6).join(joiner);
-		};
-		$[204] = allowsCustomValue;
-		$[205] = announce;
-		$[206] = disabledKeySet;
-		$[207] = findOptionKey;
-		$[208] = formatList;
-		$[209] = getTagLabel;
-		$[210] = hasFieldMessage;
-		$[211] = hasOptions;
-		$[212] = joiner;
-		$[213] = maxTags;
-		$[214] = normalizeTag;
-		$[215] = rejectionMessage;
-		$[216] = rememberLabels;
-		$[217] = setTagError;
-		$[218] = setValues;
-		$[219] = t;
-		$[220] = uniqueValues;
-		$[221] = validateTag;
-		$[222] = t39;
-	} else t39 = $[222];
-	const commitParts = useEvent(t39);
-	let t40;
-	if ($[223] !== commitParts || $[224] !== delimiters || $[225] !== draft || $[226] !== setDraft) {
-		t40 = () => {
+			present.add(nextValue);
+			accepted.push(nextValue);
+		}
+		const error = rejected.length ? rejectionMessage(rejected[0]) : null;
+		const messages = [];
+		if (accepted.length) {
+			rememberLabels(accepted);
+			setValues([...uniqueValues, ...accepted]);
+			messages.push(t("tagInput.added", "Added {{value}}", { value: formatList(accepted.map(getTagLabel)) }));
+		}
+		if (error && !hasFieldMessage) messages.push(error);
+		if (messages.length) announce(messages.join(" "));
+		setTagError(error);
+		return rejected.map(_temp5).join(joiner);
+	});
+	let t24;
+	if ($[131] !== commitParts || $[132] !== delimiters || $[133] !== draft || $[134] !== setDraft) {
+		t24 = () => {
 			setDraft(commitParts(splitTagText(draft, delimiters)));
 		};
-		$[223] = commitParts;
-		$[224] = delimiters;
-		$[225] = draft;
-		$[226] = setDraft;
-		$[227] = t40;
-	} else t40 = $[227];
-	const commitDraft = useEvent(t40);
-	let t41;
-	if ($[228] === Symbol.for("react.memo_cache_sentinel")) {
-		t41 = () => {
+		$[131] = commitParts;
+		$[132] = delimiters;
+		$[133] = draft;
+		$[134] = setDraft;
+		$[135] = t24;
+	} else t24 = $[135];
+	const commitDraft = useEvent(t24);
+	let t25;
+	if ($[136] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = () => {
 			const rows = tagListRef.current?.querySelectorAll("[role=\"row\"]:not([aria-disabled=\"true\"])");
 			rows?.[rows.length - 1]?.focus();
 		};
-		$[228] = t41;
-	} else t41 = $[228];
-	const focusLastTag = useEvent(t41);
-	let t42;
-	if ($[229] !== announce || $[230] !== formatList || $[231] !== getTagLabel || $[232] !== inputRef || $[233] !== isTagLocked || $[234] !== setTagError || $[235] !== setValues || $[236] !== t || $[237] !== uniqueValues) {
-		t42 = (requested) => {
-			const keys_2 = requested.filter((key_7) => !isTagLocked(key_7));
-			if (!keys_2.length) return;
-			const removed = new Set(keys_2);
-			const next_1 = uniqueValues.filter((value_1) => !removed.has(value_1));
-			if (!next_1.some((value_2) => !isTagLocked(value_2))) inputRef.current?.focus();
-			setValues(next_1);
-			setTagError(null);
-			announce(t("tagInput.removed", "Removed {{value}}", { value: formatList(keys_2.map(getTagLabel)) }));
-		};
-		$[229] = announce;
-		$[230] = formatList;
-		$[231] = getTagLabel;
-		$[232] = inputRef;
-		$[233] = isTagLocked;
-		$[234] = setTagError;
-		$[235] = setValues;
-		$[236] = t;
-		$[237] = uniqueValues;
-		$[238] = t42;
-	} else t42 = $[238];
-	const removeValues = useEvent(t42);
-	let t43;
-	if ($[239] !== commitParts || $[240] !== customValueKeys || $[241] !== isTagLocked || $[242] !== removeValues || $[243] !== setDraft || $[244] !== setTagError || $[245] !== uniqueValues) {
-		t43 = (key_8) => {
-			if (isTagLocked(key_8)) return;
-			setTagError(null);
-			if (uniqueValues.includes(key_8)) {
-				removeValues([key_8]);
-				setDraft("");
-				if (customValueKeys.includes(key_8)) setUnpickedCustomValues((prev_1) => prev_1.includes(key_8) ? prev_1 : [...prev_1, key_8]);
-			} else if (!commitParts([key_8])) setDraft("");
-		};
-		$[239] = commitParts;
-		$[240] = customValueKeys;
-		$[241] = isTagLocked;
-		$[242] = removeValues;
-		$[243] = setDraft;
-		$[244] = setTagError;
-		$[245] = uniqueValues;
-		$[246] = t43;
-	} else t43 = $[246];
-	const toggleOption = useEvent(t43);
-	let t44;
-	if ($[247] !== collection || $[248] !== inputRef || $[249] !== toggleOption || $[250] !== uniqueValues || $[251] !== visibleCustomKeys) {
-		t44 = (selection) => {
-			if (!Array.isArray(selection)) return;
-			const next_2 = new Set(selection.map(String));
-			const changed = [...[...next_2].filter((key_9) => !uniqueValues.includes(key_9)), ...uniqueValues.filter((value_3) => !next_2.has(value_3) && (collection.getItem(value_3) != null || visibleCustomKeys.includes(value_3)))];
-			changed.forEach(toggleOption);
-			const clicked = changed[changed.length - 1];
-			if (clicked != null) {
-				listStateRef.current?.selectionManager.setFocusedKey(clicked);
-				setActiveOption({
-					key: clicked,
-					term: "",
-					source: "user"
-				});
-			}
-			setTimeout(() => inputRef.current?.focus(), 0);
-		};
-		$[247] = collection;
-		$[248] = inputRef;
-		$[249] = toggleOption;
-		$[250] = uniqueValues;
-		$[251] = visibleCustomKeys;
-		$[252] = t44;
-	} else t44 = $[252];
-	const handlePopoverSelection = useEvent(t44);
+		$[136] = t25;
+	} else t25 = $[136];
+	const focusLastTag = useEvent(t25);
+	const removeValues = useEvent((requested) => {
+		const keys_0 = requested.filter((key_6) => !isTagLocked(key_6));
+		if (!keys_0.length) return;
+		const removed = new Set(keys_0);
+		const next_1 = uniqueValues.filter((value_1) => !removed.has(value_1));
+		if (!next_1.some((value_2) => !isTagLocked(value_2))) inputRef.current?.focus();
+		setValues(next_1);
+		setTagError(null);
+		announce(t("tagInput.removed", "Removed {{value}}", { value: formatList(keys_0.map(getTagLabel)) }));
+	});
+	const toggleOption = useEvent((key_7) => {
+		if (isTagLocked(key_7)) return;
+		setTagError(null);
+		if (uniqueValues.includes(key_7)) {
+			removeValues([key_7]);
+			setDraft("");
+			if (customValueKeys.includes(key_7)) setUnpickedCustomValues((prev_1) => prev_1.includes(key_7) ? prev_1 : [...prev_1, key_7]);
+		} else if (!commitParts([key_7])) setDraft("");
+	});
+	const handlePopoverSelection = useEvent((selection) => {
+		if (!Array.isArray(selection)) return;
+		const next_2 = new Set(selection.map(String));
+		const changed = [...[...next_2].filter((key_8) => !uniqueValues.includes(key_8)), ...uniqueValues.filter((value_3) => !next_2.has(value_3) && (collection.getItem(value_3) != null || visibleCustomKeys.includes(value_3)))];
+		changed.forEach(toggleOption);
+		const clicked = changed[changed.length - 1];
+		if (clicked != null) {
+			listStateRef.current?.selectionManager.setFocusedKey(clicked);
+			setActiveOption({
+				key: clicked,
+				term: "",
+				source: "user"
+			});
+		}
+		setTimeout(() => inputRef.current?.focus(), 0);
+	});
 	const isTabbingRef = useRef(false);
-	let t45;
-	if ($[253] !== activeOption || $[254] !== commitDraft || $[255] !== commitParts || $[256] !== delimiters || $[257] !== draft || $[258] !== focusLastTag || $[259] !== getTagLabel || $[260] !== hasOptions || $[261] !== hasResults || $[262] !== isInteractive || $[263] !== isTagLocked || $[264] !== joiner || $[265] !== moveVirtualFocus || $[266] !== onKeyDown || $[267] !== preferredOptionKey || $[268] !== rejectionMessage || $[269] !== setDraft || $[270] !== setTagError || $[271] !== shouldShowPopover || $[272] !== term || $[273] !== toggleOption || $[274] !== uniqueValues) {
-		t45 = (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") {
-				if (!hasOptions) return;
-				e.preventDefault();
-				if (!shouldShowPopover) {
-					if (!hasResults) setIsFilterActive(false);
-					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);
+	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") {
+			if (!hasOptions) return;
+			e.preventDefault();
+			if (!shouldShowPopover) {
+				if (!hasResults) setIsFilterActive(false);
+				setIsPopoverOpen(true);
 				return;
 			}
-			if (e.key === "Backspace" && !draft && uniqueValues.some((value_4) => !isTagLocked(value_4))) {
-				if (isComposingKey(e)) 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;
+			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();
-				if (e.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_10 = String(targetKey);
-					if (term && uniqueValues.includes(key_10) && !(isCurrent && activeOption.source === "user")) {
-						setTagError(rejectionMessage({
-							text: getTagLabel(key_10),
-							reason: "duplicate"
-						}));
-						return;
-					}
-					toggleOption(key_10);
+				const key_9 = String(targetKey);
+				if (term && uniqueValues.includes(key_9) && !(isCurrent && activeOption.source === "user")) {
+					setTagError(rejectionMessage({
+						text: getTagLabel(key_9),
+						reason: "duplicate"
+					}));
 					return;
 				}
-				e.preventDefault();
-				if (term) commitDraft();
+				toggleOption(key_9);
 				return;
 			}
-			if (delimiters.includes(e.key)) {
-				if (isComposingKey(e)) return;
+			e.preventDefault();
+			if (term) commitDraft();
+			return;
+		}
+		if (delimiters.includes(e.key)) {
+			if (isComposingKey(e)) return;
+			e.preventDefault();
+			const el = e.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") {
+			if (shouldShowPopover) {
 				e.preventDefault();
-				const el = e.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") {
-				if (shouldShowPopover) {
-					e.preventDefault();
-					e.stopPropagation();
-					setIsPopoverOpen(false);
-				} else if (draft) {
-					e.preventDefault();
-					e.stopPropagation();
-					setDraft("");
-					setTagError(null);
-					setIsPopoverOpen(false);
-				}
-			}
-		};
-		$[253] = activeOption;
-		$[254] = commitDraft;
-		$[255] = commitParts;
-		$[256] = delimiters;
-		$[257] = draft;
-		$[258] = focusLastTag;
-		$[259] = getTagLabel;
-		$[260] = hasOptions;
-		$[261] = hasResults;
-		$[262] = isInteractive;
-		$[263] = isTagLocked;
-		$[264] = joiner;
-		$[265] = moveVirtualFocus;
-		$[266] = onKeyDown;
-		$[267] = preferredOptionKey;
-		$[268] = rejectionMessage;
-		$[269] = setDraft;
-		$[270] = setTagError;
-		$[271] = shouldShowPopover;
-		$[272] = term;
-		$[273] = toggleOption;
-		$[274] = uniqueValues;
-		$[275] = t45;
-	} else t45 = $[275];
-	const handleKeyDown = useEvent(t45);
-	let t46;
-	if ($[276] !== commitParts || $[277] !== delimiters || $[278] !== hasOptions || $[279] !== joiner || $[280] !== popoverTrigger || $[281] !== rememberLabels || $[282] !== setDraft || $[283] !== setTagError || $[284] !== uniqueValues) {
-		t46 = (next_3) => {
-			setTagError(null);
-			rememberLabels(uniqueValues);
-			const pattern = delimiterPattern(delimiters);
-			const parts_0 = pattern ? next_3.split(pattern) : [next_3];
-			let nextDraft = next_3;
-			if (parts_0.length > 1) {
-				const rest = (parts_0.pop() ?? "").trimStart();
-				nextDraft = [commitParts(parts_0.map(_temp7).filter(Boolean)), rest].filter(Boolean).join(joiner);
+				e.stopPropagation();
+				setIsPopoverOpen(false);
+			} else if (draft) {
+				e.preventDefault();
+				e.stopPropagation();
+				setDraft("");
+				setTagError(null);
+				setIsPopoverOpen(false);
 			}
-			setDraft(nextDraft);
-			if (hasOptions && popoverTrigger !== "manual" && nextDraft.trim()) setIsPopoverOpen(true);
-		};
-		$[276] = commitParts;
-		$[277] = delimiters;
-		$[278] = hasOptions;
-		$[279] = joiner;
-		$[280] = popoverTrigger;
-		$[281] = rememberLabels;
-		$[282] = setDraft;
-		$[283] = setTagError;
-		$[284] = uniqueValues;
-		$[285] = t46;
-	} else t46 = $[285];
-	const handleInputChange = useEvent(t46);
-	let t47;
-	if ($[286] !== commitParts || $[287] !== delimiters || $[288] !== draft || $[289] !== isInteractive || $[290] !== setDraft || $[291] !== setTagError) {
-		t47 = (e_0) => {
+		}
+	});
+	const handleInputChange = useEvent((next_3) => {
+		setTagError(null);
+		rememberLabels(uniqueValues);
+		const pattern = delimiterPattern(delimiters);
+		const parts_0 = pattern ? next_3.split(pattern) : [next_3];
+		let nextDraft = next_3;
+		if (parts_0.length > 1) {
+			const rest = (parts_0.pop() ?? "").trimStart();
+			nextDraft = [commitParts(parts_0.map(_temp6).filter(Boolean)), rest].filter(Boolean).join(joiner);
+		}
+		setDraft(nextDraft);
+		if (hasOptions && popoverTrigger !== "manual" && nextDraft.trim()) setIsPopoverOpen(true);
+	});
+	let t26;
+	if ($[137] !== commitParts || $[138] !== delimiters || $[139] !== draft || $[140] !== isInteractive || $[141] !== setDraft || $[142] !== setTagError) {
+		t26 = (e_0) => {
 			if (!isInteractive) return;
 			const pasted = e_0.clipboardData.getData("text");
 			if (!pasted || splitTagText(pasted, delimiters).length < 2) return;
@@ -1262,71 +960,73 @@ function TagInput(props, ref) {
 			setTagError(null);
 			setDraft(commitParts(splitTagText(`${draft.slice(0, start_0)}\n${pasted}\n${draft.slice(end_0)}`, delimiters)));
 		};
-		$[286] = commitParts;
-		$[287] = delimiters;
-		$[288] = draft;
-		$[289] = isInteractive;
-		$[290] = setDraft;
-		$[291] = setTagError;
-		$[292] = t47;
-	} else t47 = $[292];
-	const handlePaste = useEvent(t47);
-	let t48;
-	if ($[293] !== allowsCustomValue || $[294] !== commitDraft || $[295] !== findOptionKey || $[296] !== hasOptions || $[297] !== isInteractive || $[298] !== setDraft || $[299] !== setTagError || $[300] !== shouldCommitOnBlur || $[301] !== term) {
-		t48 = () => {
+		$[137] = commitParts;
+		$[138] = delimiters;
+		$[139] = draft;
+		$[140] = isInteractive;
+		$[141] = setDraft;
+		$[142] = setTagError;
+		$[143] = t26;
+	} else t26 = $[143];
+	const handlePaste = useEvent(t26);
+	let t27;
+	if ($[144] !== allowsCustomValue || $[145] !== commitDraft || $[146] !== findOptionKey || $[147] !== hasOptions || $[148] !== isInteractive || $[149] !== setDraft || $[150] !== setTagError || $[151] !== shouldCommitOnBlur || $[152] !== term) {
+		t27 = () => {
 			if (!term || !shouldCommitOnBlur || !isInteractive) return;
 			if (hasOptions && !allowsCustomValue && findOptionKey(term) == null) {
 				setDraft("");
 				setTagError(null);
 			} else commitDraft();
 		};
-		$[293] = allowsCustomValue;
-		$[294] = commitDraft;
-		$[295] = findOptionKey;
-		$[296] = hasOptions;
-		$[297] = isInteractive;
-		$[298] = setDraft;
-		$[299] = setTagError;
-		$[300] = shouldCommitOnBlur;
-		$[301] = term;
-		$[302] = t48;
-	} else t48 = $[302];
-	const settleDraft = useEvent(t48);
-	let t49;
-	if ($[303] !== onBlur || $[304] !== settleDraft) {
-		t49 = () => {
+		$[144] = allowsCustomValue;
+		$[145] = commitDraft;
+		$[146] = findOptionKey;
+		$[147] = hasOptions;
+		$[148] = isInteractive;
+		$[149] = setDraft;
+		$[150] = setTagError;
+		$[151] = shouldCommitOnBlur;
+		$[152] = term;
+		$[153] = t27;
+	} else t27 = $[153];
+	const settleDraft = useEvent(t27);
+	let t28;
+	if ($[154] !== onBlur || $[155] !== setIsPopoverOpen || $[156] !== setUnpickedCustomValues || $[157] !== settleDraft) {
+		t28 = () => {
 			setIsPopoverOpen(false);
 			setUnpickedCustomValues([]);
 			settleDraft();
 			onBlur?.();
 		};
-		$[303] = onBlur;
-		$[304] = settleDraft;
-		$[305] = t49;
-	} else t49 = $[305];
-	const handleCompositeBlur = useEvent(t49);
-	const t50 = rootRef;
-	const t51 = popoverRef;
-	let t52;
-	if ($[306] !== handleCompositeBlur || $[307] !== isDisabled || $[308] !== onFocus || $[309] !== t50 || $[310] !== t51) {
-		t52 = {
-			wrapperRef: t50,
-			popoverRef: t51,
+		$[154] = onBlur;
+		$[155] = setIsPopoverOpen;
+		$[156] = setUnpickedCustomValues;
+		$[157] = settleDraft;
+		$[158] = t28;
+	} else t28 = $[158];
+	const handleCompositeBlur = useEvent(t28);
+	const t29 = rootRef;
+	const t30 = popoverRef;
+	let t31;
+	if ($[159] !== handleCompositeBlur || $[160] !== isDisabled || $[161] !== onFocus || $[162] !== t29 || $[163] !== t30) {
+		t31 = {
+			wrapperRef: t29,
+			popoverRef: t30,
 			onFocus,
 			onBlur: handleCompositeBlur,
 			isDisabled
 		};
-		$[306] = handleCompositeBlur;
-		$[307] = isDisabled;
-		$[308] = onFocus;
-		$[309] = t50;
-		$[310] = t51;
-		$[311] = t52;
-	} else t52 = $[311];
-	const { compositeFocusProps } = useCompositeFocus(t52);
-	let t53;
-	if ($[312] !== rootRef || $[313] !== settleDraft) {
-		t53 = (e_1) => {
+		$[159] = handleCompositeBlur;
+		$[160] = isDisabled;
+		$[161] = onFocus;
+		$[162] = t29;
+		$[163] = t30;
+		$[164] = t31;
+	} else t31 = $[164];
+	const { compositeFocusProps } = useCompositeFocus(t31);
+	let t32;
+	if ($[165] !== rootRef || $[166] !== setIsPopoverOpen || $[167] !== settleDraft) {
+		t32 = (e_1) => {
 			const isTabbing = isTabbingRef.current;
 			const next_4 = e_1.relatedTarget;
 			isTabbingRef.current = false;
@@ -1334,68 +1034,44 @@ function TagInput(props, ref) {
 			setIsPopoverOpen(false);
 			settleDraft();
 		};
-		$[312] = rootRef;
-		$[313] = settleDraft;
-		$[314] = t53;
-	} else t53 = $[314];
-	const handleInputBlur = useEvent(t53);
-	let t54;
-	if ($[315] !== hasOptions || $[316] !== isInteractive || $[317] !== popoverTrigger) {
-		t54 = () => {
+		$[165] = rootRef;
+		$[166] = setIsPopoverOpen;
+		$[167] = settleDraft;
+		$[168] = t32;
+	} else t32 = $[168];
+	const handleInputBlur = useEvent(t32);
+	let t33;
+	if ($[169] !== hasOptions || $[170] !== isInteractive || $[171] !== popoverTrigger || $[172] !== setIsPopoverOpen) {
+		t33 = () => {
 			if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
 		};
-		$[315] = hasOptions;
-		$[316] = isInteractive;
-		$[317] = popoverTrigger;
-		$[318] = t54;
-	} else t54 = $[318];
-	const handleInputFocus = useEvent(t54);
-	let t55;
-	if ($[319] !== collection || $[320] !== getOptionLabel || $[321] !== knownLabels || $[322] !== t || $[323] !== tagProps || $[324] !== uniqueValues || $[325] !== validateTag) {
-		t55 = uniqueValues.map((value_5) => {
-			const ownProps = tagProps?.(value_5);
-			const result_0 = !(collection.getItem(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,
-				tagProps: ownProps,
-				isDisabled: !!ownProps?.isDisabled
-			};
-		});
-		$[319] = collection;
-		$[320] = getOptionLabel;
-		$[321] = knownLabels;
-		$[322] = t;
-		$[323] = tagProps;
-		$[324] = uniqueValues;
-		$[325] = validateTag;
-		$[326] = t55;
-	} else t55 = $[326];
-	const tags = t55;
+		$[169] = hasOptions;
+		$[170] = isInteractive;
+		$[171] = popoverTrigger;
+		$[172] = setIsPopoverOpen;
+		$[173] = t33;
+	} else t33 = $[173];
+	const handleInputFocus = useEvent(t33);
+	const tags = uniqueValues.map((value_5) => {
+		const ownProps = tagProps?.(value_5);
+		const result_0 = !(collection.getItem(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,
+			tagProps: ownProps,
+			isDisabled: !!ownProps?.isDisabled
+		};
+	});
 	const effectiveIsInvalid = tagError ? true : isInvalid;
-	const hasRemovableTags = tags.some(_temp8);
+	const hasRemovableTags = tags.some(_temp7);
 	const hasBackspaceHint = isInteractive && hasRemovableTags;
-	let t56;
-	if ($[327] !== tags) {
-		t56 = tags.filter(_temp9).map(_temp0);
-		$[327] = tags;
-		$[328] = t56;
-	} else t56 = $[328];
-	const locked = t56;
-	let t57;
-	if ($[329] !== disabledKeySet || $[330] !== disabledKeys || $[331] !== locked) {
-		t57 = locked.length ? [...disabledKeySet, ...locked] : disabledKeys;
-		$[329] = disabledKeySet;
-		$[330] = disabledKeys;
-		$[331] = locked;
-		$[332] = t57;
-	} else t57 = $[332];
-	const optionDisabledKeys = t57;
-	let t58;
-	if ($[333] !== autoFocus || $[334] !== draft || $[335] !== effectiveIsInvalid || $[336] !== handleInputChange || $[337] !== id || $[338] !== isDisabled || $[339] !== isReadOnly || $[340] !== isRequired || $[341] !== label || $[342] !== otherProps || $[343] !== placeholder) {
-		t58 = {
+	const lockedKeys = tags.filter(_temp8).map(_temp9);
+	const optionDisabledKeys = lockedKeys.length ? [...disabledKeySet, ...lockedKeys] : disabledKeys;
+	let t34;
+	if ($[174] !== autoFocus || $[175] !== draft || $[176] !== effectiveIsInvalid || $[177] !== handleInputChange || $[178] !== id || $[179] !== isDisabled || $[180] !== isReadOnly || $[181] !== isRequired || $[182] !== label || $[183] !== otherProps || $[184] !== placeholder) {
+		t34 = {
 			...otherProps,
 			id,
 			label,
@@ -1408,82 +1084,60 @@ function TagInput(props, ref) {
 			autoFocus,
 			onChange: handleInputChange
 		};
-		$[333] = autoFocus;
-		$[334] = draft;
-		$[335] = effectiveIsInvalid;
-		$[336] = handleInputChange;
-		$[337] = id;
-		$[338] = isDisabled;
-		$[339] = isReadOnly;
-		$[340] = isRequired;
-		$[341] = label;
-		$[342] = otherProps;
-		$[343] = placeholder;
-		$[344] = t58;
-	} else t58 = $[344];
-	const { labelProps, inputProps } = useTextField(t58, inputRef);
+		$[174] = autoFocus;
+		$[175] = draft;
+		$[176] = effectiveIsInvalid;
+		$[177] = handleInputChange;
+		$[178] = id;
+		$[179] = isDisabled;
+		$[180] = isReadOnly;
+		$[181] = isRequired;
+		$[182] = label;
+		$[183] = otherProps;
+		$[184] = placeholder;
+		$[185] = t34;
+	} else t34 = $[185];
+	const { labelProps, inputProps } = useTextField(t34, inputRef);
 	const labelId = label ? labelProps.id : void 0;
-	let describedBy;
-	if ($[345] !== hasBackspaceHint || $[346] !== hintId || $[347] !== inputProps || $[348] !== summaryId || $[349] !== tags.length) {
-		describedBy = [];
-		if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
-		if (tags.length) describedBy.push(summaryId);
-		if (hasBackspaceHint) describedBy.push(hintId);
-		$[345] = hasBackspaceHint;
-		$[346] = hintId;
-		$[347] = inputProps;
-		$[348] = summaryId;
-		$[349] = tags.length;
-		$[350] = describedBy;
-	} else describedBy = $[350];
-	let t59;
-	if ($[351] !== activeOptionKey || $[352] !== autoComplete || $[353] !== describedBy || $[354] !== handleInputBlur || $[355] !== handleInputFocus || $[356] !== handleKeyDown || $[357] !== handlePaste || $[358] !== hasOptions || $[359] !== inputProps || $[360] !== shouldShowPopover) {
-		t59 = mergeProps$1(inputProps, {
-			onKeyDown: handleKeyDown,
-			onPaste: handlePaste,
-			onBlur: handleInputBlur,
-			onFocus: handleInputFocus,
-			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);
-		$[351] = activeOptionKey;
-		$[352] = autoComplete;
-		$[353] = describedBy;
-		$[354] = handleInputBlur;
-		$[355] = handleInputFocus;
-		$[356] = handleKeyDown;
-		$[357] = handlePaste;
-		$[358] = hasOptions;
-		$[359] = inputProps;
-		$[360] = shouldShowPopover;
-		$[361] = t59;
-	} else t59 = $[361];
-	const tagInputProps = t59;
-	let t60;
-	if ($[362] !== hasResults || $[363] !== inputRef || $[364] !== shouldShowPopover) {
-		t60 = () => {
+	const describedBy = [];
+	if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
+	if (tags.length) describedBy.push(summaryId);
+	if (hasBackspaceHint) describedBy.push(hintId);
+	const tagInputProps = mergeProps$1(inputProps, {
+		onKeyDown: handleKeyDown,
+		onPaste: handlePaste,
+		onBlur: handleInputBlur,
+		onFocus: handleInputFocus,
+		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 t35;
+	if ($[186] !== hasResults || $[187] !== inputRef || $[188] !== setIsFilterActive || $[189] !== setIsPopoverOpen || $[190] !== shouldShowPopover) {
+		t35 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[362] = hasResults;
-		$[363] = inputRef;
-		$[364] = shouldShowPopover;
-		$[365] = t60;
-	} else t60 = $[365];
-	const handleTriggerPress = useEvent(t60);
-	let t61;
-	if ($[366] !== handleTriggerPress || $[367] !== hasOptions || $[368] !== hideTrigger || $[369] !== isInteractive || $[370] !== labelId || $[371] !== shouldShowPopover || $[372] !== size || $[373] !== t || $[374] !== triggerId || $[375] !== triggerStyles) {
-		t61 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
+		$[186] = hasResults;
+		$[187] = inputRef;
+		$[188] = setIsFilterActive;
+		$[189] = setIsPopoverOpen;
+		$[190] = shouldShowPopover;
+		$[191] = t35;
+	} else t35 = $[191];
+	const handleTriggerPress = useEvent(t35);
+	let t36;
+	if ($[192] !== handleTriggerPress || $[193] !== hasOptions || $[194] !== hideTrigger || $[195] !== isInteractive || $[196] !== labelId || $[197] !== shouldShowPopover || $[198] !== size || $[199] !== t || $[200] !== triggerId || $[201] !== triggerStyles) {
+		t36 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
 			"data-popover-trigger": true,
 			id: triggerId,
 			qa: "TagInputTrigger",
@@ -1499,39 +1153,40 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${triggerId} ${labelId}` : void 0,
 			onPress: handleTriggerPress
 		}) : null;
-		$[366] = handleTriggerPress;
-		$[367] = hasOptions;
-		$[368] = hideTrigger;
-		$[369] = isInteractive;
-		$[370] = labelId;
-		$[371] = shouldShowPopover;
-		$[372] = size;
-		$[373] = t;
-		$[374] = triggerId;
-		$[375] = triggerStyles;
-		$[376] = t61;
-	} else t61 = $[376];
-	const trigger = t61;
-	let t62;
-	if ($[377] !== inputRef || $[378] !== onClear || $[379] !== setDraft || $[380] !== setTagError) {
-		t62 = () => {
+		$[192] = handleTriggerPress;
+		$[193] = hasOptions;
+		$[194] = hideTrigger;
+		$[195] = isInteractive;
+		$[196] = labelId;
+		$[197] = shouldShowPopover;
+		$[198] = size;
+		$[199] = t;
+		$[200] = triggerId;
+		$[201] = triggerStyles;
+		$[202] = t36;
+	} else t36 = $[202];
+	const trigger = t36;
+	let t37;
+	if ($[203] !== inputRef || $[204] !== onClear || $[205] !== setDraft || $[206] !== setIsPopoverOpen || $[207] !== setTagError) {
+		t37 = () => {
 			inputRef.current?.focus();
 			setDraft("");
 			setTagError(null);
 			setIsPopoverOpen(false);
 			onClear?.();
 		};
-		$[377] = inputRef;
-		$[378] = onClear;
-		$[379] = setDraft;
-		$[380] = setTagError;
-		$[381] = t62;
-	} else t62 = $[381];
-	const clearText = useEvent(t62);
+		$[203] = inputRef;
+		$[204] = onClear;
+		$[205] = setDraft;
+		$[206] = setIsPopoverOpen;
+		$[207] = setTagError;
+		$[208] = t37;
+	} else t37 = $[208];
+	const clearText = useEvent(t37);
 	const canClear = !!isClearable && isInteractive && draft !== "";
-	let t63;
-	if ($[382] !== canClear || $[383] !== clearId || $[384] !== clearText || $[385] !== labelId || $[386] !== size || $[387] !== t) {
-		t63 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
+	let t38;
+	if ($[209] !== canClear || $[210] !== clearId || $[211] !== clearText || $[212] !== labelId || $[213] !== size || $[214] !== t) {
+		t38 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
 			id: clearId,
 			qa: "TagInputClearButton",
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -1541,29 +1196,30 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${clearId} ${labelId}` : void 0,
 			onPress: clearText
 		}) : null;
-		$[382] = canClear;
-		$[383] = clearId;
-		$[384] = clearText;
-		$[385] = labelId;
-		$[386] = size;
-		$[387] = t;
-		$[388] = t63;
-	} else t63 = $[388];
-	const clearButton = t63;
+		$[209] = canClear;
+		$[210] = clearId;
+		$[211] = clearText;
+		$[212] = labelId;
+		$[213] = size;
+		$[214] = t;
+		$[215] = t38;
+	} else t38 = $[215];
+	const clearButton = t38;
 	const hasActions = clearButton != null || trigger != null;
-	const t64 = qa || "TagInput";
-	let t65;
-	if ($[389] !== clearButton || $[390] !== hasActions || $[391] !== trigger) {
-		t65 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[389] = clearButton;
-		$[390] = hasActions;
-		$[391] = trigger;
-		$[392] = t65;
-	} else t65 = $[392];
-	let t66;
-	if ($[393] !== autoFocus || $[394] !== effectiveIsInvalid || $[395] !== icon || $[396] !== inputRef || $[397] !== inputStyles || $[398] !== isDisabled || $[399] !== isLoading || $[400] !== isValid || $[401] !== mods || $[402] !== prefix || $[403] !== size || $[404] !== suffix || $[405] !== suffixPosition || $[406] !== t64 || $[407] !== t65 || $[408] !== tagInputProps || $[409] !== wrapperRef || $[410] !== wrapperStyles) {
-		t66 = /* @__PURE__ */ jsx(TextInputBase, {
-			qa: t64,
+	const T0 = TagInputElement;
+	const t39 = qa || "TagInput";
+	let t40;
+	if ($[216] !== clearButton || $[217] !== hasActions || $[218] !== trigger) {
+		t40 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
+		$[216] = clearButton;
+		$[217] = hasActions;
+		$[218] = trigger;
+		$[219] = t40;
+	} else t40 = $[219];
+	let t41;
+	if ($[220] !== autoFocus || $[221] !== effectiveIsInvalid || $[222] !== icon || $[223] !== inputRef || $[224] !== inputStyles || $[225] !== isDisabled || $[226] !== isLoading || $[227] !== isValid || $[228] !== mods || $[229] !== prefix || $[230] !== size || $[231] !== suffix || $[232] !== suffixPosition || $[233] !== t39 || $[234] !== t40 || $[235] !== tagInputProps || $[236] !== wrapperRef || $[237] !== wrapperStyles) {
+		t41 = /* @__PURE__ */ jsx(TextInputBase, {
+			qa: t39,
 			inputRef,
 			wrapperRef,
 			inputProps: tagInputProps,
@@ -1572,7 +1228,7 @@ function TagInput(props, ref) {
 			prefix,
 			suffix,
 			suffixPosition,
-			actions: t65,
+			actions: t40,
 			size,
 			autoFocus,
 			isDisabled,
@@ -1582,171 +1238,119 @@ function TagInput(props, ref) {
 			styles: wrapperStyles,
 			inputStyles
 		});
-		$[393] = autoFocus;
-		$[394] = effectiveIsInvalid;
-		$[395] = icon;
-		$[396] = inputRef;
-		$[397] = inputStyles;
-		$[398] = isDisabled;
-		$[399] = isLoading;
-		$[400] = isValid;
-		$[401] = mods;
-		$[402] = prefix;
-		$[403] = size;
-		$[404] = suffix;
-		$[405] = suffixPosition;
-		$[406] = t64;
-		$[407] = t65;
-		$[408] = tagInputProps;
-		$[409] = wrapperRef;
-		$[410] = wrapperStyles;
-		$[411] = t66;
-	} else t66 = $[411];
-	let t67;
-	if ($[412] !== inputRef || $[413] !== isDisabled || $[414] !== isReadOnly || $[415] !== labelId || $[416] !== removeValues || $[417] !== size || $[418] !== t || $[419] !== tagListId || $[420] !== tagListStyles || $[421] !== tagStyles || $[422] !== tags) {
-		t67 = tags.length ? /* @__PURE__ */ jsx(TagList, {
-			id: tagListId,
-			listRef: tagListRef,
-			inputRef,
-			"aria-label": t("tagInput.selectedValues", "Selected values"),
-			"aria-labelledby": labelId,
-			tags,
-			size: TAG_SIZES[size] ?? "xsmall",
-			isDisabled,
-			isReadOnly,
-			styles: tagListStyles,
-			tagStyles,
-			onRemove: removeValues
-		}) : null;
-		$[412] = inputRef;
-		$[413] = isDisabled;
-		$[414] = isReadOnly;
-		$[415] = labelId;
-		$[416] = removeValues;
-		$[417] = size;
-		$[418] = t;
-		$[419] = tagListId;
-		$[420] = tagListStyles;
-		$[421] = tagStyles;
-		$[422] = tags;
-		$[423] = t67;
-	} else t67 = $[423];
-	let t68;
-	if ($[424] !== formatList || $[425] !== t || $[426] !== tags) {
-		t68 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp1)) }) : null;
-		$[424] = formatList;
-		$[425] = t;
-		$[426] = tags;
-		$[427] = t68;
-	} else t68 = $[427];
-	let t69;
-	if ($[428] !== summaryId || $[429] !== t68) {
-		t69 = /* @__PURE__ */ jsx("span", {
-			hidden: true,
+		$[220] = autoFocus;
+		$[221] = effectiveIsInvalid;
+		$[222] = icon;
+		$[223] = inputRef;
+		$[224] = inputStyles;
+		$[225] = isDisabled;
+		$[226] = isLoading;
+		$[227] = isValid;
+		$[228] = mods;
+		$[229] = prefix;
+		$[230] = size;
+		$[231] = suffix;
+		$[232] = suffixPosition;
+		$[233] = t39;
+		$[234] = t40;
+		$[235] = tagInputProps;
+		$[236] = wrapperRef;
+		$[237] = wrapperStyles;
+		$[238] = t41;
+	} else t41 = $[238];
+	const t42 = tags.length ? /* @__PURE__ */ jsx(TagList, {
+		id: tagListId,
+		listRef: tagListRef,
+		inputRef,
+		"aria-label": t("tagInput.selectedValues", "Selected values"),
+		"aria-labelledby": labelId,
+		tags,
+		size: TAG_SIZES[size] ?? "xsmall",
+		isDisabled,
+		isReadOnly,
+		styles: tagListStyles,
+		tagStyles,
+		onRemove: removeValues
+	}) : null;
+	const t43 = true;
+	const t44 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp0)) }) : null;
+	let t45;
+	if ($[239] !== summaryId || $[240] !== t44) {
+		t45 = /* @__PURE__ */ jsx("span", {
+			hidden: t43,
 			id: summaryId,
-			children: t68
+			children: t44
 		});
-		$[428] = summaryId;
-		$[429] = t68;
-		$[430] = t69;
-	} else t69 = $[430];
-	let t70;
-	if ($[431] !== hasBackspaceHint || $[432] !== t) {
-		t70 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[431] = hasBackspaceHint;
-		$[432] = t;
-		$[433] = t70;
-	} else t70 = $[433];
-	let t71;
-	if ($[434] !== hintId || $[435] !== t70) {
-		t71 = /* @__PURE__ */ jsx("span", {
+		$[239] = summaryId;
+		$[240] = t44;
+		$[241] = t45;
+	} else t45 = $[241];
+	let t46;
+	if ($[242] !== hasBackspaceHint || $[243] !== t) {
+		t46 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
+		$[242] = hasBackspaceHint;
+		$[243] = t;
+		$[244] = t46;
+	} else t46 = $[244];
+	let t47;
+	if ($[245] !== hintId || $[246] !== t46) {
+		t47 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
-			children: t70
+			children: t46
 		});
-		$[434] = hintId;
-		$[435] = t70;
-		$[436] = t71;
-	} else t71 = $[436];
-	let t72;
-	if ($[437] !== announcement.id || $[438] !== announcement.text) {
-		t72 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		$[245] = hintId;
+		$[246] = t46;
+		$[247] = t47;
+	} else t47 = $[247];
+	let t48;
+	if ($[248] !== announcement.id || $[249] !== announcement.text) {
+		t48 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[437] = announcement.id;
-		$[438] = announcement.text;
-		$[439] = t72;
-	} else t72 = $[439];
-	let t73;
-	if ($[440] !== compositeFocusProps || $[441] !== containerPadding || $[442] !== direction || $[443] !== handlePopoverSelection || $[444] !== hasOptions || $[445] !== headingStyles || $[446] !== isDisabled || $[447] !== isFilterActive || $[448] !== label || $[449] !== listBoxRef || $[450] !== listBoxStyles || $[451] !== optionDisabledKeys || $[452] !== optionFilterFn || $[453] !== optionStyles || $[454] !== overlayOffset || $[455] !== overlayStyles || $[456] !== popoverChildren || $[457] !== popoverMinWidth || $[458] !== popoverRef || $[459] !== props || $[460] !== sectionStyles || $[461] !== shouldFlip || $[462] !== shouldShowPopover || $[463] !== size || $[464] !== term || $[465] !== uniqueValues || $[466] !== wrapperRef) {
-		t73 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
-			isOpen: shouldShowPopover,
-			triggerRef: wrapperRef,
-			popoverRef,
-			listBoxRef,
-			direction,
-			shouldFlip,
-			overlayOffset,
-			containerPadding,
-			comboBoxWidth: popoverMinWidth,
-			listBoxId,
-			overlayStyles,
-			listBoxStyles,
-			optionStyles,
-			optionHighlight: isFilterActive ? term : void 0,
-			sectionStyles,
-			headingStyles,
-			selectionMode: "multiple",
-			selectedKeys: uniqueValues,
-			isCheckable: true,
-			shouldCloseOnTriggerInteraction: false,
-			isDisabled,
-			disabledKeys: optionDisabledKeys,
-			listStateRef,
-			label,
-			ariaLabel: props["aria-label"],
-			compositeFocusProps,
-			filter: optionFilterFn,
-			size,
-			onSelectionChange: handlePopoverSelection,
-			onClose: () => setIsPopoverOpen(false),
-			children: popoverChildren
-		}) : null;
-		$[440] = compositeFocusProps;
-		$[441] = containerPadding;
-		$[442] = direction;
-		$[443] = handlePopoverSelection;
-		$[444] = hasOptions;
-		$[445] = headingStyles;
-		$[446] = isDisabled;
-		$[447] = isFilterActive;
-		$[448] = label;
-		$[449] = listBoxRef;
-		$[450] = listBoxStyles;
-		$[451] = optionDisabledKeys;
-		$[452] = optionFilterFn;
-		$[453] = optionStyles;
-		$[454] = overlayOffset;
-		$[455] = overlayStyles;
-		$[456] = popoverChildren;
-		$[457] = popoverMinWidth;
-		$[458] = popoverRef;
-		$[459] = props;
-		$[460] = sectionStyles;
-		$[461] = shouldFlip;
-		$[462] = shouldShowPopover;
-		$[463] = size;
-		$[464] = term;
-		$[465] = uniqueValues;
-		$[466] = wrapperRef;
-		$[467] = t73;
-	} else t73 = $[467];
-	let t74;
-	if ($[468] !== className || $[469] !== compositeFocusProps || $[470] !== qaVal || $[471] !== rootRef || $[472] !== style || $[473] !== styles || $[474] !== t66 || $[475] !== t67 || $[476] !== t69 || $[477] !== t71 || $[478] !== t72 || $[479] !== t73) {
-		t74 = /* @__PURE__ */ jsxs(TagInputElement, {
+		$[248] = announcement.id;
+		$[249] = announcement.text;
+		$[250] = t48;
+	} else t48 = $[250];
+	const t49 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
+		isOpen: shouldShowPopover,
+		triggerRef: wrapperRef,
+		popoverRef,
+		listBoxRef,
+		direction,
+		shouldFlip,
+		overlayOffset,
+		containerPadding,
+		comboBoxWidth: popoverMinWidth,
+		listBoxId,
+		overlayStyles,
+		listBoxStyles,
+		optionStyles,
+		optionHighlight: isFilterActive ? term : void 0,
+		sectionStyles,
+		headingStyles,
+		selectionMode: "multiple",
+		selectedKeys: uniqueValues,
+		isCheckable: true,
+		shouldCloseOnTriggerInteraction: false,
+		isDisabled,
+		disabledKeys: optionDisabledKeys,
+		listStateRef,
+		label,
+		ariaLabel: props["aria-label"],
+		compositeFocusProps,
+		filter: optionFilterFn,
+		size,
+		onSelectionChange: handlePopoverSelection,
+		onClose: () => setIsPopoverOpen(false),
+		children: popoverChildren
+	}) : null;
+	let t50;
+	if ($[251] !== T0 || $[252] !== className || $[253] !== compositeFocusProps || $[254] !== qaVal || $[255] !== rootRef || $[256] !== style || $[257] !== styles || $[258] !== t41 || $[259] !== t42 || $[260] !== t45 || $[261] !== t47 || $[262] !== t48 || $[263] !== t49) {
+		t50 = /* @__PURE__ */ jsxs(T0, {
 			ref: rootRef,
 			className,
 			style,
@@ -1754,43 +1358,44 @@ function TagInput(props, ref) {
 			styles,
 			...compositeFocusProps,
 			children: [
-				t66,
-				t67,
-				t69,
-				t71,
-				t72,
-				t73
+				t41,
+				t42,
+				t45,
+				t47,
+				t48,
+				t49
 			]
 		});
-		$[468] = className;
-		$[469] = compositeFocusProps;
-		$[470] = qaVal;
-		$[471] = rootRef;
-		$[472] = style;
-		$[473] = styles;
-		$[474] = t66;
-		$[475] = t67;
-		$[476] = t69;
-		$[477] = t71;
-		$[478] = t72;
-		$[479] = t73;
-		$[480] = t74;
-	} else t74 = $[480];
-	const tagInputField = t74;
+		$[251] = T0;
+		$[252] = className;
+		$[253] = compositeFocusProps;
+		$[254] = qaVal;
+		$[255] = rootRef;
+		$[256] = style;
+		$[257] = styles;
+		$[258] = t41;
+		$[259] = t42;
+		$[260] = t45;
+		$[261] = t47;
+		$[262] = t48;
+		$[263] = t49;
+		$[264] = t50;
+	} else t50 = $[264];
+	const tagInputField = t50;
 	const { children: _children, ...fieldProps } = props;
 	const fieldRef = useCombinedRefs();
-	let t75;
-	if ($[481] !== message || $[482] !== tagError) {
-		t75 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[481] = message;
-		$[482] = tagError;
-		$[483] = t75;
-	} else t75 = $[483];
+	let t51;
+	if ($[265] !== message || $[266] !== tagError) {
+		t51 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
+		$[265] = message;
+		$[266] = tagError;
+		$[267] = t51;
+	} else t51 = $[267];
 	return wrapWithField(tagInputField, fieldRef, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
-		message: t75,
+		message: t51,
 		errorMessage: tagError ? void 0 : errorMessage
 	});
 }
@@ -1799,33 +1404,27 @@ function TagInput(props, ref) {
 * input. Values are typed (Enter or a separator commits them) or picked from
 * suggested options.
 */
-function _temp1(tag_2) {
+function _temp0(tag_2) {
 	return tag_2.label;
 }
-function _temp0(tag_1) {
+function _temp9(tag_1) {
 	return tag_1.key;
 }
-function _temp9(tag_0) {
+function _temp8(tag_0) {
 	return tag_0.isDisabled;
 }
-function _temp8(tag) {
+function _temp7(tag) {
 	return !tag.isDisabled;
 }
-function _temp7(part_0) {
+function _temp6(part_0) {
 	return part_0.trim();
 }
-function _temp6(rejection_0) {
+function _temp5(rejection_0) {
 	return rejection_0.text;
 }
-function _temp5(node_0) {
+function _temp4(node_0) {
 	return node_0.type === "section";
 }
-function _temp4(key_4) {
-	return /* @__PURE__ */ jsx(_CollectionItem, {
-		textValue: key_4,
-		children: key_4
-	}, key_4);
-}
 function _temp3() {
 	return /* @__PURE__ */ new Map();
 }