'use strict';

const jsxRuntime = require('react/jsx-runtime');
const utils$1 = require('../../../lib/utils.cjs');
const utils = require('../utils.cjs');

const ShortcutKey = ({
  ref,
  className,
  keys,
  ...props
}) => {
  const modifiedKeys = keys.map((key) => utils.getShortcutKey(key));
  const ariaLabel = modifiedKeys.map((shortcut) => shortcut.readable).join(" + ");
  return /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      "aria-label": ariaLabel,
      className: utils$1.cn("inline-flex items-center gap-0.5", className),
      ...props,
      ref,
      children: modifiedKeys.map((shortcut) => /* @__PURE__ */ jsxRuntime.jsx(
        "kbd",
        {
          className: utils$1.cn(
            "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium text-[rgb(156,157,160)] capitalize",
            className
          ),
          ...props,
          ref,
          children: shortcut.symbol
        },
        shortcut.symbol
      ))
    }
  );
};
ShortcutKey.displayName = "ShortcutKey";

exports.ShortcutKey = ShortcutKey;
