@primer/react/lib-esm/KeybindingHint/components/Key.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import VisuallyHidden from '../../_VisuallyHidden.js';
import { accessibleKeyName, condensedKeyName, fullKeyName } from '../key-names.js';
import { useIsMacOS } from '../../hooks/useIsMacOS.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

/** Renders a single key with accessible alternative text. */
const Key = t0 => {
  const $ = c(14);
  const {
    name,
    format
  } = t0;
  const isMacOS = useIsMacOS();
  let t1;
  if ($[0] !== isMacOS || $[1] !== name) {
    t1 = accessibleKeyName(name, isMacOS);
    $[0] = isMacOS;
    $[1] = name;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== t1) {
    t2 = /*#__PURE__*/jsx(VisuallyHidden, {
      children: t1
    });
    $[3] = t1;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[5] !== format || $[6] !== isMacOS || $[7] !== name) {
    t3 = format === "condensed" ? condensedKeyName(name, isMacOS) : fullKeyName(name, isMacOS);
    $[5] = format;
    $[6] = isMacOS;
    $[7] = name;
    $[8] = t3;
  } else {
    t3 = $[8];
  }
  let t4;
  if ($[9] !== t3) {
    t4 = /*#__PURE__*/jsx("span", {
      "aria-hidden": true,
      children: t3
    });
    $[9] = t3;
    $[10] = t4;
  } else {
    t4 = $[10];
  }
  let t5;
  if ($[11] !== t2 || $[12] !== t4) {
    t5 = /*#__PURE__*/jsxs(Fragment, {
      children: [t2, t4]
    });
    $[11] = t2;
    $[12] = t4;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  return t5;
};

export { Key };