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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import classes from './Spinner.module.css.js';
import { clsx } from 'clsx';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useId } from '../hooks/useId.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';

const sizeMap = {
  small: '16px',
  medium: '32px',
  large: '64px'
};
function Spinner(t0) {
  var _ariaLabel;
  const $ = c(23);
  let ariaLabel;
  let className;
  let props;
  let style;
  let t1;
  let t2;
  if ($[0] !== t0) {
    ({
      size: t1,
      srText: t2,
      "aria-label": ariaLabel,
      className,
      style,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = ariaLabel;
    $[2] = className;
    $[3] = props;
    $[4] = style;
    $[5] = t1;
    $[6] = t2;
  } else {
    ariaLabel = $[1];
    className = $[2];
    props = $[3];
    style = $[4];
    t1 = $[5];
    t2 = $[6];
  }
  const sizeKey = t1 === undefined ? "medium" : t1;
  const srText = t2 === undefined ? "Loading" : t2;
  const size = sizeMap[sizeKey];
  const hasHiddenLabel = srText !== null && ariaLabel === undefined;
  const labelId = useId();
  const t3 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : undefined;
  const t4 = hasHiddenLabel ? labelId : undefined;
  let t5;
  let t6;
  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = /*#__PURE__*/jsx("circle", {
      cx: "8",
      cy: "8",
      r: "7",
      stroke: "currentColor",
      strokeOpacity: "0.25",
      strokeWidth: "2",
      vectorEffect: "non-scaling-stroke"
    });
    t6 = /*#__PURE__*/jsx("path", {
      d: "M15 8a7.002 7.002 0 00-7-7",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      vectorEffect: "non-scaling-stroke"
    });
    $[7] = t5;
    $[8] = t6;
  } else {
    t5 = $[7];
    t6 = $[8];
  }
  let t7;
  if ($[9] !== className || $[10] !== props || $[11] !== size || $[12] !== style || $[13] !== t3 || $[14] !== t4) {
    t7 = /*#__PURE__*/jsxs("svg", {
      height: size,
      width: size,
      viewBox: "0 0 16 16",
      fill: "none",
      "aria-hidden": true,
      "aria-label": t3,
      "aria-labelledby": t4,
      className: className,
      style: style,
      ...props,
      children: [t5, t6]
    });
    $[9] = className;
    $[10] = props;
    $[11] = size;
    $[12] = style;
    $[13] = t3;
    $[14] = t4;
    $[15] = t7;
  } else {
    t7 = $[15];
  }
  let t8;
  if ($[16] !== hasHiddenLabel || $[17] !== labelId || $[18] !== srText) {
    t8 = hasHiddenLabel ? /*#__PURE__*/jsx(VisuallyHidden, {
      id: labelId,
      children: srText
    }) : null;
    $[16] = hasHiddenLabel;
    $[17] = labelId;
    $[18] = srText;
    $[19] = t8;
  } else {
    t8 = $[19];
  }
  let t9;
  if ($[20] !== t7 || $[21] !== t8) {
    t9 = /*#__PURE__*/jsxs("span", {
      className: classes.Box,
      children: [t7, t8]
    });
    $[20] = t7;
    $[21] = t8;
    $[22] = t9;
  } else {
    t9 = $[22];
  }
  return t9;
}
function StyledSpinner(t0) {
  const $ = c(8);
  let className;
  let props;
  if ($[0] !== t0) {
    ({
      className,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = props;
  } else {
    className = $[1];
    props = $[2];
  }
  let t1;
  if ($[3] !== className) {
    t1 = clsx(className, classes.SpinnerAnimation);
    $[3] = className;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== props || $[6] !== t1) {
    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
      as: Spinner,
      className: t1,
      ...props
    });
    $[5] = props;
    $[6] = t1;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  return t2;
}
StyledSpinner.displayName = 'Spinner';

export { StyledSpinner as default };