'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 { renderAddon } from "./base/Addon.js";
import { TagMeta } from "./Tag.meta.js";
export function Tag({ ref: passedRef, variant, size, addonBefore, className, style, children, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(TagMeta, { variant, size }, { ref: passedRef });
    return (_jsx("span", { ref: cssPropsPolyfillPassedRef, className: cn('gds-tag root-block u:w-max u:max-w-full i:h-max', className), ...getCSSPropsAttributes(TagMeta, { variant, size }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsxs("span", { className: `
          flex h-(--height) min-w-(--height) items-center justify-center rounded-full px-(--gds-tag-padding)
          text-center text-white transition
          @prop-variant-muted/tag:bg-muted
          @prop-variant-muted/tag:text-default
          @prop-variant-brand/tag:bg-brand-muted
          @prop-variant-galactic/tag:bg-status-info-muted
          @prop-variant-starfield/tag:bg-status-success-muted
          @prop-variant-solar/tag:bg-status-warning-muted
          @prop-variant-sonja/tag:bg-status-error-muted
          @prop-variant-elevated/tag:bg-elevated
          @prop-variant-elevated/tag:text-default
          @prop-size-xsmall/tag:[--height:--spacing(4)]
          @prop-size-small/tag:[--height:--spacing(5)]
          @prop-size-medium/tag:[--height:--spacing(6)]
          u:@prop-size-xsmall/tag:addon-small
          u:@prop-size-small/tag:addon-small
          u:@prop-size-medium/tag:addon-medium
        `, children: [addonBefore ? (_jsx(TagAddon, { className: `
              @prop-size-xsmall/tag:-ms-0.5
              @prop-size-small/tag:-ms-0.5
              @prop-size-medium/tag:-ms-1
            `, children: renderAddon(addonBefore) })) : null, _jsx("span", { className: `
            truncate px-0.5
            @prop-size-xsmall/tag:text-10
            @prop-size-small/tag:text-10
            @prop-size-medium/tag:text-12
          `, children: children })] }) }));
}
function TagAddon({ className, children, ...props }) {
    return (_jsx("span", { className: cn('gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0', className), ...props, children: children }));
}
//# sourceMappingURL=Tag.js.map