import { jsx as e } from "react/jsx-runtime";
import n from "@mui/material/Box";
const t = typeof navigator < "u" && /Mac/.test(navigator.userAgent);
function a(r) {
  return r === "Meta" ? t ? "⌘" : "Ctrl" : r === "Control" ? t ? "⌃" : "Ctrl" : r === "Alt" ? t ? "⌥" : "Alt" : r === "Shift" ? "⇧" : r === "Enter" ? "⏎" : r === "Escape" ? "Esc" : r === "Backspace" ? "⌫" : r === "Delete" ? "Del" : r === "ArrowUp" ? "↑" : r === "ArrowDown" ? "↓" : r === "ArrowLeft" ? "←" : r === "ArrowRight" ? "→" : r;
}
function f({ keys: r }) {
  return /* @__PURE__ */ e(n, { sx: { display: "inline-flex", alignItems: "center", gap: "2px" }, children: r.map((i, o) => /* @__PURE__ */ e(
    n,
    {
      component: "kbd",
      sx: {
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        height: 20,
        minWidth: 20,
        px: "5px",
        fontFamily: "var(--ov-font-ui)",
        fontSize: "0.6875rem",
        fontWeight: 500,
        lineHeight: 1,
        color: "var(--ov-fg-muted)",
        bgcolor: "var(--ov-bg-subtle)",
        border: "1px solid var(--ov-border-default)",
        borderRadius: "4px",
        boxShadow: "0 1px 0 var(--ov-border-muted)"
      },
      children: a(i)
    },
    o
  )) });
}
f.displayName = "HotkeyHint";
export {
  f as H
};
