@guruhotel/aura-ui/esm/avatar/avatar.styles.js

⚛️ React UI library by GuruHotel

import{styled as e}from"../theme";import*as t from"@radix-ui/react-avatar";import{fontSize as i,rounded as o,fontWeight as r,color as a,colorScheme as n}from"../common-variants";export const StyledAvatar=e(t.Root,{display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle",overflow:"hidden",userSelect:"none",boxShadow:"$md",backgroundColor:"$gray3",variants:{rounded:o,size:{"2xs":{size:"$4"},xs:{size:"$6"},sm:{size:"$8"},md:{size:"$12"},lg:{size:"$16"},xl:{size:"$24"},"2xl":{size:"$32"}}},defaultVariants:{size:"md",rounded:"full"}});export const StyledImage=e(t.Image,{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit"});export const StyledFallback=e(t.Fallback,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:"$base",variants:{fontSize:i,fontWeight:r,color:a,colorScheme:n},defaultVariants:{fontSize:"sm",fontWeight:"medium",colorScheme:"guru"}});