"use client";
import { jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { forwardRef } from "react";
import { Text } from "../Text/Text.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Spacing } from "../../tokens/Spacing.js";
const Tag = forwardRef(
  ({ size: _size = "small", color = "Gray", children, ...rest }, ref) => {
    const bgColor = `${color}16`;
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        sx: {
          width: "fit-content",
          height: "min-content",
          px: Spacing["8px"],
          py: Spacing["4px"],
          borderRadius: BorderRadius.FULL,
          bg: bgColor,
          whiteSpace: "nowrap"
        },
        ...rest,
        children: /* @__PURE__ */ jsx(Text.C10, { color: "White88", children })
      }
    );
  }
);
Tag.displayName = "Tag";
export {
  Tag
};
