@primer/react/lib-esm/Hidden/Hidden.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import classes from './Hidden.module.css.js';
import { jsx } from 'react/jsx-runtime';

/* Normalize the value that is received from the prop `when`.
 * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
 * For string types: 'narrow' -> {narrow: true}
 */
function normalize(hiddenViewports) {
  // For array types
  if (Array.isArray(hiddenViewports)) {
    const breakpoints = {};
    // ['narrow', 'wide'] -> {narrow: true, wide: true}
    for (const breakpoint of hiddenViewports) {
      breakpoints[breakpoint] = true;
    }
    return breakpoints;
  }
  // For string types
  // 'narrow' -> {narrow: true}
  return {
    [hiddenViewports]: true
  };
}
const Hidden = t0 => {
  const $ = c(11);
  const {
    when,
    className,
    style,
    children
  } = t0;
  const normalizedStyles = normalize(when);
  let t1;
  if ($[0] !== className) {
    t1 = clsx(className, classes.Hidden);
    $[0] = className;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const t2 = normalizedStyles.narrow ? "none" : undefined;
  const t3 = normalizedStyles.regular ? "none" : undefined;
  const t4 = normalizedStyles.wide ? "none" : undefined;
  let t5;
  if ($[2] !== style || $[3] !== t2 || $[4] !== t3 || $[5] !== t4) {
    t5 = {
      "--hiddenDisplay-narrow": t2,
      "--hiddenDisplay-regular": t3,
      "--hiddenDisplay-wide": t4,
      ...style
    };
    $[2] = style;
    $[3] = t2;
    $[4] = t3;
    $[5] = t4;
    $[6] = t5;
  } else {
    t5 = $[6];
  }
  const t6 = t5;
  let t7;
  if ($[7] !== children || $[8] !== t1 || $[9] !== t6) {
    t7 = /*#__PURE__*/jsx("div", {
      className: t1,
      style: t6,
      children: children
    });
    $[7] = children;
    $[8] = t1;
    $[9] = t6;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  return t7;
};
Hidden.displayName = 'Hidden';

export { Hidden };