'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 { KeyboardMeta } from "./Keyboard.meta.js";
const SINGLE_KEY_CHARS = ['⌘', '⌥', '⇧', '^', '⏎', '⌫', '~', '␛', '/'];
const SINGLE_KEY_CHARS_REGEX = new RegExp(`(${SINGLE_KEY_CHARS.map((char) => char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'g');
export function Keyboard({ ref: passedRef, size, className, style, children, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(KeyboardMeta, { size }, { ref: passedRef });
    const childrenArray = Array.isArray(children)
        ? children
        : typeof children === 'string'
            ? children
                .split(SINGLE_KEY_CHARS_REGEX)
                .map((part) => part.trim())
                .filter((part) => part.length > 0)
            : [children];
    return (_jsx("kbd", { ref: cssPropsPolyfillPassedRef, className: cn(`gds-keyboard root-inline u:shrink-0 u:font-mono u:whitespace-nowrap
        i:leading-0`, className), ...getCSSPropsAttributes(KeyboardMeta, { size }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsx("span", { className: `
          inline-flex h-(--height) min-w-(--height) items-center justify-center rounded-4 border border-default
          @prop-size-small/keyboard:gap-0.5
          @prop-size-small/keyboard:px-0.75
          @prop-size-small/keyboard:text-10
          @prop-size-small/keyboard:[--height:--spacing(4)]
          @prop-size-medium/keyboard:gap-1
          @prop-size-medium/keyboard:px-1.25
          @prop-size-medium/keyboard:text-12
          @prop-size-medium/keyboard:[--height:--spacing(5)]
          @prop-size-large/keyboard:gap-1
          @prop-size-large/keyboard:px-1.25
          @prop-size-large/keyboard:text-14
          @prop-size-large/keyboard:[--height:--spacing(6)]
          ${ /* Prevent incorrect alignment when empty */''}
          empty:after:content-nbsp
        `, children: childrenArray.map((child, index) => (_jsx("span", { children: child }, index))) }) }));
}
//# sourceMappingURL=Keyboard.js.map