import { jsx as d } from "react/jsx-runtime";
import { a as g } from "../Slot-C98rL4yy.mjs";
import { tw as t, makeVariants as n } from "@spark-ui/internal-utils";
import { c as u } from "../index-BmAFn37q.mjs";
const f = [
  {
    intent: "main",
    design: "filled",
    class: t(["bg-main", "text-on-main"])
  },
  {
    intent: "support",
    design: "filled",
    class: t(["bg-support", "text-on-support"])
  },
  {
    intent: "accent",
    design: "filled",
    class: t(["bg-accent", "text-on-accent"])
  },
  {
    intent: "basic",
    design: "filled",
    class: t(["bg-basic", "text-on-basic"])
  },
  {
    intent: "success",
    design: "filled",
    class: t(["bg-success", "text-on-success"])
  },
  {
    intent: "alert",
    design: "filled",
    class: t(["bg-alert", "text-on-alert"])
  },
  {
    intent: "danger",
    design: "filled",
    class: t(["bg-error", "text-on-error"])
  },
  {
    intent: "info",
    design: "filled",
    class: t(["bg-info", "text-on-info"])
  },
  {
    intent: "neutral",
    design: "filled",
    class: t(["bg-neutral", "text-on-neutral"])
  },
  {
    intent: "surface",
    design: "filled",
    class: t(["bg-surface", "text-on-surface"])
  }
], p = [
  {
    intent: "main",
    design: "outlined",
    class: t(["text-main"])
  },
  {
    intent: "support",
    design: "outlined",
    class: t(["text-support"])
  },
  {
    intent: "accent",
    design: "outlined",
    class: t(["text-accent"])
  },
  {
    intent: "basic",
    design: "outlined",
    class: t(["text-basic"])
  },
  {
    intent: "success",
    design: "outlined",
    class: t(["text-success"])
  },
  {
    intent: "alert",
    design: "outlined",
    class: t(["text-alert"])
  },
  {
    intent: "danger",
    design: "outlined",
    class: t(["text-error"])
  },
  {
    intent: "info",
    design: "outlined",
    class: t(["text-info"])
  },
  {
    intent: "neutral",
    design: "outlined",
    class: t(["text-neutral"])
  }
], b = [
  {
    intent: "main",
    design: "tinted",
    class: t(["bg-main-container", "text-on-main-container"])
  },
  {
    intent: "support",
    design: "tinted",
    class: t(["bg-support-container", "text-on-support-container"])
  },
  {
    intent: "accent",
    design: "tinted",
    class: t(["bg-accent-container", "text-on-accent-container"])
  },
  {
    intent: "basic",
    design: "tinted",
    class: t(["bg-basic-container", "text-on-basic-container"])
  },
  {
    intent: "success",
    design: "tinted",
    class: t(["bg-success-container", "text-on-success-container"])
  },
  {
    intent: "alert",
    design: "tinted",
    class: t(["bg-alert-container", "text-on-alert-container"])
  },
  {
    intent: "danger",
    design: "tinted",
    class: t(["bg-error-container", "text-on-error-container"])
  },
  {
    intent: "info",
    design: "tinted",
    class: t(["bg-info-container", "text-on-info-container"])
  },
  {
    intent: "neutral",
    design: "tinted",
    class: t(["bg-neutral-container", "text-on-neutral-container"])
  }
], x = u(
  [
    "box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap",
    "text-caption font-bold",
    "px-md"
  ],
  {
    variants: {
      /**
       * Main style of the tag.
       * - `filled`: Tag will be plain.
       * - `outlined`: Tag will have a surface background with an colored outline/text.
       * - `tinted`: Tag will be filled but using a lighter color scheme.
       */
      design: n({
        filled: [],
        outlined: ["border-sm", "border-current"],
        tinted: []
      }),
      size: n({
        md: ["h-sz-20"],
        lg: ["h-sz-24"]
      }),
      shape: n({
        square: [],
        rounded: ["rounded-md"],
        pill: ["rounded-full"]
      }),
      /**
       * Color scheme of the tag.
       */
      intent: n({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: []
      })
    },
    compoundVariants: [...f, ...p, ...b],
    defaultVariants: {
      design: "filled",
      intent: "basic",
      size: "md",
      shape: "pill"
    }
  }
), j = ({
  design: e = "filled",
  intent: s = "basic",
  size: i = "md",
  shape: a = "pill",
  asChild: c,
  className: o,
  ref: l,
  ...r
}) => /* @__PURE__ */ d(
  c ? g : "span",
  {
    "data-spark-component": "tag",
    ref: l,
    className: x({
      className: o,
      design: e,
      intent: s,
      size: i,
      shape: a
    }),
    ...r
  }
);
export {
  j as Tag
};
//# sourceMappingURL=index.mjs.map
