@nurihaus/web-design-system 3.0.1 → 3.1.0

package/dist/ai/tokens.md

@@ -0,0 +1,344 @@
+<!-- tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens` -->
+
+# 디자인 토큰
+
+`@nurihaus/web-design-system/tokens.css` 가 아래 CSS 변수를 `:root` 에 선언한다.
+
+## 규칙
+
+- 색·글자·간격·모서리는 이 목록의 변수만 `var(--…)` 로 쓴다. hex, `rgb()` 같은 값을 직접 쓰지 않는다.
+- 의미 토큰(아래 테마 표)이 있는 곳은 의미 토큰을 먼저 쓴다. 테마가 바뀌면 값이 따라 바뀐다.
+- 이 목록에 없는 변수 이름을 지어내지 않는다. 없는 변수는 오류 없이 무시되어 화면에서만 드러난다.
+
+## 테마
+
+쓸 수 있는 테마는 `app`, `admin` 이다. 앱의 `<html>` 에 `data-ds-theme` 속성으로 고른다. 속성이 없으면 `app` 이다.
+
+```html
+<html data-ds-theme="admin">
+```
+
+### 의미 토큰
+
+| 변수 | app | admin |
+| --- | --- | --- |
+| `--button-variant-primary-background` | `var(--color-purple-900)` | — |
+| `--button-variant-primary-border` | `var(--color-purple-900)` | `var(--color-purple-900)` |
+| `--button-variant-primary-text` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-ghost-background` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-ghost-border` | `var(--color-grey-scale-300)` | `var(--color-grey-scale-300)` |
+| `--button-variant-ghost-text` | `var(--color-purple-900)` | `var(--color-purple-900)` |
+| `--button-variant-secondary-background` | `var(--color-purple-50)` | `var(--color-purple-50)` |
+| `--button-variant-secondary-border` | `var(--color-purple-50)` | `var(--color-purple-50)` |
+| `--button-variant-secondary-text` | `var(--color-purple-900)` | `var(--color-purple-900)` |
+| `--button-variant-neutral-background` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-neutral-border` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-neutral-text` | `var(--color-purple-900)` | `var(--color-purple-900)` |
+| `--button-variant-disabled-background` | `var(--color-grey-scale-200)` | `var(--color-grey-scale-200)` |
+| `--button-variant-disabled-border` | `var(--color-grey-scale-200)` | `var(--color-grey-scale-200)` |
+| `--button-variant-disabled-text` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-outlined-background` | `var(--color-white)` | `var(--color-white)` |
+| `--button-variant-outlined-border` | `var(--color-accent-red-700)` | `var(--color-accent-red-700)` |
+| `--button-variant-outlined-text` | `var(--color-accent-red-700)` | `var(--color-accent-red-700)` |
+| `--button-size-xl` | `[object Object]` | `60` |
+| `--button-size-lg` | `[object Object]` | — |
+| `--button-size-md` | `[object Object]` | — |
+| `--button-size-rg` | `[object Object]` | — |
+| `--button-size-sm` | `[object Object]` | — |
+| `--button-size-xs` | `[object Object]` | `30` |
+| `--button-variant-primary-hover-background` | — | `var(--color-purple-900)` |
+| `--button-variant-primary-hover-border` | — | `var(--color-purple-900)` |
+| `--button-variant-primary-hover-text` | — | `var(--color-white)` |
+| `--button-variant-ghost-hover-background` | — | `var(--color-white)` |
+| `--button-variant-ghost-hover-border` | — | `var(--color-purple-900)` |
+| `--button-variant-ghost-hover-text` | — | `var(--color-purple-900)` |
+| `--button-variant-secondary-hover-background` | — | `var(--color-purple-100)` |
+| `--button-variant-secondary-hover-border` | — | `var(--color-purple-100)` |
+| `--button-variant-secondary-hover-text` | — | `var(--color-purple-900)` |
+| `--button-variant-neutral-hover-background` | — | `var(--color-grey-scale-100)` |
+| `--button-variant-neutral-hover-border` | — | `var(--color-grey-scale-100)` |
+| `--button-variant-neutral-hover-text` | — | `var(--color-purple-900)` |
+| `--button-variant-confirm-background` | — | `var(--color-accent-red-500)` |
+| `--button-variant-confirm-border` | — | `var(--color-accent-red-500)` |
+| `--button-variant-confirm-text` | — | `var(--color-white)` |
+| `--button-variant-confirm-hover-background` | — | `var(--color-accent-red-700)` |
+| `--button-variant-confirm-hover-border` | — | `var(--color-accent-red-700)` |
+| `--button-variant-confirm-hover-text` | — | `var(--color-white)` |
+| `--button-xl` | — | `[object Object]` |
+| `--button-l` | — | `[object Object]` |
+| `--button-sb` | — | `[object Object]` |
+| `--button-r` | — | `[object Object]` |
+| `--button-s` | — | `[object Object]` |
+| `--button-xs` | — | `[object Object]` |
+| `--button-size-s` | — | `40` |
+| `--button-size-r` | — | `48` |
+| `--button-size-m` | — | `50` |
+| `--button-size-l` | — | `54` |
+
+`—` 는 그 테마에 값이 없다는 뜻이다. 그 테마에서는 `app` 값이 쓰인다.
+
+## 색
+
+| 변수 | 값 |
+| --- | --- |
+| `--color-purple-50` | `#F4EFFA` |
+| `--color-purple-100` | `#E9E0F5` |
+| `--color-purple-200` | `#DDD1F0` |
+| `--color-purple-300` | `#C3B4DD` |
+| `--color-purple-400` | `#A894C7` |
+| `--color-purple-500` | `#957EB4` |
+| `--color-purple-600` | `#6F56A3` |
+| `--color-purple-700` | `#4C277C` |
+| `--color-purple-800` | `#4C1D88` |
+| `--color-purple-900` | `#391D5D` |
+| `--color-grey-scale-50` | `#FAFAFA` |
+| `--color-grey-scale-100` | `#F4F4F5` |
+| `--color-grey-scale-200` | `#E4E4E7` |
+| `--color-grey-scale-300` | `#D4D4D8` |
+| `--color-grey-scale-400` | `#A1A1AA` |
+| `--color-grey-scale-500` | `#71717A` |
+| `--color-grey-scale-600` | `#52525B` |
+| `--color-grey-scale-700` | `#3F3F46` |
+| `--color-grey-scale-800` | `#27272A` |
+| `--color-grey-scale-900` | `#18181B` |
+| `--color-accent-red-50` | `#FFF5F6` |
+| `--color-accent-red-100` | `#FFE8E9` |
+| `--color-accent-red-200` | `#FBCFD2` |
+| `--color-accent-red-300` | `#F39AA0` |
+| `--color-accent-red-400` | `#E86F77` |
+| `--color-accent-red-500` | `#DF535C` |
+| `--color-accent-red-600` | `#C94751` |
+| `--color-accent-red-700` | `#B02E4C` |
+| `--color-accent-red-800` | `#8F243A` |
+| `--color-accent-red-900` | `#6E1A2C` |
+| `--color-accent-pink-50` | `#FFF1F6` |
+| `--color-accent-pink-100` | `#FFE4EE` |
+| `--color-accent-pink-200` | `#FECFE3` |
+| `--color-accent-pink-300` | `#FDA4CC` |
+| `--color-accent-pink-400` | `#F472B6` |
+| `--color-accent-pink-500` | `#EC6FAE` |
+| `--color-accent-pink-600` | `#D95D9A` |
+| `--color-accent-pink-700` | `#B94A7E` |
+| `--color-accent-pink-800` | `#93385F` |
+| `--color-accent-pink-900` | `#6E2644` |
+| `--color-accent-magenta-50` | `#FEF0FF` |
+| `--color-accent-magenta-100` | `#FEF0FF` |
+| `--color-accent-magenta-200` | `#F8C6FF` |
+| `--color-accent-magenta-300` | `#F29BFF` |
+| `--color-accent-magenta-400` | `#EC5CEF` |
+| `--color-accent-magenta-500` | `#E13BE7` |
+| `--color-accent-magenta-600` | `#C82FCC` |
+| `--color-accent-magenta-700` | `#A923A8` |
+| `--color-accent-magenta-800` | `#831C83` |
+| `--color-accent-magenta-900` | `#5E145E` |
+| `--color-accent-blue-50` | `#F1F4FF` |
+| `--color-accent-blue-100` | `#E3E8FF` |
+| `--color-accent-blue-200` | `#C7D2FE` |
+| `--color-accent-blue-300` | `#A5B4FC` |
+| `--color-accent-blue-400` | `#818CF8` |
+| `--color-accent-blue-500` | `#2563EB` |
+| `--color-accent-blue-600` | `#1F52C9` |
+| `--color-accent-blue-700` | `#1E40AF` |
+| `--color-accent-blue-800` | `#1C348A` |
+| `--color-accent-blue-900` | `#162763` |
+| `--color-accent-mint-50` | `#ECFEFD` |
+| `--color-accent-mint-100` | `#D1FAF7` |
+| `--color-accent-mint-200` | `#A7F3EE` |
+| `--color-accent-mint-300` | `#6EE7E0` |
+| `--color-accent-mint-400` | `#2DD4CB` |
+| `--color-accent-mint-500` | `#01ECE1` |
+| `--color-accent-mint-600` | `#0BC5BC` |
+| `--color-accent-mint-700` | `#0F9F99` |
+| `--color-accent-mint-800` | `#117D78` |
+| `--color-accent-mint-900` | `#135C58` |
+| `--color-accent-green-50` | `#ECFDF3` |
+| `--color-accent-green-100` | `#D1FAE1` |
+| `--color-accent-green-200` | `#A7F3C8` |
+| `--color-accent-green-300` | `#6EE7A3` |
+| `--color-accent-green-400` | `#41E176` |
+| `--color-accent-green-500` | `#22C55E` |
+| `--color-accent-green-600` | `#16A34A` |
+| `--color-accent-green-700` | `#289A3A` |
+| `--color-accent-green-800` | `#166534` |
+| `--color-accent-green-900` | `#14532D` |
+| `--color-accent-yellow-50` | `#FFFBEB` |
+| `--color-accent-yellow-100` | `#FEF3C7` |
+| `--color-accent-yellow-200` | `#FDE68A` |
+| `--color-accent-yellow-300` | `#FCD34D` |
+| `--color-accent-yellow-400` | `#FBBF24` |
+| `--color-accent-yellow-500` | `#FFB800` |
+| `--color-accent-yellow-600` | `#E0A106` |
+| `--color-accent-yellow-700` | `#B58105` |
+| `--color-accent-yellow-800` | `#8A6404` |
+| `--color-accent-yellow-900` | `#5F4703` |
+| `--color-accent-orange-50` | `#FFF7ED` |
+| `--color-accent-orange-100` | `#FFEDD5` |
+| `--color-accent-orange-200` | `#FED7AA` |
+| `--color-accent-orange-300` | `#FDBA74` |
+| `--color-accent-orange-400` | `#FB923C` |
+| `--color-accent-orange-500` | `#F97316` |
+| `--color-accent-orange-600` | `#EA580C` |
+| `--color-accent-orange-700` | `#C2410C` |
+| `--color-accent-orange-800` | `#9A3412` |
+| `--color-accent-orange-900` | `#7C2D12` |
+| `--color-black` | `#000000` |
+| `--color-white` | `#FFFFFF` |
+
+## 글꼴
+
+| 변수 | 값 |
+| --- | --- |
+| `--font-family-primary` | `Pretendard` |
+
+## 글자 크기
+
+| 변수 | 값 |
+| --- | --- |
+| `--font-size-xsm` | `12px` |
+| `--font-size-sm` | `14px` |
+| `--font-size-base` | `16px` |
+| `--font-size-lg` | `18px` |
+| `--font-size-xl` | `20px` |
+| `--font-size-2xl` | `24px` |
+| `--font-size-3xl` | `30px` |
+| `--font-size-4xl` | `36px` |
+| `--font-size-5xl` | `48px` |
+| `--font-size-6xl` | `60px` |
+
+## 글자 굵기
+
+| 변수 | 값 |
+| --- | --- |
+| `--font-weight-regular` | `400` |
+| `--font-weight-medium` | `500` |
+| `--font-weight-semibold` | `600` |
+| `--font-weight-bold` | `700` |
+| `--font-weight-extrabold` | `800` |
+
+## 줄 높이
+
+| 변수 | 값 |
+| --- | --- |
+| `--line-height-xsm` | `18px` |
+| `--line-height-sm` | `18px` |
+| `--line-height-base` | `22px` |
+| `--line-height-lg` | `24px` |
+| `--line-height-xl` | `28px` |
+| `--line-height-2xl` | `32px` |
+| `--line-height-3xl` | `36px` |
+| `--line-height-4xl` | `43px` |
+| `--line-height-5xl` | `66px` |
+| `--line-height-6xl` | `82px` |
+
+## 간격
+
+| 변수 | 값 |
+| --- | --- |
+| `--spacing-2` | `2px` |
+| `--spacing-4` | `4px` |
+| `--spacing-6` | `6px` |
+| `--spacing-8` | `8px` |
+| `--spacing-10` | `10px` |
+| `--spacing-12` | `12px` |
+| `--spacing-14` | `14px` |
+| `--spacing-16` | `16px` |
+| `--spacing-18` | `18px` |
+| `--spacing-20` | `20px` |
+| `--spacing-22` | `22px` |
+| `--spacing-24` | `24px` |
+| `--spacing-26` | `26px` |
+| `--spacing-28` | `28px` |
+| `--spacing-30` | `30px` |
+
+## 모서리
+
+| 변수 | 값 |
+| --- | --- |
+| `--radius-4` | `4px` |
+| `--radius-6` | `6px` |
+| `--radius-16` | `16px` |
+| `--radius-20` | `20px` |
+| `--radius-full` | `9999px` |
+
+## 크기 · 레이어 · 모션
+
+`styles/token/size.css` 에서 온다. 컴포넌트 높이·간격·z-index·모션은 이 변수를 쓴다. size 이름 `xs · s · m · l · xl` 의 실제 값이 여기 있다.
+
+| 변수 | 값 | 용도 |
+| --- | --- | --- |
+| `--control-height-xs` | `28px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-s` | `36px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-m` | `40px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-l` | `44px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-xl` | `48px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--label-height-xs` | `28px` | 라벨: badge |
+| `--label-height-s` | `32px` | 라벨: badge |
+| `--label-height-m` | `36px` | 라벨: badge |
+| `--label-height-l` | `40px` | 라벨: badge |
+| `--label-height-xl` | `48px` | 라벨: badge |
+| `--menu-row-height-s` | `40px` | 메뉴 행: collapsible-menu, drop-down 항목 |
+| `--menu-row-height-m` | `48px` | 메뉴 행: collapsible-menu, drop-down 항목 |
+| `--drop-down-item-height` | `46px` | 메뉴 행: collapsible-menu, drop-down 항목 |
+| `--checkbox-size-s` | `18px` | 정사각 |
+| `--checkbox-size-m` | `20px` | 정사각 |
+| `--checkbox-size-l` | `24px` | 정사각 |
+| `--radio-size` | `18px` | 정사각 |
+| `--radio-dot-size` | `8px` | 정사각 |
+| `--switch-width-s` | `32px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-width-m` | `40px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-width-l` | `48px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-s` | `18px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-m` | `22px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-l` | `26px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-thumb-inset` | `2px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-s` | `40px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-m` | `58px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-l` | `74px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-xl` | `124px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-s` | `18px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-m` | `24px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-l` | `30px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-xl` | `48px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--drawer-width-s` | `320px` | 폭 |
+| `--drawer-width-m` | `400px` | 폭 |
+| `--drawer-width-l` | `520px` | 폭 |
+| `--drawer-height-s` | `320px` | 폭 |
+| `--drawer-height-m` | `400px` | 폭 |
+| `--drawer-height-l` | `520px` | 폭 |
+| `--toast-width` | `360px` | 폭 |
+| `--modal-width-s` | `400px` | 폭 |
+| `--modal-width-m` | `450px` | 폭 |
+| `--modal-width-l` | `500px` | 폭 |
+| `--icon-size-s` | `18px` | 그 밖의 치수 |
+| `--icon-size-m` | `20px` | 그 밖의 치수 |
+| `--icon-size-l` | `24px` | 그 밖의 치수 |
+| `--tooltip-arrow` | `8px` | 그 밖의 치수 |
+| `--spinner-stroke` | `3px` | 그 밖의 치수 |
+| `--overlay-spinner-size` | `64px` | 그 밖의 치수 |
+| `--overlay-spinner-stroke` | `8px` | 그 밖의 치수 |
+| `--tab-indicator-thickness` | `3px` | 그 밖의 치수 |
+| `--checkbox-border` | `1.5px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-xs` | `12px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-s` | `14px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-m` | `16px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-l` | `18px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-xl` | `20px` | 그 밖의 치수 |
+| `--skeleton-text-height` | `16px` | 그 밖의 치수 |
+| `--skeleton-last-line-width` | `60%` | 그 밖의 치수 |
+| `--hairline` | `1px` | 그 밖의 치수 |
+| `--shadow-popover` | `0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)` | 그림자 |
+| `--z-base` | `0` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-raised` | `1` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-sticky` | `2` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-sticky-header` | `3` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-tooltip` | `3` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-popover` | `5` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-overlay` | `9998` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-modal` | `9999` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-toast` | `10000` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--motion-fast` | `160ms` | 모션 |
+| `--motion-base` | `300ms` | 모션 |
+| `--motion-ease` | `ease` | 모션 |
+| `--spinner-duration` | `1.2s` | 모션 |
+| `--skeleton-duration` | `1.5s` | 모션 |
+| `--spinner-ease` | `cubic-bezier(0.5, 0, 0.5, 1)` | 모션 |

package/dist/avatar.js

@@ -0,0 +1,336 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__ from "radix-ui";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+/******/ var __webpack_modules__ = ({
+
+/***/ 5468
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ avatar)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/core/composer/index.tsx
+var composer = __nuri_require__(2777);
+// EXTERNAL MODULE: ./helpers/props/common-props.ts
+var common_props = __nuri_require__(7298);
+;// ./components/avatar/avatar-props.ts
+
+var sizes = ['s', 'm', 'l', 'xl'];
+var avatarProps = {
+  size: (0,common_props/* sizeProp */.lw)(sizes, 'm')
+};
+// EXTERNAL MODULE: external {"root":"RadixUI","commonjs2":"radix-ui","commonjs":"radix-ui","amd":"radix-ui","module":"radix-ui"}
+var external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_ = __nuri_require__(0);
+;// ./assets/icons/defaultAvatar.svg
+var _circle, _circle2, _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+var SvgDefaultAvatar = function SvgDefaultAvatar(props) {
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 124,
+    height: 124,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("circle", {
+    cx: 62,
+    cy: 62,
+    r: 62,
+    fill: "#C4C4C4"
+  })), _circle2 || (_circle2 = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("circle", {
+    cx: 62,
+    cy: 40,
+    r: 15,
+    fill: "#fff"
+  })), _path || (_path = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("path", {
+    fill: "#fff",
+    d: "M96 84.026C96 97.295 80.778 99 62 99s-34-1.705-34-14.974S43.222 60 62 60s34 10.757 34 24.026"
+  })));
+};
+/* harmony default export */ const defaultAvatar = (SvgDefaultAvatar);
+;// ./components/avatar/base-avatar.tsx
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+var BaseAvatar = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    src = props.src,
+    _a = props.alt,
+    alt = _a === void 0 ? 'avatar' : _a,
+    restProps = __rest(props, ["className", "src", "alt"]);
+  return (0,jsx_runtime_.jsxs)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Avatar.Root, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-avatar', className)
+  }, restProps, {
+    children: [(0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Avatar.Image, {
+      className: 'avatar-image',
+      src: src,
+      alt: alt
+    }), (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Avatar.Fallback, {
+      className: 'avatar-fallback',
+      children: (0,jsx_runtime_.jsx)(defaultAvatar, {
+        width: '100%',
+        height: '100%',
+        viewBox: '0 0 124 124'
+      })
+    })]
+  }));
+});
+BaseAvatar.displayName = 'BaseAvatar';
+/* harmony default export */ const base_avatar = (BaseAvatar);
+;// ./components/avatar/avatar.tsx
+var avatar_assign = undefined && undefined.__assign || function () {
+  avatar_assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return avatar_assign.apply(this, arguments);
+};
+var avatar_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+
+var Avatar = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, avatarProps),
+    className = _a.className,
+    badgeOption = _a.badgeOption,
+    restProps = avatar_rest(_a, ["className", "badgeOption"]);
+  return (0,jsx_runtime_.jsxs)("span", {
+    className: 'avatar-wrapper',
+    children: [(0,jsx_runtime_.jsx)(base_avatar, avatar_assign({
+      ref: ref,
+      className: (0,classNames/* classNames */.x)(className, 'avatar')
+    }, restProps)), /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.isValidElement)(badgeOption) && (0,jsx_runtime_.jsx)(composer/* default */.A, {
+      className: (0,classNames/* classNames */.x)('nuri-theme', className, 'avatar-badge'),
+      children: badgeOption
+    })]
+  });
+});
+Avatar.displayName = 'Avatar';
+/* harmony default export */ const avatar = (Avatar);
+
+/***/ },
+
+/***/ 0
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["Avatar"]: () => (__WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__.Avatar) });
+
+/***/ },
+
+/***/ 1041
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement) });
+
+/***/ },
+
+/***/ 612
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx), ["jsxs"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsxs) });
+
+/***/ }
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __nuri_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __nuri_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __nuri_require__.m = __webpack_modules__;
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ 	var deferred = [];
+/******/ 	__nuri_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 		if(chunkIds) {
+/******/ 			priority = priority || 0;
+/******/ 			for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 			deferred[i] = [chunkIds, fn, priority];
+/******/ 			return;
+/******/ 		}
+/******/ 		var notFulfilled = Infinity;
+/******/ 		for (var i = 0; i < deferred.length; i++) {
+/******/ 			var [chunkIds, fn, priority] = deferred[i];
+/******/ 			var fulfilled = true;
+/******/ 			for (var j = 0; j < chunkIds.length; j++) {
+/******/ 				if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
+/******/ 					chunkIds.splice(j--, 1);
+/******/ 				} else {
+/******/ 					fulfilled = false;
+/******/ 					if(priority < notFulfilled) notFulfilled = priority;
+/******/ 				}
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferred.splice(i--, 1)
+/******/ 				var r = fn();
+/******/ 				if (r !== undefined) result = r;
+/******/ 			}
+/******/ 		}
+/******/ 		return result;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__nuri_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/export webpack runtime */
+/******/ export { __nuri_require__ };
+/******/ 
+/******/ /* webpack/runtime/import chunk loading */
+/******/ (() => {
+/******/ 	// no baseURI
+/******/ 	
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		716: 0
+/******/ 	};
+/******/ 	
+/******/ 	var installChunk = (data) => {
+/******/ 		var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
+/******/ 		// add "modules" to the modules object,
+/******/ 		// then flag all "ids" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0;
+/******/ 		for(moduleId in __webpack_esm_modules__) {
+/******/ 			if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
+/******/ 				__nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
+/******/ 		for(;i < __webpack_esm_ids__.length; i++) {
+/******/ 			chunkId = __webpack_esm_ids__[i];
+/******/ 			if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				installedChunks[chunkId][0]();
+/******/ 			}
+/******/ 			installedChunks[__webpack_esm_ids__[i]] = 0;
+/******/ 		}
+/******/ 		__nuri_require__.O();
+/******/ 	}
+/******/ 	
+/******/ 	// no chunk on demand loading
+/******/ 	
+/******/ 	// no prefetching
+/******/ 	
+/******/ 	// no preloaded
+/******/ 	
+/******/ 	__nuri_require__.C = installChunk;
+/******/ 	
+/******/ 	__nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 	// no HMR
+/******/ 	
+/******/ 	// no HMR manifest
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-777.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ import * as __webpack_chunk_3__ from "./chunk-298.js";
+/******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ 
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module depends on other loaded chunks and execution need to be delayed
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,777,298], () => (__nuri_require__(5468)))
+/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
+/******/ const __webpack_exports__default = __webpack_exports__.A;
+/******/ export { __webpack_exports__default as default };
+/******/