'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { DividerMeta } from "./Divider.meta.js";
export function Divider({ ref: passedRef, variant, orientation, className, style, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(DividerMeta, { variant, orientation }, { ref: passedRef, returnPropValues: { variant, orientation } });
    return (_jsx("span", { ref: cssPropsPolyfillPassedRef, "data-variant": cssProps.variant, "data-orientation": cssProps.orientation, className: cn(`gds-divider root-flex items-center
        u:data-[variant=default]:text-(--border-color-default)
        u:data-[variant=muted]:text-(--border-color-muted)
        u:data-[variant=strong]:text-(--border-color-strong)
        i:shrink-0
        i:grow-0
        i:data-[orientation=horizontal]:h-px
        i:data-[orientation=vertical]:w-px
        i:data-[orientation=vertical]:flex-col`, className), ...getCSSPropsAttributes(DividerMeta, { variant, orientation }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsx("hr", { "aria-orientation": cssProps.orientation, className: "size-full bg-current" }) }));
}
//# sourceMappingURL=Divider.js.map