"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalStatus = forwardRef(
  ({ variant, className, style, children, ...props }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("status", { variant });
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        className: classNames(["gds-status flex items-center gap-1 -:w-max -:max-w-full", className]),
        ...getCSSPropsAttributes("status", { variant }, style),
        ...polyfillAttributes,
        ...props,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsx("span", { className: "flex size-3 items-center justify-center", children: /* @__PURE__ */ jsx(
            "span",
            {
              className: `
              size-2 shrink-0 rounded-full bg-current shadow-[0_0_8px_theme(colors.current)]
              @prop-variant-default/status:text-purple
              @prop-variant-info/status:text-blue
              @prop-variant-success/status:text-green
              @prop-variant-warning/status:text-yellow
              @prop-variant-error/status:text-red
              @prop-variant-muted/status:text-gray
            `
            }
          ) }),
          children ? /* @__PURE__ */ jsx("span", { className: "text-c10 truncate text-white/88", children }) : null
        ]
      }
    );
  }
);
ExperimentalStatus.displayName = "ExperimentalStatus";
export {
  ExperimentalStatus
};
