import { defineComponent as p, computed as f, openBlock as s, createBlock as g, resolveDynamicComponent as v, normalizeClass as k, unref as r, normalizeStyle as b, withCtx as x, createElementBlock as y, renderSlot as a, createVNode as z } from "vue";
import { useColors as C } from "../../composables/useColors.js";
import { useCommon as l } from "../../composables/useCommon.js";
import { useTheme as B } from "../../composables/useTheme.js";
import { closeIcon as S } from "../../common/icons.js";
import _ from "../icon/Icon.vue.js";
const $ = {
  key: 0,
  class: "max-w-full truncate"
}, h = {
  ...l.props(),
  ...C.props("gray"),
  tag: {
    type: String,
    default: "span"
  },
  rounded: Boolean,
  removable: Boolean,
  outlined: Boolean
}, w = {
  name: "XTag",
  validators: {
    ...l.validators()
  }
}, V = /* @__PURE__ */ p({
  ...w,
  props: h,
  emits: ["remove"],
  setup(n) {
    const o = n, i = f(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: d, className: c } = B("Tag", {}, o);
    return (e, t) => (s(), g(v(e.tag), {
      class: k([
        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]",
        [
          r(c),
          r(d).wrapper,
          e.outlined ? "border" : "bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
          e.rounded ? "rounded-full" : "rounded"
        ]
      ]),
      style: b(r(m))
    }, {
      default: x(() => [
        e.removable ? (s(), y("span", $, [
          a(e.$slots, "default"),
          z(_, {
            size: i.value,
            icon: r(S),
            class: "ml-1.5 cursor-pointer hover:text-secondary-700 transition-colors duration-150",
            onClick: t[0] || (t[0] = (u) => e.$emit("remove", u))
          }, null, 8, ["size", "icon"])
        ])) : a(e.$slots, "default", { key: 1 })
      ]),
      _: 3
    }, 8, ["style", "class"]));
  }
});
export {
  V as default
};
