@ultraviolet/ui 3.11.0 → 3.12.0

package/dist/components/Tag/styles.css.d.ts

@@ -1,33 +1,35 @@
 export declare const SENTIMENTS: readonly ["danger", "info", "neutral", "primary", "secondary", "success", "warning"];
-export declare const containerTag: import("@vanilla-extract/recipes").RuntimeFn<{
-    copiable: {
-        true: {
-            selectors: {
-                '&:active': {
-                    boxShadow: `var(--${string})`;
-                };
-                '&:hover, &:active': {
-                    cursor: "pointer";
+export declare const tagStyle: {
+    container: import("@vanilla-extract/recipes").RuntimeFn<{
+        copiable: {
+            true: {
+                selectors: {
+                    '&:active': {
+                        boxShadow: `var(--${string})`;
+                    };
+                    '&:hover, &:active': {
+                        cursor: "pointer";
+                    };
                 };
             };
         };
-    };
-    disabled: {
-        true: {
-            background: `var(--${string})`;
-            border: `solid 1px var(--${string})`;
-            color: `var(--${string})`;
-            cursor: "not-allowed";
+        disabled: {
+            true: {
+                background: `var(--${string})`;
+                border: `solid 1px var(--${string})`;
+                color: `var(--${string})`;
+                cursor: "not-allowed";
+            };
         };
-    };
-    sentiment: {
-        [k: string]: {
-            background: `var(--${string})`;
-            border: `solid 1px var(--${string})`;
-            color: `var(--${string})`;
+        sentiment: {
+            [k: string]: {
+                background: `var(--${string})`;
+                border: `solid 1px var(--${string})`;
+                color: `var(--${string})`;
+            };
         };
-    };
-}>;
-export declare const textTag: string;
-export declare const closeButtonTag: string;
+    }>;
+    text: string;
+    closeButton: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/Tag/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,sFAQb,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEvB,CAAA;AAEF,eAAO,MAAM,OAAO,QAElB,CAAA;AAEF,eAAO,MAAM,cAAc,QAIzB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,sFAQb,CAAA;AA8EV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmC,CAAA"}

package/dist/components/Tag/styles.css.js

@@ -1,60 +1,68 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Tag/styles.css.ts
-var containerTag = createRuntimeFn({
-	defaultClassName: "uv_d6zknp0",
-	variantClassNames: {
-		copiable: { true: "uv_d6zknp1" },
-		disabled: { true: "uv_d6zknp2" },
-		sentiment: {
-			danger: "uv_d6zknp3",
-			info: "uv_d6zknp4",
-			neutral: "uv_d6zknp5",
-			primary: "uv_d6zknp6",
-			secondary: "uv_d6zknp7",
-			success: "uv_d6zknp8",
-			warning: "uv_d6zknp9"
-		}
-	},
-	defaultVariants: {
-		copiable: false,
-		disabled: false,
-		sentiment: "neutral"
-	},
-	compoundVariants: [
-		[{
-			copiable: true,
-			sentiment: "danger"
-		}, "uv_d6zknpa"],
-		[{
-			copiable: true,
-			sentiment: "info"
-		}, "uv_d6zknpb"],
-		[{
-			copiable: true,
-			sentiment: "neutral"
-		}, "uv_d6zknpc"],
-		[{
-			copiable: true,
-			sentiment: "primary"
-		}, "uv_d6zknpd"],
-		[{
-			copiable: true,
-			sentiment: "secondary"
-		}, "uv_d6zknpe"],
-		[{
-			copiable: true,
-			sentiment: "success"
-		}, "uv_d6zknpf"],
-		[{
-			copiable: true,
-			sentiment: "warning"
-		}, "uv_d6zknpg"]
-	]
+var tagStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	tagStyle = {
+		container: createRuntimeFn({
+			defaultClassName: "uv_d6zknp0",
+			variantClassNames: {
+				copiable: { true: "uv_d6zknp1" },
+				disabled: { true: "uv_d6zknp2" },
+				sentiment: {
+					danger: "uv_d6zknp3",
+					info: "uv_d6zknp4",
+					neutral: "uv_d6zknp5",
+					primary: "uv_d6zknp6",
+					secondary: "uv_d6zknp7",
+					success: "uv_d6zknp8",
+					warning: "uv_d6zknp9"
+				}
+			},
+			defaultVariants: {
+				copiable: false,
+				disabled: false,
+				sentiment: "neutral"
+			},
+			compoundVariants: [
+				[{
+					copiable: true,
+					sentiment: "danger"
+				}, "uv_d6zknpa"],
+				[{
+					copiable: true,
+					sentiment: "info"
+				}, "uv_d6zknpb"],
+				[{
+					copiable: true,
+					sentiment: "neutral"
+				}, "uv_d6zknpc"],
+				[{
+					copiable: true,
+					sentiment: "primary"
+				}, "uv_d6zknpd"],
+				[{
+					copiable: true,
+					sentiment: "secondary"
+				}, "uv_d6zknpe"],
+				[{
+					copiable: true,
+					sentiment: "success"
+				}, "uv_d6zknpf"],
+				[{
+					copiable: true,
+					sentiment: "warning"
+				}, "uv_d6zknpg"]
+			]
+		}),
+		text: "uv_d6zknph",
+		closeButton: "uv_d6zknpi"
+	};
 });
-var textTag = "uv_d6zknph";
-var closeButtonTag = "uv_d6zknpi";
 
 //#endregion
-export { closeButtonTag, containerTag, textTag };
+init_styles_css();
+export { init_styles_css, tagStyle };

package/dist/components/Tag/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Tag/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/TagInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEV,aAAa,EAEb,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAQzD,KAAK,YAAY,GAAG,MAAM,OAAO,qBAAqB,CAAA;AAiBtD,KAAK,YAAY,GAAG,CAAC,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,CAAA;AAEjE,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,wRAsPpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEV,aAAa,EAEb,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAGzD,KAAK,YAAY,GAAG,MAAM,OAAO,qBAAqB,CAAA;AAiBtD,KAAK,YAAY,GAAG,CAAC,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,CAAA;AAEjE,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,wRAsPpB,CAAA"}

package/dist/components/TagInput/index.js

@@ -1,203 +1,212 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Stack } from "../Stack/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { Text } from "../Text/index.js";
-import { Button } from "../Button/index.js";
-import { Label } from "../Label/index.js";
-import { Tag } from "../Tag/index.js";
-import { tagInput, tagInputContainer, tagInputDataContainer, tagInputStateContainer } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { Button, init_Button } from "../Button/index.js";
+import { Label, init_Label } from "../Label/index.js";
+import { Tag, init_Tag } from "../Tag/index.js";
+import { init_styles_css, tagInputStyle } from "./styles.css.js";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, getUUID } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { CheckCircleOutlineIcon } from "@ultraviolet/icons/CheckCircleOutlineIcon";
 
 //#region src/components/TagInput/index.tsx
-const STATUS = {
-	IDLE: "idle",
-	LOADING: "loading"
-};
-const convertTagArrayToTagStateArray = (tags) => {
-	var _ref;
-	return (_ref = tags !== null && tags !== void 0 ? tags : []) === null || _ref === void 0 ? void 0 : _ref.map((tag, index) => typeof tag === "object" ? _objectSpread2(_objectSpread2({}, tag), {}, { index: getUUID(`tag-${index}`) }) : {
-		index: getUUID(`tag-${index}`),
-		label: tag
-	});
-};
-/**
-* TagInput is a component that allows users to input tags.
-*/
-const TagInput = ({ disabled = false, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required = false, size = "large", error, success, helper, readOnly = false, tooltip, clearable = false, style }) => {
-	const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
-	const [input, setInput] = useState("");
-	const [status, setStatus] = useState({});
-	const uniqueId = useId();
-	const localId = id !== null && id !== void 0 ? id : uniqueId;
-	useEffect(() => {
-		setTagInput(convertTagArrayToTagStateArray(value));
-	}, [value, setTagInput]);
-	const inputRef = useRef(null);
-	const dispatchOnChange = (newState) => {
-		const changes = newState.map((tag) => typeof tag === "object" ? tag === null || tag === void 0 ? void 0 : tag.label : tag);
-		onChange === null || onChange === void 0 || onChange(changes);
-	};
-	const handleContainerClick = () => {
-		if (inputRef.current) {
-			var _inputRef$current;
-			inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-		}
-	};
-	const onInputChange = (e) => {
-		setInput(e.target.value);
+var STATUS, convertTagArrayToTagStateArray, TagInput;
+var init_TagInput = __esmMin(() => {
+	init_Button();
+	init_Label();
+	init_Stack();
+	init_Tag();
+	init_Text();
+	init_Tooltip();
+	init_styles_css();
+	init_objectSpread2();
+	STATUS = {
+		IDLE: "idle",
+		LOADING: "loading"
 	};
-	const addTag = () => {
-		const newTagInput = input ? [...tagInputState, {
-			index: getUUID("tag"),
-			label: input
-		}] : tagInputState;
-		setInput("");
-		setTagInput(newTagInput);
-		if (newTagInput.length !== tagInputState.length && newTagInput) {
-			const tag = newTagInput.at(-1);
-			if (tag) setStatus({ [tag.index]: STATUS.LOADING });
-		}
-		try {
-			dispatchOnChange(newTagInput);
-			const tag = newTagInput.at(-1);
-			if (tag) setStatus({ [tag.index]: STATUS.IDLE });
-		} catch (_unused) {
-			setTagInput(tagInputState);
-		}
+	convertTagArrayToTagStateArray = (tags) => {
+		var _ref;
+		return (_ref = tags !== null && tags !== void 0 ? tags : []) === null || _ref === void 0 ? void 0 : _ref.map((tag, index) => typeof tag === "object" ? _objectSpread2(_objectSpread2({}, tag), {}, { index: getUUID(`tag-${index}`) }) : {
+			index: getUUID(`tag-${index}`),
+			label: tag
+		});
 	};
-	const deleteTag = (tagIndex) => {
-		setStatus({ [tagIndex]: STATUS.LOADING });
-		const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
-		const newTagInput = [...tagInputState];
-		newTagInput.splice(findIndex, 1);
-		try {
-			dispatchOnChange(newTagInput);
+	TagInput = ({ disabled = false, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required = false, size = "large", error, success, helper, readOnly = false, tooltip, clearable = false, style }) => {
+		const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
+		const [input, setInput] = useState("");
+		const [status, setStatus] = useState({});
+		const uniqueId = useId();
+		const localId = id !== null && id !== void 0 ? id : uniqueId;
+		useEffect(() => {
+			setTagInput(convertTagArrayToTagStateArray(value));
+		}, [value, setTagInput]);
+		const inputRef = useRef(null);
+		const dispatchOnChange = (newState) => {
+			const changes = newState.map((tag) => typeof tag === "object" ? tag === null || tag === void 0 ? void 0 : tag.label : tag);
+			onChange === null || onChange === void 0 || onChange(changes);
+		};
+		const handleContainerClick = () => {
+			if (inputRef.current) {
+				var _inputRef$current;
+				inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+			}
+		};
+		const onInputChange = (e) => {
+			setInput(e.target.value);
+		};
+		const addTag = () => {
+			const newTagInput = input ? [...tagInputState, {
+				index: getUUID("tag"),
+				label: input
+			}] : tagInputState;
+			setInput("");
 			setTagInput(newTagInput);
-			setStatus({ [tagIndex]: STATUS.IDLE });
-		} catch (_unused2) {
-			setTagInput(tagInputState);
-		}
-	};
-	const handleInputKeydown = (event) => {
-		var _inputRef$current2;
-		if (event.key === " " || event.key === "Enter") {
-			addTag();
-			event.preventDefault();
-		}
-		if (event.key === "Backspace" && (inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) === 0 && tagInputState.length > 0) {
-			event.preventDefault();
-			if (tagInputState) {
-				const tag = tagInputState.at(-1);
-				if (tag) deleteTag(tag.index);
+			if (newTagInput.length !== tagInputState.length && newTagInput) {
+				const tag = newTagInput.at(-1);
+				if (tag) setStatus({ [tag.index]: STATUS.LOADING });
 			}
-		}
-	};
-	const clearAll = () => {
-		setInput("");
-		setTagInput([]);
-		dispatchOnChange([]);
-	};
-	const helperSentiment = useMemo(() => {
-		if (error) return "danger";
-		if (success) return "success";
-		return "neutral";
-	}, [error, success]);
-	const computedClearable = clearable && tagInputState.length > 0;
-	return /* @__PURE__ */ jsxs(Stack, {
-		className,
-		gap: "0.5",
-		children: [
-			label || labelDescription ? /* @__PURE__ */ jsx(Label, {
-				htmlFor: id !== null && id !== void 0 ? id : localId,
-				labelDescription,
-				required,
-				size,
-				children: label
-			}) : null,
-			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
-				text: tooltip,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cn(className, tagInputContainer({ size })),
-					"data-disabled": disabled,
-					"data-error": !!error,
-					"data-readonly": readOnly,
-					"data-success": !!success,
-					"data-testid": dataTestId,
-					onClick: handleContainerClick,
-					onKeyDown: (event) => {
-						if ([" ", "Enter"].includes(event.key)) handleContainerClick();
-					},
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: tagInputDataContainer,
-						children: [tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, {
-							disabled,
-							isLoading: status[tag.index] === STATUS.LOADING,
-							onClose: readOnly ? void 0 : (e) => {
-								e.stopPropagation();
-								deleteTag(tag.index);
-							},
-							sentiment: "neutral",
-							children: tag.label
-						}, tag.index)), disabled ? null : /* @__PURE__ */ jsx("input", {
-							"aria-label": ariaLabel,
-							className: tagInput,
-							"data-size": size,
-							id: localId,
-							name,
-							onBlur: addTag,
-							onChange: onInputChange,
-							onKeyDown: handleInputKeydown,
-							placeholder: tagInputState.length === 0 ? placeholder : "",
-							readOnly,
-							ref: inputRef,
-							style,
-							type: "text",
-							value: input
-						})]
-					}), computedClearable || success || error ? /* @__PURE__ */ jsxs("div", {
-						className: tagInputStateContainer,
-						children: [
-							computedClearable ? /* @__PURE__ */ jsx(Button, {
-								"aria-label": "clear value",
+			try {
+				dispatchOnChange(newTagInput);
+				const tag = newTagInput.at(-1);
+				if (tag) setStatus({ [tag.index]: STATUS.IDLE });
+			} catch (_unused) {
+				setTagInput(tagInputState);
+			}
+		};
+		const deleteTag = (tagIndex) => {
+			setStatus({ [tagIndex]: STATUS.LOADING });
+			const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
+			const newTagInput = [...tagInputState];
+			newTagInput.splice(findIndex, 1);
+			try {
+				dispatchOnChange(newTagInput);
+				setTagInput(newTagInput);
+				setStatus({ [tagIndex]: STATUS.IDLE });
+			} catch (_unused2) {
+				setTagInput(tagInputState);
+			}
+		};
+		const handleInputKeydown = (event) => {
+			var _inputRef$current2;
+			if (event.key === " " || event.key === "Enter") {
+				addTag();
+				event.preventDefault();
+			}
+			if (event.key === "Backspace" && (inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) === 0 && tagInputState.length > 0) {
+				event.preventDefault();
+				if (tagInputState) {
+					const tag = tagInputState.at(-1);
+					if (tag) deleteTag(tag.index);
+				}
+			}
+		};
+		const clearAll = () => {
+			setInput("");
+			setTagInput([]);
+			dispatchOnChange([]);
+		};
+		const helperSentiment = useMemo(() => {
+			if (error) return "danger";
+			if (success) return "success";
+			return "neutral";
+		}, [error, success]);
+		const computedClearable = clearable && tagInputState.length > 0;
+		return /* @__PURE__ */ jsxs(Stack, {
+			className,
+			gap: "0.5",
+			children: [
+				label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+					htmlFor: id !== null && id !== void 0 ? id : localId,
+					labelDescription,
+					required,
+					size,
+					children: label
+				}) : null,
+				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+					text: tooltip,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn(className, tagInputStyle.container({ size })),
+						"data-disabled": disabled,
+						"data-error": !!error,
+						"data-readonly": readOnly,
+						"data-success": !!success,
+						"data-testid": dataTestId,
+						onClick: handleContainerClick,
+						onKeyDown: (event) => {
+							if ([" ", "Enter"].includes(event.key)) handleContainerClick();
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: tagInputStyle.dataContainer,
+							children: [tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, {
 								disabled,
-								onClick: clearAll,
+								isLoading: status[tag.index] === STATUS.LOADING,
+								onClose: readOnly ? void 0 : (e) => {
+									e.stopPropagation();
+									deleteTag(tag.index);
+								},
 								sentiment: "neutral",
-								size: "xsmall",
-								variant: "ghost",
-								children: /* @__PURE__ */ jsx(CloseIcon, {})
-							}) : null,
-							success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {
-								disabled,
-								sentiment: "success",
-								size: "small"
-							}) : null,
-							error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
-								disabled,
-								sentiment: "danger",
-								size: "small"
-							}) : null
-						]
-					}) : null]
-				})
-			}) }),
-			error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(Text, {
-				as: "span",
-				disabled: disabled || readOnly,
-				prominence: error || success ? void 0 : "weak",
-				sentiment: helperSentiment,
-				variant: "caption",
-				children: error || success || helper
-			}) : null
-		]
-	});
-};
+								children: tag.label
+							}, tag.index)), disabled ? null : /* @__PURE__ */ jsx("input", {
+								"aria-label": ariaLabel,
+								className: tagInputStyle.tagInput,
+								"data-size": size,
+								id: localId,
+								name,
+								onBlur: addTag,
+								onChange: onInputChange,
+								onKeyDown: handleInputKeydown,
+								placeholder: tagInputState.length === 0 ? placeholder : "",
+								readOnly,
+								ref: inputRef,
+								style,
+								type: "text",
+								value: input
+							})]
+						}), computedClearable || success || error ? /* @__PURE__ */ jsxs("div", {
+							className: tagInputStyle.stateContainer,
+							children: [
+								computedClearable ? /* @__PURE__ */ jsx(Button, {
+									"aria-label": "clear value",
+									disabled,
+									onClick: clearAll,
+									sentiment: "neutral",
+									size: "xsmall",
+									variant: "ghost",
+									children: /* @__PURE__ */ jsx(CloseIcon, {})
+								}) : null,
+								success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {
+									disabled,
+									sentiment: "success",
+									size: "small"
+								}) : null,
+								error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
+									disabled,
+									sentiment: "danger",
+									size: "small"
+								}) : null
+							]
+						}) : null]
+					})
+				}) }),
+				error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					disabled: disabled || readOnly,
+					prominence: error || success ? void 0 : "weak",
+					sentiment: helperSentiment,
+					variant: "caption",
+					children: error || success || helper
+				}) : null
+			]
+		});
+	};
+});
 
 //#endregion
-export { TagInput };
+init_TagInput();
+export { TagInput, init_TagInput };