'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { StatusMeta } from "./Status.meta.js";
export function Status({ ref: passedRef, variant, size, className, style, children, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(StatusMeta, { variant, size }, { ref: passedRef });
    return (_jsxs("span", { ref: cssPropsPolyfillPassedRef, className: cn('gds-status root-flex items-center gap-1 u:w-max u:max-w-full', className), ...getCSSPropsAttributes(StatusMeta, { variant, size }, style), ...cssPropsPolyfillAttributes, ...props, children: [_jsx("span", { className: `
          flex shrink-0 items-center justify-center
          @prop-size-small/status:size-3
          @prop-size-medium/status:size-4
          @prop-size-large/status:size-5
        `, children: _jsx("span", { className: `
            rounded-full
            @prop-variant-default/status:bg-strong
            @prop-variant-brand/status:bg-brand-default
            @prop-variant-info/status:bg-status-info-default
            @prop-variant-success/status:bg-status-success-default
            @prop-variant-warning/status:bg-status-warning-default
            @prop-variant-error/status:bg-status-error-default
            @prop-size-small/status:size-2
            @prop-size-medium/status:size-2.5
            @prop-size-large/status:size-3
          ` }) }), children ? (_jsx("span", { className: `
            truncate text-default
            @prop-size-small/status:text-12
            @prop-size-medium/status:text-14
            @prop-size-large/status:text-16
          `, children: children })) : null] }));
}
//# sourceMappingURL=Status.js.map