var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var C=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),u=(l,e)=>{for(var a in e)s(l,a,{get:e[a],enumerable:!0})},c=(l,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of A(e))!m.call(l,t)&&t!==a&&s(l,t,{get:()=>e[t],enumerable:!(r=y(e,t))||r.enumerable});return l};var B=(l,e,a)=>(a=l!=null?h(D(l)):{},c(e||!l||!l.__esModule?s(a,"default",{value:l,enumerable:!0}):a,l)),g=l=>c(s({},"__esModule",{value:!0}),l);var i=C((k,o)=>{o.exports=_jsx_runtime});var v={};u(v,{default:()=>f,frontmatter:()=>F});var n=B(i()),F={title:"Avatar",description:"An avatar is a graphical representation of a user, typically used in a social context.",component:!0,type:"Doc",package:{name:"ui",path:"avatar.tsx"}};function d(l){let e=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",a:"a"},l.components),{ComponentExample:a,AvatarDemo:r}=e;return r||p("AvatarDemo",!0),a||p("ComponentExample",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(a,{src:"/src/components/examples/avatar/demo.tsx",children:[(0,n.jsx)(r,{}),(0,n.jsx)(e.figure,{__src__:"/src/components/examples/avatar/demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Avatar } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"AvatarDemo"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Root"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Image"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"https://avatars.githubusercontent.com/u/56068461?s=40&v=4"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"@darenmalfait"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Fallback"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">DM"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Avatar } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Image "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"'next/image'"})]})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Root"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Image"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"https://avatars.githubusercontent.com/u/56068461?s=40&v=4"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"@darenmalfait"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Avatar.Fallback"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">DM"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]})]})})})]})}function x(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var f=x;function p(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(v);})(); ;return Component;