@numl-react/avatar/dist/index.es.js

Avatars are used to show a thumbnail representation of an individual or business in the interface.

var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,t=Object.getOwnPropertySymbols,l=Object.prototype.propertyIsEnumerable,r=(n,t,l)=>t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[t]=l,o=(e,o)=>{for(var a in o||(o={}))n.call(o,a)&&r(e,a,o[a]);if(t)for(var a of t(o))l.call(o,a)&&r(e,a,o[a]);return e},a=(e,r)=>{var o={};for(var a in e)n.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&t)for(var a of t(e))r.indexOf(a)<0&&l.call(e,a)&&(o[a]=e[a]);return o};import*as c from"@numl-react/elements";import i from"react";const s=function e(n){const{username:t,subtitle:l,theme:r="default",children:s,fill:u,showIcon:m=!0,gap:p="2x 1x",cursor:d="pointer",padding:f="1x"}=n,x=a(n,["username","subtitle","theme","children","fill","showIcon","gap","cursor","padding"]);return i.createElement(c.Button,o({gap:p,theme:r,fill:u,cursor:d,padding:f},x),i.createElement(e.Profile,{column:"1",gap:p,fill:u,username:t,subtitle:l,showIcon:m}),s&&i.createElement(c.Inline,null,i.createElement(c.DropdownIcon,{padding:"0 1x",name:"chevron-down-outline",fill:u,theme:r}),i.createElement(e.Popup,null,s)))};s.Icon=function(e){const{username:n,showIcon:t=!0,size:l,padding:r,icon:s}=e,u=a(e,["username","showIcon","size","padding","icon"]);let m="",p=r;return"sm"===l?(m="4x",p="0.5x"):"md"===l?(m="5x",p="1x"):(m="6x",p="1.5x"),i.createElement(c.Circle,o({text:"uppercase",size:m,inline:!0},u),i.createElement(c.AttributeProvider,{for:"nu-el",size:"special"}),t&&"false"!==t||!n?s||i.createElement(c.Icon,{padding:p,size:"4x",sp:!0,name:"person"}):i.createElement(c.BaseElement,{padding:"1x",size:"3x 4x"},n.slice(0,2)))},s.Profile=function(e){const{username:n,subtitle:t,showIcon:l,gap:r="1x"}=e,u=a(e,["username","subtitle","showIcon","gap"]);return i.createElement(c.Flex,o({columns:"auto auto",items:"center",gap:r},u),i.createElement(s.Icon,{username:n,showIcon:l}),i.createElement(c.Flex,{flow:"column",items:"start center"},n?i.createElement(c.Block,null,n?i.createElement(c.BaseElement,{size:"md"},n):null):null,t?i.createElement(c.Block,null,t?i.createElement(c.BaseElement,{size:"sm"},t):null,"nd"):null))},s.Popup=function(e){const{children:n}=e,t=a(e,["children"]);return i.createElement(c.Popup,o({"use-menu":!0},t),n)};export{s as Avatar};