{
  "name": "avatar",
  "title": "Uiscore Avatar",
  "description": "Avatar component with text, userpic, icon and user-plug variants.",
  "type": "ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "cssPrefixes": [
    "uis-avatar-"
  ],
  "files": [
    {
      "path": "src/components/ui/avatar.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport {\n  type AvatarRadius,\n  type AvatarSize,\n  type AvatarStatusColor,\n  type AvatarStatusSize,\n  type AvatarStatusType,\n  type AvatarType,\n} from \"./avatar-tokens\";\nimport userPlugXlargeSvgSrc from \"./assets/avatar-glyphs/user-plug-xlarge.svg\";\nimport userPlugLargeSvgSrc from \"./assets/avatar-glyphs/user-plug-large.svg\";\nimport userPlugDefaultSvgSrc from \"./assets/avatar-glyphs/user-plug-default.svg\";\nimport userPlugSmallSvgSrc from \"./assets/avatar-glyphs/user-plug-small.svg\";\nimport userPlugXsmallSvgSrc from \"./assets/avatar-glyphs/user-plug-xsmall.svg\";\nimport userPlug2xsmallSvgSrc from \"./assets/avatar-glyphs/user-plug-2xsmall.svg\";\nimport iconRegularSvgSrc from \"./assets/avatar-glyphs/icon-regular.svg\";\nimport iconSmallSvgSrc from \"./assets/avatar-glyphs/icon-small.svg\";\nimport iconXsmallSvgSrc from \"./assets/avatar-glyphs/icon-xsmall.svg\";\nimport icon2xsmallSvgSrc from \"./assets/avatar-glyphs/icon-2xsmall.svg\";\n\nconst avatarSizePxMap: Record<AvatarSize, number> = {\n  xlarge: 48,\n  large: 40,\n  default: 32,\n  small: 28,\n  xsmall: 24,\n  \"2xsmall\": 20,\n};\n\nconst squaredRadiusPxMap: Record<AvatarSize, number> = {\n  xlarge: 10,\n  large: 8,\n  default: 7,\n  small: 7,\n  xsmall: 6,\n  \"2xsmall\": 4,\n};\n\nconst textSizePxMap: Record<AvatarSize, number> = {\n  xlarge: 16,\n  large: 14,\n  default: 14,\n  small: 12,\n  xsmall: 12,\n  \"2xsmall\": 12,\n};\n\nconst iconSizePxMap: Record<AvatarSize, number> = {\n  xlarge: 20,\n  large: 20,\n  default: 20,\n  small: 18,\n  xsmall: 16,\n  \"2xsmall\": 14,\n};\n\nconst defaultStatusSizeByAvatarSize: Record<AvatarSize, AvatarStatusSize> = {\n  xlarge: \"large\",\n  large: \"default\",\n  default: \"small\",\n  small: \"small\",\n  xsmall: \"xsmall\",\n  \"2xsmall\": \"xsmall\",\n};\n\nconst statusGeometryMap: Record<\n  AvatarStatusSize,\n  {\n    wrapper: number;\n    core: number;\n    padding: number;\n    topCircleBorder: number;\n    bottomBorder: number;\n  }\n> = {\n  large: {\n    wrapper: 16,\n    core: 14,\n    padding: 1,\n    topCircleBorder: 1.2,\n    bottomBorder: 2.2,\n  },\n  default: {\n    wrapper: 12,\n    core: 10.5,\n    padding: 0.75,\n    topCircleBorder: 1,\n    bottomBorder: 1.8,\n  },\n  small: {\n    wrapper: 10,\n    core: 8.75,\n    padding: 0.625,\n    topCircleBorder: 0.9,\n    bottomBorder: 1.6,\n  },\n  xsmall: {\n    wrapper: 8,\n    core: 7,\n    padding: 0.5,\n    topCircleBorder: 0.6,\n    bottomBorder: 1.2,\n  },\n};\n\nconst topStatusLeftPxMap: Record<AvatarSize, number> = {\n  xlarge: 32,\n  large: 28,\n  default: 22,\n  small: 18,\n  xsmall: 16,\n  \"2xsmall\": 14,\n};\n\nconst bottomStatusLeftPxMap: Record<AvatarSize, number> = {\n  xlarge: 32,\n  large: 28,\n  default: 22,\n  small: 18,\n  xsmall: 16,\n  \"2xsmall\": 14,\n};\n\nconst bottomStatusTopPxMap: Record<AvatarSize, number> = {\n  xlarge: 32,\n  large: 28,\n  default: 22,\n  small: 18,\n  xsmall: 16,\n  \"2xsmall\": 12,\n};\n\nconst bottomStatusColorVarMap: Record<AvatarStatusColor, string> = {\n  default: \"var(--uis-avatar-status-bottom-default)\",\n  blue: \"var(--uis-avatar-status-bottom-blue)\",\n  green: \"var(--uis-avatar-status-bottom-green)\",\n  orange: \"var(--uis-avatar-status-bottom-orange)\",\n  red: \"var(--uis-avatar-status-bottom-red)\",\n};\n\nconst userPlugGeometryMap: Record<\n  AvatarSize,\n  {\n    src: string;\n    glyphSize: number;\n    offsetY: number;\n  }\n> = {\n  xlarge: { src: userPlugXlargeSvgSrc, glyphSize: 38, offsetY: 5 },\n  large: { src: userPlugLargeSvgSrc, glyphSize: 32, offsetY: 4 },\n  default: { src: userPlugDefaultSvgSrc, glyphSize: 26, offsetY: 3 },\n  small: { src: userPlugSmallSvgSrc, glyphSize: 22, offsetY: 3 },\n  xsmall: { src: userPlugXsmallSvgSrc, glyphSize: 20, offsetY: 3 },\n  \"2xsmall\": { src: userPlug2xsmallSvgSrc, glyphSize: 18, offsetY: 2 },\n};\n\nconst avatarIconGeometryMap: Record<\n  AvatarSize,\n  {\n    src: string;\n    glyphSize: number;\n    innerBackgroundSize?: number;\n  }\n> = {\n  xlarge: { src: iconRegularSvgSrc, glyphSize: 20 },\n  large: { src: iconRegularSvgSrc, glyphSize: 20, innerBackgroundSize: 38 },\n  default: { src: iconRegularSvgSrc, glyphSize: 20 },\n  small: { src: iconSmallSvgSrc, glyphSize: 18 },\n  xsmall: { src: iconXsmallSvgSrc, glyphSize: 16 },\n  \"2xsmall\": { src: icon2xsmallSvgSrc, glyphSize: 14 },\n};\n\nconst topStarShapeMap: Record<\n  AvatarStatusSize,\n  {\n    viewBox: number;\n    strokeWidth: number;\n    path: string;\n  }\n> = {\n  large: {\n    viewBox: 16.4,\n    strokeWidth: 1.2,\n    path: \"M6.15996 1.5252C7.24062 0.292094 9.15938 0.292094 10.24 1.5252C10.5503 1.87909 11.0077 2.06784 11.4773 2.03691C13.1134 1.92912 14.4709 3.28658 14.3631 4.92266C14.3322 5.39225 14.5209 5.84975 14.8748 6.15996C16.1079 7.24062 16.1079 9.15938 14.8748 10.24C14.5209 10.5503 14.3322 11.0077 14.3631 11.4773C14.4709 13.1134 13.1134 14.4709 11.4773 14.3631C11.0077 14.3322 10.5503 14.5209 10.24 14.8748C9.15938 16.1079 7.24062 16.1079 6.15996 14.8748C5.84975 14.5209 5.39225 14.3322 4.92266 14.3631C3.28658 14.4709 1.92912 13.1134 2.03691 11.4773C2.06784 11.0077 1.87909 10.5503 1.5252 10.24C0.292094 9.15938 0.292094 7.24062 1.5252 6.15996C1.87909 5.84975 2.06784 5.39225 2.03691 4.92266C1.92912 3.28658 3.28658 1.92912 4.92266 2.03691C5.39225 2.06784 5.84975 1.87909 6.15996 1.5252Z\",\n  },\n  default: {\n    viewBox: 12.5,\n    strokeWidth: 1,\n    path: \"M4.68262 1.21094C5.51303 0.263432 6.98697 0.263431 7.81738 1.21094C8.0398 1.46473 8.36835 1.60031 8.70508 1.57812C9.96206 1.49549 11.0045 2.53795 10.9219 3.79492C10.8997 4.13165 11.0353 4.4602 11.2891 4.68262C12.2366 5.51303 12.2366 6.98697 11.2891 7.81738C11.0353 8.0398 10.8997 8.36835 10.9219 8.70508C11.0045 9.96206 9.96206 11.0045 8.70508 10.9219C8.36835 10.8997 8.0398 11.0353 7.81738 11.2891C6.98697 12.2366 5.51303 12.2366 4.68262 11.2891C4.4602 11.0353 4.13165 10.8997 3.79492 10.9219C2.53795 11.0045 1.49549 9.96206 1.57812 8.70508C1.60031 8.36835 1.46472 8.0398 1.21094 7.81738C0.263431 6.98697 0.263431 5.51303 1.21094 4.68262C1.46472 4.4602 1.60031 4.13165 1.57812 3.79492C1.49549 2.53794 2.53794 1.49549 3.79492 1.57812C4.13165 1.60031 4.4602 1.46472 4.68262 1.21094Z\",\n  },\n  small: {\n    viewBox: 10.35,\n    strokeWidth: 0.8,\n    path: \"M3.88105 0.986523C4.56643 0.204478 5.78357 0.204477 6.46895 0.986523C6.65771 1.20191 6.9361 1.31687 7.22188 1.29805C8.25938 1.22979 9.12021 2.09062 9.05195 3.12813C9.03313 3.4139 9.14809 3.69229 9.36348 3.88105C10.1455 4.56643 10.1455 5.78357 9.36348 6.46895C9.14809 6.65771 9.03313 6.9361 9.05195 7.22188C9.12021 8.25938 8.25938 9.12021 7.22188 9.05195C6.9361 9.03313 6.65771 9.14809 6.46895 9.36348C5.78357 10.1455 4.56643 10.1455 3.88105 9.36348C3.69229 9.14809 3.4139 9.03313 3.12813 9.05195C2.09062 9.12021 1.22979 8.25938 1.29805 7.22188C1.31687 6.9361 1.20191 6.65771 0.986523 6.46895C0.204477 5.78357 0.204477 4.56643 0.986523 3.88105C1.20191 3.69229 1.31687 3.4139 1.29805 3.12813C1.22979 2.09062 2.09062 1.22979 3.12813 1.29805C3.4139 1.31687 3.69229 1.20191 3.88105 0.986523Z\",\n  },\n  xsmall: {\n    viewBox: 8.2,\n    strokeWidth: 0.6,\n    path: \"M3.07949 0.762109C3.61982 0.145559 4.58018 0.145559 5.12051 0.762109C5.27561 0.93907 5.50387 1.0344 5.73867 1.01895C6.55671 0.96505 7.23495 1.64329 7.18105 2.46133C7.1656 2.69613 7.26093 2.92439 7.43789 3.07949C8.05444 3.61982 8.05444 4.58018 7.43789 5.12051C7.26093 5.27561 7.1656 5.50387 7.18105 5.73867C7.23495 6.55671 6.55671 7.23495 5.73867 7.18105C5.50387 7.1656 5.27561 7.26093 5.12051 7.43789C4.58018 8.05444 3.61982 8.05444 3.07949 7.43789C2.92439 7.26093 2.69613 7.1656 2.46133 7.18105C1.64329 7.23495 0.96505 6.55671 1.01895 5.73867C1.0344 5.50387 0.93907 5.27561 0.762109 5.12051C0.145559 4.58018 0.145559 3.61982 0.762109 3.07949C0.93907 2.92439 1.0344 2.69613 1.01895 2.46133C0.96505 1.64329 1.64329 0.96505 2.46133 1.01895C2.69613 1.0344 2.92439 0.93907 3.07949 0.762109Z\",\n  },\n};\n\nconst topCheckShapeMap: Record<\n  AvatarStatusSize,\n  {\n    viewBoxWidth: number;\n    viewBoxHeight: number;\n    path: string;\n  }\n> = {\n  large: {\n    viewBoxWidth: 11,\n    viewBoxHeight: 10,\n    path: \"M9.08927 1.21006C9.30358 1.42348 9.30358 1.7695 9.08927 1.98292L4.5161 6.51494C4.30178 6.72835 3.95431 6.72835 3.74 6.51494L1.91073 4.71539C1.69642 4.50197 1.69642 4.15595 1.91073 3.94253C2.12505 3.72911 2.47251 3.72911 2.68683 3.94253L4.12805 5.35565L8.31317 1.21006C8.52748 0.996645 8.87495 0.996645 9.08927 1.21006Z\",\n  },\n  default: {\n    viewBoxWidth: 8.25,\n    viewBoxHeight: 7.5,\n    path: \"M6.81695 0.907548C6.97768 1.06761 6.97768 1.32713 6.81695 1.48719L3.38707 4.8862C3.22634 5.04627 2.96574 5.04627 2.805 4.8862L1.43305 3.53654C1.27232 3.37648 1.27232 3.11696 1.43305 2.9569C1.59378 2.79683 1.85439 2.79683 2.01512 2.9569L3.09604 4.01674L6.23488 0.907548C6.39561 0.747484 6.65622 0.747484 6.81695 0.907548Z\",\n  },\n  small: {\n    viewBoxWidth: 6.875,\n    viewBoxHeight: 6.25,\n    path: \"M5.68079 0.75629C5.81474 0.889677 5.81474 1.10594 5.68079 1.23933L2.82256 4.07183C2.68861 4.20522 2.47145 4.20522 2.3375 4.07183L1.19421 2.94712C1.06026 2.81373 1.06026 2.59747 1.19421 2.46408C1.32815 2.3307 1.54532 2.3307 1.67927 2.46408L2.58003 3.34728L5.19573 0.75629C5.32968 0.622903 5.54685 0.622903 5.68079 0.75629Z\",\n  },\n  xsmall: {\n    viewBoxWidth: 5.5,\n    viewBoxHeight: 5,\n    path: \"M4.54463 0.605032C4.65179 0.711742 4.65179 0.884752 4.54463 0.991461L2.25805 3.25747C2.15089 3.36418 1.97716 3.36418 1.87 3.25747L0.955367 2.3577C0.848211 2.25099 0.848211 2.07798 0.955367 1.97127C1.06252 1.86456 1.23626 1.86456 1.34341 1.97127L2.06402 2.67782L4.15659 0.605032C4.26374 0.498323 4.43748 0.498323 4.54463 0.605032Z\",\n  },\n};\n\nfunction getInitials(value: string | undefined, maxLength = 2): string {\n  if (!value) {\n    return \"BK\";\n  }\n\n  const chunks = value.trim().split(/\\s+/).filter(Boolean);\n\n  if (chunks.length === 0) {\n    return \"BK\";\n  }\n\n  if (chunks.length === 1) {\n    return chunks[0].slice(0, maxLength).toUpperCase();\n  }\n\n  return `${chunks[0][0]}${chunks[chunks.length - 1][0]}`.toUpperCase();\n}\n\nfunction UserPlugGlyph({ size }: { size: AvatarSize }) {\n  const geometry = userPlugGeometryMap[size];\n\n  return (\n    <div className=\"relative h-full w-full\">\n      <img\n        src={geometry.src}\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-1/2 top-1/2 block -translate-x-1/2 -translate-y-1/2 select-none\"\n        style={{\n          width: geometry.glyphSize,\n          height: geometry.glyphSize,\n          top: `calc(50% + ${geometry.offsetY}px)`,\n        }}\n      />\n    </div>\n  );\n}\n\nfunction AvatarIconGlyph({ size }: { size: AvatarSize }) {\n  const geometry = avatarIconGeometryMap[size];\n\n  return (\n    <div className=\"relative h-full w-full\">\n      {geometry.innerBackgroundSize ? (\n        <span\n          className=\"absolute left-1/2 top-1/2 block -translate-x-1/2 -translate-y-1/2 rounded-full [background-color:var(--uis-avatar-surface)]\"\n          style={{\n            width: geometry.innerBackgroundSize,\n            height: geometry.innerBackgroundSize,\n          }}\n        />\n      ) : null}\n      <img\n        src={geometry.src}\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-1/2 top-1/2 block -translate-x-1/2 -translate-y-1/2 select-none\"\n        style={{\n          width: geometry.glyphSize,\n          height: geometry.glyphSize,\n        }}\n      />\n    </div>\n  );\n}\n\nfunction StatusRing({\n  sizePx,\n  borderPx,\n  fill,\n}: {\n  sizePx: number;\n  borderPx: number;\n  fill: string;\n}) {\n  const safeBorderPx = Math.max(borderPx, 0);\n  const radiusPx = Math.max((sizePx - safeBorderPx) / 2, 0);\n  const centerPx = sizePx / 2;\n\n  return (\n    <svg\n      width={sizePx}\n      height={sizePx}\n      viewBox={`0 0 ${sizePx} ${sizePx}`}\n      className=\"block\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <circle\n        cx={centerPx}\n        cy={centerPx}\n        r={radiusPx}\n        fill={fill}\n        stroke=\"var(--uis-avatar-status-border)\"\n        strokeWidth={safeBorderPx}\n      />\n    </svg>\n  );\n}\n\nfunction TopStatusStarGlyph({\n  statusSize,\n  sizePx,\n}: {\n  statusSize: AvatarStatusSize;\n  sizePx: number;\n}) {\n  const star = topStarShapeMap[statusSize];\n  const check = topCheckShapeMap[statusSize];\n\n  const starScale = star.viewBox / sizePx;\n  const starSizePx = sizePx * starScale;\n\n  const checkWidthPx = sizePx * (11 / 14);\n  const checkHeightPx =\n    checkWidthPx * (check.viewBoxHeight / check.viewBoxWidth);\n\n  return (\n    <div className=\"relative\" style={{ width: sizePx, height: sizePx }}>\n      <svg\n        width={starSizePx}\n        height={starSizePx}\n        viewBox={`0 0 ${star.viewBox} ${star.viewBox}`}\n        className=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path\n          d={star.path}\n          fill=\"var(--uis-avatar-status-top-bg)\"\n          stroke=\"var(--uis-avatar-status-border)\"\n          strokeWidth={star.strokeWidth}\n        />\n      </svg>\n      <TopStatusCheckGlyph\n        statusSize={statusSize}\n        widthPx={checkWidthPx}\n        heightPx={checkHeightPx}\n        className=\"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n      />\n    </div>\n  );\n}\n\nfunction TopStatusCheckGlyph({\n  statusSize,\n  widthPx,\n  heightPx,\n  className,\n}: {\n  statusSize: AvatarStatusSize;\n  widthPx: number;\n  heightPx?: number;\n  className?: string;\n}) {\n  const check = topCheckShapeMap[statusSize];\n  const resolvedHeightPx =\n    heightPx ?? widthPx * (check.viewBoxHeight / check.viewBoxWidth);\n\n  return (\n    <svg\n      width={widthPx}\n      height={resolvedHeightPx}\n      viewBox={`0 0 ${check.viewBoxWidth} ${check.viewBoxHeight}`}\n      className={cn(\"pointer-events-none absolute\", className)}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d={check.path} fill=\"var(--uis-avatar-status-top-icon)\" />\n    </svg>\n  );\n}\n\nexport interface AvatarProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  type?: AvatarType;\n  size?: AvatarSize;\n  radius?: AvatarRadius;\n  bordered?: boolean;\n  src?: string;\n  alt?: string;\n  name?: string;\n  initials?: string;\n  icon?: React.ReactNode;\n  showTopStatus?: boolean;\n  showBottomStatus?: boolean;\n  topStatusType?: AvatarStatusType;\n  topStatusSize?: AvatarStatusSize;\n  bottomStatusSize?: AvatarStatusSize;\n  bottomStatusColor?: AvatarStatusColor;\n\n  // Backward-compatible aliases.\n  avatarType?: AvatarType;\n  avatarSize?: AvatarSize;\n  avatarRadius?: AvatarRadius;\n  border?: boolean;\n}\n\nfunction Avatar({\n  className,\n  type,\n  size,\n  radius,\n  bordered,\n  src,\n  alt,\n  name,\n  initials,\n  icon,\n  showTopStatus = false,\n  showBottomStatus = false,\n  topStatusType = \"star\",\n  topStatusSize,\n  bottomStatusSize,\n  bottomStatusColor = \"default\",\n  avatarType,\n  avatarSize,\n  avatarRadius,\n  border,\n  ...props\n}: AvatarProps) {\n  const resolvedType = type ?? avatarType ?? \"userpic\";\n  const resolvedSize = size ?? avatarSize ?? \"default\";\n  const resolvedRadius = radius ?? avatarRadius ?? \"rounded\";\n  const resolvedBordered = bordered ?? border ?? false;\n\n  const avatarSizePx = avatarSizePxMap[resolvedSize];\n  const shellRadiusPx =\n    resolvedRadius === \"rounded\" ? 999 : squaredRadiusPxMap[resolvedSize];\n  const shellBorderPx = resolvedBordered ? 2 : 0;\n  const innerRadiusPx =\n    resolvedRadius === \"rounded\"\n      ? 999\n      : Math.max(shellRadiusPx - shellBorderPx, 2);\n\n  const resolvedTopStatusSize =\n    topStatusSize ?? defaultStatusSizeByAvatarSize[resolvedSize];\n  const resolvedBottomStatusSize =\n    bottomStatusSize ?? defaultStatusSizeByAvatarSize[resolvedSize];\n\n  const topGeometry = statusGeometryMap[resolvedTopStatusSize];\n  const bottomGeometry = statusGeometryMap[resolvedBottomStatusSize];\n\n  const textValue = (initials ?? getInitials(name, 2))\n    .slice(0, 2)\n    .toUpperCase();\n\n  const baseIconSize = iconSizePxMap[resolvedSize];\n  const topCheckSize = Math.max(topGeometry.core * 0.62, 4);\n  const bottomColor = bottomStatusColorVarMap[bottomStatusColor];\n\n  let content: React.ReactNode;\n  if (resolvedType === \"userpic\" && src) {\n    content = (\n      <img\n        src={src}\n        alt={alt ?? name ?? \"Avatar\"}\n        className=\"h-full w-full object-cover\"\n      />\n    );\n  } else if (resolvedType === \"text\") {\n    content = (\n      <span\n        className=\"w-[20px] text-center font-['Plus_Jakarta_Sans'] font-medium leading-5 tracking-[0] text-[var(--uis-avatar-text)]\"\n        style={{ fontSize: textSizePxMap[resolvedSize] }}\n      >\n        {textValue}\n      </span>\n    );\n  } else if (resolvedType === \"userPlug\") {\n    content = icon ? (\n      <div\n        className=\"flex items-center justify-center text-[var(--uis-avatar-icon)]\"\n        style={{ width: baseIconSize, height: baseIconSize }}\n      >\n        {icon}\n      </div>\n    ) : (\n      <UserPlugGlyph size={resolvedSize} />\n    );\n  } else {\n    content = icon ? (\n      <div\n        className=\"flex items-center justify-center text-[var(--uis-avatar-icon)]\"\n        style={{ width: baseIconSize, height: baseIconSize }}\n      >\n        {icon}\n      </div>\n    ) : (\n      <AvatarIconGlyph size={resolvedSize} />\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"relative inline-flex shrink-0\", className)}\n      data-uis-avatar-size={resolvedSize}\n      data-uis-avatar-type={resolvedType}\n      data-uis-avatar-radius={resolvedRadius}\n      {...props}\n    >\n      <div\n        className=\"relative overflow-hidden\"\n        style={{\n          width: avatarSizePx,\n          height: avatarSizePx,\n          borderRadius: shellRadiusPx,\n          borderWidth: shellBorderPx,\n          borderStyle: \"solid\",\n          borderColor: resolvedBordered\n            ? \"var(--uis-avatar-bg)\"\n            : \"transparent\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        <div\n          className=\"absolute flex items-center justify-center overflow-hidden [background-color:var(--uis-avatar-surface)]\"\n          style={{\n            inset: 0,\n            borderRadius: innerRadiusPx,\n          }}\n        >\n          {content}\n        </div>\n      </div>\n\n      {showTopStatus ? (\n        <div\n          className=\"pointer-events-none absolute flex items-center justify-center\"\n          style={{\n            left: topStatusLeftPxMap[resolvedSize],\n            top: 0,\n            width: topGeometry.wrapper,\n            height: topGeometry.wrapper,\n            padding: topGeometry.padding,\n          }}\n        >\n          {topStatusType === \"circle\" ? (\n            <div\n              className=\"relative flex items-center justify-center\"\n              style={{\n                width: topGeometry.core,\n                height: topGeometry.core,\n              }}\n            >\n              <StatusRing\n                sizePx={topGeometry.core}\n                borderPx={topGeometry.topCircleBorder}\n                fill=\"var(--uis-avatar-status-top-bg)\"\n              />\n              <TopStatusCheckGlyph\n                statusSize={resolvedTopStatusSize}\n                widthPx={topCheckSize}\n                className=\"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n              />\n            </div>\n          ) : (\n            <TopStatusStarGlyph\n              statusSize={resolvedTopStatusSize}\n              sizePx={topGeometry.core}\n            />\n          )}\n        </div>\n      ) : null}\n\n      {showBottomStatus ? (\n        <div\n          className=\"pointer-events-none absolute flex items-center justify-center overflow-hidden\"\n          style={{\n            left: bottomStatusLeftPxMap[resolvedSize],\n            top: bottomStatusTopPxMap[resolvedSize],\n            width: bottomGeometry.wrapper,\n            height: bottomGeometry.wrapper,\n            padding: bottomGeometry.padding,\n          }}\n        >\n          <StatusRing\n            sizePx={bottomGeometry.core}\n            borderPx={bottomGeometry.bottomBorder}\n            fill={bottomColor}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { Avatar };\n",
      "type": "component",
      "target": "components/avatar.tsx"
    },
    {
      "path": "src/components/ui/avatar-tokens.ts",
      "content": "export const avatarTypes = [\"userpic\", \"text\", \"userPlug\", \"icon\"] as const;\nexport const avatarSizes = [\n  \"xlarge\",\n  \"large\",\n  \"default\",\n  \"small\",\n  \"xsmall\",\n  \"2xsmall\",\n] as const;\nexport const avatarRadii = [\"rounded\", \"squared\"] as const;\n\nexport const avatarStatusTypes = [\"circle\", \"star\"] as const;\nexport const avatarStatusSizes = [\"large\", \"default\", \"small\", \"xsmall\"] as const;\nexport const avatarStatusColors = [\n  \"default\",\n  \"blue\",\n  \"green\",\n  \"orange\",\n  \"red\",\n] as const;\n\nexport type AvatarType = (typeof avatarTypes)[number];\nexport type AvatarSize = (typeof avatarSizes)[number];\nexport type AvatarRadius = (typeof avatarRadii)[number];\nexport type AvatarStatusType = (typeof avatarStatusTypes)[number];\nexport type AvatarStatusSize = (typeof avatarStatusSizes)[number];\nexport type AvatarStatusColor = (typeof avatarStatusColors)[number];\n",
      "type": "tokens",
      "target": "components/avatar-tokens.ts"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "lib",
      "target": "lib/utils.ts"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-xlarge.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8910)\">\n<path d=\"M28.5 9.5C28.5 4.25125 24.2488 0 19 0C13.7512 0 9.5 4.25125 9.5 9.5C9.5 14.7488 13.7512 19 19 19C24.2488 19 28.5 14.7488 28.5 9.5ZM0 33.25V35.6131C0 36.9314 1.06864 38 2.38688 38H35.6131C36.9314 38 38 36.9314 38 35.6131V33.25C38 24.9375 25.3413 22.5625 19 22.5625C12.6587 22.5625 0 24.9375 0 33.25Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8910\" x=\"0\" y=\"0\" width=\"38\" height=\"42\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"1\"/>\n<feGaussianBlur stdDeviation=\"6.25\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8910\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"4\"/>\n<feGaussianBlur stdDeviation=\"3.15\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8910\" result=\"effect2_innerShadow_23249_8910\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"1\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8910\" result=\"effect3_innerShadow_23249_8910\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-xlarge.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-large.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8956)\">\n<path d=\"M24 8C24 3.58 20.42 0 16 0C11.58 0 8 3.58 8 8C8 12.42 11.58 16 16 16C20.42 16 24 12.42 24 8ZM0 28V29.99C0 31.1001 0.899908 32 2.01 32H29.99C31.1001 32 32 31.1001 32 29.99V28C32 21 21.34 19 16 19C10.66 19 0 21 0 28Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8956\" x=\"0\" y=\"0\" width=\"32\" height=\"35.3333\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.833333\"/>\n<feGaussianBlur stdDeviation=\"5.20833\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8956\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"3.33333\"/>\n<feGaussianBlur stdDeviation=\"2.625\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8956\" result=\"effect2_innerShadow_23249_8956\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.833333\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8956\" result=\"effect3_innerShadow_23249_8956\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-large.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-default.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8971)\">\n<path d=\"M19.5 6.5C19.5 2.90875 16.5913 0 13 0C9.40875 0 6.5 2.90875 6.5 6.5C6.5 10.0913 9.40875 13 13 13C16.5913 13 19.5 10.0913 19.5 6.5ZM0 22.75V24.3669C0 25.2688 0.731175 26 1.63313 26H24.3669C25.2688 26 26 25.2688 26 24.3669V22.75C26 17.0625 17.3388 15.4375 13 15.4375C8.66125 15.4375 0 17.0625 0 22.75Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8971\" x=\"0\" y=\"0\" width=\"26\" height=\"28.7083\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.677083\"/>\n<feGaussianBlur stdDeviation=\"4.23177\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8971\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"2.70833\"/>\n<feGaussianBlur stdDeviation=\"2.13281\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8971\" result=\"effect2_innerShadow_23249_8971\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.677083\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8971\" result=\"effect3_innerShadow_23249_8971\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-default.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-small.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8912)\">\n<path d=\"M16.5 5.5C16.5 2.46125 14.0388 0 11 0C7.96125 0 5.5 2.46125 5.5 5.5C5.5 8.53875 7.96125 11 11 11C14.0388 11 16.5 8.53875 16.5 5.5ZM0 19.25V20.6181C0 21.3813 0.618687 22 1.38188 22H20.6181C21.3813 22 22 21.3813 22 20.6181V19.25C22 14.4375 14.6713 13.0625 11 13.0625C7.32875 13.0625 0 14.4375 0 19.25Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8912\" x=\"0\" y=\"0\" width=\"22\" height=\"24.2917\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.572917\"/>\n<feGaussianBlur stdDeviation=\"3.58073\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8912\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"2.29167\"/>\n<feGaussianBlur stdDeviation=\"1.80469\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8912\" result=\"effect2_innerShadow_23249_8912\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.572917\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8912\" result=\"effect3_innerShadow_23249_8912\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-small.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-xsmall.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8908)\">\n<path d=\"M15 5C15 2.2375 12.7625 0 10 0C7.2375 0 5 2.2375 5 5C5 7.7625 7.2375 10 10 10C12.7625 10 15 7.7625 15 5ZM0 17.5V18.7438C0 19.4376 0.562442 20 1.25625 20H18.7438C19.4376 20 20 19.4376 20 18.7438V17.5C20 13.125 13.3375 11.875 10 11.875C6.6625 11.875 0 13.125 0 17.5Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8908\" x=\"0\" y=\"0\" width=\"20\" height=\"22.0833\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.520833\"/>\n<feGaussianBlur stdDeviation=\"3.25521\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8908\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"2.08333\"/>\n<feGaussianBlur stdDeviation=\"1.64062\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8908\" result=\"effect2_innerShadow_23249_8908\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.520833\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8908\" result=\"effect3_innerShadow_23249_8908\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-xsmall.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/user-plug-2xsmall.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"User\" filter=\"url(#filter0_iii_23249_8964)\">\n<path d=\"M13.5 4.5C13.5 2.01375 11.4863 0 9 0C6.51375 0 4.5 2.01375 4.5 4.5C4.5 6.98625 6.51375 9 9 9C11.4863 9 13.5 6.98625 13.5 4.5ZM0 15.75V16.8694C0 17.4938 0.506198 18 1.13063 18H16.8694C17.4938 18 18 17.4938 18 16.8694V15.75C18 11.8125 12.0038 10.6875 9 10.6875C5.99625 10.6875 0 11.8125 0 15.75Z\" fill=\"var(--fill-0, #D4D4D8)\"/>\n</g>\n<defs>\n<filter id=\"filter0_iii_23249_8964\" x=\"0\" y=\"0\" width=\"18\" height=\"19.875\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.46875\"/>\n<feGaussianBlur stdDeviation=\"2.92969\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_23249_8964\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"1.875\"/>\n<feGaussianBlur stdDeviation=\"1.47656\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_innerShadow_23249_8964\" result=\"effect2_innerShadow_23249_8964\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"0.46875\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_innerShadow_23249_8964\" result=\"effect3_innerShadow_23249_8964\"/>\n</filter>\n</defs>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/user-plug-2xsmall.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/icon-regular.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 15 17.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"Vector\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.49999 6.875C8.8807 6.875 9.99999 5.75571 9.99999 4.375C9.99999 2.99429 8.8807 1.875 7.49999 1.875C6.11928 1.875 4.99999 2.99429 4.99999 4.375C4.99999 5.75571 6.11928 6.875 7.49999 6.875ZM7.49999 8.75C9.91624 8.75 11.875 6.79125 11.875 4.375C11.875 1.95875 9.91624 0 7.49999 0C5.08375 0 3.12499 1.95875 3.12499 4.375C3.12499 6.79125 5.08375 8.75 7.49999 8.75Z\" fill=\"var(--fill-0, #71717B)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.29729 12.8483C2.32566 13.4353 1.875 14.1823 1.875 15L1.875 15.3125C1.875 15.4851 2.01491 15.625 2.1875 15.625H12.8125C12.9847 15.625 13.125 15.4851 13.125 15.3121V15C13.125 14.1823 12.6743 13.4353 11.7027 12.8483C10.7161 12.2523 9.25631 11.875 7.5 11.875C5.74369 11.875 4.28389 12.2523 3.29729 12.8483ZM2.3277 11.2435C3.68485 10.4235 5.5063 10 7.5 10C9.4937 10 11.3151 10.4235 12.6723 11.2435C14.0444 12.0725 15 13.3568 15 15V15.3121C15 16.5198 14.021 17.5 12.8125 17.5H2.1875C0.979372 17.5 -6.63098e-06 16.5206 0 15.3125L2.38422e-06 15C2.23521e-06 13.3568 0.955582 12.0725 2.3277 11.2435Z\" fill=\"var(--fill-0, #71717B)\"/>\n</g>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/icon-regular.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/icon-small.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 13.5 15.75\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"Vector\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.74999 6.1875C7.99263 6.1875 8.99999 5.18014 8.99999 3.9375C8.99999 2.69486 7.99263 1.6875 6.74999 1.6875C5.50735 1.6875 4.49999 2.69486 4.49999 3.9375C4.49999 5.18014 5.50735 6.1875 6.74999 6.1875ZM6.74999 7.875C8.92461 7.875 10.6875 6.11212 10.6875 3.9375C10.6875 1.76288 8.92461 0 6.74999 0C4.57537 0 2.81249 1.76288 2.81249 3.9375C2.81249 6.11212 4.57537 7.875 6.74999 7.875Z\" fill=\"var(--fill-0, #71717B)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.96756 11.5635C2.0931 12.0918 1.6875 12.764 1.6875 13.5L1.6875 13.7812C1.6875 13.9366 1.81342 14.0625 1.96875 14.0625H11.5312C11.6862 14.0625 11.8125 13.9366 11.8125 13.7809V13.5C11.8125 12.764 11.4069 12.0918 10.5324 11.5635C9.6445 11.027 8.33068 10.6875 6.75 10.6875C5.16932 10.6875 3.8555 11.027 2.96756 11.5635ZM2.09493 10.1191C3.31637 9.38118 4.95567 9 6.75 9C8.54433 9 10.1836 9.38118 11.4051 10.1191C12.64 10.8652 13.5 12.0211 13.5 13.5V13.7809C13.5 14.8678 12.6189 15.75 11.5312 15.75H1.96875C0.881435 15.75 -5.96788e-06 14.8686 0 13.7812L2.1458e-06 13.5C2.01169e-06 12.0211 0.860024 10.8652 2.09493 10.1191Z\" fill=\"var(--fill-0, #71717B)\"/>\n</g>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/icon-small.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/icon-xsmall.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"Vector\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.99999 5.5C7.10456 5.5 7.99999 4.60457 7.99999 3.5C7.99999 2.39543 7.10456 1.5 5.99999 1.5C4.89542 1.5 3.99999 2.39543 3.99999 3.5C3.99999 4.60457 4.89542 5.5 5.99999 5.5ZM5.99999 7C7.93299 7 9.49999 5.433 9.49999 3.5C9.49999 1.567 7.93299 0 5.99999 0C4.067 0 2.49999 1.567 2.49999 3.5C2.49999 5.433 4.067 7 5.99999 7Z\" fill=\"var(--fill-0, #71717B)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.63783 10.2787C1.86053 10.7483 1.5 11.3458 1.5 12L1.5 12.25C1.5 12.3881 1.61193 12.5 1.75 12.5H10.25C10.3877 12.5 10.5 12.3881 10.5 12.2497V12C10.5 11.3458 10.1395 10.7483 9.36216 10.2787C8.57289 9.8018 7.40504 9.5 6 9.5C4.59496 9.5 3.42711 9.8018 2.63783 10.2787ZM1.86216 8.99478C2.94788 8.33882 4.40504 8 6 8C7.59496 8 9.05211 8.33882 10.1378 8.99478C11.2355 9.65797 12 10.6854 12 12V12.2497C12 13.2158 11.2168 14 10.25 14H1.75C0.783498 14 -5.30479e-06 13.2165 0 12.25L1.90738e-06 12C1.78817e-06 10.6854 0.764466 9.65797 1.86216 8.99478Z\" fill=\"var(--fill-0, #71717B)\"/>\n</g>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/icon-xsmall.svg"
    },
    {
      "path": "src/components/ui/assets/avatar-glyphs/icon-2xsmall.svg",
      "content": "<svg preserveAspectRatio=\"none\" width=\"100%\" height=\"100%\" overflow=\"visible\" style=\"display: block;\" viewBox=\"0 0 10.5 12.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g id=\"Vector\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.24999 4.8125C6.21649 4.8125 6.99999 4.029 6.99999 3.0625C6.99999 2.096 6.21649 1.3125 5.24999 1.3125C4.2835 1.3125 3.49999 2.096 3.49999 3.0625C3.49999 4.029 4.2835 4.8125 5.24999 4.8125ZM5.24999 6.125C6.94137 6.125 8.31249 4.75387 8.31249 3.0625C8.31249 1.37113 6.94137 0 5.24999 0C3.55862 0 2.18749 1.37113 2.18749 3.0625C2.18749 4.75387 3.55862 6.125 5.24999 6.125Z\" fill=\"var(--fill-0, #71717B)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.30811 8.99382C1.62797 9.40474 1.3125 9.92759 1.3125 10.5L1.3125 10.7187C1.3125 10.8396 1.41044 10.9375 1.53125 10.9375H8.96874C9.08927 10.9375 9.18749 10.8396 9.18749 10.7185V10.5C9.18749 9.92759 8.87203 9.40474 8.19189 8.99382C7.50128 8.57658 6.47941 8.3125 5.25 8.3125C4.02059 8.3125 2.99872 8.57658 2.30811 8.99382ZM1.62939 7.87043C2.5794 7.29647 3.85441 7 5.25 7C6.64559 7 7.9206 7.29647 8.87061 7.87043C9.83109 8.45073 10.5 9.34975 10.5 10.5V10.7185C10.5 11.5639 9.81471 12.25 8.96874 12.25H1.53125C0.685561 12.25 -4.64169e-06 11.5644 0 10.7187L1.66895e-06 10.5C1.56465e-06 9.34976 0.668908 8.45073 1.62939 7.87043Z\" fill=\"var(--fill-0, #71717B)\"/>\n</g>\n</svg>\n",
      "type": "asset",
      "target": "components/assets/avatar-glyphs/icon-2xsmall.svg"
    }
  ],
  "cssVars": {
    "light": {
      "500": "var(--blue-500)",
      "uis-avatar-status-bottom-default": "var(--border-default-border-strong)",
      "uis-avatar-status-bottom-blue": "var(--icon-info-icon-default)",
      "uis-avatar-status-bottom-green": "var(--icon-success-icon-default)",
      "uis-avatar-status-bottom-orange": "var(--icon-warning-icon-default)",
      "uis-avatar-status-bottom-red": "var(--icon-error-icon-default)",
      "uis-avatar-surface": "var(--backround-default-bg-hover)",
      "uis-avatar-status-border": "var(--backround-default-bg)",
      "uis-avatar-status-top-bg": "var(--icon-info-icon-default)",
      "uis-avatar-status-top-icon": "var(--text-inverted-txt-default)",
      "uis-avatar-text": "var(--text-default-txt-subtle)",
      "uis-avatar-icon": "var(--icon-default-icon-muted)",
      "uis-avatar-bg": "var(--backround-default-bg)",
      "uis-avatar-shadow": "0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08),\n        0 2px 4px rgba(0, 0, 0, 0.04)",
      "uis-avatar-plug-head": "var(--backround-item-item-shade-hover)",
      "uis-avatar-plug-body": "var(--backround-item-item-shade-hover)",
      "backround-item-item-shade-hover": "var(--neutral-300)",
      "neutral-300": "#d4d4d8",
      "backround-default-bg": "var(--neutral-0)",
      "neutral-0": "#ffffff",
      "icon-default-icon-muted": "var(--neutral-500)",
      "neutral-500": "#71717b",
      "text-default-txt-subtle": "var(--neutral-600)",
      "neutral-600": "#52525c",
      "text-inverted-txt-default": "var(--neutral-0)",
      "icon-info-icon-default": "var(--500)",
      "blue-500": "#2489ff",
      "backround-default-bg-hover": "var(--neutral-100)",
      "neutral-100": "#f4f4f5",
      "icon-error-icon-default": "var(--red-500)",
      "red-500": "#ff3347",
      "icon-warning-icon-default": "var(--orange-500)",
      "orange-500": "#f98507",
      "icon-success-icon-default": "var(--green-500)",
      "green-500": "#32b332",
      "border-default-border-strong": "var(--neutral-300)"
    },
    "dark": {
      "500": "var(--blue-500)",
      "uis-avatar-status-bottom-default": "var(--border-default-border-default)",
      "uis-avatar-status-bottom-blue": "var(--icon-info-icon-default)",
      "uis-avatar-status-bottom-green": "var(--icon-success-icon-default)",
      "uis-avatar-status-bottom-orange": "var(--icon-warning-icon-default)",
      "uis-avatar-status-bottom-red": "var(--icon-error-icon-default)",
      "uis-avatar-surface": "var(--backround-default-bg-hover)",
      "uis-avatar-status-border": "var(--backround-default-bg)",
      "uis-avatar-status-top-bg": "var(--icon-info-icon-default)",
      "uis-avatar-status-top-icon": "var(--text-inverted-txt-default)",
      "uis-avatar-text": "var(--text-default-txt-subtle)",
      "uis-avatar-icon": "var(--icon-default-icon-muted)",
      "uis-avatar-bg": "var(--backround-default-bg)",
      "uis-avatar-shadow": "0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08),\n        0 2px 4px rgba(0, 0, 0, 0.04)",
      "uis-avatar-plug-head": "var(--backround-item-item-shade-hover)",
      "uis-avatar-plug-body": "var(--backround-item-item-shade-hover)",
      "backround-item-item-shade-hover": "var(--alpha-white-alpha-10)",
      "alpha-white-alpha-10": "#ffffff1a",
      "backround-default-bg": "var(--neutral-900)",
      "neutral-900": "#18181b",
      "icon-default-icon-muted": "var(--neutral-500)",
      "neutral-500": "#71717b",
      "text-default-txt-subtle": "var(--neutral-400)",
      "neutral-400": "#9f9fa9",
      "text-inverted-txt-default": "var(--neutral-0)",
      "neutral-0": "#ffffff",
      "icon-info-icon-default": "var(--500)",
      "blue-500": "#2489ff",
      "backround-default-bg-hover": "var(--neutral-800)",
      "neutral-800": "#27272a",
      "icon-error-icon-default": "var(--red-500)",
      "red-500": "#ff3347",
      "icon-warning-icon-default": "var(--orange-500)",
      "orange-500": "#f98507",
      "icon-success-icon-default": "var(--green-500)",
      "green-500": "#32b332",
      "border-default-border-default": "var(--alpha-white-alpha-10)"
    }
  }
}