@primer/react/dist/Avatar/Avatar.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import React from 'react';
import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
import classes from './Avatar.module.css.js';
import { jsx } from 'react/jsx-runtime';

const DEFAULT_AVATAR_SIZE = 20;
const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
  const $ = c(29);
  let className;
  let rest;
  let style;
  let t1;
  let t2;
  let t3;
  if ($[0] !== t0) {
    ({
      alt: t1,
      size: t2,
      square: t3,
      className,
      style,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = rest;
    $[3] = style;
    $[4] = t1;
    $[5] = t2;
    $[6] = t3;
  } else {
    className = $[1];
    rest = $[2];
    style = $[3];
    t1 = $[4];
    t2 = $[5];
    t3 = $[6];
  }
  const alt = t1 === undefined ? "" : t1;
  const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
  const square = t3 === undefined ? false : t3;
  let t4;
  if ($[7] !== size) {
    t4 = isResponsiveValue(size);
    $[7] = size;
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  const isResponsive = t4;
  let cssSizeVars;
  if ($[9] !== isResponsive || $[10] !== size) {
    cssSizeVars = {};
    if (isResponsive) {
      let t5;
      if ($[12] !== size) {
        t5 = Object.entries(size);
        $[12] = size;
        $[13] = t5;
      } else {
        t5 = $[13];
      }
      for (const [key, value] of t5) {
        cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
      }
    } else {
      cssSizeVars["--avatarSize-regular"] = `${size}px`;
    }
    $[9] = isResponsive;
    $[10] = size;
    $[11] = cssSizeVars;
  } else {
    cssSizeVars = $[11];
  }
  let t5;
  if ($[14] !== className) {
    t5 = clsx(className, classes.Avatar);
    $[14] = className;
    $[15] = t5;
  } else {
    t5 = $[15];
  }
  const t6 = isResponsive ? "" : undefined;
  const t7 = square ? "" : undefined;
  const t8 = isResponsive ? undefined : size;
  const t9 = isResponsive ? undefined : size;
  let t10;
  if ($[16] !== cssSizeVars || $[17] !== style) {
    t10 = style ? {
      ...cssSizeVars,
      ...style
    } : cssSizeVars;
    $[16] = cssSizeVars;
    $[17] = style;
    $[18] = t10;
  } else {
    t10 = $[18];
  }
  let t11;
  if ($[19] !== alt || $[20] !== ref || $[21] !== rest || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
    t11 = /*#__PURE__*/jsx("img", {
      "data-component": "Avatar",
      className: t5,
      ref: ref,
      alt: alt,
      "data-responsive": t6,
      "data-square": t7,
      width: t8,
      height: t9,
      style: t10,
      ...rest
    });
    $[19] = alt;
    $[20] = ref;
    $[21] = rest;
    $[22] = t10;
    $[23] = t5;
    $[24] = t6;
    $[25] = t7;
    $[26] = t8;
    $[27] = t9;
    $[28] = t11;
  } else {
    t11 = $[28];
  }
  return t11;
});
if (process.env.NODE_ENV !== "production") {
  Avatar.displayName = 'Avatar';
}

export { DEFAULT_AVATAR_SIZE, Avatar as default };