@cube-dev/ui-kit 0.197.0 → 0.198.0

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

@@ -1,16 +1,17 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | 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";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
-import { _CollectionItem } from "../../CollectionItem.js";
+import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { useFormatter } from "../../../i18n/useFormatter.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
+import { withFieldChrome } from "../../form/field-chrome.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { rendersFieldChrome, wrapWithField } from "../../form/wrapper.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
@@ -28,7 +29,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { VisuallyHidden, useFilter, useId as useId$1, useTextField } from "react-aria";
 import { Section, useListState } from "react-stately";
 import { useControlledState } from "@react-stately/utils";
-
 //#region src/components/fields/TagInput/TagInput.tsx
 /**
 * `filter={false}`: the options come filtered already, as from a server.
@@ -302,7 +302,7 @@ function TagInputClearButton(t0) {
 	return t4;
 }
 function TagInput(props, ref) {
-	const $ = c(302);
+	const $ = c(50);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -319,294 +319,20 @@ function TagInput(props, ref) {
 		$[2] = t1;
 	} else t1 = $[2];
 	props = useFieldProps(props, t1);
+	props = withFieldChrome(props);
 	const { t } = useI18n();
 	const { formatList } = useFormatter();
-	let allowsCustomValue;
-	let autoComplete;
-	let autoFocus;
-	let className;
-	let containerPadding;
-	let defaultInputValue;
-	let defaultValue;
-	let delimiters;
-	let direction;
-	let disabledKeys;
-	let errorMessage;
-	let filter;
-	let headingStyles;
-	let hideTrigger;
-	let icon;
-	let id;
-	let inputRefProp;
-	let inputStyles;
-	let inputValueProp;
-	let isClearable;
-	let isDisabled;
-	let isInvalid;
-	let isLoading;
-	let isReadOnly;
-	let isRequired;
-	let isValid;
-	let items;
-	let label;
-	let listBoxRefProp;
-	let listBoxStyles;
-	let listGap;
-	let maxTags;
-	let message;
-	let mods;
-	let normalizeTag;
-	let onBlur;
-	let onChange_0;
-	let onClear;
-	let onFocus;
-	let onInputChange;
-	let onKeyDown;
-	let onOpenChange;
-	let optionStyles;
-	let otherProps;
-	let overlayOffset;
-	let overlayStyles;
-	let placeholder;
-	let popoverRefProp;
-	let popoverTrigger;
-	let prefix;
-	let qa;
-	let qaVal;
-	let renderChildren;
-	let sectionStyles;
-	let shouldCommitOnBlur;
-	let shouldFlip;
-	let size;
-	let style;
-	let suffix;
-	let suffixPosition;
-	let t2;
-	let tagListStyles;
-	let tagProps;
-	let tagStyles;
-	let triggerStyles;
-	let userLabelProps;
-	let validateTag;
-	let valueProp;
-	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, listGap: t65, labelProps: t66, mods: t67, className: t68, style: t69, qaVal: t70, name, form, ...t71 } = props;
-		qa = t3;
-		id = t4;
-		label = t5;
-		valueProp = t6;
-		defaultValue = t7;
-		onChange_0 = t8;
-		inputValueProp = t9;
-		defaultInputValue = t10;
-		onInputChange = t11;
-		placeholder = t12;
-		autoFocus = t13;
-		onFocus = t15;
-		onBlur = t16;
-		onKeyDown = t17;
-		validateTag = t19;
-		normalizeTag = t20;
-		maxTags = t21;
-		isClearable = t23;
-		onClear = t24;
-		items = t25;
-		renderChildren = t26;
-		allowsCustomValue = t27;
-		filter = t28;
-		disabledKeys = t29;
-		onOpenChange = t31;
-		hideTrigger = t32;
-		tagProps = t37;
-		icon = t38;
-		prefix = t39;
-		suffix = t40;
-		suffixPosition = t41;
-		isDisabled = t43;
-		isReadOnly = t44;
-		isRequired = t45;
-		isLoading = t46;
-		isInvalid = t47;
-		isValid = t48;
-		message = t49;
-		errorMessage = t50;
-		inputRefProp = t51;
-		wrapperRefProp = t52;
-		popoverRefProp = t53;
-		listBoxRefProp = t54;
-		wrapperStyles = t55;
-		inputStyles = t56;
-		tagListStyles = t57;
-		tagStyles = t58;
-		triggerStyles = t59;
-		overlayStyles = t60;
-		listBoxStyles = t61;
-		optionStyles = t62;
-		sectionStyles = t63;
-		headingStyles = t64;
-		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;
-		popoverTrigger = t30 === void 0 ? "input" : t30;
-		direction = t33 === void 0 ? "bottom" : t33;
-		shouldFlip = t34 === void 0 ? true : t34;
-		overlayOffset = t35 === void 0 ? 8 : t35;
-		containerPadding = t36 === void 0 ? 8 : t36;
-		size = t42 === void 0 ? "medium" : t42;
-		t2 = extractStyles(otherProps, CONTAINER_STYLES);
-		$[3] = props;
-		$[4] = allowsCustomValue;
-		$[5] = autoComplete;
-		$[6] = autoFocus;
-		$[7] = className;
-		$[8] = containerPadding;
-		$[9] = defaultInputValue;
-		$[10] = defaultValue;
-		$[11] = delimiters;
-		$[12] = direction;
-		$[13] = disabledKeys;
-		$[14] = errorMessage;
-		$[15] = filter;
-		$[16] = headingStyles;
-		$[17] = hideTrigger;
-		$[18] = icon;
-		$[19] = id;
-		$[20] = inputRefProp;
-		$[21] = inputStyles;
-		$[22] = inputValueProp;
-		$[23] = isClearable;
-		$[24] = isDisabled;
-		$[25] = isInvalid;
-		$[26] = isLoading;
-		$[27] = isReadOnly;
-		$[28] = isRequired;
-		$[29] = isValid;
-		$[30] = items;
-		$[31] = label;
-		$[32] = listBoxRefProp;
-		$[33] = listBoxStyles;
-		$[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];
-		autoFocus = $[6];
-		className = $[7];
-		containerPadding = $[8];
-		defaultInputValue = $[9];
-		defaultValue = $[10];
-		delimiters = $[11];
-		direction = $[12];
-		disabledKeys = $[13];
-		errorMessage = $[14];
-		filter = $[15];
-		headingStyles = $[16];
-		hideTrigger = $[17];
-		icon = $[18];
-		id = $[19];
-		inputRefProp = $[20];
-		inputStyles = $[21];
-		inputValueProp = $[22];
-		isClearable = $[23];
-		isDisabled = $[24];
-		isInvalid = $[25];
-		isLoading = $[26];
-		isReadOnly = $[27];
-		isRequired = $[28];
-		isValid = $[29];
-		items = $[30];
-		label = $[31];
-		listBoxRefProp = $[32];
-		listBoxStyles = $[33];
-		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 { qa, id, label, value: valueProp, defaultValue, onChange: onChange_0, inputValue: inputValueProp, defaultInputValue, onInputChange, placeholder, autoFocus, autoComplete: t2, onFocus, onBlur, onKeyDown, delimiters: t3, validateTag, normalizeTag, maxTags, shouldCommitOnBlur: t4, isClearable, onClear, items, children: renderChildren, allowsCustomValue, filter, disabledKeys, popoverTrigger: t5, onOpenChange, hideTrigger, direction: t6, shouldFlip: t7, overlayOffset: t8, containerPadding: t9, tagProps, icon, prefix, suffix, suffixPosition, size: t10, isDisabled, isReadOnly, isRequired, isLoading, isInvalid, isValid, message, errorMessage, inputRef: inputRefProp, wrapperRef: wrapperRefProp, popoverRef: popoverRefProp, listBoxRef: listBoxRefProp, wrapperStyles, inputStyles, tagListStyles, tagStyles, triggerStyles, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, listGap, labelProps: userLabelProps, mods, className, style, qaVal, name, form, ...otherProps } = props;
+	const autoComplete = t2 === void 0 ? "off" : t2;
+	const delimiters = t3 === void 0 ? DEFAULT_DELIMITERS : t3;
+	const shouldCommitOnBlur = t4 === void 0 ? true : t4;
+	const popoverTrigger = t5 === void 0 ? "input" : t5;
+	const direction = t6 === void 0 ? "bottom" : t6;
+	const shouldFlip = t7 === void 0 ? true : t7;
+	const overlayOffset = t8 === void 0 ? 8 : t8;
+	const containerPadding = t9 === void 0 ? 8 : t9;
+	const size = t10 === void 0 ? "medium" : t10;
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
 	const rootRef = useCombinedRefs(ref);
 	const inputRef = useCombinedRefs(inputRefProp);
 	const wrapperRef = useCombinedRefs(wrapperRefProp);
@@ -614,36 +340,30 @@ function TagInput(props, ref) {
 	const listBoxRef = useCombinedRefs(listBoxRefProp);
 	const tagListRef = useRef(null);
 	const listStateRef = useRef(null);
-	let t3;
-	if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = generateRandomId();
-		$[74] = t3;
-	} else t3 = $[74];
-	const listBoxId = `TagInputListBox-${t3}`;
+	let t11;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = generateRandomId();
+		$[3] = t11;
+	} else t11 = $[3];
+	const listBoxId = `TagInputListBox-${t11}`;
 	const tagListId = useId$1();
 	const summaryId = useId$1();
 	const hintId = useId$1();
 	const triggerId = useId$1();
 	const clearId = useId$1();
-	let t4;
-	if ($[75] !== defaultValue) {
-		t4 = defaultValue ?? [];
-		$[75] = defaultValue;
-		$[76] = t4;
-	} else t4 = $[76];
-	const [values, setValues] = useControlledState(valueProp, t4, onChange_0);
+	const [values, setValues] = useControlledState(valueProp, defaultValue ?? [], onChange_0);
 	const uniqueValues = [...new Set((values ?? []).map(String))];
 	const [draft, setDraftState] = useControlledState(inputValueProp, defaultInputValue ?? "", onInputChange);
 	const { tagError, setTagError, clearTagErrorAfterPress, cancelPendingClear } = useTagError();
-	let t5;
-	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
+	let t12;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = {
 			id: 0,
 			text: ""
 		};
-		$[77] = t5;
-	} else t5 = $[77];
-	const [announcement, setAnnouncement] = useState(t5);
+		$[4] = t12;
+	} else t12 = $[4];
+	const [announcement, setAnnouncement] = useState(t12);
 	let children = renderChildren;
 	if (items && typeof renderChildren === "function") children = Array.from(items).map((item, index) => {
 		const rendered = renderChildren(item);
@@ -655,59 +375,40 @@ function TagInput(props, ref) {
 		children,
 		selectionMode: "none"
 	}).collection;
-	let t6;
-	if ($[78] !== collection) {
-		t6 = (key) => {
+	let t13;
+	if ($[5] !== collection) {
+		t13 = (key) => {
 			const node = collection.getItem(key);
 			return node?.type === "item" ? node : null;
 		};
-		$[78] = collection;
-		$[79] = t6;
-	} else t6 = $[79];
-	const getOption = t6;
-	let t7;
-	if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = { sensitivity: "base" };
-		$[80] = t7;
-	} else t7 = $[80];
-	const { contains } = useFilter(t7);
+		$[5] = collection;
+		$[6] = t13;
+	} else t13 = $[6];
+	const getOption = t13;
+	let t14;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = { sensitivity: "base" };
+		$[7] = t14;
+	} else t14 = $[7];
+	const { contains } = useFilter(t14);
 	const textFilterFn = filter === false ? showEveryOption : filter || contains;
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	const term = draft.trim();
 	const [knownLabels, setKnownLabels] = useState(_temp2);
-	let t8;
-	if ($[81] !== getOption || $[82] !== knownLabels) {
-		t8 = (key_0) => getOption(key_0)?.textValue || knownLabels.get(key_0) || key_0;
-		$[81] = getOption;
-		$[82] = knownLabels;
-		$[83] = t8;
-	} else t8 = $[83];
-	const getOptionLabel = t8;
-	let t9;
-	if ($[84] !== getOptionLabel || $[85] !== tagProps) {
-		t9 = (key_1) => textLabel(tagProps?.(key_1)?.children) ?? getOptionLabel(key_1);
-		$[84] = getOptionLabel;
-		$[85] = tagProps;
-		$[86] = t9;
-	} else t9 = $[86];
-	const getTagLabel = t9;
-	let t10;
-	if ($[87] !== tagProps) {
-		t10 = (key_2) => !!tagProps?.(key_2)?.isDisabled;
-		$[87] = tagProps;
-		$[88] = t10;
-	} else t10 = $[88];
-	const isTagLocked = t10;
-	let t11;
-	if ($[89] !== disabledKeys) {
-		t11 = new Set([...disabledKeys ?? []].map(String));
-		$[89] = disabledKeys;
-		$[90] = t11;
-	} else t11 = $[90];
-	const disabledKeySet = t11;
-	let t12;
-	if ($[91] !== getOption || $[92] !== knownLabels) {
-		t12 = (keys) => {
+	let t15;
+	if ($[8] !== getOption || $[9] !== knownLabels) {
+		t15 = (key_0) => getOption(key_0)?.textValue || knownLabels.get(key_0) || key_0;
+		$[8] = getOption;
+		$[9] = knownLabels;
+		$[10] = t15;
+	} else t15 = $[10];
+	const getOptionLabel = t15;
+	const getTagLabel = (key_1) => textLabel(tagProps?.(key_1)?.children) ?? getOptionLabel(key_1);
+	const isTagLocked = (key_2) => !!tagProps?.(key_2)?.isDisabled;
+	const disabledKeySet = new Set([...disabledKeys ?? []].map(String));
+	let t16;
+	if ($[11] !== getOption || $[12] !== knownLabels) {
+		t16 = (keys) => {
 			let next = null;
 			for (const key_3 of keys) {
 				const label_0 = getOption(key_3)?.textValue;
@@ -718,62 +419,40 @@ function TagInput(props, ref) {
 			}
 			if (next) setKnownLabels(next);
 		};
-		$[91] = getOption;
-		$[92] = knownLabels;
-		$[93] = t12;
-	} else t12 = $[93];
-	const rememberLabels = useEvent(t12);
-	let t13;
-	if ($[94] !== allowsCustomValue || $[95] !== collection || $[96] !== hasOptions) {
-		t13 = (text) => {
-			if (!hasOptions) return null;
-			const match = matchOptionText(collection, text);
-			return match.exact ?? (allowsCustomValue ? null : match.loose);
+		$[11] = getOption;
+		$[12] = knownLabels;
+		$[13] = t16;
+	} else t16 = $[13];
+	const rememberLabels = useEvent(t16);
+	const findOptionKey = (text) => {
+		if (!hasOptions) return null;
+		const match = matchOptionText(collection, text);
+		return match.exact ?? (allowsCustomValue ? null : match.loose);
+	};
+	const resolveTypedText = (text_0) => {
+		const optionKey = findOptionKey(text_0);
+		if (optionKey != null || !normalizeTag) return {
+			optionKey,
+			typed: text_0
 		};
-		$[94] = allowsCustomValue;
-		$[95] = collection;
-		$[96] = hasOptions;
-		$[97] = t13;
-	} else t13 = $[97];
-	const findOptionKey = t13;
-	let t14;
-	if ($[98] !== findOptionKey || $[99] !== normalizeTag) {
-		t14 = (text_0) => {
-			const optionKey = findOptionKey(text_0);
-			if (optionKey != null || !normalizeTag) return {
-				optionKey,
-				typed: text_0
-			};
-			const typed = normalizeTag(text_0).trim();
-			return {
-				optionKey: typed ? findOptionKey(typed) : null,
-				typed
-			};
+		const typed = normalizeTag(text_0).trim();
+		return {
+			optionKey: typed ? findOptionKey(typed) : null,
+			typed
 		};
-		$[98] = findOptionKey;
-		$[99] = normalizeTag;
-		$[100] = t14;
-	} else t14 = $[100];
-	const resolveTypedText = t14;
-	let t15;
-	if ($[101] !== normalizeTag || $[102] !== resolveTypedText) {
-		t15 = (part, t16) => {
-			const source = t16 === void 0 ? "text" : t16;
-			if (source === "text") return resolveTypedText(part);
-			if (source === "option") return {
-				optionKey: part,
-				typed: part
-			};
-			return {
-				optionKey: null,
-				typed: normalizeTag ? normalizeTag(part).trim() : part
-			};
+	};
+	const resolvePart = (part, t17) => {
+		const source = t17 === void 0 ? "text" : t17;
+		if (source === "text") return resolveTypedText(part);
+		if (source === "option") return {
+			optionKey: part,
+			typed: part
+		};
+		return {
+			optionKey: null,
+			typed: normalizeTag ? normalizeTag(part).trim() : part
 		};
-		$[101] = normalizeTag;
-		$[102] = resolveTypedText;
-		$[103] = t15;
-	} else t15 = $[103];
-	const resolvePart = t15;
+	};
 	const termOptionKey = term ? resolveTypedText(term).optionKey : null;
 	const optionFilterFn = (nodes) => {
 		if (!isFilterActive || !term) return nodes;
@@ -781,12 +460,12 @@ function TagInput(props, ref) {
 	};
 	const visibleOptionKeys = [];
 	if (hasOptions) collectVisibleKeys(optionFilterFn(collection), visibleOptionKeys, disabledKeys ? new Set(disabledKeys) : void 0);
-	let t16;
-	if ($[104] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = [];
-		$[104] = t16;
-	} else t16 = $[104];
-	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t16);
+	let t18;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = [];
+		$[14] = t18;
+	} else t18 = $[14];
+	const [unpickedCustomValues, setUnpickedCustomValues] = useState(t18);
 	const { keys: customValueKeys, visibleKeys: visibleCustomKeys, typedKey: customTerm } = hasOptions && allowsCustomValue ? getCustomRows({
 		values: uniqueValues,
 		unpicked: unpickedCustomValues,
@@ -810,24 +489,11 @@ function TagInput(props, ref) {
 	const isInteractive = !isDisabled && !isReadOnly;
 	const shouldShowPopover = hasOptions && isInteractive && isPopoverOpen && hasResults;
 	const notifiedOpenRef = useRef(false);
-	let t17;
-	let t18;
-	if ($[105] !== onOpenChange || $[106] !== shouldShowPopover) {
-		t17 = () => {
-			if (notifiedOpenRef.current === shouldShowPopover) return;
-			notifiedOpenRef.current = shouldShowPopover;
-			onOpenChange?.(shouldShowPopover);
-		};
-		t18 = [shouldShowPopover, onOpenChange];
-		$[105] = onOpenChange;
-		$[106] = shouldShowPopover;
-		$[107] = t17;
-		$[108] = t18;
-	} else {
-		t17 = $[107];
-		t18 = $[108];
-	}
-	useEffect(t17, t18);
+	useEffect(() => {
+		if (notifiedOpenRef.current === shouldShowPopover) return;
+		notifiedOpenRef.current = shouldShowPopover;
+		onOpenChange?.(shouldShowPopover);
+	}, [shouldShowPopover, onOpenChange]);
 	const visibleTargetKeys = [...visibleOptionKeys, ...visibleCustomKeys];
 	if (customTerm) visibleTargetKeys.push(customTerm);
 	const preferredOptionKey = getPreferredRowKey(visibleTargetKeys, getExactRowKey(collection, {
@@ -836,82 +502,50 @@ function TagInput(props, ref) {
 		customTerm,
 		customValueKeys
 	}), term, uniqueValues);
-	let t19;
-	if ($[109] !== customTerm || $[110] !== preferredOptionKey || $[111] !== shouldShowPopover || $[112] !== term || $[113] !== visibleOptionsSignature || $[114] !== wrapperRef) {
-		t19 = {
-			listStateRef,
-			wrapperRef,
-			isOpen: shouldShowPopover,
-			visibleOptionsSignature,
-			customTerm,
-			term,
-			preferredOptionKey
-		};
-		$[109] = customTerm;
-		$[110] = preferredOptionKey;
-		$[111] = shouldShowPopover;
-		$[112] = term;
-		$[113] = visibleOptionsSignature;
-		$[114] = wrapperRef;
-		$[115] = t19;
-	} else t19 = $[115];
-	const { activeOption, setActiveOption, moveVirtualFocus, popoverMinWidth } = useActiveOption(t19);
+	const { activeOption, setActiveOption, moveVirtualFocus, popoverMinWidth } = useActiveOption({
+		listStateRef,
+		wrapperRef,
+		isOpen: shouldShowPopover,
+		visibleOptionsSignature,
+		customTerm,
+		term,
+		preferredOptionKey
+	});
 	const activeOptionKey = activeOption?.key ?? null;
-	let t20;
-	if ($[116] !== setDraftState || $[117] !== setIsFilterActive) {
-		t20 = (next_0) => {
+	let t19;
+	if ($[15] !== setDraftState) {
+		t19 = (next_0) => {
 			setDraftState(next_0);
 			setIsFilterActive(!!next_0.trim());
 		};
-		$[116] = setDraftState;
-		$[117] = setIsFilterActive;
-		$[118] = t20;
-	} else t20 = $[118];
-	const setDraft = useEvent(t20);
-	let t21;
-	if ($[119] !== setAnnouncement) {
-		t21 = (text_1) => {
+		$[15] = setDraftState;
+		$[16] = t19;
+	} else t19 = $[16];
+	const setDraft = useEvent(t19);
+	let t20;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = (text_1) => {
 			setAnnouncement((prev) => ({
 				id: prev.id + 1,
 				text: text_1
 			}));
 		};
-		$[119] = setAnnouncement;
-		$[120] = t21;
-	} else t21 = $[120];
-	const announce = useEvent(t21);
-	let t22;
-	if ($[121] !== maxTags || $[122] !== t) {
-		t22 = (rejection) => {
-			if (rejection.message) return rejection.message;
-			switch (rejection.reason) {
-				case "duplicate": return t("tagInput.duplicateValue", "\"{{value}}\" is already added", { value: rejection.text });
-				case "unknown": return t("tagInput.unknownValue", "\"{{value}}\" is not in the list", { value: rejection.text });
-				case "unavailable": return t("tagInput.unavailableValue", "\"{{value}}\" is not available", { value: rejection.text });
-				case "limit": return t("tagInput.limitReached", "You can add up to {{count}}", { count: maxTags });
-				default: return t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: rejection.text });
-			}
-		};
-		$[121] = maxTags;
-		$[122] = t;
-		$[123] = t22;
-	} else t22 = $[123];
-	const rejectionMessage = useEvent(t22);
-	let t23;
-	if ($[124] !== delimiters) {
-		t23 = delimiters.find(_temp4);
-		$[124] = delimiters;
-		$[125] = t23;
-	} else t23 = $[125];
-	const joinDelimiter = t23;
+		$[17] = t20;
+	} else t20 = $[17];
+	const announce = useEvent(t20);
+	const rejectionMessage = useEvent((rejection) => {
+		if (rejection.message) return rejection.message;
+		switch (rejection.reason) {
+			case "duplicate": return t("tagInput.duplicateValue", "\"{{value}}\" is already added", { value: rejection.text });
+			case "unknown": return t("tagInput.unknownValue", "\"{{value}}\" is not in the list", { value: rejection.text });
+			case "unavailable": return t("tagInput.unavailableValue", "\"{{value}}\" is not available", { value: rejection.text });
+			case "limit": return t("tagInput.limitReached", "You can add up to {{count}}", { count: maxTags });
+			default: return t("tagInput.invalidValue", "\"{{value}}\" is not a valid value", { value: rejection.text });
+		}
+	});
+	const joinDelimiter = delimiters.find(_temp4);
 	const joiner = joinDelimiter ? `${joinDelimiter} ` : " ";
-	let t24;
-	if ($[126] !== props) {
-		t24 = rendersFieldChrome(props);
-		$[126] = props;
-		$[127] = t24;
-	} else t24 = $[127];
-	const hasFieldMessage = t24;
+	const hasFieldMessage = rendersFieldChrome(props);
 	const commitParts = useEvent((parts, source_0) => {
 		if (!parts.length) return "";
 		const rules = {
@@ -953,29 +587,20 @@ function TagInput(props, ref) {
 		setTagError(error);
 		return kept.map(_temp6).join(joiner);
 	});
-	let t25;
-	if ($[128] !== commitParts || $[129] !== delimiters || $[130] !== draft || $[131] !== setDraft) {
-		t25 = () => {
-			const rest = commitParts(splitTagText(draft, delimiters));
-			setDraft(rest);
-			return rest;
-		};
-		$[128] = commitParts;
-		$[129] = delimiters;
-		$[130] = draft;
-		$[131] = setDraft;
-		$[132] = t25;
-	} else t25 = $[132];
-	const commitDraft = useEvent(t25);
-	let t26;
-	if ($[133] === Symbol.for("react.memo_cache_sentinel")) {
-		t26 = () => {
+	const commitDraft = useEvent(() => {
+		const rest = commitParts(splitTagText(draft, delimiters));
+		setDraft(rest);
+		return rest;
+	});
+	let t21;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = () => {
 			const rows = tagListRef.current?.querySelectorAll("[role=\"row\"]:not([aria-disabled=\"true\"])");
 			rows?.[rows.length - 1]?.focus();
 		};
-		$[133] = t26;
-	} else t26 = $[133];
-	const focusLastTag = useEvent(t26);
+		$[18] = t21;
+	} else t21 = $[18];
+	const focusLastTag = useEvent(t21);
 	const removeValues = useEvent((requested) => {
 		const keys_0 = requested.filter((key_4) => !isTagLocked(key_4));
 		if (!keys_0.length) return;
@@ -1013,55 +638,35 @@ function TagInput(props, ref) {
 		setTimeout(() => inputRef.current?.focus(), 0);
 	});
 	const isTabbingRef = useRef(false);
-	let t27;
-	if ($[134] !== hasOptions || $[135] !== hasResults || $[136] !== moveVirtualFocus || $[137] !== setIsFilterActive || $[138] !== setIsPopoverOpen || $[139] !== shouldShowPopover || $[140] !== term) {
-		t27 = (e) => {
-			if (!hasOptions) return;
-			e.preventDefault();
-			if (!shouldShowPopover) {
-				if (!hasResults) setIsFilterActive(false);
-				setIsPopoverOpen(true);
-				return;
-			}
-			const listState = listStateRef.current;
-			if (listState) moveVirtualFocus(getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1), "user", term);
-		};
-		$[134] = hasOptions;
-		$[135] = hasResults;
-		$[136] = moveVirtualFocus;
-		$[137] = setIsFilterActive;
-		$[138] = setIsPopoverOpen;
-		$[139] = shouldShowPopover;
-		$[140] = term;
-		$[141] = t27;
-	} else t27 = $[141];
-	const handleArrowKey = useEvent(t27);
-	let t28;
-	if ($[142] !== moveVirtualFocus || $[143] !== term) {
-		t28 = (e_0) => {
-			e_0.preventDefault();
-			const listState_0 = listStateRef.current;
-			if (listState_0) moveVirtualFocus(getEdgeVisibleKey(listState_0, e_0.key === "Home" ? "first" : "last"), "user", term);
-		};
-		$[142] = moveVirtualFocus;
-		$[143] = term;
-		$[144] = t28;
-	} else t28 = $[144];
-	const handleEdgeKey = useEvent(t28);
-	let t29;
-	if ($[145] !== focusLastTag || $[146] !== setIsPopoverOpen) {
-		t29 = (e_1) => {
+	const handleArrowKey = useEvent((e) => {
+		if (!hasOptions) return;
+		e.preventDefault();
+		if (!shouldShowPopover) {
+			if (!hasResults) setIsFilterActive(false);
+			setIsPopoverOpen(true);
+			return;
+		}
+		const listState = listStateRef.current;
+		if (listState) moveVirtualFocus(getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1), "user", term);
+	});
+	const handleEdgeKey = useEvent((e_0) => {
+		e_0.preventDefault();
+		const listState_0 = listStateRef.current;
+		if (listState_0) moveVirtualFocus(getEdgeVisibleKey(listState_0, e_0.key === "Home" ? "first" : "last"), "user", term);
+	});
+	let t22;
+	if ($[19] !== focusLastTag) {
+		t22 = (e_1) => {
 			if (isComposingKey(e_1)) return;
 			e_1.preventDefault();
 			if (e_1.repeat) return;
 			setIsPopoverOpen(false);
 			focusLastTag();
 		};
-		$[145] = focusLastTag;
-		$[146] = setIsPopoverOpen;
-		$[147] = t29;
-	} else t29 = $[147];
-	const handleBackspaceKey = useEvent(t29);
+		$[19] = focusLastTag;
+		$[20] = t22;
+	} else t22 = $[20];
+	const handleBackspaceKey = useEvent(t22);
 	const handleEnterKey = useEvent((e_2) => {
 		if (isComposingKey(e_2)) return;
 		const isCurrent = activeOption != null && activeOption.term === term;
@@ -1083,27 +688,18 @@ function TagInput(props, ref) {
 		e_2.preventDefault();
 		if (term) commitDraft();
 	});
-	let t30;
-	if ($[148] !== commitParts || $[149] !== delimiters || $[150] !== draft || $[151] !== joiner || $[152] !== setDraft) {
-		t30 = (e_3) => {
-			if (isComposingKey(e_3)) return;
-			e_3.preventDefault();
-			const el = e_3.currentTarget;
-			const start = el.selectionStart ?? draft.length;
-			const end = el.selectionEnd ?? start;
-			setDraft([commitParts(splitTagText(draft.slice(0, start), delimiters)), draft.slice(end).trimStart()].filter(Boolean).join(joiner));
-		};
-		$[148] = commitParts;
-		$[149] = delimiters;
-		$[150] = draft;
-		$[151] = joiner;
-		$[152] = setDraft;
-		$[153] = t30;
-	} else t30 = $[153];
-	const handleDelimiterKey = useEvent(t30);
-	let t31;
-	if ($[154] !== draft || $[155] !== setDraft || $[156] !== setIsPopoverOpen || $[157] !== setTagError || $[158] !== shouldShowPopover || $[159] !== tagError) {
-		t31 = (e_4) => {
+	const handleDelimiterKey = useEvent((e_3) => {
+		if (isComposingKey(e_3)) return;
+		e_3.preventDefault();
+		const el = e_3.currentTarget;
+		const start = el.selectionStart ?? draft.length;
+		const end = el.selectionEnd ?? start;
+		const rejected_0 = commitParts(splitTagText(draft.slice(0, start), delimiters));
+		setDraft([rejected_0, draft.slice(end).trimStart()].filter(Boolean).join(joiner));
+	});
+	let t23;
+	if ($[21] !== draft || $[22] !== setDraft || $[23] !== setTagError || $[24] !== shouldShowPopover || $[25] !== tagError) {
+		t23 = (e_4) => {
 			if (shouldShowPopover) {
 				e_4.preventDefault();
 				e_4.stopPropagation();
@@ -1117,15 +713,14 @@ function TagInput(props, ref) {
 				setIsPopoverOpen(false);
 			}
 		};
-		$[154] = draft;
-		$[155] = setDraft;
-		$[156] = setIsPopoverOpen;
-		$[157] = setTagError;
-		$[158] = shouldShowPopover;
-		$[159] = tagError;
-		$[160] = t31;
-	} else t31 = $[160];
-	const handleEscapeKey = useEvent(t31);
+		$[21] = draft;
+		$[22] = setDraft;
+		$[23] = setTagError;
+		$[24] = shouldShowPopover;
+		$[25] = tagError;
+		$[26] = t23;
+	} else t23 = $[26];
+	const handleEscapeKey = useEvent(t23);
 	const handleKeyDown = useEvent((e_5) => {
 		onKeyDown?.(e_5);
 		isTabbingRef.current = e_5.key === "Tab" && !e_5.defaultPrevented;
@@ -1150,107 +745,52 @@ function TagInput(props, ref) {
 		setDraft(nextDraft);
 		if (hasOptions && popoverTrigger !== "manual" && nextDraft.trim()) setIsPopoverOpen(true);
 	});
-	let t32;
-	if ($[161] !== commitParts || $[162] !== delimiters || $[163] !== draft || $[164] !== isInteractive || $[165] !== setDraft || $[166] !== setTagError) {
-		t32 = (e_6) => {
-			if (!isInteractive) return;
-			const pasted = e_6.clipboardData.getData("text");
-			if (!pasted || splitTagText(pasted, delimiters).length < 2) return;
-			e_6.preventDefault();
-			const el_0 = e_6.currentTarget;
-			const start_0 = el_0.selectionStart ?? draft.length;
-			const end_0 = el_0.selectionEnd ?? draft.length;
+	const handlePaste = useEvent((e_6) => {
+		if (!isInteractive) return;
+		const pasted = e_6.clipboardData.getData("text");
+		if (!pasted || splitTagText(pasted, delimiters).length < 2) return;
+		e_6.preventDefault();
+		const el_0 = e_6.currentTarget;
+		const start_0 = el_0.selectionStart ?? draft.length;
+		const end_0 = el_0.selectionEnd ?? draft.length;
+		setTagError(null);
+		setDraft(commitParts(splitTagText(`${draft.slice(0, start_0)}\n${pasted}\n${draft.slice(end_0)}`, delimiters)));
+	});
+	const settleDraft = useEvent(() => {
+		if (!term) return "";
+		if (!shouldCommitOnBlur || !isInteractive) return draft;
+		if (hasOptions && !allowsCustomValue && termOptionKey == null) {
+			setDraft("");
 			setTagError(null);
-			setDraft(commitParts(splitTagText(`${draft.slice(0, start_0)}\n${pasted}\n${draft.slice(end_0)}`, delimiters)));
-		};
-		$[161] = commitParts;
-		$[162] = delimiters;
-		$[163] = draft;
-		$[164] = isInteractive;
-		$[165] = setDraft;
-		$[166] = setTagError;
-		$[167] = t32;
-	} else t32 = $[167];
-	const handlePaste = useEvent(t32);
-	let t33;
-	if ($[168] !== allowsCustomValue || $[169] !== commitDraft || $[170] !== draft || $[171] !== hasOptions || $[172] !== isInteractive || $[173] !== setDraft || $[174] !== setTagError || $[175] !== shouldCommitOnBlur || $[176] !== term || $[177] !== termOptionKey) {
-		t33 = () => {
-			if (!term) return "";
-			if (!shouldCommitOnBlur || !isInteractive) return draft;
-			if (hasOptions && !allowsCustomValue && termOptionKey == null) {
-				setDraft("");
-				setTagError(null);
-				return "";
-			}
-			return commitDraft();
-		};
-		$[168] = allowsCustomValue;
-		$[169] = commitDraft;
-		$[170] = draft;
-		$[171] = hasOptions;
-		$[172] = isInteractive;
-		$[173] = setDraft;
-		$[174] = setTagError;
-		$[175] = shouldCommitOnBlur;
-		$[176] = term;
-		$[177] = termOptionKey;
-		$[178] = t33;
-	} else t33 = $[178];
-	const settleDraft = useEvent(t33);
-	let t34;
-	if ($[179] !== cancelPendingClear || $[180] !== onFocus) {
-		t34 = () => {
-			cancelPendingClear();
-			onFocus?.();
-		};
-		$[179] = cancelPendingClear;
-		$[180] = onFocus;
-		$[181] = t34;
-	} else t34 = $[181];
-	const handleCompositeFocus = useEvent(t34);
-	let t35;
-	if ($[182] !== clearTagErrorAfterPress || $[183] !== onBlur || $[184] !== setIsPopoverOpen || $[185] !== setTagError || $[186] !== setUnpickedCustomValues || $[187] !== settleDraft || $[188] !== tagError) {
-		t35 = (t36) => {
-			const { isPressing } = t36;
-			setIsPopoverOpen(false);
-			setUnpickedCustomValues([]);
-			const wasShowingMessage = tagError != null;
-			if (!settleDraft()) if (isPressing && wasShowingMessage) clearTagErrorAfterPress();
+			return "";
+		}
+		return commitDraft();
+	});
+	const handleCompositeFocus = useEvent(() => {
+		cancelPendingClear();
+		onFocus?.();
+	});
+	const handleCompositeBlur = useEvent((t24) => {
+		const { isPressing } = t24;
+		setIsPopoverOpen(false);
+		setUnpickedCustomValues([]);
+		const wasShowingMessage = tagError != null;
+		if (!settleDraft()) {
+			if (isPressing && wasShowingMessage) clearTagErrorAfterPress();
 			else setTagError(null);
-			onBlur?.();
-		};
-		$[182] = clearTagErrorAfterPress;
-		$[183] = onBlur;
-		$[184] = setIsPopoverOpen;
-		$[185] = setTagError;
-		$[186] = setUnpickedCustomValues;
-		$[187] = settleDraft;
-		$[188] = tagError;
-		$[189] = t35;
-	} else t35 = $[189];
-	const handleCompositeBlur = useEvent(t35);
-	const t36 = rootRef;
-	const t37 = popoverRef;
-	let t38;
-	if ($[190] !== handleCompositeBlur || $[191] !== handleCompositeFocus || $[192] !== isDisabled || $[193] !== t36 || $[194] !== t37) {
-		t38 = {
-			wrapperRef: t36,
-			popoverRef: t37,
-			onFocus: handleCompositeFocus,
-			onBlur: handleCompositeBlur,
-			isDisabled
-		};
-		$[190] = handleCompositeBlur;
-		$[191] = handleCompositeFocus;
-		$[192] = isDisabled;
-		$[193] = t36;
-		$[194] = t37;
-		$[195] = t38;
-	} else t38 = $[195];
-	const { compositeFocusProps } = useCompositeFocus(t38);
-	let t39;
-	if ($[196] !== rootRef || $[197] !== setIsPopoverOpen || $[198] !== settleDraft) {
-		t39 = (e_7) => {
+		}
+		onBlur?.();
+	});
+	const { compositeFocusProps } = useCompositeFocus({
+		wrapperRef: rootRef,
+		popoverRef,
+		onFocus: handleCompositeFocus,
+		onBlur: handleCompositeBlur,
+		isDisabled
+	});
+	let t25;
+	if ($[27] !== rootRef || $[28] !== settleDraft) {
+		t25 = (e_7) => {
 			const isTabbing = isTabbingRef.current;
 			const next_4 = e_7.relatedTarget;
 			isTabbingRef.current = false;
@@ -1258,24 +798,14 @@ function TagInput(props, ref) {
 			setIsPopoverOpen(false);
 			settleDraft();
 		};
-		$[196] = rootRef;
-		$[197] = setIsPopoverOpen;
-		$[198] = settleDraft;
-		$[199] = t39;
-	} else t39 = $[199];
-	const handleInputBlur = useEvent(t39);
-	let t40;
-	if ($[200] !== hasOptions || $[201] !== isInteractive || $[202] !== popoverTrigger || $[203] !== setIsPopoverOpen) {
-		t40 = () => {
-			if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
-		};
-		$[200] = hasOptions;
-		$[201] = isInteractive;
-		$[202] = popoverTrigger;
-		$[203] = setIsPopoverOpen;
-		$[204] = t40;
-	} else t40 = $[204];
-	const handleInputFocus = useEvent(t40);
+		$[27] = rootRef;
+		$[28] = settleDraft;
+		$[29] = t25;
+	} else t25 = $[29];
+	const handleInputBlur = useEvent(t25);
+	const handleInputFocus = useEvent(() => {
+		if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
+	});
 	const tags = uniqueValues.map((value_5) => {
 		const ownProps = tagProps?.(value_5);
 		const result = !(getOption(value_5) != null || knownLabels.has(value_5)) && validateTag ? validateTag(value_5) : true;
@@ -1293,46 +823,22 @@ function TagInput(props, ref) {
 	const hasBackspaceHint = isInteractive && hasRemovableTags;
 	const lockedKeys = tags.filter(_temp9).map(_temp0);
 	const optionDisabledKeys = lockedKeys.length ? [...disabledKeySet, ...lockedKeys] : disabledKeys;
-	let t41;
-	if ($[205] !== autoFocus || $[206] !== draft || $[207] !== effectiveIsInvalid || $[208] !== handleInputChange || $[209] !== id || $[210] !== isDisabled || $[211] !== isReadOnly || $[212] !== isRequired || $[213] !== label || $[214] !== otherProps || $[215] !== placeholder) {
-		t41 = {
-			...otherProps,
-			id,
-			label,
-			value: draft,
-			placeholder,
-			isDisabled,
-			isReadOnly,
-			isRequired,
-			isInvalid: effectiveIsInvalid,
-			autoFocus,
-			onChange: handleInputChange
-		};
-		$[205] = autoFocus;
-		$[206] = draft;
-		$[207] = effectiveIsInvalid;
-		$[208] = handleInputChange;
-		$[209] = id;
-		$[210] = isDisabled;
-		$[211] = isReadOnly;
-		$[212] = isRequired;
-		$[213] = label;
-		$[214] = otherProps;
-		$[215] = placeholder;
-		$[216] = t41;
-	} else t41 = $[216];
-	const { labelProps, inputProps } = useTextField(t41, inputRef);
+	const { labelProps, inputProps } = useTextField({
+		...otherProps,
+		id,
+		label,
+		value: draft,
+		placeholder,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid: effectiveIsInvalid,
+		autoFocus,
+		onChange: handleInputChange
+	}, inputRef);
 	const ariaLabel = props["aria-label"];
 	const ariaLabelledby = props["aria-labelledby"];
-	const labelId = label ? labelProps.id : void 0;
-	let t42;
-	if ($[217] !== ariaLabelledby || $[218] !== labelId) {
-		t42 = [labelId, ariaLabelledby].filter(Boolean).join(" ") || void 0;
-		$[217] = ariaLabelledby;
-		$[218] = labelId;
-		$[219] = t42;
-	} else t42 = $[219];
-	const fieldLabelledby = t42;
+	const fieldLabelledby = [label ? labelProps.id : void 0, ariaLabelledby].filter(Boolean).join(" ") || void 0;
 	const describedBy = [];
 	if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
 	if (tags.length) describedBy.push(summaryId);
@@ -1346,276 +852,183 @@ function TagInput(props, ref) {
 		"data-input-type": "taginput",
 		"aria-describedby": describedBy.join(" ") || void 0
 	}, hasOptions ? getComboboxProps(listBoxId, shouldShowPopover, activeOptionKey) : void 0);
-	let t43;
-	if ($[220] !== hasResults || $[221] !== inputRef || $[222] !== setIsFilterActive || $[223] !== setIsPopoverOpen || $[224] !== shouldShowPopover) {
-		t43 = () => {
+	let t26;
+	if ($[30] !== hasResults || $[31] !== inputRef || $[32] !== shouldShowPopover) {
+		t26 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[220] = hasResults;
-		$[221] = inputRef;
-		$[222] = setIsFilterActive;
-		$[223] = setIsPopoverOpen;
-		$[224] = shouldShowPopover;
-		$[225] = t43;
-	} else t43 = $[225];
-	const handleTriggerPress = useEvent(t43);
-	let t44;
-	if ($[226] !== ariaLabel || $[227] !== fieldLabelledby || $[228] !== handleTriggerPress || $[229] !== hasOptions || $[230] !== hideTrigger || $[231] !== isInteractive || $[232] !== shouldShowPopover || $[233] !== size || $[234] !== triggerId || $[235] !== triggerStyles) {
-		t44 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(TagInputTrigger, {
-			id: triggerId,
-			size,
-			ariaLabel,
-			fieldLabelledby,
-			isOpen: shouldShowPopover,
-			isDisabled: !isInteractive,
-			styles: triggerStyles,
-			onPress: handleTriggerPress
-		}) : null;
-		$[226] = ariaLabel;
-		$[227] = fieldLabelledby;
-		$[228] = handleTriggerPress;
-		$[229] = hasOptions;
-		$[230] = hideTrigger;
-		$[231] = isInteractive;
-		$[232] = shouldShowPopover;
-		$[233] = size;
-		$[234] = triggerId;
-		$[235] = triggerStyles;
-		$[236] = t44;
-	} else t44 = $[236];
-	const trigger = t44;
-	let t45;
-	if ($[237] !== inputRef || $[238] !== onClear || $[239] !== setDraft || $[240] !== setIsPopoverOpen || $[241] !== setTagError) {
-		t45 = () => {
-			inputRef.current?.focus();
-			setDraft("");
-			setTagError(null);
-			setIsPopoverOpen(false);
-			onClear?.();
-		};
-		$[237] = inputRef;
-		$[238] = onClear;
-		$[239] = setDraft;
-		$[240] = setIsPopoverOpen;
-		$[241] = setTagError;
-		$[242] = t45;
-	} else t45 = $[242];
-	const clearText = useEvent(t45);
-	const canClear = !!isClearable && isInteractive && draft !== "";
-	let t46;
-	if ($[243] !== ariaLabel || $[244] !== canClear || $[245] !== clearId || $[246] !== clearText || $[247] !== fieldLabelledby || $[248] !== size) {
-		t46 = canClear ? /* @__PURE__ */ jsx(TagInputClearButton, {
-			id: clearId,
-			size,
-			ariaLabel,
-			fieldLabelledby,
-			onPress: clearText
-		}) : null;
-		$[243] = ariaLabel;
-		$[244] = canClear;
-		$[245] = clearId;
-		$[246] = clearText;
-		$[247] = fieldLabelledby;
-		$[248] = size;
-		$[249] = t46;
-	} else t46 = $[249];
-	const clearButton = t46;
-	const hasActions = clearButton != null || trigger != null;
-	const T0 = TagInputElement;
-	const t47 = qa || "TagInput";
-	let t48;
-	if ($[250] !== clearButton || $[251] !== hasActions || $[252] !== trigger) {
-		t48 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[250] = clearButton;
-		$[251] = hasActions;
-		$[252] = trigger;
-		$[253] = t48;
-	} else t48 = $[253];
-	let t49;
-	if ($[254] !== autoFocus || $[255] !== effectiveIsInvalid || $[256] !== icon || $[257] !== inputRef || $[258] !== inputStyles || $[259] !== isDisabled || $[260] !== isLoading || $[261] !== isValid || $[262] !== mods || $[263] !== prefix || $[264] !== size || $[265] !== suffix || $[266] !== suffixPosition || $[267] !== t47 || $[268] !== t48 || $[269] !== tagInputProps || $[270] !== wrapperRef || $[271] !== wrapperStyles) {
-		t49 = /* @__PURE__ */ jsx(TextInputBase, {
-			isBare: true,
-			qa: t47,
-			inputRef,
-			wrapperRef,
-			inputProps: tagInputProps,
-			mods,
-			icon,
-			prefix,
-			suffix,
-			suffixPosition,
-			actions: t48,
-			size,
-			autoFocus,
-			isDisabled,
-			isLoading,
-			isInvalid: effectiveIsInvalid,
-			isValid,
-			styles: wrapperStyles,
-			inputStyles
-		});
-		$[254] = autoFocus;
-		$[255] = effectiveIsInvalid;
-		$[256] = icon;
-		$[257] = inputRef;
-		$[258] = inputStyles;
-		$[259] = isDisabled;
-		$[260] = isLoading;
-		$[261] = isValid;
-		$[262] = mods;
-		$[263] = prefix;
-		$[264] = size;
-		$[265] = suffix;
-		$[266] = suffixPosition;
-		$[267] = t47;
-		$[268] = t48;
-		$[269] = tagInputProps;
-		$[270] = wrapperRef;
-		$[271] = wrapperStyles;
-		$[272] = t49;
-	} else t49 = $[272];
-	const t50 = tags.length ? /* @__PURE__ */ jsx(TagList, {
-		id: tagListId,
-		listRef: tagListRef,
-		inputRef,
-		"aria-label": ariaLabel ? t("tagInput.selectedValuesFor", "Selected values, {{label}}", { label: ariaLabel }) : t("tagInput.selectedValues", "Selected values"),
-		"aria-labelledby": fieldLabelledby,
-		tags,
-		size: TAG_SIZES[size] ?? "xsmall",
-		isDisabled,
-		isReadOnly,
-		styles: tagListStyles,
-		tagStyles,
-		onRemove: removeValues
+		$[30] = hasResults;
+		$[31] = inputRef;
+		$[32] = shouldShowPopover;
+		$[33] = t26;
+	} else t26 = $[33];
+	const handleTriggerPress = useEvent(t26);
+	const trigger = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(TagInputTrigger, {
+		id: triggerId,
+		size,
+		ariaLabel,
+		fieldLabelledby,
+		isOpen: shouldShowPopover,
+		isDisabled: !isInteractive,
+		styles: triggerStyles,
+		onPress: handleTriggerPress
 	}) : null;
-	const t51 = true;
-	const t52 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp1)) }) : null;
-	let t53;
-	if ($[273] !== summaryId || $[274] !== t52) {
-		t53 = /* @__PURE__ */ jsx("span", {
-			hidden: t51,
+	const clearText = useEvent(() => {
+		inputRef.current?.focus();
+		setDraft("");
+		setTagError(null);
+		setIsPopoverOpen(false);
+		onClear?.();
+	});
+	const clearButton = !!isClearable && isInteractive && draft !== "" ? /* @__PURE__ */ jsx(TagInputClearButton, {
+		id: clearId,
+		size,
+		ariaLabel,
+		fieldLabelledby,
+		onPress: clearText
+	}) : null;
+	const hasActions = clearButton != null || trigger != null;
+	let t27;
+	if ($[34] !== clearButton || $[35] !== hasActions || $[36] !== trigger) {
+		t27 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
+		$[34] = clearButton;
+		$[35] = hasActions;
+		$[36] = trigger;
+		$[37] = t27;
+	} else t27 = $[37];
+	const t28 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp1)) }) : null;
+	let t29;
+	if ($[38] !== summaryId || $[39] !== t28) {
+		t29 = /* @__PURE__ */ jsx("span", {
+			hidden: true,
 			id: summaryId,
-			children: t52
+			children: t28
 		});
-		$[273] = summaryId;
-		$[274] = t52;
-		$[275] = t53;
-	} else t53 = $[275];
-	let t54;
-	if ($[276] !== hasBackspaceHint || $[277] !== t) {
-		t54 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[276] = hasBackspaceHint;
-		$[277] = t;
-		$[278] = t54;
-	} else t54 = $[278];
-	let t55;
-	if ($[279] !== hintId || $[280] !== t54) {
-		t55 = /* @__PURE__ */ jsx("span", {
+		$[38] = summaryId;
+		$[39] = t28;
+		$[40] = t29;
+	} else t29 = $[40];
+	let t30;
+	if ($[41] !== hasBackspaceHint || $[42] !== t) {
+		t30 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
+		$[41] = hasBackspaceHint;
+		$[42] = t;
+		$[43] = t30;
+	} else t30 = $[43];
+	let t31;
+	if ($[44] !== hintId || $[45] !== t30) {
+		t31 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
-			children: t54
+			children: t30
 		});
-		$[279] = hintId;
-		$[280] = t54;
-		$[281] = t55;
-	} else t55 = $[281];
-	let t56;
-	if ($[282] !== announcement.id || $[283] !== announcement.text) {
-		t56 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		$[44] = hintId;
+		$[45] = t30;
+		$[46] = t31;
+	} else t31 = $[46];
+	let t32;
+	if ($[47] !== announcement.id || $[48] !== announcement.text) {
+		t32 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[282] = announcement.id;
-		$[283] = announcement.text;
-		$[284] = t56;
-	} else t56 = $[284];
-	const t57 = 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,
-		listGap,
-		selectionMode: "multiple",
-		selectedKeys: uniqueValues,
-		isCheckable: true,
-		shouldCloseOnTriggerInteraction: false,
-		isDisabled,
-		disabledKeys: optionDisabledKeys,
-		listStateRef,
-		ariaLabel,
-		ariaLabelledby: fieldLabelledby,
-		compositeFocusProps,
-		filter: optionFilterFn,
-		size,
-		onSelectionChange: handlePopoverSelection,
-		onClose: () => setIsPopoverOpen(false),
-		children: popoverChildren
-	}) : null;
-	let t58;
-	if ($[285] !== T0 || $[286] !== className || $[287] !== compositeFocusProps || $[288] !== qaVal || $[289] !== rootRef || $[290] !== style || $[291] !== styles || $[292] !== t49 || $[293] !== t50 || $[294] !== t53 || $[295] !== t55 || $[296] !== t56 || $[297] !== t57) {
-		t58 = /* @__PURE__ */ jsxs(T0, {
-			ref: rootRef,
-			className,
-			style,
-			qaVal,
-			styles,
-			...compositeFocusProps,
-			children: [
-				t49,
-				t50,
-				t53,
-				t55,
-				t56,
-				t57
-			]
-		});
-		$[285] = T0;
-		$[286] = className;
-		$[287] = compositeFocusProps;
-		$[288] = qaVal;
-		$[289] = rootRef;
-		$[290] = style;
-		$[291] = styles;
-		$[292] = t49;
-		$[293] = t50;
-		$[294] = t53;
-		$[295] = t55;
-		$[296] = t56;
-		$[297] = t57;
-		$[298] = t58;
-	} else t58 = $[298];
-	const tagInputField = t58;
+		$[47] = announcement.id;
+		$[48] = announcement.text;
+		$[49] = t32;
+	} else t32 = $[49];
+	const tagInputField = /* @__PURE__ */ jsxs(TagInputElement, {
+		ref: rootRef,
+		className,
+		style,
+		qaVal,
+		styles,
+		...compositeFocusProps,
+		children: [
+			/* @__PURE__ */ jsx(TextInputBase, {
+				isBare: true,
+				qa: qa || "TagInput",
+				inputRef,
+				wrapperRef,
+				inputProps: tagInputProps,
+				mods,
+				icon,
+				prefix,
+				suffix,
+				suffixPosition,
+				actions: t27,
+				size,
+				autoFocus,
+				isDisabled,
+				isLoading,
+				isInvalid: effectiveIsInvalid,
+				isValid,
+				styles: wrapperStyles,
+				inputStyles
+			}),
+			tags.length ? /* @__PURE__ */ jsx(TagList, {
+				id: tagListId,
+				listRef: tagListRef,
+				inputRef,
+				"aria-label": ariaLabel ? t("tagInput.selectedValuesFor", "Selected values, {{label}}", { label: ariaLabel }) : t("tagInput.selectedValues", "Selected values"),
+				"aria-labelledby": fieldLabelledby,
+				tags,
+				size: TAG_SIZES[size] ?? "xsmall",
+				isDisabled,
+				isReadOnly,
+				styles: tagListStyles,
+				tagStyles,
+				onRemove: removeValues
+			}) : null,
+			t29,
+			t31,
+			t32,
+			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,
+				listGap,
+				selectionMode: "multiple",
+				selectedKeys: uniqueValues,
+				isCheckable: true,
+				shouldCloseOnTriggerInteraction: false,
+				isDisabled,
+				disabledKeys: optionDisabledKeys,
+				listStateRef,
+				ariaLabel,
+				ariaLabelledby: fieldLabelledby,
+				compositeFocusProps,
+				filter: optionFilterFn,
+				size,
+				onSelectionChange: handlePopoverSelection,
+				onClose: () => setIsPopoverOpen(false),
+				children: popoverChildren
+			}) : null
+		]
+	});
 	const { children: _children, ...fieldProps } = props;
-	const fieldRef = useCombinedRefs();
-	let t59;
-	if ($[299] !== message || $[300] !== tagError) {
-		t59 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[299] = message;
-		$[300] = tagError;
-		$[301] = t59;
-	} else t59 = $[301];
-	return wrapWithField(tagInputField, fieldRef, {
+	return wrapWithField(tagInputField, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
-		message: t59,
+		message: tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message,
 		errorMessage: tagError ? void 0 : errorMessage
 	});
 }
@@ -1672,7 +1085,7 @@ Object.defineProperty(_TagInput, "cubeInputType", {
 	enumerable: false,
 	configurable: false
 });
-
 //#endregion
-export { _TagInput };
+export { _TagInput as TagInput, splitTagText };
+
 //# sourceMappingURL=TagInput.js.map