"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 }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "status",
      { variant },
      { ref: forwardedRef }
    );
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref: propsPolyfillForwardedRef,
        className: classNames(["gds-status flex items-center gap-1 -:w-max -:max-w-full", className]),
        ...getCSSPropsAttributes("status", { variant }, style),
        ...propsPolyfillAttributes,
        ...props,
        children: [
          /* @__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-500
              @prop-variant-info/status:text-galactic-500
              @prop-variant-success/status:text-starfield-500
              @prop-variant-warning/status:text-solar-500
              @prop-variant-error/status:text-sonja-500
              @prop-variant-muted/status:text-space-1100
            `
            }
          ) }),
          children ? /* @__PURE__ */ jsx("span", { className: "text-c10 truncate text-white", children }) : null
        ]
      }
    );
  }
);
ExperimentalStatus.displayName = "ExperimentalStatus";
export {
  ExperimentalStatus
};
