import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { IconCross as a } from "@frontify/fondue-icons";
import { useButton as b } from "@react-aria/button";
import { useFocusRing as m } from "@react-aria/focus";
import { mergeProps as x } from "@react-aria/utils";
import { useRef as g } from "react";
import { FOCUS_STYLE as v } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
var S = /* @__PURE__ */ ((e) => (e.Suggested = "Suggested", e.Selected = "Selected", e.SelectedWithFocus = "SelectedWithFocus", e.PreviouslySelected = "PreviouslySelected", e))(S || {}), h = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e))(h || {});
const f = {
  Suggested: "tw-border tw-bg-base tw-text-text-weak tw-border-line hover:tw-text-text hover:tw-border-line-strong",
  Selected: "tw-bg-box-neutral hover:tw-bg-box-neutral-hover tw-text-text-weak hover:tw-text-box-neutral-inverse-hover",
  SelectedWithFocus: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover tw-text-box-selected-strong-inverse",
  PreviouslySelected: "tw-bg-base tw-border tw-text-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-neutral hover:tw-text-box-selected-inverse hover:tw-border-box-selected-inverse"
}, F = ({ type: e, label: l, onClick: o, size: n = "Medium", "data-test-id": r = "tag" }) => {
  const i = g(null), { isFocusVisible: c, focusProps: d } = m(), t = (e === "Selected" || e === "SelectedWithFocus") && o, { buttonProps: w } = b(
    {
      onPress: () => t && o()
    },
    i
  );
  return /* @__PURE__ */ u(
    "button",
    {
      type: "button",
      "data-test-id": r,
      className: p([
        "tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-transition-colors tw-group tw-outline-none tw-break-word",
        n === "Small" ? "tw-px-1.5 tw-py-0.5" : "tw-px-2.5 tw-py-1",
        f[e],
        t ? "tw-cursor-pointer" : "tw-cursor-default",
        c && v
      ]),
      ...x(w, d),
      children: [
        l,
        t && /* @__PURE__ */ s(
          "span",
          {
            "data-test-id": `${r}-reject-icon`,
            className: "tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1 tw-leading-[0]",
            children: /* @__PURE__ */ s(a, { size: 12 })
          }
        )
      ]
    }
  );
};
F.displayName = "FondueTag";
export {
  F as Tag,
  h as TagSize,
  S as TagType
};
//# sourceMappingURL=Tag.es.js.map
