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, onRemove: d, removeLabel: f }) => {
	let { t: p } = s("ui", { useSuspense: !1 }), m = i(), h = typeof d == "function", g = f ?? p("backoffice.tag.remove", { defaultValue: "Remove" }), _ = null;
	return h && (_ = /* @__PURE__ */ a("button", {
		type: "button",
		className: n,
		onClick: d,
		"aria-label": g,
		"aria-describedby": m,
		children: /* @__PURE__ */ a(t, {
			width: 14,
			height: 14,
			"aria-hidden": "true"
		})
	})), /* @__PURE__ */ o("span", {
		className: e(r({ tone: l }), u),
		children: [/* @__PURE__ */ a("span", {
			id: m,
			children: c
		}), _]
	});
};
//#endregion
export { c as Tag, c as default };

//# sourceMappingURL=Tag.js.map