@primer/react/lib/SkeletonAvatar/SkeletonAvatar.js

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var useResponsiveValue = require('../hooks/useResponsiveValue.js');
var Avatar = require('../Avatar/Avatar.js');
var SkeletonBox = require('../Skeleton/SkeletonBox.js');
var SkeletonAvatar_module = require('./SkeletonAvatar.module.css.js');
var clsx = require('clsx');
require('@styled-system/css');
var merge = require('deepmerge');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var merge__default = /*#__PURE__*/_interopDefault(merge);

function SkeletonAvatar(t0) {
  const $ = reactCompilerRuntime.c(31);
  let className;
  let rest;
  let square;
  let style;
  let t1;
  if ($[0] !== t0) {
    ({
      size: t1,
      square,
      className,
      style,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = rest;
    $[3] = square;
    $[4] = style;
    $[5] = t1;
  } else {
    className = $[1];
    rest = $[2];
    square = $[3];
    style = $[4];
    t1 = $[5];
  }
  const size = t1 === undefined ? Avatar.DEFAULT_AVATAR_SIZE : t1;
  let t2;
  if ($[6] !== size) {
    t2 = useResponsiveValue.isResponsiveValue(size);
    $[6] = size;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  const responsive = t2;
  let T0;
  let t3;
  let t4;
  let t5;
  let t6;
  let t7;
  let t8;
  if ($[8] !== className || $[9] !== responsive || $[10] !== rest || $[11] !== size || $[12] !== square || $[13] !== style) {
    const cssSizeVars = {};
    if (responsive) {
      for (const [key, value] of Object.entries(size)) {
        cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
      }
    } else {
      cssSizeVars["--avatarSize-regular"] = `${size}px`;
    }
    T0 = SkeletonBox.SkeletonBox;
    if ($[21] !== className) {
      t3 = clsx.clsx(className, SkeletonAvatar_module.SkeletonAvatar);
      $[21] = className;
      $[22] = t3;
    } else {
      t3 = $[22];
    }
    t4 = rest;
    t5 = "SkeletonAvatar";
    t6 = responsive ? "" : undefined;
    t7 = square ? "" : undefined;
    t8 = merge__default.default(style, cssSizeVars);
    $[8] = className;
    $[9] = responsive;
    $[10] = rest;
    $[11] = size;
    $[12] = square;
    $[13] = style;
    $[14] = T0;
    $[15] = t3;
    $[16] = t4;
    $[17] = t5;
    $[18] = t6;
    $[19] = t7;
    $[20] = t8;
  } else {
    T0 = $[14];
    t3 = $[15];
    t4 = $[16];
    t5 = $[17];
    t6 = $[18];
    t7 = $[19];
    t8 = $[20];
  }
  let t9;
  if ($[23] !== T0 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8) {
    t9 = /*#__PURE__*/jsxRuntime.jsx(T0, {
      className: t3,
      ...t4,
      "data-component": t5,
      "data-responsive": t6,
      "data-square": t7,
      style: t8
    });
    $[23] = T0;
    $[24] = t3;
    $[25] = t4;
    $[26] = t5;
    $[27] = t6;
    $[28] = t7;
    $[29] = t8;
    $[30] = t9;
  } else {
    t9 = $[30];
  }
  return t9;
}

exports.SkeletonAvatar = SkeletonAvatar;