@cube-dev/ui-kit 0.0.0-canary-8a359ff → 0.0.0-canary-90b6445

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a359ff | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-90b6445 | 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,10 +14,10 @@ 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 { TextInputBase } from "../TextInput/TextInputBase.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
-import { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { TagList } from "./TagList.js";
 import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
@@ -125,7 +125,7 @@ function isComposingKey(e) {
 	return e.nativeEvent.isComposing || e.keyCode === 229;
 }
 function TagInput(props, ref) {
-	const $ = c(290);
+	const $ = c(291);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -174,6 +174,7 @@ function TagInput(props, ref) {
 	let label;
 	let listBoxRefProp;
 	let listBoxStyles;
+	let listGap;
 	let maxTags;
 	let message;
 	let mods;
@@ -214,7 +215,7 @@ function TagInput(props, ref) {
 	let wrapperRefProp;
 	let wrapperStyles;
 	if ($[3] !== props) {
-		const { qa: t3, id: t4, label: t5, value: t6, defaultValue: t7, onChange: t8, inputValue: t9, defaultInputValue: t10, onInputChange: t11, placeholder: t12, autoFocus: t13, autoComplete: t14, onFocus: t15, onBlur: t16, onKeyDown: t17, delimiters: t18, validateTag: t19, normalizeTag: t20, maxTags: t21, shouldCommitOnBlur: t22, isClearable: t23, onClear: t24, items: t25, children: t26, allowsCustomValue: t27, filter: t28, disabledKeys: t29, popoverTrigger: t30, onOpenChange: t31, hideTrigger: t32, direction: t33, shouldFlip: t34, overlayOffset: t35, containerPadding: t36, tagProps: t37, icon: t38, prefix: t39, suffix: t40, suffixPosition: t41, size: t42, isDisabled: t43, isReadOnly: t44, isRequired: t45, isLoading: t46, isInvalid: t47, isValid: t48, message: t49, errorMessage: t50, inputRef: t51, wrapperRef: t52, popoverRef: t53, listBoxRef: t54, wrapperStyles: t55, inputStyles: t56, tagListStyles: t57, tagStyles: t58, triggerStyles: t59, overlayStyles: t60, listBoxStyles: t61, optionStyles: t62, sectionStyles: t63, headingStyles: t64, labelProps: t65, mods: t66, className: t67, style: t68, qaVal: t69, name, form, ...t70 } = props;
+		const { qa: t3, id: t4, label: t5, value: t6, defaultValue: t7, onChange: t8, inputValue: t9, defaultInputValue: t10, onInputChange: t11, placeholder: t12, autoFocus: t13, autoComplete: t14, onFocus: t15, onBlur: t16, onKeyDown: t17, delimiters: t18, validateTag: t19, normalizeTag: t20, maxTags: t21, shouldCommitOnBlur: t22, isClearable: t23, onClear: t24, items: t25, children: t26, allowsCustomValue: t27, filter: t28, disabledKeys: t29, popoverTrigger: t30, onOpenChange: t31, hideTrigger: t32, direction: t33, shouldFlip: t34, overlayOffset: t35, containerPadding: t36, tagProps: t37, icon: t38, prefix: t39, suffix: t40, suffixPosition: t41, size: t42, isDisabled: t43, isReadOnly: t44, isRequired: t45, isLoading: t46, isInvalid: t47, isValid: t48, message: t49, errorMessage: t50, inputRef: t51, wrapperRef: t52, popoverRef: t53, listBoxRef: t54, wrapperStyles: t55, inputStyles: t56, tagListStyles: t57, tagStyles: t58, triggerStyles: t59, overlayStyles: t60, listBoxStyles: t61, optionStyles: t62, sectionStyles: t63, headingStyles: t64, listGap: t65, labelProps: t66, mods: t67, className: t68, style: t69, qaVal: t70, name, form, ...t71 } = props;
 		qa = t3;
 		id = t4;
 		label = t5;
@@ -268,12 +269,13 @@ function TagInput(props, ref) {
 		optionStyles = t62;
 		sectionStyles = t63;
 		headingStyles = t64;
-		userLabelProps = t65;
-		mods = t66;
-		className = t67;
-		style = t68;
-		qaVal = t69;
-		otherProps = t70;
+		listGap = t65;
+		userLabelProps = t66;
+		mods = t67;
+		className = t68;
+		style = t69;
+		qaVal = t70;
+		otherProps = t71;
 		autoComplete = t14 === void 0 ? "off" : t14;
 		delimiters = t18 === void 0 ? DEFAULT_DELIMITERS : t18;
 		shouldCommitOnBlur = t22 === void 0 ? true : t22;
@@ -315,45 +317,46 @@ function TagInput(props, ref) {
 		$[31] = label;
 		$[32] = listBoxRefProp;
 		$[33] = listBoxStyles;
-		$[34] = maxTags;
-		$[35] = message;
-		$[36] = mods;
-		$[37] = normalizeTag;
-		$[38] = onBlur;
-		$[39] = onChange_0;
-		$[40] = onClear;
-		$[41] = onFocus;
-		$[42] = onInputChange;
-		$[43] = onKeyDown;
-		$[44] = onOpenChange;
-		$[45] = optionStyles;
-		$[46] = otherProps;
-		$[47] = overlayOffset;
-		$[48] = overlayStyles;
-		$[49] = placeholder;
-		$[50] = popoverRefProp;
-		$[51] = popoverTrigger;
-		$[52] = prefix;
-		$[53] = qa;
-		$[54] = qaVal;
-		$[55] = renderChildren;
-		$[56] = sectionStyles;
-		$[57] = shouldCommitOnBlur;
-		$[58] = shouldFlip;
-		$[59] = size;
-		$[60] = style;
-		$[61] = suffix;
-		$[62] = suffixPosition;
-		$[63] = t2;
-		$[64] = tagListStyles;
-		$[65] = tagProps;
-		$[66] = tagStyles;
-		$[67] = triggerStyles;
-		$[68] = userLabelProps;
-		$[69] = validateTag;
-		$[70] = valueProp;
-		$[71] = wrapperRefProp;
-		$[72] = wrapperStyles;
+		$[34] = listGap;
+		$[35] = maxTags;
+		$[36] = message;
+		$[37] = mods;
+		$[38] = normalizeTag;
+		$[39] = onBlur;
+		$[40] = onChange_0;
+		$[41] = onClear;
+		$[42] = onFocus;
+		$[43] = onInputChange;
+		$[44] = onKeyDown;
+		$[45] = onOpenChange;
+		$[46] = optionStyles;
+		$[47] = otherProps;
+		$[48] = overlayOffset;
+		$[49] = overlayStyles;
+		$[50] = placeholder;
+		$[51] = popoverRefProp;
+		$[52] = popoverTrigger;
+		$[53] = prefix;
+		$[54] = qa;
+		$[55] = qaVal;
+		$[56] = renderChildren;
+		$[57] = sectionStyles;
+		$[58] = shouldCommitOnBlur;
+		$[59] = shouldFlip;
+		$[60] = size;
+		$[61] = style;
+		$[62] = suffix;
+		$[63] = suffixPosition;
+		$[64] = t2;
+		$[65] = tagListStyles;
+		$[66] = tagProps;
+		$[67] = tagStyles;
+		$[68] = triggerStyles;
+		$[69] = userLabelProps;
+		$[70] = validateTag;
+		$[71] = valueProp;
+		$[72] = wrapperRefProp;
+		$[73] = wrapperStyles;
 	} else {
 		allowsCustomValue = $[4];
 		autoComplete = $[5];
@@ -385,45 +388,46 @@ function TagInput(props, ref) {
 		label = $[31];
 		listBoxRefProp = $[32];
 		listBoxStyles = $[33];
-		maxTags = $[34];
-		message = $[35];
-		mods = $[36];
-		normalizeTag = $[37];
-		onBlur = $[38];
-		onChange_0 = $[39];
-		onClear = $[40];
-		onFocus = $[41];
-		onInputChange = $[42];
-		onKeyDown = $[43];
-		onOpenChange = $[44];
-		optionStyles = $[45];
-		otherProps = $[46];
-		overlayOffset = $[47];
-		overlayStyles = $[48];
-		placeholder = $[49];
-		popoverRefProp = $[50];
-		popoverTrigger = $[51];
-		prefix = $[52];
-		qa = $[53];
-		qaVal = $[54];
-		renderChildren = $[55];
-		sectionStyles = $[56];
-		shouldCommitOnBlur = $[57];
-		shouldFlip = $[58];
-		size = $[59];
-		style = $[60];
-		suffix = $[61];
-		suffixPosition = $[62];
-		t2 = $[63];
-		tagListStyles = $[64];
-		tagProps = $[65];
-		tagStyles = $[66];
-		triggerStyles = $[67];
-		userLabelProps = $[68];
-		validateTag = $[69];
-		valueProp = $[70];
-		wrapperRefProp = $[71];
-		wrapperStyles = $[72];
+		listGap = $[34];
+		maxTags = $[35];
+		message = $[36];
+		mods = $[37];
+		normalizeTag = $[38];
+		onBlur = $[39];
+		onChange_0 = $[40];
+		onClear = $[41];
+		onFocus = $[42];
+		onInputChange = $[43];
+		onKeyDown = $[44];
+		onOpenChange = $[45];
+		optionStyles = $[46];
+		otherProps = $[47];
+		overlayOffset = $[48];
+		overlayStyles = $[49];
+		placeholder = $[50];
+		popoverRefProp = $[51];
+		popoverTrigger = $[52];
+		prefix = $[53];
+		qa = $[54];
+		qaVal = $[55];
+		renderChildren = $[56];
+		sectionStyles = $[57];
+		shouldCommitOnBlur = $[58];
+		shouldFlip = $[59];
+		size = $[60];
+		style = $[61];
+		suffix = $[62];
+		suffixPosition = $[63];
+		t2 = $[64];
+		tagListStyles = $[65];
+		tagProps = $[66];
+		tagStyles = $[67];
+		triggerStyles = $[68];
+		userLabelProps = $[69];
+		validateTag = $[70];
+		valueProp = $[71];
+		wrapperRefProp = $[72];
+		wrapperStyles = $[73];
 	}
 	const styles = t2;
 	const rootRef = useCombinedRefs(ref);
@@ -434,10 +438,10 @@ function TagInput(props, ref) {
 	const tagListRef = useRef(null);
 	const listStateRef = useRef(null);
 	let t3;
-	if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = generateRandomId();
-		$[73] = t3;
-	} else t3 = $[73];
+		$[74] = t3;
+	} else t3 = $[74];
 	const listBoxId = `TagInputListBox-${t3}`;
 	const tagListId = useId$1();
 	const summaryId = useId$1();
@@ -445,18 +449,18 @@ function TagInput(props, ref) {
 	const triggerId = useId$1();
 	const clearId = useId$1();
 	let t4;
-	if ($[74] !== defaultValue) {
+	if ($[75] !== defaultValue) {
 		t4 = defaultValue ?? [];
-		$[74] = defaultValue;
-		$[75] = t4;
-	} else t4 = $[75];
+		$[75] = defaultValue;
+		$[76] = t4;
+	} else t4 = $[76];
 	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);
 	let t5;
-	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = (text) => {
 			if (text == null) {
 				setTagErrorState(null);
@@ -468,17 +472,17 @@ function TagInput(props, ref) {
 				text
 			});
 		};
-		$[76] = t5;
-	} else t5 = $[76];
+		$[77] = t5;
+	} else t5 = $[77];
 	const setTagError = useEvent(t5);
 	let t6;
-	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = {
 			id: 0,
 			text: ""
 		};
-		$[77] = t6;
-	} else t6 = $[77];
+		$[78] = t6;
+	} else t6 = $[78];
 	const [announcement, setAnnouncement] = useState(t6);
 	let children = renderChildren;
 	if (items && typeof renderChildren === "function") children = Array.from(items).map((item, index) => {
@@ -492,64 +496,64 @@ function TagInput(props, ref) {
 		selectionMode: "none"
 	}).collection;
 	let t7;
-	if ($[78] !== collection) {
+	if ($[79] !== collection) {
 		t7 = (key) => {
 			const node = collection.getItem(key);
 			return node?.type === "item" ? node : null;
 		};
-		$[78] = collection;
-		$[79] = t7;
-	} else t7 = $[79];
+		$[79] = collection;
+		$[80] = t7;
+	} else t7 = $[80];
 	const getOption = t7;
 	let t8;
-	if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = { sensitivity: "base" };
-		$[80] = t8;
-	} else t8 = $[80];
+		$[81] = t8;
+	} else t8 = $[81];
 	const { contains } = useFilter(t8);
 	let t9;
-	if ($[81] !== contains || $[82] !== filter) {
+	if ($[82] !== contains || $[83] !== filter) {
 		t9 = filter === false ? _temp2 : filter || contains;
-		$[81] = contains;
-		$[82] = filter;
-		$[83] = t9;
-	} else t9 = $[83];
+		$[82] = contains;
+		$[83] = filter;
+		$[84] = t9;
+	} else t9 = $[84];
 	const textFilterFn = t9;
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	const term = draft.trim();
 	const [knownLabels, setKnownLabels] = useState(_temp3);
 	let t10;
-	if ($[84] !== getOption || $[85] !== knownLabels) {
+	if ($[85] !== getOption || $[86] !== knownLabels) {
 		t10 = (key_0) => getOption(key_0)?.textValue || knownLabels.get(key_0) || key_0;
-		$[84] = getOption;
-		$[85] = knownLabels;
-		$[86] = t10;
-	} else t10 = $[86];
+		$[85] = getOption;
+		$[86] = knownLabels;
+		$[87] = t10;
+	} else t10 = $[87];
 	const getOptionLabel = t10;
 	let t11;
-	if ($[87] !== getOptionLabel || $[88] !== tagProps) {
+	if ($[88] !== getOptionLabel || $[89] !== tagProps) {
 		t11 = (key_1) => textLabel(tagProps?.(key_1)?.children) ?? getOptionLabel(key_1);
-		$[87] = getOptionLabel;
-		$[88] = tagProps;
-		$[89] = t11;
-	} else t11 = $[89];
+		$[88] = getOptionLabel;
+		$[89] = tagProps;
+		$[90] = t11;
+	} else t11 = $[90];
 	const getTagLabel = t11;
 	let t12;
-	if ($[90] !== tagProps) {
+	if ($[91] !== tagProps) {
 		t12 = (key_2) => !!tagProps?.(key_2)?.isDisabled;
-		$[90] = tagProps;
-		$[91] = t12;
-	} else t12 = $[91];
+		$[91] = tagProps;
+		$[92] = t12;
+	} else t12 = $[92];
 	const isTagLocked = t12;
 	let t13;
-	if ($[92] !== disabledKeys) {
+	if ($[93] !== disabledKeys) {
 		t13 = new Set([...disabledKeys ?? []].map(String));
-		$[92] = disabledKeys;
-		$[93] = t13;
-	} else t13 = $[93];
+		$[93] = disabledKeys;
+		$[94] = t13;
+	} else t13 = $[94];
 	const disabledKeySet = t13;
 	let t14;
-	if ($[94] !== getOption || $[95] !== knownLabels) {
+	if ($[95] !== getOption || $[96] !== knownLabels) {
 		t14 = (keys) => {
 			let next = null;
 			for (const key_3 of keys) {
@@ -561,26 +565,26 @@ function TagInput(props, ref) {
 			}
 			if (next) setKnownLabels(next);
 		};
-		$[94] = getOption;
-		$[95] = knownLabels;
-		$[96] = t14;
-	} else t14 = $[96];
+		$[95] = getOption;
+		$[96] = knownLabels;
+		$[97] = t14;
+	} else t14 = $[97];
 	const rememberLabels = useEvent(t14);
 	let t15;
-	if ($[97] !== allowsCustomValue || $[98] !== collection || $[99] !== hasOptions) {
+	if ($[98] !== allowsCustomValue || $[99] !== collection || $[100] !== hasOptions) {
 		t15 = (text_0) => {
 			if (!hasOptions) return null;
 			const match = matchOptionText(collection, text_0);
 			return match.exact ?? (allowsCustomValue ? null : match.loose);
 		};
-		$[97] = allowsCustomValue;
-		$[98] = collection;
-		$[99] = hasOptions;
-		$[100] = t15;
-	} else t15 = $[100];
+		$[98] = allowsCustomValue;
+		$[99] = collection;
+		$[100] = hasOptions;
+		$[101] = t15;
+	} else t15 = $[101];
 	const findOptionKey = t15;
 	let t16;
-	if ($[101] !== findOptionKey || $[102] !== normalizeTag) {
+	if ($[102] !== findOptionKey || $[103] !== normalizeTag) {
 		t16 = (text_1) => {
 			const optionKey = findOptionKey(text_1);
 			if (optionKey != null || !normalizeTag) return {
@@ -593,13 +597,13 @@ function TagInput(props, ref) {
 				typed
 			};
 		};
-		$[101] = findOptionKey;
-		$[102] = normalizeTag;
-		$[103] = t16;
-	} else t16 = $[103];
+		$[102] = findOptionKey;
+		$[103] = normalizeTag;
+		$[104] = t16;
+	} else t16 = $[104];
 	const resolveTypedText = t16;
 	let t17;
-	if ($[104] !== normalizeTag || $[105] !== resolveTypedText) {
+	if ($[105] !== normalizeTag || $[106] !== resolveTypedText) {
 		t17 = (part, t18) => {
 			const source = t18 === void 0 ? "text" : t18;
 			if (source === "text") return resolveTypedText(part);
@@ -612,10 +616,10 @@ function TagInput(props, ref) {
 				typed: normalizeTag ? normalizeTag(part).trim() : part
 			};
 		};
-		$[104] = normalizeTag;
-		$[105] = resolveTypedText;
-		$[106] = t17;
-	} else t17 = $[106];
+		$[105] = normalizeTag;
+		$[106] = resolveTypedText;
+		$[107] = t17;
+	} else t17 = $[107];
 	const resolvePart = t17;
 	const termOptionKey = term ? resolveTypedText(term).optionKey : null;
 	const optionFilterFn = (nodes) => {
@@ -625,10 +629,10 @@ function TagInput(props, ref) {
 	const visibleOptionKeys = [];
 	if (hasOptions) collectVisibleKeys(optionFilterFn(collection), visibleOptionKeys, disabledKeys ? new Set(disabledKeys) : void 0);
 	let t18;
-	if ($[107] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[108] === Symbol.for("react.memo_cache_sentinel")) {
 		t18 = [];
-		$[107] = t18;
-	} else t18 = $[107];
+		$[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;
@@ -650,26 +654,26 @@ function TagInput(props, ref) {
 	const notifiedOpenRef = useRef(false);
 	let t19;
 	let t20;
-	if ($[108] !== onOpenChange || $[109] !== shouldShowPopover) {
+	if ($[109] !== onOpenChange || $[110] !== shouldShowPopover) {
 		t19 = () => {
 			if (notifiedOpenRef.current === shouldShowPopover) return;
 			notifiedOpenRef.current = shouldShowPopover;
 			onOpenChange?.(shouldShowPopover);
 		};
 		t20 = [shouldShowPopover, onOpenChange];
-		$[108] = onOpenChange;
-		$[109] = shouldShowPopover;
-		$[110] = t19;
-		$[111] = t20;
+		$[109] = onOpenChange;
+		$[110] = shouldShowPopover;
+		$[111] = t19;
+		$[112] = t20;
 	} else {
-		t19 = $[110];
-		t20 = $[111];
+		t19 = $[111];
+		t20 = $[112];
 	}
 	useEffect(t19, t20);
 	const [activeOption, setActiveOption] = useState(null);
 	const activeOptionKey = activeOption?.key ?? null;
 	let t21;
-	if ($[112] !== setActiveOption) {
+	if ($[113] !== setActiveOption) {
 		t21 = (key_5, source_0, forTerm) => {
 			const listState = listStateRef.current;
 			if (!listState || key_5 == null) return;
@@ -681,9 +685,9 @@ function TagInput(props, ref) {
 				source: source_0
 			});
 		};
-		$[112] = setActiveOption;
-		$[113] = t21;
-	} else t21 = $[113];
+		$[113] = setActiveOption;
+		$[114] = t21;
+	} else t21 = $[114];
 	const moveVirtualFocus = useEvent(t21);
 	const [popoverMinWidth, setPopoverMinWidth] = useState();
 	let exactOptionKey = termOptionKey;
@@ -697,7 +701,7 @@ function TagInput(props, ref) {
 	if (preferredOptionKey == null) preferredOptionKey = visibleTargetKeys[0] ?? null;
 	const focusTermRef = useRef(null);
 	let t22;
-	if ($[114] !== customTerm || $[115] !== moveVirtualFocus || $[116] !== preferredOptionKey || $[117] !== setActiveOption || $[118] !== setPopoverMinWidth || $[119] !== shouldShowPopover || $[120] !== term || $[121] !== visibleOptionsSignature || $[122] !== wrapperRef) {
+	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;
@@ -734,19 +738,19 @@ function TagInput(props, ref) {
 				isCancelled = true;
 			};
 		};
-		$[114] = customTerm;
-		$[115] = moveVirtualFocus;
-		$[116] = preferredOptionKey;
-		$[117] = setActiveOption;
-		$[118] = setPopoverMinWidth;
-		$[119] = shouldShowPopover;
-		$[120] = term;
-		$[121] = visibleOptionsSignature;
-		$[122] = wrapperRef;
-		$[123] = t22;
-	} else t22 = $[123];
+		$[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 ($[124] !== customTerm || $[125] !== moveVirtualFocus || $[126] !== preferredOptionKey || $[127] !== shouldShowPopover || $[128] !== term || $[129] !== visibleOptionsSignature || $[130] !== wrapperRef) {
+	if ($[125] !== customTerm || $[126] !== moveVirtualFocus || $[127] !== preferredOptionKey || $[128] !== shouldShowPopover || $[129] !== term || $[130] !== visibleOptionsSignature || $[131] !== wrapperRef) {
 		t23 = [
 			shouldShowPopover,
 			visibleOptionsSignature,
@@ -756,41 +760,41 @@ function TagInput(props, ref) {
 			moveVirtualFocus,
 			wrapperRef
 		];
-		$[124] = customTerm;
-		$[125] = moveVirtualFocus;
-		$[126] = preferredOptionKey;
-		$[127] = shouldShowPopover;
-		$[128] = term;
-		$[129] = visibleOptionsSignature;
-		$[130] = wrapperRef;
-		$[131] = t23;
-	} else t23 = $[131];
+		$[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 ($[132] !== setDraftState || $[133] !== setIsFilterActive) {
+	if ($[133] !== setDraftState || $[134] !== setIsFilterActive) {
 		t24 = (next_0) => {
 			setDraftState(next_0);
 			setIsFilterActive(!!next_0.trim());
 		};
-		$[132] = setDraftState;
-		$[133] = setIsFilterActive;
-		$[134] = t24;
-	} else t24 = $[134];
+		$[133] = setDraftState;
+		$[134] = setIsFilterActive;
+		$[135] = t24;
+	} else t24 = $[135];
 	const setDraft = useEvent(t24);
 	let t25;
-	if ($[135] !== setAnnouncement) {
+	if ($[136] !== setAnnouncement) {
 		t25 = (text_2) => {
 			setAnnouncement((prev_0) => ({
 				id: prev_0.id + 1,
 				text: text_2
 			}));
 		};
-		$[135] = setAnnouncement;
-		$[136] = t25;
-	} else t25 = $[136];
+		$[136] = setAnnouncement;
+		$[137] = t25;
+	} else t25 = $[137];
 	const announce = useEvent(t25);
 	let t26;
-	if ($[137] !== maxTags || $[138] !== t) {
+	if ($[138] !== maxTags || $[139] !== t) {
 		t26 = (rejection) => {
 			if (rejection.message) return rejection.message;
 			switch (rejection.reason) {
@@ -801,17 +805,17 @@ function TagInput(props, ref) {
 				default: return t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: rejection.text });
 			}
 		};
-		$[137] = maxTags;
-		$[138] = t;
-		$[139] = t26;
-	} else t26 = $[139];
+		$[138] = maxTags;
+		$[139] = t;
+		$[140] = t26;
+	} else t26 = $[140];
 	const rejectionMessage = useEvent(t26);
 	let t27;
-	if ($[140] !== delimiters) {
+	if ($[141] !== delimiters) {
 		t27 = delimiters.find(_temp5);
-		$[140] = delimiters;
-		$[141] = t27;
-	} else t27 = $[141];
+		$[141] = delimiters;
+		$[142] = t27;
+	} else t27 = $[142];
 	const joinDelimiter = t27;
 	const joiner = joinDelimiter ? `${joinDelimiter} ` : " ";
 	const hasFieldMessage = !!label || !!props.forceField;
@@ -882,27 +886,27 @@ function TagInput(props, ref) {
 		return kept.map(_temp7).join(joiner);
 	});
 	let t28;
-	if ($[142] !== commitParts || $[143] !== delimiters || $[144] !== draft || $[145] !== setDraft) {
+	if ($[143] !== commitParts || $[144] !== delimiters || $[145] !== draft || $[146] !== setDraft) {
 		t28 = () => {
 			const rest = commitParts(splitTagText(draft, delimiters));
 			setDraft(rest);
 			return rest;
 		};
-		$[142] = commitParts;
-		$[143] = delimiters;
-		$[144] = draft;
-		$[145] = setDraft;
-		$[146] = t28;
-	} else t28 = $[146];
+		$[143] = commitParts;
+		$[144] = delimiters;
+		$[145] = draft;
+		$[146] = setDraft;
+		$[147] = t28;
+	} else t28 = $[147];
 	const commitDraft = useEvent(t28);
 	let t29;
-	if ($[147] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
 		t29 = () => {
 			const rows = tagListRef.current?.querySelectorAll("[role=\"row\"]:not([aria-disabled=\"true\"])");
 			rows?.[rows.length - 1]?.focus();
 		};
-		$[147] = t29;
-	} else t29 = $[147];
+		$[148] = t29;
+	} else t29 = $[148];
 	const focusLastTag = useEvent(t29);
 	const removeValues = useEvent((requested) => {
 		const keys_0 = requested.filter((key_8) => !isTagLocked(key_8));
@@ -1030,7 +1034,7 @@ function TagInput(props, ref) {
 		if (hasOptions && popoverTrigger !== "manual" && nextDraft.trim()) setIsPopoverOpen(true);
 	});
 	let t30;
-	if ($[148] !== commitParts || $[149] !== delimiters || $[150] !== draft || $[151] !== isInteractive || $[152] !== setDraft || $[153] !== setTagError) {
+	if ($[149] !== commitParts || $[150] !== delimiters || $[151] !== draft || $[152] !== isInteractive || $[153] !== setDraft || $[154] !== setTagError) {
 		t30 = (e_0) => {
 			if (!isInteractive) return;
 			const pasted = e_0.clipboardData.getData("text");
@@ -1042,17 +1046,17 @@ function TagInput(props, ref) {
 			setTagError(null);
 			setDraft(commitParts(splitTagText(`${draft.slice(0, start_0)}\n${pasted}\n${draft.slice(end_0)}`, delimiters)));
 		};
-		$[148] = commitParts;
-		$[149] = delimiters;
-		$[150] = draft;
-		$[151] = isInteractive;
-		$[152] = setDraft;
-		$[153] = setTagError;
-		$[154] = t30;
-	} else t30 = $[154];
+		$[149] = commitParts;
+		$[150] = delimiters;
+		$[151] = draft;
+		$[152] = isInteractive;
+		$[153] = setDraft;
+		$[154] = setTagError;
+		$[155] = t30;
+	} else t30 = $[155];
 	const handlePaste = useEvent(t30);
 	let t31;
-	if ($[155] !== allowsCustomValue || $[156] !== commitDraft || $[157] !== draft || $[158] !== hasOptions || $[159] !== isInteractive || $[160] !== setDraft || $[161] !== setTagError || $[162] !== shouldCommitOnBlur || $[163] !== term || $[164] !== termOptionKey) {
+	if ($[156] !== allowsCustomValue || $[157] !== commitDraft || $[158] !== draft || $[159] !== hasOptions || $[160] !== isInteractive || $[161] !== setDraft || $[162] !== setTagError || $[163] !== shouldCommitOnBlur || $[164] !== term || $[165] !== termOptionKey) {
 		t31 = () => {
 			if (!term) return "";
 			if (!shouldCommitOnBlur || !isInteractive) return draft;
@@ -1063,31 +1067,31 @@ function TagInput(props, ref) {
 			}
 			return commitDraft();
 		};
-		$[155] = allowsCustomValue;
-		$[156] = commitDraft;
-		$[157] = draft;
-		$[158] = hasOptions;
-		$[159] = isInteractive;
-		$[160] = setDraft;
-		$[161] = setTagError;
-		$[162] = shouldCommitOnBlur;
-		$[163] = term;
-		$[164] = termOptionKey;
-		$[165] = t31;
-	} else t31 = $[165];
+		$[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 ($[166] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[167] === Symbol.for("react.memo_cache_sentinel")) {
 		t32 = () => {
 			pendingClearRef.current?.();
 			pendingClearRef.current = null;
 		};
-		$[166] = t32;
-	} else t32 = $[166];
+		$[167] = t32;
+	} else t32 = $[167];
 	const cancelPendingClear = t32;
 	let t33;
-	if ($[167] !== setTagError) {
+	if ($[168] !== setTagError) {
 		t33 = () => {
 			cancelPendingClear();
 			let timer;
@@ -1106,34 +1110,34 @@ function TagInput(props, ref) {
 				clearTimeout(timer);
 			};
 		};
-		$[167] = setTagError;
-		$[168] = t33;
-	} else t33 = $[168];
+		$[168] = setTagError;
+		$[169] = t33;
+	} else t33 = $[169];
 	const clearTagErrorAfterPress = t33;
 	let t34;
 	let t35;
-	if ($[169] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[170] === Symbol.for("react.memo_cache_sentinel")) {
 		t34 = () => () => pendingClearRef.current?.();
 		t35 = [];
-		$[169] = t34;
-		$[170] = t35;
+		$[170] = t34;
+		$[171] = t35;
 	} else {
-		t34 = $[169];
-		t35 = $[170];
+		t34 = $[170];
+		t35 = $[171];
 	}
 	useEffect(t34, t35);
 	let t36;
-	if ($[171] !== onFocus) {
+	if ($[172] !== onFocus) {
 		t36 = () => {
 			cancelPendingClear();
 			onFocus?.();
 		};
-		$[171] = onFocus;
-		$[172] = t36;
-	} else t36 = $[172];
+		$[172] = onFocus;
+		$[173] = t36;
+	} else t36 = $[173];
 	const handleCompositeFocus = useEvent(t36);
 	let t37;
-	if ($[173] !== clearTagErrorAfterPress || $[174] !== onBlur || $[175] !== setIsPopoverOpen || $[176] !== setTagError || $[177] !== setUnpickedCustomValues || $[178] !== settleDraft || $[179] !== tagError) {
+	if ($[174] !== clearTagErrorAfterPress || $[175] !== onBlur || $[176] !== setIsPopoverOpen || $[177] !== setTagError || $[178] !== setUnpickedCustomValues || $[179] !== settleDraft || $[180] !== tagError) {
 		t37 = (t38) => {
 			const { isPressing } = t38;
 			setIsPopoverOpen(false);
@@ -1143,20 +1147,20 @@ function TagInput(props, ref) {
 			else setTagError(null);
 			onBlur?.();
 		};
-		$[173] = clearTagErrorAfterPress;
-		$[174] = onBlur;
-		$[175] = setIsPopoverOpen;
-		$[176] = setTagError;
-		$[177] = setUnpickedCustomValues;
-		$[178] = settleDraft;
-		$[179] = tagError;
-		$[180] = t37;
-	} else t37 = $[180];
+		$[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 ($[181] !== handleCompositeBlur || $[182] !== handleCompositeFocus || $[183] !== isDisabled || $[184] !== t38 || $[185] !== t39) {
+	if ($[182] !== handleCompositeBlur || $[183] !== handleCompositeFocus || $[184] !== isDisabled || $[185] !== t38 || $[186] !== t39) {
 		t40 = {
 			wrapperRef: t38,
 			popoverRef: t39,
@@ -1164,16 +1168,16 @@ function TagInput(props, ref) {
 			onBlur: handleCompositeBlur,
 			isDisabled
 		};
-		$[181] = handleCompositeBlur;
-		$[182] = handleCompositeFocus;
-		$[183] = isDisabled;
-		$[184] = t38;
-		$[185] = t39;
-		$[186] = t40;
-	} else t40 = $[186];
+		$[182] = handleCompositeBlur;
+		$[183] = handleCompositeFocus;
+		$[184] = isDisabled;
+		$[185] = t38;
+		$[186] = t39;
+		$[187] = t40;
+	} else t40 = $[187];
 	const { compositeFocusProps } = useCompositeFocus(t40);
 	let t41;
-	if ($[187] !== rootRef || $[188] !== setIsPopoverOpen || $[189] !== settleDraft) {
+	if ($[188] !== rootRef || $[189] !== setIsPopoverOpen || $[190] !== settleDraft) {
 		t41 = (e_1) => {
 			const isTabbing = isTabbingRef.current;
 			const next_4 = e_1.relatedTarget;
@@ -1182,23 +1186,23 @@ function TagInput(props, ref) {
 			setIsPopoverOpen(false);
 			settleDraft();
 		};
-		$[187] = rootRef;
-		$[188] = setIsPopoverOpen;
-		$[189] = settleDraft;
-		$[190] = t41;
-	} else t41 = $[190];
+		$[188] = rootRef;
+		$[189] = setIsPopoverOpen;
+		$[190] = settleDraft;
+		$[191] = t41;
+	} else t41 = $[191];
 	const handleInputBlur = useEvent(t41);
 	let t42;
-	if ($[191] !== hasOptions || $[192] !== isInteractive || $[193] !== popoverTrigger || $[194] !== setIsPopoverOpen) {
+	if ($[192] !== hasOptions || $[193] !== isInteractive || $[194] !== popoverTrigger || $[195] !== setIsPopoverOpen) {
 		t42 = () => {
 			if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
 		};
-		$[191] = hasOptions;
-		$[192] = isInteractive;
-		$[193] = popoverTrigger;
-		$[194] = setIsPopoverOpen;
-		$[195] = t42;
-	} else t42 = $[195];
+		$[192] = hasOptions;
+		$[193] = isInteractive;
+		$[194] = popoverTrigger;
+		$[195] = setIsPopoverOpen;
+		$[196] = t42;
+	} else t42 = $[196];
 	const handleInputFocus = useEvent(t42);
 	const tags = uniqueValues.map((value_5) => {
 		const ownProps = tagProps?.(value_5);
@@ -1218,7 +1222,7 @@ function TagInput(props, ref) {
 	const lockedKeys = tags.filter(_temp0).map(_temp1);
 	const optionDisabledKeys = lockedKeys.length ? [...disabledKeySet, ...lockedKeys] : disabledKeys;
 	let t43;
-	if ($[196] !== autoFocus || $[197] !== draft || $[198] !== effectiveIsInvalid || $[199] !== handleInputChange || $[200] !== id || $[201] !== isDisabled || $[202] !== isReadOnly || $[203] !== isRequired || $[204] !== label || $[205] !== otherProps || $[206] !== placeholder) {
+	if ($[197] !== autoFocus || $[198] !== draft || $[199] !== effectiveIsInvalid || $[200] !== handleInputChange || $[201] !== id || $[202] !== isDisabled || $[203] !== isReadOnly || $[204] !== isRequired || $[205] !== label || $[206] !== otherProps || $[207] !== placeholder) {
 		t43 = {
 			...otherProps,
 			id,
@@ -1232,19 +1236,19 @@ function TagInput(props, ref) {
 			autoFocus,
 			onChange: handleInputChange
 		};
-		$[196] = autoFocus;
-		$[197] = draft;
-		$[198] = effectiveIsInvalid;
-		$[199] = handleInputChange;
-		$[200] = id;
-		$[201] = isDisabled;
-		$[202] = isReadOnly;
-		$[203] = isRequired;
-		$[204] = label;
-		$[205] = otherProps;
-		$[206] = placeholder;
-		$[207] = t43;
-	} else t43 = $[207];
+		$[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);
 	const labelId = label ? labelProps.id : void 0;
 	const describedBy = [];
@@ -1268,23 +1272,23 @@ function TagInput(props, ref) {
 		"aria-activedescendant": shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(listBoxId, activeOptionKey) : void 0
 	} : null);
 	let t44;
-	if ($[208] !== hasResults || $[209] !== inputRef || $[210] !== setIsFilterActive || $[211] !== setIsPopoverOpen || $[212] !== shouldShowPopover) {
+	if ($[209] !== hasResults || $[210] !== inputRef || $[211] !== setIsFilterActive || $[212] !== setIsPopoverOpen || $[213] !== shouldShowPopover) {
 		t44 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[208] = hasResults;
-		$[209] = inputRef;
-		$[210] = setIsFilterActive;
-		$[211] = setIsPopoverOpen;
-		$[212] = shouldShowPopover;
-		$[213] = t44;
-	} else t44 = $[213];
+		$[209] = hasResults;
+		$[210] = inputRef;
+		$[211] = setIsFilterActive;
+		$[212] = setIsPopoverOpen;
+		$[213] = shouldShowPopover;
+		$[214] = t44;
+	} else t44 = $[214];
 	const handleTriggerPress = useEvent(t44);
 	let t45;
-	if ($[214] !== handleTriggerPress || $[215] !== hasOptions || $[216] !== hideTrigger || $[217] !== isInteractive || $[218] !== labelId || $[219] !== shouldShowPopover || $[220] !== size || $[221] !== t || $[222] !== triggerId || $[223] !== triggerStyles) {
+	if ($[215] !== handleTriggerPress || $[216] !== hasOptions || $[217] !== hideTrigger || $[218] !== isInteractive || $[219] !== labelId || $[220] !== shouldShowPopover || $[221] !== size || $[222] !== t || $[223] !== triggerId || $[224] !== triggerStyles) {
 		t45 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
 			"data-popover-trigger": true,
 			id: triggerId,
@@ -1301,21 +1305,21 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${triggerId} ${labelId}` : void 0,
 			onPress: handleTriggerPress
 		}) : null;
-		$[214] = handleTriggerPress;
-		$[215] = hasOptions;
-		$[216] = hideTrigger;
-		$[217] = isInteractive;
-		$[218] = labelId;
-		$[219] = shouldShowPopover;
-		$[220] = size;
-		$[221] = t;
-		$[222] = triggerId;
-		$[223] = triggerStyles;
-		$[224] = t45;
-	} else t45 = $[224];
+		$[215] = handleTriggerPress;
+		$[216] = hasOptions;
+		$[217] = hideTrigger;
+		$[218] = isInteractive;
+		$[219] = labelId;
+		$[220] = shouldShowPopover;
+		$[221] = size;
+		$[222] = t;
+		$[223] = triggerId;
+		$[224] = triggerStyles;
+		$[225] = t45;
+	} else t45 = $[225];
 	const trigger = t45;
 	let t46;
-	if ($[225] !== inputRef || $[226] !== onClear || $[227] !== setDraft || $[228] !== setIsPopoverOpen || $[229] !== setTagError) {
+	if ($[226] !== inputRef || $[227] !== onClear || $[228] !== setDraft || $[229] !== setIsPopoverOpen || $[230] !== setTagError) {
 		t46 = () => {
 			inputRef.current?.focus();
 			setDraft("");
@@ -1323,17 +1327,17 @@ function TagInput(props, ref) {
 			setIsPopoverOpen(false);
 			onClear?.();
 		};
-		$[225] = inputRef;
-		$[226] = onClear;
-		$[227] = setDraft;
-		$[228] = setIsPopoverOpen;
-		$[229] = setTagError;
-		$[230] = t46;
-	} else t46 = $[230];
+		$[226] = inputRef;
+		$[227] = onClear;
+		$[228] = setDraft;
+		$[229] = setIsPopoverOpen;
+		$[230] = setTagError;
+		$[231] = t46;
+	} else t46 = $[231];
 	const clearText = useEvent(t46);
 	const canClear = !!isClearable && isInteractive && draft !== "";
 	let t47;
-	if ($[231] !== canClear || $[232] !== clearId || $[233] !== clearText || $[234] !== labelId || $[235] !== size || $[236] !== t) {
+	if ($[232] !== canClear || $[233] !== clearId || $[234] !== clearText || $[235] !== labelId || $[236] !== size || $[237] !== t) {
 		t47 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
 			id: clearId,
 			qa: "TagInputClearButton",
@@ -1344,28 +1348,28 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${clearId} ${labelId}` : void 0,
 			onPress: clearText
 		}) : null;
-		$[231] = canClear;
-		$[232] = clearId;
-		$[233] = clearText;
-		$[234] = labelId;
-		$[235] = size;
-		$[236] = t;
-		$[237] = t47;
-	} else t47 = $[237];
+		$[232] = canClear;
+		$[233] = clearId;
+		$[234] = clearText;
+		$[235] = labelId;
+		$[236] = size;
+		$[237] = t;
+		$[238] = t47;
+	} else t47 = $[238];
 	const clearButton = t47;
 	const hasActions = clearButton != null || trigger != null;
 	const T0 = TagInputElement;
 	const t48 = qa || "TagInput";
 	let t49;
-	if ($[238] !== clearButton || $[239] !== hasActions || $[240] !== trigger) {
+	if ($[239] !== clearButton || $[240] !== hasActions || $[241] !== trigger) {
 		t49 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[238] = clearButton;
-		$[239] = hasActions;
-		$[240] = trigger;
-		$[241] = t49;
-	} else t49 = $[241];
+		$[239] = clearButton;
+		$[240] = hasActions;
+		$[241] = trigger;
+		$[242] = t49;
+	} else t49 = $[242];
 	let t50;
-	if ($[242] !== autoFocus || $[243] !== effectiveIsInvalid || $[244] !== icon || $[245] !== inputRef || $[246] !== inputStyles || $[247] !== isDisabled || $[248] !== isLoading || $[249] !== isValid || $[250] !== mods || $[251] !== prefix || $[252] !== size || $[253] !== suffix || $[254] !== suffixPosition || $[255] !== t48 || $[256] !== t49 || $[257] !== tagInputProps || $[258] !== wrapperRef || $[259] !== wrapperStyles) {
+	if ($[243] !== autoFocus || $[244] !== effectiveIsInvalid || $[245] !== icon || $[246] !== inputRef || $[247] !== inputStyles || $[248] !== isDisabled || $[249] !== isLoading || $[250] !== isValid || $[251] !== mods || $[252] !== prefix || $[253] !== size || $[254] !== suffix || $[255] !== suffixPosition || $[256] !== t48 || $[257] !== t49 || $[258] !== tagInputProps || $[259] !== wrapperRef || $[260] !== wrapperStyles) {
 		t50 = /* @__PURE__ */ jsx(TextInputBase, {
 			qa: t48,
 			inputRef,
@@ -1386,26 +1390,26 @@ function TagInput(props, ref) {
 			styles: wrapperStyles,
 			inputStyles
 		});
-		$[242] = autoFocus;
-		$[243] = effectiveIsInvalid;
-		$[244] = icon;
-		$[245] = inputRef;
-		$[246] = inputStyles;
-		$[247] = isDisabled;
-		$[248] = isLoading;
-		$[249] = isValid;
-		$[250] = mods;
-		$[251] = prefix;
-		$[252] = size;
-		$[253] = suffix;
-		$[254] = suffixPosition;
-		$[255] = t48;
-		$[256] = t49;
-		$[257] = tagInputProps;
-		$[258] = wrapperRef;
-		$[259] = wrapperStyles;
-		$[260] = t50;
-	} else t50 = $[260];
+		$[243] = autoFocus;
+		$[244] = effectiveIsInvalid;
+		$[245] = icon;
+		$[246] = inputRef;
+		$[247] = inputStyles;
+		$[248] = isDisabled;
+		$[249] = isLoading;
+		$[250] = isValid;
+		$[251] = mods;
+		$[252] = prefix;
+		$[253] = size;
+		$[254] = suffix;
+		$[255] = suffixPosition;
+		$[256] = t48;
+		$[257] = t49;
+		$[258] = tagInputProps;
+		$[259] = wrapperRef;
+		$[260] = wrapperStyles;
+		$[261] = t50;
+	} else t50 = $[261];
 	const t51 = tags.length ? /* @__PURE__ */ jsx(TagList, {
 		id: tagListId,
 		listRef: tagListRef,
@@ -1423,46 +1427,46 @@ function TagInput(props, ref) {
 	const t52 = true;
 	const t53 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp10)) }) : null;
 	let t54;
-	if ($[261] !== summaryId || $[262] !== t53) {
+	if ($[262] !== summaryId || $[263] !== t53) {
 		t54 = /* @__PURE__ */ jsx("span", {
 			hidden: t52,
 			id: summaryId,
 			children: t53
 		});
-		$[261] = summaryId;
-		$[262] = t53;
-		$[263] = t54;
-	} else t54 = $[263];
+		$[262] = summaryId;
+		$[263] = t53;
+		$[264] = t54;
+	} else t54 = $[264];
 	let t55;
-	if ($[264] !== hasBackspaceHint || $[265] !== t) {
+	if ($[265] !== hasBackspaceHint || $[266] !== t) {
 		t55 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[264] = hasBackspaceHint;
-		$[265] = t;
-		$[266] = t55;
-	} else t55 = $[266];
+		$[265] = hasBackspaceHint;
+		$[266] = t;
+		$[267] = t55;
+	} else t55 = $[267];
 	let t56;
-	if ($[267] !== hintId || $[268] !== t55) {
+	if ($[268] !== hintId || $[269] !== t55) {
 		t56 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
 			children: t55
 		});
-		$[267] = hintId;
-		$[268] = t55;
-		$[269] = t56;
-	} else t56 = $[269];
+		$[268] = hintId;
+		$[269] = t55;
+		$[270] = t56;
+	} else t56 = $[270];
 	let t57;
-	if ($[270] !== announcement.id || $[271] !== announcement.text) {
+	if ($[271] !== announcement.id || $[272] !== announcement.text) {
 		t57 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[270] = announcement.id;
-		$[271] = announcement.text;
-		$[272] = t57;
-	} else t57 = $[272];
+		$[271] = announcement.id;
+		$[272] = announcement.text;
+		$[273] = t57;
+	} else t57 = $[273];
 	const t58 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
 		isOpen: shouldShowPopover,
 		triggerRef: wrapperRef,
@@ -1480,6 +1484,7 @@ function TagInput(props, ref) {
 		optionHighlight: isFilterActive ? term : void 0,
 		sectionStyles,
 		headingStyles,
+		listGap,
 		selectionMode: "multiple",
 		selectedKeys: uniqueValues,
 		isCheckable: true,
@@ -1498,7 +1503,7 @@ function TagInput(props, ref) {
 		children: popoverChildren
 	}) : null;
 	let t59;
-	if ($[273] !== T0 || $[274] !== className || $[275] !== compositeFocusProps || $[276] !== qaVal || $[277] !== rootRef || $[278] !== style || $[279] !== styles || $[280] !== t50 || $[281] !== t51 || $[282] !== t54 || $[283] !== t56 || $[284] !== t57 || $[285] !== t58) {
+	if ($[274] !== T0 || $[275] !== className || $[276] !== compositeFocusProps || $[277] !== qaVal || $[278] !== rootRef || $[279] !== style || $[280] !== styles || $[281] !== t50 || $[282] !== t51 || $[283] !== t54 || $[284] !== t56 || $[285] !== t57 || $[286] !== t58) {
 		t59 = /* @__PURE__ */ jsxs(T0, {
 			ref: rootRef,
 			className,
@@ -1515,31 +1520,31 @@ function TagInput(props, ref) {
 				t58
 			]
 		});
-		$[273] = T0;
-		$[274] = className;
-		$[275] = compositeFocusProps;
-		$[276] = qaVal;
-		$[277] = rootRef;
-		$[278] = style;
-		$[279] = styles;
-		$[280] = t50;
-		$[281] = t51;
-		$[282] = t54;
-		$[283] = t56;
-		$[284] = t57;
-		$[285] = t58;
-		$[286] = t59;
-	} else t59 = $[286];
+		$[274] = T0;
+		$[275] = className;
+		$[276] = compositeFocusProps;
+		$[277] = qaVal;
+		$[278] = rootRef;
+		$[279] = style;
+		$[280] = styles;
+		$[281] = t50;
+		$[282] = t51;
+		$[283] = t54;
+		$[284] = t56;
+		$[285] = t57;
+		$[286] = t58;
+		$[287] = t59;
+	} else t59 = $[287];
 	const tagInputField = t59;
 	const { children: _children, ...fieldProps } = props;
 	const fieldRef = useCombinedRefs();
 	let t60;
-	if ($[287] !== message || $[288] !== tagError) {
+	if ($[288] !== message || $[289] !== tagError) {
 		t60 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[287] = message;
-		$[288] = tagError;
-		$[289] = t60;
-	} else t60 = $[289];
+		$[288] = message;
+		$[289] = tagError;
+		$[290] = t60;
+	} else t60 = $[290];
 	return wrapWithField(tagInputField, fieldRef, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),