@ultraviolet/ui 3.11.0 → 3.12.0

package/dist/components/Tabs/TabMenu.js

@@ -1,48 +1,56 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectWithoutProperties.js";
-import { Menu } from "../Menu/index.js";
-import { tabsArrowIcon, tabsButton, tabsMenuWrapper } 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 { _objectWithoutProperties, init_objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectWithoutProperties.js";
+import { Menu, init_Menu } from "../Menu/index.js";
+import { init_styles_css, tabsStyle } from "./styles.css.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
 //#region src/components/Tabs/TabMenu.tsx
-const _excluded = [
-	"children",
-	"disclosure",
-	"visible",
-	"id",
-	"disabled",
-	"className",
-	"aria-selected"
-];
-const TabMenu = forwardRef((_ref, ref) => {
-	let { children, disclosure, visible, id, disabled, className, "aria-selected": ariaSelected } = _ref;
-	let props = _objectWithoutProperties(_ref, _excluded);
-	return /* @__PURE__ */ jsx("div", {
-		className: tabsMenuWrapper,
-		children: /* @__PURE__ */ jsx(Menu, {
-			disclosure: /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
-				"aria-disabled": disabled !== null && disabled !== void 0 ? disabled : "false",
-				"aria-haspopup": "menu",
-				"aria-selected": ariaSelected,
-				className: cn(className, tabsButton),
-				disabled,
-				role: "tab",
-				type: "button"
-			}, props), {}, { children: [disclosure, /* @__PURE__ */ jsx(ArrowDownIcon, { className: tabsArrowIcon })] })),
-			id,
-			placement: "bottom",
-			portalTarget: document.body,
-			ref,
-			visible,
-			children
-		})
+var _excluded, TabMenu;
+var init_TabMenu = __esmMin(() => {
+	init_Menu();
+	init_styles_css();
+	init_objectWithoutProperties();
+	init_objectSpread2();
+	_excluded = [
+		"children",
+		"disclosure",
+		"visible",
+		"id",
+		"disabled",
+		"className",
+		"aria-selected"
+	];
+	TabMenu = forwardRef((_ref, ref) => {
+		let { children, disclosure, visible, id, disabled, className, "aria-selected": ariaSelected } = _ref;
+		let props = _objectWithoutProperties(_ref, _excluded);
+		return /* @__PURE__ */ jsx("div", {
+			className: tabsStyle.menuWrapper,
+			children: /* @__PURE__ */ jsx(Menu, {
+				disclosure: /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
+					"aria-disabled": disabled !== null && disabled !== void 0 ? disabled : "false",
+					"aria-haspopup": "menu",
+					"aria-selected": ariaSelected,
+					className: cn(className, tabsStyle.button),
+					disabled,
+					role: "tab",
+					type: "button"
+				}, props), {}, { children: [disclosure, /* @__PURE__ */ jsx(ArrowDownIcon, { className: tabsStyle.arrowIcon })] })),
+				id,
+				placement: "bottom",
+				portalTarget: document.body,
+				ref,
+				visible,
+				children
+			})
+		});
 	});
 });
 
 //#endregion
-export { TabMenu };
+init_TabMenu();
+export { TabMenu, init_TabMenu };

package/dist/components/Tabs/TabMenuItem.js

@@ -1,33 +1,42 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectWithoutProperties.js";
-import { Menu } from "../Menu/index.js";
-import { tabsTextSelected } from "./styles.css.js";
-import { useTabsContext } from "./TabsContext.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 { _objectWithoutProperties, init_objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectWithoutProperties.js";
+import { Menu, init_Menu } from "../Menu/index.js";
+import { init_styles_css, tabsStyle } from "./styles.css.js";
+import { init_TabsContext, useTabsContext } from "./TabsContext.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Tabs/TabMenuItem.tsx
-const _excluded = [
-	"value",
-	"children",
-	"onClick"
-];
-const TabMenuItem = (_ref) => {
-	let { value, children, onClick } = _ref;
-	let props = _objectWithoutProperties(_ref, _excluded);
-	const { selected, onChange } = useTabsContext();
-	const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
-	return /* @__PURE__ */ jsx(Menu.Item, _objectSpread2(_objectSpread2({
-		"aria-selected": isSelected,
-		className: tabsTextSelected[isSelected ? "selected" : "default"],
-		onClick: (event) => {
-			if (value !== void 0) onChange(value);
-			onClick === null || onClick === void 0 || onClick(event);
-		}
-	}, props), {}, { children }));
-};
+var _excluded, TabMenuItem;
+var init_TabMenuItem = __esmMin(() => {
+	init_Menu();
+	init_styles_css();
+	init_TabsContext();
+	init_objectWithoutProperties();
+	init_objectSpread2();
+	_excluded = [
+		"value",
+		"children",
+		"onClick"
+	];
+	TabMenuItem = (_ref) => {
+		let { value, children, onClick } = _ref;
+		let props = _objectWithoutProperties(_ref, _excluded);
+		const { selected, onChange } = useTabsContext();
+		const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
+		return /* @__PURE__ */ jsx(Menu.Item, _objectSpread2(_objectSpread2({
+			"aria-selected": isSelected,
+			className: tabsStyle.textSelected[isSelected ? "selected" : "default"],
+			onClick: (event) => {
+				if (value !== void 0) onChange(value);
+				onClick === null || onClick === void 0 || onClick(event);
+			}
+		}, props), {}, { children }));
+	};
+});
 
 //#endregion
-export { TabMenuItem };
+init_TabMenuItem();
+export { TabMenuItem, init_TabMenuItem };

package/dist/components/Tabs/TabsContext.js

@@ -1,9 +1,13 @@
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { createContext, useContext } from "react";
 
 //#region src/components/Tabs/TabsContext.ts
-const TabsContext = createContext({});
-const useTabsContext = () => useContext(TabsContext);
+var TabsContext, useTabsContext;
+var init_TabsContext = __esmMin(() => {
+	TabsContext = createContext({});
+	useTabsContext = () => useContext(TabsContext);
+});
 
 //#endregion
-export { TabsContext, useTabsContext };
+init_TabsContext();
+export { TabsContext, init_TabsContext, useTabsContext };

package/dist/components/Tabs/index.js

@@ -1,85 +1,93 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectWithoutProperties.js";
-import { tabsContainer, tabsMenu, tabsMenuContainer } from "./styles.css.js";
-import { TabsContext } from "./TabsContext.js";
-import { Tab } from "./Tab.js";
-import { TabMenu } from "./TabMenu.js";
-import { TabMenuItem } from "./TabMenuItem.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 { _objectWithoutProperties, init_objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectWithoutProperties.js";
+import { init_styles_css, tabsStyle } from "./styles.css.js";
+import { TabsContext, init_TabsContext } from "./TabsContext.js";
+import { Tab, init_Tab } from "./Tab.js";
+import { TabMenu, init_TabMenu } from "./TabMenu.js";
+import { TabMenuItem, init_TabMenuItem } from "./TabMenuItem.js";
 import { Children, cloneElement, isValidElement, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Tabs/index.tsx
-const _excluded = [
-	"children",
-	"onChange",
-	"moreDisclosure",
-	"selected",
-	"className",
-	"data-testid"
-];
-const SHADOW_THRESHOLD = 10;
-/**
-* Tabs component is used to display a set of tabs with a single tab selected at a time.
-*/
-const Tabs = (_ref) => {
-	let { children = null, onChange, moreDisclosure = "More", selected, className, "data-testid": dataTestId } = _ref;
-	let props = _objectWithoutProperties(_ref, _excluded);
-	const tabsRef = useRef({});
-	const moreStaticRef = useRef(null);
-	const [displayMore, setDisplayMore] = useState(false);
-	const value = useMemo(() => ({
-		onChange,
-		selected
-	}), [selected, onChange]);
-	useEffect(() => {
-		setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
-	}, [children]);
-	useEffect(() => {
-		const tab = tabsRef.current.querySelector(`[role='tab'][aria-selected='true']`);
-		if (tabsRef.current.scrollTo && tab) tabsRef.current.scrollTo({
-			behavior: "smooth",
-			left: tab.offsetLeft
+var _excluded, SHADOW_THRESHOLD, Tabs;
+var init_Tabs = __esmMin(() => {
+	init_styles_css();
+	init_Tab();
+	init_TabMenu();
+	init_TabMenuItem();
+	init_TabsContext();
+	init_objectWithoutProperties();
+	init_objectSpread2();
+	_excluded = [
+		"children",
+		"onChange",
+		"moreDisclosure",
+		"selected",
+		"className",
+		"data-testid"
+	];
+	SHADOW_THRESHOLD = 10;
+	Tabs = (_ref) => {
+		let { children = null, onChange, moreDisclosure = "More", selected, className, "data-testid": dataTestId } = _ref;
+		let props = _objectWithoutProperties(_ref, _excluded);
+		const tabsRef = useRef({});
+		const moreStaticRef = useRef(null);
+		const [displayMore, setDisplayMore] = useState(false);
+		const value = useMemo(() => ({
+			onChange,
+			selected
+		}), [selected, onChange]);
+		useEffect(() => {
+			setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
+		}, [children]);
+		useEffect(() => {
+			const tab = tabsRef.current.querySelector(`[role='tab'][aria-selected='true']`);
+			if (tabsRef.current.scrollTo && tab) tabsRef.current.scrollTo({
+				behavior: "smooth",
+				left: tab.offsetLeft
+			});
+		}, [selected]);
+		useEffect(() => {
+			const element = tabsRef.current;
+			const moreElement = moreStaticRef.current;
+			const handler = () => {
+				if (moreElement === null || moreElement === void 0 ? void 0 : moreElement.style) moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? "none" : "";
+			};
+			if (displayMore) element.addEventListener("scroll", handler);
+			return () => {
+				if (displayMore) element.removeEventListener("scroll", handler);
+			};
+		}, [displayMore]);
+		const menuItemChildren = Children.map(children, (child) => {
+			if (isValidElement(child)) return cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, { subtitle: null }));
+			return null;
+		});
+		return /* @__PURE__ */ jsx(TabsContext.Provider, {
+			value,
+			children: /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
+				className: cn(className, tabsStyle.container),
+				"data-testid": dataTestId,
+				ref: tabsRef,
+				role: "tablist"
+			}, props), {}, { children: [children, displayMore ? /* @__PURE__ */ jsx(TabMenu, {
+				className: tabsStyle.menu,
+				disclosure: moreDisclosure,
+				ref: moreStaticRef,
+				children: /* @__PURE__ */ jsx("div", {
+					className: tabsStyle.menuContainer,
+					children: menuItemChildren
+				})
+			}) : null] }))
 		});
-	}, [selected]);
-	useEffect(() => {
-		const element = tabsRef.current;
-		const moreElement = moreStaticRef.current;
-		const handler = () => {
-			if (moreElement === null || moreElement === void 0 ? void 0 : moreElement.style) moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? "none" : "";
-		};
-		if (displayMore) element.addEventListener("scroll", handler);
-		return () => {
-			if (displayMore) element.removeEventListener("scroll", handler);
-		};
-	}, [displayMore]);
-	const menuItemChildren = Children.map(children, (child) => {
-		if (isValidElement(child)) return cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, { subtitle: null }));
-		return null;
-	});
-	return /* @__PURE__ */ jsx(TabsContext.Provider, {
-		value,
-		children: /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
-			className: cn(className, tabsContainer),
-			"data-testid": dataTestId,
-			ref: tabsRef,
-			role: "tablist"
-		}, props), {}, { children: [children, displayMore ? /* @__PURE__ */ jsx(TabMenu, {
-			className: tabsMenu,
-			disclosure: moreDisclosure,
-			ref: moreStaticRef,
-			children: /* @__PURE__ */ jsx("div", {
-				className: tabsMenuContainer,
-				children: menuItemChildren
-			})
-		}) : null] }))
-	});
-};
-Tabs.Tab = Tab;
-Tabs.Menu = TabMenu;
-Tabs.MenuItem = TabMenuItem;
+	};
+	Tabs.Tab = Tab;
+	Tabs.Menu = TabMenu;
+	Tabs.MenuItem = TabMenuItem;
+});
 
 //#endregion
-export { Tabs };
+init_Tabs();
+export { Tabs, init_Tabs };

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

@@ -1,10 +1,12 @@
-export declare const tabsMenuContainer: string;
-export declare const tabsMenu: string;
-export declare const tabsContainer: string;
-export declare const tabsBadgeContainer: string;
-export declare const tabsButton: string;
-export declare const tabsBadge: string;
-export declare const tabsTextSelected: Record<"default" | "selected", string>;
-export declare const tabsArrowIcon: string;
-export declare const tabsMenuWrapper: string;
+export declare const tabsStyle: {
+    menuContainer: string;
+    menu: string;
+    container: string;
+    badgeContainer: string;
+    button: string;
+    badge: string;
+    textSelected: Record<"default" | "selected", string>;
+    arrowIcon: string;
+    menuWrapper: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,QAAQ,QAOnB,CAAA;AAEF,eAAO,MAAM,aAAa,QAuBxB,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAG7B,CAAA;AAEF,eAAO,MAAM,UAAU,QA+DrB,CAAA;AAEF,eAAO,MAAM,SAAS,QAWpB,CAAA;AAEF,eAAO,MAAM,gBAAgB,wCAY3B,CAAA;AAEF,eAAO,MAAM,aAAa,QASxB,CAAA;AAEF,eAAO,MAAM,eAAe,QAM1B,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.css.ts"],"names":[],"mappings":"AA6JA,eAAO,MAAM,SAAS;;;;;;;;;;CAUrB,CAAA"}

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

@@ -1,18 +1,26 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/components/Tabs/styles.css.ts
-var tabsMenuContainer = "uv_1xz9hlg0";
-var tabsMenu = "uv_1xz9hlg1";
-var tabsContainer = "uv_1xz9hlg2";
-var tabsBadgeContainer = "uv_1xz9hlg3";
-var tabsButton = "uv_1xz9hlg4";
-var tabsBadge = "uv_1xz9hlg5";
-var tabsTextSelected = {
-	"default": "uv_1xz9hlg6",
-	selected: "uv_1xz9hlg7"
-};
-var tabsArrowIcon = "uv_1xz9hlg8";
-var tabsMenuWrapper = "uv_1xz9hlg9";
+var tabsStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	tabsStyle = {
+		menuContainer: "uv_1xz9hlg0",
+		menu: "uv_1xz9hlg1",
+		container: "uv_1xz9hlg2",
+		badgeContainer: "uv_1xz9hlg3",
+		button: "uv_1xz9hlg4",
+		badge: "uv_1xz9hlg5",
+		textSelected: {
+			"default": "uv_1xz9hlg6",
+			selected: "uv_1xz9hlg7"
+		},
+		arrowIcon: "uv_1xz9hlg8",
+		menuWrapper: "uv_1xz9hlg9"
+	};
+});
 
 //#endregion
-export { tabsArrowIcon, tabsBadge, tabsBadgeContainer, tabsButton, tabsContainer, tabsMenu, tabsMenuContainer, tabsMenuWrapper, tabsTextSelected };
+init_styles_css();
+export { init_styles_css, tabsStyle };

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

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Tabs/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/Tag/index.js

@@ -1,94 +1,99 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { Text } from "../Text/index.js";
-import { Loader } from "../Loader/index.js";
-import { Button } from "../Button/index.js";
-import { closeButtonTag, containerTag, textTag } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { Loader, init_Loader } from "../Loader/index.js";
+import { Button, init_Button } from "../Button/index.js";
+import { init_styles_css, tagStyle } from "./styles.css.js";
 import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { CopyContentIcon } from "@ultraviolet/icons/CopyContentIcon";
 import useClipboard from "react-use-clipboard";
 
 //#region src/components/Tag/index.tsx
-const COPY_DURATION = 2500;
-const TagInner = ({ children, isLoading = false, onClose, disabled = false, copiable, variant, copyButton }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-	/* @__PURE__ */ jsx(Text, {
-		"aria-disabled": disabled,
-		as: "span",
-		className: textTag,
-		oneLine: true,
-		variant: variant === "code" ? "code" : "caption",
-		children
-	}),
-	copiable && copyButton && !isLoading ? /* @__PURE__ */ jsx(CopyContentIcon, { size: "xsmall" }) : null,
-	onClose && !isLoading ? /* @__PURE__ */ jsx(Button, {
-		"aria-label": "Close tag",
-		className: closeButtonTag,
-		"data-testid": "close-tag",
-		disabled,
-		onClick: onClose,
-		sentiment: "neutral",
-		size: "small",
-		variant: "ghost",
-		children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
-	}) : null,
-	isLoading ? /* @__PURE__ */ jsx(Loader, {
-		active: true,
-		size: "small"
-	}) : null
-] });
-/**
-* Tag component is used to display a short text description of an item. It can be used to display a category
-* or any other metadata.
-*/
-const Tag = ({ children, isLoading, onClose, copiable = false, copyButton, copyText = "Copy", copiedText = "Copied!", disabled, sentiment = "neutral", variant = "default", className, style, "data-testid": dataTestId }) => {
-	const [isCopied, setCopied] = useClipboard(useMemo(() => {
-		if (typeof children === "string") return children;
-		if (Array.isArray(children)) return children.filter((child) => typeof child === "string").join("");
-		return "";
-	}, [children]), { successDuration: COPY_DURATION });
-	if (copiable && !disabled) return /* @__PURE__ */ jsx(Tooltip, {
-		text: isCopied ? copiedText : copyText,
-		children: /* @__PURE__ */ jsx("button", {
-			className: cn(className, containerTag({
-				copiable,
+var COPY_DURATION, TagInner, Tag;
+var init_Tag = __esmMin(() => {
+	init_Button();
+	init_Loader();
+	init_Text();
+	init_Tooltip();
+	init_styles_css();
+	COPY_DURATION = 2500;
+	TagInner = ({ children, isLoading = false, onClose, disabled = false, copiable, variant, copyButton }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Text, {
+			"aria-disabled": disabled,
+			as: "span",
+			className: tagStyle.text,
+			oneLine: true,
+			variant: variant === "code" ? "code" : "caption",
+			children
+		}),
+		copiable && copyButton && !isLoading ? /* @__PURE__ */ jsx(CopyContentIcon, { size: "xsmall" }) : null,
+		onClose && !isLoading ? /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Close tag",
+			className: tagStyle.closeButton,
+			"data-testid": "close-tag",
+			disabled,
+			onClick: onClose,
+			sentiment: "neutral",
+			size: "small",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
+		}) : null,
+		isLoading ? /* @__PURE__ */ jsx(Loader, {
+			active: true,
+			size: "small"
+		}) : null
+	] });
+	Tag = ({ children, isLoading, onClose, copiable = false, copyButton, copyText = "Copy", copiedText = "Copied!", disabled, sentiment = "neutral", variant = "default", className, style, "data-testid": dataTestId }) => {
+		const [isCopied, setCopied] = useClipboard(useMemo(() => {
+			if (typeof children === "string") return children;
+			if (Array.isArray(children)) return children.filter((child) => typeof child === "string").join("");
+			return "";
+		}, [children]), { successDuration: COPY_DURATION });
+		if (copiable && !disabled) return /* @__PURE__ */ jsx(Tooltip, {
+			text: isCopied ? copiedText : copyText,
+			children: /* @__PURE__ */ jsx("button", {
+				className: cn(className, tagStyle.container({
+					copiable,
+					disabled,
+					sentiment
+				})),
+				"data-testid": dataTestId,
+				disabled,
+				onClick: setCopied,
+				type: "button",
+				children: /* @__PURE__ */ jsx(TagInner, {
+					copiable: true,
+					copyButton,
+					disabled,
+					isLoading,
+					onClose,
+					variant,
+					children
+				})
+			})
+		});
+		return /* @__PURE__ */ jsx("span", {
+			className: cn(className, tagStyle.container({
 				disabled,
 				sentiment
 			})),
 			"data-testid": dataTestId,
-			disabled,
-			onClick: setCopied,
-			type: "button",
+			style,
 			children: /* @__PURE__ */ jsx(TagInner, {
-				copiable: true,
-				copyButton,
 				disabled,
 				isLoading,
 				onClose,
 				variant,
 				children
 			})
-		})
-	});
-	return /* @__PURE__ */ jsx("span", {
-		className: cn(className, containerTag({
-			disabled,
-			sentiment
-		})),
-		"data-testid": dataTestId,
-		style,
-		children: /* @__PURE__ */ jsx(TagInner, {
-			disabled,
-			isLoading,
-			onClose,
-			variant,
-			children
-		})
-	});
-};
+		});
+	};
+});
 
 //#endregion
-export { Tag };
+init_Tag();
+export { Tag, init_Tag };