@cube-dev/ui-kit 0.0.0-canary-dd589bd → 0.0.0-canary-261ff32

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd589bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261ff32 | 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";
@@ -125,7 +125,7 @@ function isComposingKey(e) {
 	return e.nativeEvent.isComposing || e.keyCode === 229;
 }
 function TagInput(props, ref) {
-	const $ = c(281);
+	const $ = c(290);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -1076,44 +1076,105 @@ function TagInput(props, ref) {
 		$[165] = t31;
 	} else t31 = $[165];
 	const settleDraft = useEvent(t31);
+	const pendingClearRef = useRef(null);
 	let t32;
-	if ($[166] !== onBlur || $[167] !== setIsPopoverOpen || $[168] !== setTagError || $[169] !== setUnpickedCustomValues || $[170] !== settleDraft) {
+	if ($[166] === Symbol.for("react.memo_cache_sentinel")) {
 		t32 = () => {
+			pendingClearRef.current?.();
+			pendingClearRef.current = null;
+		};
+		$[166] = t32;
+	} else t32 = $[166];
+	const cancelPendingClear = t32;
+	let t33;
+	if ($[167] !== setTagError) {
+		t33 = () => {
+			cancelPendingClear();
+			let timer;
+			const handleMouseUp = () => {
+				timer = setTimeout(() => {
+					pendingClearRef.current = null;
+					setTagError(null);
+				}, 0);
+			};
+			document.addEventListener("mouseup", handleMouseUp, {
+				capture: true,
+				once: true
+			});
+			pendingClearRef.current = () => {
+				document.removeEventListener("mouseup", handleMouseUp, true);
+				clearTimeout(timer);
+			};
+		};
+		$[167] = setTagError;
+		$[168] = t33;
+	} else t33 = $[168];
+	const clearTagErrorAfterPress = t33;
+	let t34;
+	let t35;
+	if ($[169] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = () => () => pendingClearRef.current?.();
+		t35 = [];
+		$[169] = t34;
+		$[170] = t35;
+	} else {
+		t34 = $[169];
+		t35 = $[170];
+	}
+	useEffect(t34, t35);
+	let t36;
+	if ($[171] !== onFocus) {
+		t36 = () => {
+			cancelPendingClear();
+			onFocus?.();
+		};
+		$[171] = onFocus;
+		$[172] = t36;
+	} else t36 = $[172];
+	const handleCompositeFocus = useEvent(t36);
+	let t37;
+	if ($[173] !== clearTagErrorAfterPress || $[174] !== onBlur || $[175] !== setIsPopoverOpen || $[176] !== setTagError || $[177] !== setUnpickedCustomValues || $[178] !== settleDraft || $[179] !== tagError) {
+		t37 = (t38) => {
+			const { isPressing } = t38;
 			setIsPopoverOpen(false);
 			setUnpickedCustomValues([]);
-			if (!settleDraft()) setTagError(null);
+			const wasShowingMessage = tagError != null;
+			if (!settleDraft()) if (isPressing && wasShowingMessage) clearTagErrorAfterPress();
+			else setTagError(null);
 			onBlur?.();
 		};
-		$[166] = onBlur;
-		$[167] = setIsPopoverOpen;
-		$[168] = setTagError;
-		$[169] = setUnpickedCustomValues;
-		$[170] = settleDraft;
-		$[171] = t32;
-	} else t32 = $[171];
-	const handleCompositeBlur = useEvent(t32);
-	const t33 = rootRef;
-	const t34 = popoverRef;
-	let t35;
-	if ($[172] !== handleCompositeBlur || $[173] !== isDisabled || $[174] !== onFocus || $[175] !== t33 || $[176] !== t34) {
-		t35 = {
-			wrapperRef: t33,
-			popoverRef: t34,
-			onFocus,
+		$[173] = clearTagErrorAfterPress;
+		$[174] = onBlur;
+		$[175] = setIsPopoverOpen;
+		$[176] = setTagError;
+		$[177] = setUnpickedCustomValues;
+		$[178] = settleDraft;
+		$[179] = tagError;
+		$[180] = t37;
+	} else t37 = $[180];
+	const handleCompositeBlur = useEvent(t37);
+	const t38 = rootRef;
+	const t39 = popoverRef;
+	let t40;
+	if ($[181] !== handleCompositeBlur || $[182] !== handleCompositeFocus || $[183] !== isDisabled || $[184] !== t38 || $[185] !== t39) {
+		t40 = {
+			wrapperRef: t38,
+			popoverRef: t39,
+			onFocus: handleCompositeFocus,
 			onBlur: handleCompositeBlur,
 			isDisabled
 		};
-		$[172] = handleCompositeBlur;
-		$[173] = isDisabled;
-		$[174] = onFocus;
-		$[175] = t33;
-		$[176] = t34;
-		$[177] = t35;
-	} else t35 = $[177];
-	const { compositeFocusProps } = useCompositeFocus(t35);
-	let t36;
-	if ($[178] !== rootRef || $[179] !== setIsPopoverOpen || $[180] !== settleDraft) {
-		t36 = (e_1) => {
+		$[181] = handleCompositeBlur;
+		$[182] = handleCompositeFocus;
+		$[183] = isDisabled;
+		$[184] = t38;
+		$[185] = t39;
+		$[186] = t40;
+	} else t40 = $[186];
+	const { compositeFocusProps } = useCompositeFocus(t40);
+	let t41;
+	if ($[187] !== rootRef || $[188] !== setIsPopoverOpen || $[189] !== settleDraft) {
+		t41 = (e_1) => {
 			const isTabbing = isTabbingRef.current;
 			const next_4 = e_1.relatedTarget;
 			isTabbingRef.current = false;
@@ -1121,24 +1182,24 @@ function TagInput(props, ref) {
 			setIsPopoverOpen(false);
 			settleDraft();
 		};
-		$[178] = rootRef;
-		$[179] = setIsPopoverOpen;
-		$[180] = settleDraft;
-		$[181] = t36;
-	} else t36 = $[181];
-	const handleInputBlur = useEvent(t36);
-	let t37;
-	if ($[182] !== hasOptions || $[183] !== isInteractive || $[184] !== popoverTrigger || $[185] !== setIsPopoverOpen) {
-		t37 = () => {
+		$[187] = rootRef;
+		$[188] = setIsPopoverOpen;
+		$[189] = settleDraft;
+		$[190] = t41;
+	} else t41 = $[190];
+	const handleInputBlur = useEvent(t41);
+	let t42;
+	if ($[191] !== hasOptions || $[192] !== isInteractive || $[193] !== popoverTrigger || $[194] !== setIsPopoverOpen) {
+		t42 = () => {
 			if (hasOptions && popoverTrigger === "focus" && isInteractive) setIsPopoverOpen(true);
 		};
-		$[182] = hasOptions;
-		$[183] = isInteractive;
-		$[184] = popoverTrigger;
-		$[185] = setIsPopoverOpen;
-		$[186] = t37;
-	} else t37 = $[186];
-	const handleInputFocus = useEvent(t37);
+		$[191] = hasOptions;
+		$[192] = isInteractive;
+		$[193] = popoverTrigger;
+		$[194] = setIsPopoverOpen;
+		$[195] = t42;
+	} else t42 = $[195];
+	const handleInputFocus = useEvent(t42);
 	const tags = uniqueValues.map((value_5) => {
 		const ownProps = tagProps?.(value_5);
 		const result_0 = !(getOption(value_5) != null || knownLabels.has(value_5)) && validateTag ? validateTag(value_5) : true;
@@ -1156,9 +1217,9 @@ function TagInput(props, ref) {
 	const hasBackspaceHint = isInteractive && hasRemovableTags;
 	const lockedKeys = tags.filter(_temp0).map(_temp1);
 	const optionDisabledKeys = lockedKeys.length ? [...disabledKeySet, ...lockedKeys] : disabledKeys;
-	let t38;
-	if ($[187] !== autoFocus || $[188] !== draft || $[189] !== effectiveIsInvalid || $[190] !== handleInputChange || $[191] !== id || $[192] !== isDisabled || $[193] !== isReadOnly || $[194] !== isRequired || $[195] !== label || $[196] !== otherProps || $[197] !== placeholder) {
-		t38 = {
+	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) {
+		t43 = {
 			...otherProps,
 			id,
 			label,
@@ -1171,20 +1232,20 @@ function TagInput(props, ref) {
 			autoFocus,
 			onChange: handleInputChange
 		};
-		$[187] = autoFocus;
-		$[188] = draft;
-		$[189] = effectiveIsInvalid;
-		$[190] = handleInputChange;
-		$[191] = id;
-		$[192] = isDisabled;
-		$[193] = isReadOnly;
-		$[194] = isRequired;
-		$[195] = label;
-		$[196] = otherProps;
-		$[197] = placeholder;
-		$[198] = t38;
-	} else t38 = $[198];
-	const { labelProps, inputProps } = useTextField(t38, inputRef);
+		$[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];
+	const { labelProps, inputProps } = useTextField(t43, inputRef);
 	const labelId = label ? labelProps.id : void 0;
 	const describedBy = [];
 	if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
@@ -1206,25 +1267,25 @@ function TagInput(props, ref) {
 		"aria-controls": shouldShowPopover ? listBoxId : void 0,
 		"aria-activedescendant": shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(listBoxId, activeOptionKey) : void 0
 	} : null);
-	let t39;
-	if ($[199] !== hasResults || $[200] !== inputRef || $[201] !== setIsFilterActive || $[202] !== setIsPopoverOpen || $[203] !== shouldShowPopover) {
-		t39 = () => {
+	let t44;
+	if ($[208] !== hasResults || $[209] !== inputRef || $[210] !== setIsFilterActive || $[211] !== setIsPopoverOpen || $[212] !== shouldShowPopover) {
+		t44 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[199] = hasResults;
-		$[200] = inputRef;
-		$[201] = setIsFilterActive;
-		$[202] = setIsPopoverOpen;
-		$[203] = shouldShowPopover;
-		$[204] = t39;
-	} else t39 = $[204];
-	const handleTriggerPress = useEvent(t39);
-	let t40;
-	if ($[205] !== handleTriggerPress || $[206] !== hasOptions || $[207] !== hideTrigger || $[208] !== isInteractive || $[209] !== labelId || $[210] !== shouldShowPopover || $[211] !== size || $[212] !== t || $[213] !== triggerId || $[214] !== triggerStyles) {
-		t40 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
+		$[208] = hasResults;
+		$[209] = inputRef;
+		$[210] = setIsFilterActive;
+		$[211] = setIsPopoverOpen;
+		$[212] = shouldShowPopover;
+		$[213] = t44;
+	} else t44 = $[213];
+	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) {
+		t45 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
 			"data-popover-trigger": true,
 			id: triggerId,
 			qa: "TagInputTrigger",
@@ -1240,40 +1301,40 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${triggerId} ${labelId}` : void 0,
 			onPress: handleTriggerPress
 		}) : null;
-		$[205] = handleTriggerPress;
-		$[206] = hasOptions;
-		$[207] = hideTrigger;
-		$[208] = isInteractive;
-		$[209] = labelId;
-		$[210] = shouldShowPopover;
-		$[211] = size;
-		$[212] = t;
-		$[213] = triggerId;
-		$[214] = triggerStyles;
-		$[215] = t40;
-	} else t40 = $[215];
-	const trigger = t40;
-	let t41;
-	if ($[216] !== inputRef || $[217] !== onClear || $[218] !== setDraft || $[219] !== setIsPopoverOpen || $[220] !== setTagError) {
-		t41 = () => {
+		$[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];
+	const trigger = t45;
+	let t46;
+	if ($[225] !== inputRef || $[226] !== onClear || $[227] !== setDraft || $[228] !== setIsPopoverOpen || $[229] !== setTagError) {
+		t46 = () => {
 			inputRef.current?.focus();
 			setDraft("");
 			setTagError(null);
 			setIsPopoverOpen(false);
 			onClear?.();
 		};
-		$[216] = inputRef;
-		$[217] = onClear;
-		$[218] = setDraft;
-		$[219] = setIsPopoverOpen;
-		$[220] = setTagError;
-		$[221] = t41;
-	} else t41 = $[221];
-	const clearText = useEvent(t41);
+		$[225] = inputRef;
+		$[226] = onClear;
+		$[227] = setDraft;
+		$[228] = setIsPopoverOpen;
+		$[229] = setTagError;
+		$[230] = t46;
+	} else t46 = $[230];
+	const clearText = useEvent(t46);
 	const canClear = !!isClearable && isInteractive && draft !== "";
-	let t42;
-	if ($[222] !== canClear || $[223] !== clearId || $[224] !== clearText || $[225] !== labelId || $[226] !== size || $[227] !== t) {
-		t42 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
+	let t47;
+	if ($[231] !== canClear || $[232] !== clearId || $[233] !== clearText || $[234] !== labelId || $[235] !== size || $[236] !== t) {
+		t47 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
 			id: clearId,
 			qa: "TagInputClearButton",
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -1283,30 +1344,30 @@ function TagInput(props, ref) {
 			"aria-labelledby": labelId ? `${clearId} ${labelId}` : void 0,
 			onPress: clearText
 		}) : null;
-		$[222] = canClear;
-		$[223] = clearId;
-		$[224] = clearText;
-		$[225] = labelId;
-		$[226] = size;
-		$[227] = t;
-		$[228] = t42;
-	} else t42 = $[228];
-	const clearButton = t42;
+		$[231] = canClear;
+		$[232] = clearId;
+		$[233] = clearText;
+		$[234] = labelId;
+		$[235] = size;
+		$[236] = t;
+		$[237] = t47;
+	} else t47 = $[237];
+	const clearButton = t47;
 	const hasActions = clearButton != null || trigger != null;
 	const T0 = TagInputElement;
-	const t43 = qa || "TagInput";
-	let t44;
-	if ($[229] !== clearButton || $[230] !== hasActions || $[231] !== trigger) {
-		t44 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[229] = clearButton;
-		$[230] = hasActions;
-		$[231] = trigger;
-		$[232] = t44;
-	} else t44 = $[232];
-	let t45;
-	if ($[233] !== autoFocus || $[234] !== effectiveIsInvalid || $[235] !== icon || $[236] !== inputRef || $[237] !== inputStyles || $[238] !== isDisabled || $[239] !== isLoading || $[240] !== isValid || $[241] !== mods || $[242] !== prefix || $[243] !== size || $[244] !== suffix || $[245] !== suffixPosition || $[246] !== t43 || $[247] !== t44 || $[248] !== tagInputProps || $[249] !== wrapperRef || $[250] !== wrapperStyles) {
-		t45 = /* @__PURE__ */ jsx(TextInputBase, {
-			qa: t43,
+	const t48 = qa || "TagInput";
+	let t49;
+	if ($[238] !== clearButton || $[239] !== hasActions || $[240] !== trigger) {
+		t49 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
+		$[238] = clearButton;
+		$[239] = hasActions;
+		$[240] = trigger;
+		$[241] = t49;
+	} else t49 = $[241];
+	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) {
+		t50 = /* @__PURE__ */ jsx(TextInputBase, {
+			qa: t48,
 			inputRef,
 			wrapperRef,
 			inputProps: tagInputProps,
@@ -1315,7 +1376,7 @@ function TagInput(props, ref) {
 			prefix,
 			suffix,
 			suffixPosition,
-			actions: t44,
+			actions: t49,
 			size,
 			autoFocus,
 			isDisabled,
@@ -1325,27 +1386,27 @@ function TagInput(props, ref) {
 			styles: wrapperStyles,
 			inputStyles
 		});
-		$[233] = autoFocus;
-		$[234] = effectiveIsInvalid;
-		$[235] = icon;
-		$[236] = inputRef;
-		$[237] = inputStyles;
-		$[238] = isDisabled;
-		$[239] = isLoading;
-		$[240] = isValid;
-		$[241] = mods;
-		$[242] = prefix;
-		$[243] = size;
-		$[244] = suffix;
-		$[245] = suffixPosition;
-		$[246] = t43;
-		$[247] = t44;
-		$[248] = tagInputProps;
-		$[249] = wrapperRef;
-		$[250] = wrapperStyles;
-		$[251] = t45;
-	} else t45 = $[251];
-	const t46 = tags.length ? /* @__PURE__ */ jsx(TagList, {
+		$[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];
+	const t51 = tags.length ? /* @__PURE__ */ jsx(TagList, {
 		id: tagListId,
 		listRef: tagListRef,
 		inputRef,
@@ -1359,50 +1420,50 @@ function TagInput(props, ref) {
 		tagStyles,
 		onRemove: removeValues
 	}) : null;
-	const t47 = true;
-	const t48 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp10)) }) : null;
-	let t49;
-	if ($[252] !== summaryId || $[253] !== t48) {
-		t49 = /* @__PURE__ */ jsx("span", {
-			hidden: t47,
+	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) {
+		t54 = /* @__PURE__ */ jsx("span", {
+			hidden: t52,
 			id: summaryId,
-			children: t48
+			children: t53
 		});
-		$[252] = summaryId;
-		$[253] = t48;
-		$[254] = t49;
-	} else t49 = $[254];
-	let t50;
-	if ($[255] !== hasBackspaceHint || $[256] !== t) {
-		t50 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[255] = hasBackspaceHint;
-		$[256] = t;
-		$[257] = t50;
-	} else t50 = $[257];
-	let t51;
-	if ($[258] !== hintId || $[259] !== t50) {
-		t51 = /* @__PURE__ */ jsx("span", {
+		$[261] = summaryId;
+		$[262] = t53;
+		$[263] = t54;
+	} else t54 = $[263];
+	let t55;
+	if ($[264] !== hasBackspaceHint || $[265] !== t) {
+		t55 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
+		$[264] = hasBackspaceHint;
+		$[265] = t;
+		$[266] = t55;
+	} else t55 = $[266];
+	let t56;
+	if ($[267] !== hintId || $[268] !== t55) {
+		t56 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
-			children: t50
+			children: t55
 		});
-		$[258] = hintId;
-		$[259] = t50;
-		$[260] = t51;
-	} else t51 = $[260];
-	let t52;
-	if ($[261] !== announcement.id || $[262] !== announcement.text) {
-		t52 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		$[267] = hintId;
+		$[268] = t55;
+		$[269] = t56;
+	} else t56 = $[269];
+	let t57;
+	if ($[270] !== announcement.id || $[271] !== announcement.text) {
+		t57 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[261] = announcement.id;
-		$[262] = announcement.text;
-		$[263] = t52;
-	} else t52 = $[263];
-	const t53 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
+		$[270] = announcement.id;
+		$[271] = announcement.text;
+		$[272] = t57;
+	} else t57 = $[272];
+	const t58 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
 		isOpen: shouldShowPopover,
 		triggerRef: wrapperRef,
 		popoverRef,
@@ -1436,9 +1497,9 @@ function TagInput(props, ref) {
 		onClose: () => setIsPopoverOpen(false),
 		children: popoverChildren
 	}) : null;
-	let t54;
-	if ($[264] !== T0 || $[265] !== className || $[266] !== compositeFocusProps || $[267] !== qaVal || $[268] !== rootRef || $[269] !== style || $[270] !== styles || $[271] !== t45 || $[272] !== t46 || $[273] !== t49 || $[274] !== t51 || $[275] !== t52 || $[276] !== t53) {
-		t54 = /* @__PURE__ */ jsxs(T0, {
+	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) {
+		t59 = /* @__PURE__ */ jsxs(T0, {
 			ref: rootRef,
 			className,
 			style,
@@ -1446,44 +1507,44 @@ function TagInput(props, ref) {
 			styles,
 			...compositeFocusProps,
 			children: [
-				t45,
-				t46,
-				t49,
+				t50,
 				t51,
-				t52,
-				t53
+				t54,
+				t56,
+				t57,
+				t58
 			]
 		});
-		$[264] = T0;
-		$[265] = className;
-		$[266] = compositeFocusProps;
-		$[267] = qaVal;
-		$[268] = rootRef;
-		$[269] = style;
-		$[270] = styles;
-		$[271] = t45;
-		$[272] = t46;
-		$[273] = t49;
-		$[274] = t51;
-		$[275] = t52;
-		$[276] = t53;
-		$[277] = t54;
-	} else t54 = $[277];
-	const tagInputField = t54;
+		$[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];
+	const tagInputField = t59;
 	const { children: _children, ...fieldProps } = props;
 	const fieldRef = useCombinedRefs();
-	let t55;
-	if ($[278] !== message || $[279] !== tagError) {
-		t55 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[278] = message;
-		$[279] = tagError;
-		$[280] = t55;
-	} else t55 = $[280];
+	let t60;
+	if ($[287] !== message || $[288] !== tagError) {
+		t60 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
+		$[287] = message;
+		$[288] = tagError;
+		$[289] = t60;
+	} else t60 = $[289];
 	return wrapWithField(tagInputField, fieldRef, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
-		message: t55,
+		message: t60,
 		errorMessage: tagError ? void 0 : errorMessage
 	});
 }