@primer/react/lib-esm/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 { BoxWithFallback } from '../internal/components/BoxWithFallback.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 sxProp;
  let t1;
  let t2;
  let t3;
  if ($[0] !== t0) {
    ({
      alt: t1,
      size: t2,
      square: t3,
      sx: sxProp,
      className,
      style,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = rest;
    $[3] = style;
    $[4] = sxProp;
    $[5] = t1;
    $[6] = t2;
    $[7] = t3;
  } else {
    className = $[1];
    rest = $[2];
    style = $[3];
    sxProp = $[4];
    t1 = $[5];
    t2 = $[6];
    t3 = $[7];
  }
  const alt = t1 === undefined ? "" : t1;
  const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
  const square = t3 === undefined ? false : t3;
  let t4;
  if ($[8] !== size) {
    t4 = isResponsiveValue(size);
    $[8] = size;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  const isResponsive = t4;
  let cssSizeVars;
  if ($[10] !== isResponsive || $[11] !== size) {
    cssSizeVars = {};
    if (isResponsive) {
      for (const [key, value] of Object.entries(size)) {
        cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
      }
    } else {
      cssSizeVars["--avatarSize-regular"] = `${size}px`;
    }
    $[10] = isResponsive;
    $[11] = size;
    $[12] = cssSizeVars;
  } else {
    cssSizeVars = $[12];
  }
  let t5;
  if ($[13] !== className) {
    t5 = clsx(className, classes.Avatar);
    $[13] = className;
    $[14] = t5;
  } else {
    t5 = $[14];
  }
  const t6 = isResponsive ? "" : undefined;
  const t7 = square ? "" : undefined;
  const t8 = isResponsive ? undefined : size;
  const t9 = isResponsive ? undefined : size;
  let t10;
  if ($[15] !== cssSizeVars || $[16] !== style) {
    t10 = style ? {
      ...cssSizeVars,
      ...style
    } : cssSizeVars;
    $[15] = cssSizeVars;
    $[16] = style;
    $[17] = t10;
  } else {
    t10 = $[17];
  }
  let t11;
  if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
    t11 = /*#__PURE__*/jsx(BoxWithFallback, {
      as: "img",
      "data-component": "Avatar",
      className: t5,
      ref: ref,
      alt: alt,
      "data-responsive": t6,
      "data-square": t7,
      width: t8,
      height: t9,
      style: t10,
      sx: sxProp,
      ...rest
    });
    $[18] = alt;
    $[19] = ref;
    $[20] = rest;
    $[21] = sxProp;
    $[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 };