import { cx as e } from "../../../theme/tools.js";
import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
import { removeButton as n, rootRecipe as r } from "./tag.css.js";
import { useId as i } from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useTranslation as s } from "react-i18next";
//#region src/backoffice/atoms/tag/Tag.tsx
var c = ({ children: c, tone: l = "neutral", className: u, title: d, onRemove: f, removeLabel: p }) => {
	let { t: m } = s("ui", { useSuspense: !1 }), h = i(), g = typeof f == "function", _ = p ?? m("backoffice.tag.remove", { defaultValue: "Remove" }), v = null;
	return g && (v = /* @__PURE__ */ a("button", {
		type: "button",
		className: n,
		onClick: f,
		"aria-label": _,
		"aria-describedby": h,
		children: /* @__PURE__ */ a(t, {
			width: 14,
			height: 14,
			"aria-hidden": "true"
		})
	})), /* @__PURE__ */ o("span", {
		className: e(r({ tone: l }), u),
		title: d,
		children: [/* @__PURE__ */ a("span", {
			id: h,
			children: c
		}), v]
	});
};
//#endregion
export { c as Tag, c as default };

//# sourceMappingURL=Tag.js.map