/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e694c50 | Cube Dev Team */
import { _Item } from "../Item/Item.js";
import { CloseIcon } from "../../../icons/CloseIcon.js";
import { tasty } from "@tenphi/tasty";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/content/Tag/Tag.tsx
const TagElement = tasty(_Item, {
	qa: "Tag",
	role: "status",
	styles: {
		padding: 0,
		preset: {
			"": "tag",
			"size=xsmall": "t4",
			"size=small | size=medium": "t3",
			"size=large | size=xlarge": "t2"
		},
		border: { "type=primary": "#clear" },
		"$min-inline-padding": ".5x",
		Label: {
			textAlign: "center",
			placeSelf: "center"
		}
	}
});
function Tag(allProps, ref) {
	let { theme = "default", isClosable, onClose, closeButtonStyles, children, size = "inline", mods, ...props } = allProps;
	let type = "card";
	if (theme === "special") {
		theme = "default";
		type = "primary";
	}
	return /* @__PURE__ */ jsx(TagElement, {
		ref,
		size,
		"data-type": type,
		variant: `${theme}.${type}`,
		mods,
		actions: isClosable ? /* @__PURE__ */ jsx(_Item.Action, {
			"aria-label": "Close",
			styles: {
				color: "currentColor",
				...closeButtonStyles
			},
			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
			onPress: onClose
		}) : void 0,
		...props,
		children
	});
}
const _Tag = forwardRef(Tag);
_Tag.displayName = "Tag";

//#endregion
export { _Tag };
//# sourceMappingURL=Tag.js.map