@radix-ui/themes/dist/cjs/components/avatar.js

[](https://radix-ui.com/themes)

"use strict";"use client";var I=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(r,a)=>{for(var t in a)l(r,t,{get:a[t],enumerable:!0})},P=(r,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of N(a))!w.call(r,o)&&o!==t&&l(r,o,{get:()=>a[o],enumerable:!(s=h(a,o))||s.enumerable});return r};var i=(r,a,t)=>(t=r!=null?I(x(r)):{},P(a||!r||!r.__esModule?l(t,"default",{value:r,enumerable:!0}):t,r)),D=r=>P(l({},"__esModule",{value:!0}),r);var S={};C(S,{Avatar:()=>d});module.exports=D(S);var e=i(require("react")),v=i(require("classnames")),n=i(require("@radix-ui/react-avatar")),A=require("./avatar.props.js"),m=require("../helpers/index.js"),g=require("../props/index.js");const d=e.forwardRef((r,a)=>{const{asChild:t,children:s,className:o,style:p,color:y,radius:c,...u}=(0,m.extractProps)(r,A.avatarPropDefs,g.marginPropDefs);return e.createElement(n.Root,{"data-accent-color":y,"data-radius":c,className:(0,v.default)("rt-reset","rt-AvatarRoot",o),style:p,asChild:t},(0,m.getSubtree)({asChild:t,children:s},e.createElement(f,{ref:a,...u})))});d.displayName="Avatar";const f=e.forwardRef(({fallback:r,...a},t)=>{const[s,o]=e.useState("idle");return e.createElement(e.Fragment,null,s==="idle"||s==="loading"?e.createElement("span",{className:"rt-AvatarFallback"}):null,s==="error"?e.createElement(n.Fallback,{className:(0,v.default)("rt-AvatarFallback",{"rt-one-letter":typeof r=="string"&&r.length===1,"rt-two-letters":typeof r=="string"&&r.length===2}),delayMs:0},r):null,e.createElement(n.Image,{ref:t,className:"rt-AvatarImage",...a,onLoadingStatusChange:p=>{a.onLoadingStatusChange?.(p),o(p)}}))});f.displayName="AvatarImpl";
//# sourceMappingURL=avatar.js.map