@lettealo/hanwha-life-ds 3.1.1

package/README.md

@@ -0,0 +1,185 @@
+# 한화생명 디자인 시스템
+
+> Hanwha Life Design System — Foundation 토큰 + 27개 컴포넌트 + 라이브 카탈로그.
+
+CSS 커스텀 프로퍼티 기반 토큰, React 19 + TypeScript 컴포넌트, 34개 가이드 페이지로 구성된 디자인 시스템 + 문서 사이트.
+
+## 빠른 시작
+
+```bash
+npm install
+npm run dev          # http://localhost:5173 — 라이브 카탈로그
+npm run build        # 타입체크 + 프로덕션 docs 빌드
+npm run build:lib    # 라이브러리 패키지 빌드 (dist-lib/)
+npm run storybook    # http://localhost:6006 — Storybook
+npm run lint
+```
+
+## 환경변수
+
+| 키 | 용도 | 기본값 |
+|---|---|---|
+| `VITE_STORYBOOK_URL` | 사이드바 Storybook 링크 URL | dev: `http://localhost:6006` / prod: 비노출 |
+
+`.env.production` 또는 호스팅 플랫폼 환경변수에 설정. 미설정 시 프로덕션에서는 Storybook 메뉴 자체가 숨겨진다.
+
+## 라이브러리로 사용
+
+```bash
+npm i hanwha-life-ds react react-dom
+```
+
+```tsx
+import { Button, Modal, TextField } from 'hanwha-life-ds'
+import 'hanwha-life-ds/styles'   // 컴포넌트 스타일
+import 'hanwha-life-ds/tokens'   // 디자인 토큰 (CSS 변수)
+
+export default function App() {
+  return <Button color="primary">청약 제출</Button>
+}
+```
+
+`peerDependencies`: React 18+ 또는 19. ESM/CJS 듀얼 패키지, `.d.ts` 포함.
+
+## 배포
+
+| 플랫폼 | 설정 파일 | 빌드 명령 | 출력 |
+|---|---|---|---|
+| Vercel | `vercel.json` | `npm run build` | `dist/` |
+| Netlify | `netlify.toml` | `npm run build` | `dist/` |
+
+두 설정 모두 다음 보안 헤더가 포함됨:
+
+- `Content-Security-Policy` (script self만, inline 차단)
+- `Strict-Transport-Security` (HSTS, 2년)
+- `X-Content-Type-Options: nosniff`
+- `X-Frame-Options: SAMEORIGIN`
+- `Referrer-Policy: strict-origin-when-cross-origin`
+- `Permissions-Policy` (camera/mic/geolocation/FLoC 차단)
+
+자산은 1년 immutable 캐시.
+
+## 라이브러리 패키지 배포 (npm publish)
+
+### 소비 프로젝트 설정
+
+다른 프로젝트에서 이 DS를 설치하려면 먼저 `.npmrc`에 레지스트리를 등록합니다.
+
+```
+@lettealo:registry=https://npm.pkg.github.com
+```
+
+그 다음 설치합니다.
+
+```bash
+npm install @lettealo/hanwha-life-ds
+```
+
+코드에서 사용합니다.
+
+```tsx
+import { Button, TextField, Badge } from '@lettealo/hanwha-life-ds'
+import '@lettealo/hanwha-life-ds/styles'
+```
+
+### 새 버전 게시 절차
+
+> `v*` 태그를 push하면 CI가 자동으로 GitHub Packages에 게시합니다.
+> **태그 버전과 `package.json` 버전이 다르면 CI가 실패**합니다 — 반드시 순서대로 진행하세요.
+
+```bash
+# 1. package.json 버전 올리기
+npm version minor   # 또는 patch / major
+
+# 2. 태그와 함께 push
+git push origin main --follow-tags
+```
+
+`npm version` 명령이 package.json 수정 + 커밋 + 태그를 한 번에 처리합니다.
+
+| 변경 유형 | 명령 | 예시 |
+|----------|------|------|
+| 버그 수정 | `npm version patch` | 3.0.0 → 3.0.1 |
+| 기능 추가 (하위 호환) | `npm version minor` | 3.0.0 → 3.1.0 |
+| 브레이킹 체인지 | `npm version major` | 3.0.0 → 4.0.0 |
+
+### 필요한 GitHub Secrets
+
+| Secret | 설명 |
+|--------|------|
+| `GITHUB_TOKEN` | GitHub 자동 제공, 별도 설정 불필요 |
+| `VERCEL_TOKEN` | 카탈로그/스토리북 배포용 |
+| `VERCEL_ORG_ID` | Vercel 조직 ID |
+| `VERCEL_PROJECT_ID` | 카탈로그 Vercel 프로젝트 ID |
+| `VERCEL_PROJECT_ID_STORYBOOK` | 스토리북 Vercel 프로젝트 ID |
+
+## CI
+
+GitHub Actions가 다음 이벤트마다 실행됩니다 (`.github/workflows/ci.yml`).
+
+| 이벤트 | 실행 job |
+|--------|---------|
+| `main` push / PR | lint + tsc + build (docs/lib) + npm audit |
+| `main` push | 위 + 카탈로그 Vercel 배포 + 스토리북 Vercel 배포 |
+| `v*` 태그 push | 위 전체 + `npm publish` → GitHub Packages |
+
+## 구성
+
+### Foundation
+| 토큰 | 위치 | 내용 |
+|---|---|---|
+| Color | `src/styles/tokens.css` | 8개 컬러 스케일 × 9단계 |
+| Typography | `src/styles/tokens.css` | 한화고딕/Noto Sans, 반응형 토큰 |
+| Shape | `src/styles/tokens.css` | radius 4 / 8 / 12 / 16 / full |
+| Elevation | `src/styles/tokens.css` | shadow small / medium / large |
+| Spacing | `src/styles/tokens.css` | 2px 기반 (2~48) |
+
+### Components (27)
+
+`Accordion`, `AssetIcon`, `BottomSheet`, `Button`, `Card`, `Checkbox`, `CheckboxButton`, `Chip`, `DatePicker`, `Dropdown`, `EmptyState`, `Graphic`, `Icon`, `IconButton`, `List`, `Modal`, `Notification`, `Radio`, `Stepper`, `Table`, `Tabs`, `TextButton`, `TextField`, `Toast`, `Toggle`, `Tooltip`
+
+각 컴포넌트는 `src/components/<Name>/`에 모듈로 분리. CSS Module + TypeScript Props.
+
+## 디렉토리
+
+```
+hanwha-life-ds/
+├── src/
+│   ├── App.tsx                  # 카탈로그 라우팅
+│   ├── main.tsx                 # ErrorBoundary + StrictMode
+│   ├── index.ts                 # 라이브러리 entry
+│   ├── components/              # 27개 컴포넌트
+│   ├── pages/                   # 34개 가이드 페이지 (lazy)
+│   ├── foundations/             # Storybook 스토리
+│   ├── styles/tokens.css        # 디자인 토큰
+│   ├── lib/cn.ts                # className 유틸
+│   └── lib/assets.ts            # 자산 매핑
+├── vite.config.ts               # 카탈로그 빌드
+├── vite.lib.config.ts           # 라이브러리 빌드
+├── tsconfig.lib.json            # .d.ts 생성
+├── vercel.json / netlify.toml   # 배포 + 보안 헤더
+└── .github/workflows/ci.yml     # CI 파이프라인
+```
+
+## 보안 / 프로덕션 체크
+
+- `npm audit`: 0건 ✅
+- XSS 패턴 (`dangerouslySetInnerHTML`/`eval`/`innerHTML`): 사용 없음 ✅
+- 콘솔 로그: ErrorBoundary의 dev-only `console.error`만 ✅
+- ErrorBoundary로 전체 트리 보호 ✅
+- Hash 라우팅 `decodeURIComponent` 예외 안전처리 ✅
+- TypeScript `strict: true` ✅
+
+## Breakpoint
+
+| 구분 | 폭 |
+|---|---|
+| PC-Wide | ≥ 1441px |
+| PC | 1281–1440px |
+| Tablet | 768–1280px |
+| Mobile | ≤ 767px |
+
+## 알려진 제약
+
+- **lib 번들 크기 (768KB)**: `AssetIcon`/`Graphic`이 `import.meta.glob({ eager: true })`로 모든 PNG를 base64 inline. 추후 `src` prop 기반 API로 전환하면 경량화 가능.
+- **테스트**: 인프라(vitest + playwright)는 구축됐으나 `.test.tsx` 파일 0개. Button stories의 `play` 함수 확장 필요.

package/dist-lib/downloads/tokens.css

@@ -0,0 +1,378 @@
+/* =========================================================================
+   Hanwha Life Design System — colors_and_type.css
+   모든 값은 HDS_color.pdf, HDS_brand.pdf, HDS_layout.pdf 기반
+   ========================================================================= */
+
+/* ---------- 웹폰트 (WOFF2 + 한글 서브셋) ---------- */
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicT.woff2") format("woff2");
+  font-weight: 100;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicEL.woff2") format("woff2");
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicL.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicR.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicB.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+/* 한화체 — 브랜드 로고용 */
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaL.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaR.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaB.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+:root {
+  /* ===================== Color — 기본 팔레트 ===================== */
+  /* Orange (Primary) */
+  --orange-100: #FFE0CC;
+  --orange-200: #FFC299;
+  --orange-300: #FFAF7F;
+  --orange-400: #FF8F4C;
+  --orange-500: #FA6600;  /* Hanwha Orange — Primary */
+  --orange-600: #E15A00;
+  --orange-700: #BF4C00;
+  --orange-800: #9E3F00;
+  --orange-900: #803300;
+
+  /* Gray */
+  --gray-100: #F5F5F5;
+  --gray-200: #F0F0F0;
+  --gray-300: #E5E4E3;
+  --gray-400: #D0CFCE;
+  --gray-500: #B4B3B2;
+  --gray-600: #908F8E;
+  --gray-700: #7E7C7A;
+  --gray-800: #5E5C5A;
+  --gray-900: #403F3E;
+
+  /* Red */
+  --red-100: #FEE5D8;
+  --red-200: #FEC6B2;
+  --red-300: #FC9F8B;
+  --red-400: #F97A6E;
+  --red-500: #F53F3F;
+  --red-600: #D22E3C;
+  --red-700: #B01F38;
+  --red-800: #8E1433;
+  --red-900: #750C30;
+
+  /* Bluegreen */
+  --bluegreen-100: #D6F6ED;
+  --bluegreen-200: #8DEFDC;
+  --bluegreen-300: #55DFCF;
+  --bluegreen-400: #29C4BF;
+  --bluegreen-500: #009CA5;
+  --bluegreen-600: #008195;
+  --bluegreen-700: #00617D;
+  --bluegreen-800: #004664;
+  --bluegreen-900: #003353;
+
+  /* Deepyellow */
+  --deepyellow-100: #FEF6D4;
+  --deepyellow-200: #FEEBAA;
+  --deepyellow-300: #FCDC7F;
+  --deepyellow-400: #FACD5F;
+  --deepyellow-500: #F8B62B;
+  --deepyellow-600: #D5941F;
+  --deepyellow-700: #B27515;
+  --deepyellow-800: #8F590D;
+  --deepyellow-900: #774408;
+
+  /* Jadegreen */
+  --jadegreen-100: #E1FAEE;
+  --jadegreen-200: #C5F5E3;
+  --jadegreen-300: #A0E3CF;
+  --jadegreen-400: #7EC7B8;
+  --jadegreen-500: #53A299;
+  --jadegreen-600: #3C8B89;
+  --jadegreen-700: #296F74;
+  --jadegreen-800: #1A535D;
+  --jadegreen-900: #0F3E4D;
+
+  /* Indigoblue */
+  --indigoblue-100: #E0EBFC;
+  --indigoblue-200: #C1D6F9;
+  --indigoblue-300: #9EBAEE;
+  --indigoblue-400: #819EDE;
+  --indigoblue-500: #5979C9;
+  --indigoblue-600: #415CAC;
+  --indigoblue-700: #2C4390;
+  --indigoblue-800: #1C2D74;
+  --indigoblue-900: #111E60;
+
+  /* Magenta */
+  --magenta-100: #FCE1E3;
+  --magenta-200: #FAC5CD;
+  --magenta-300: #F1A4B8;
+  --magenta-400: #E489A9;
+  --magenta-500: #D36396;
+  --magenta-600: #B54884;
+  --magenta-700: #973174;
+  --magenta-800: #7A1F64;
+  --magenta-900: #651359;
+
+  /* Basic */
+  --basic-black: #272B2F;
+  --basic-white: #FFFFFF;
+
+  /* ===================== Semantic Tokens ===================== */
+  /* Background */
+  --bg-white: #FFFFFF;
+  --bg-neutral: var(--gray-100);
+  --bg-dimmed: rgba(0, 0, 0, 0.5);
+
+  /* Surface */
+  --surface-primary: var(--orange-500);
+  --surface-secondary: var(--gray-900);
+  --surface-neutral: var(--basic-white);
+  --surface-neutral-1: var(--gray-100);
+  --surface-neutral-2: var(--gray-200);
+  --surface-neutral-3: var(--gray-300);
+  --surface-neutral-4: var(--orange-100);
+
+  /* Text */
+  --text-primary: var(--orange-500);
+  --text-secondary: var(--orange-700);
+  --text-body: var(--basic-black);
+  --text-body-0: var(--basic-white);
+  --text-body-1: var(--gray-900);
+  --text-body-2: var(--gray-800);
+  --text-body-3: var(--gray-700);
+  --text-neutral-1: var(--gray-600);
+  --text-neutral-2: var(--gray-500);
+
+  /* Border */
+  --border-primary-1: var(--orange-500);
+  --border-primary-2: var(--orange-400);
+  --border-neutral-1: var(--gray-100);
+  --border-neutral-2: var(--gray-200);
+  --border-neutral-3: var(--gray-300);
+  --border-neutral-4: var(--gray-400);
+  --border-neutral-5: var(--gray-600);
+  --border-neutral-6: var(--gray-900);
+
+  /* Additional / Semantic */
+  --semantic-1: var(--bluegreen-500);  /* info */
+  --semantic-2: var(--red-500);         /* error */
+  --semantic-3: var(--deepyellow-500);  /* warning */
+  --semantic-4: var(--gray-500);        /* disabled */
+  --custom-1: var(--indigoblue-400);
+  --custom-2: var(--orange-400);
+  --custom-3: var(--deepyellow-400);
+
+  /* States */
+  --state-dark-1: rgba(0, 0, 0, 0.02);
+  --state-dark-2: rgba(0, 0, 0, 0.10);
+  --state-dark-3: rgba(0, 0, 0, 0.16);
+  --state-light-1: rgba(255, 255, 255, 0.60);
+  --state-selected: rgba(255, 224, 204, 0.50);
+
+  /* ===================== Typography ===================== */
+  --font-ko: "Hanwha Gothic", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-multi: "Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-sans: var(--font-ko);
+  --font-brand: "Hanwha", "Hanwha Gothic", "Noto Sans KR", sans-serif;
+
+  /* ----- 타입 토큰 — PC 기본 (px / weight / line-height) ----- */
+  /* Weight convention — Bold=700, Regular=400, Light=300 */
+  --title1-size: 26px; --title1-weight: 700; --title1-lh: 1.5;
+  --title2-size: 24px; --title2-weight: 700; --title2-lh: 1.5;
+  --title3-size: 22px; --title3-weight: 700; --title3-lh: 1.5;
+  --title4-size: 20px; --title4-weight: 700; --title4-lh: 1.5;
+  --title5-size: 18px; --title5-weight: 700; --title5-lh: 1.5;
+
+  --subtitle1-size: 20px; --subtitle1-weight: 400; --subtitle1-lh: 1.5;
+  --subtitle2-size: 18px; --subtitle2-weight: 400; --subtitle2-lh: 1.5;
+  --subtitle3-size: 16px; --subtitle3-weight: 400; --subtitle3-lh: 1.5;
+
+  --body1-size: 18px; --body1-weight: 300; --body1-lh: 1.5;
+  --body2-size: 16px; --body2-weight: 300; --body2-lh: 1.5;
+  --body3-size: 14px; --body3-weight: 300; --body3-lh: 1.5;
+  --body4-size: 12px; --body4-weight: 300; --body4-lh: 1.5;
+
+  --caption-size: 14px; --caption-weight: 300; --caption-lh: 1.4;
+
+  --link-large-size: 18px; --link-large-weight: 300;
+  --link-medium-size: 16px; --link-medium-weight: 300;
+  --link-small-size: 14px; --link-small-weight: 300;
+
+  --input-large-size: 16px; --input-large-weight: 400;
+  --input-medium-size: 16px; --input-medium-weight: 300;
+  --input-small-size: 14px; --input-small-weight: 300;
+
+  /* ===================== Shape (Radius) ===================== */
+  /* Shape value scale — 4, 6, 8, 10, 12, 14, 16 */
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+
+  /* Basic scale (default = PC) */
+  --radius-small: 4px;
+  --radius-medium: 8px;
+  --radius-large: 12px;
+  --radius-xLarge: 16px;
+  --radius-full: 1000px;
+
+  /* Modal radius per breakpoint */
+  --radius-modal-pc-wide: 16px;
+  --radius-modal-pc: 16px;
+  --radius-modal-tablet: 14px;
+  --radius-modal-mobile: 0;
+
+  /* ===================== Spacing ===================== */
+  --space-0: 0;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-14: 14px;
+  --space-16: 16px;
+  --space-18: 18px;
+  --space-20: 20px;
+  --space-22: 22px;
+  --space-24: 24px;
+  --space-26: 26px;
+  --space-28: 28px;
+  --space-30: 30px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-40: 40px;
+  --space-44: 44px;
+  --space-48: 48px;
+
+  /* Padding tokens (PC) */
+  --padding-zero: 0;
+  --padding-xxxxSmall: 2px;
+  --padding-xxxSmall: 4px;
+  --padding-xxSmall: 6px;
+  --padding-xSmall: 8px;
+  --padding-small: 10px;
+  --padding-medium: 12px;
+  --padding-large: 16px;
+  --padding-xLarge: 20px;
+  --padding-xxLarge: 24px;
+  --padding-xxxLarge: 28px;
+  --padding-xxxxLarge: 48px;
+
+  /* Layout (PC) */
+  --layout-gutter: 16px;
+  --layout-column: 12px;
+  --layout-padding-sub: 32px;
+  --layout-padding-top-bottom: 20px;
+
+  /* ===================== Elevation / Shadow ===================== */
+  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-large: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* ===================== Base + Semantic Elements ===================== */
+html, body {
+  font-family: var(--font-sans);
+  color: var(--text-body);
+  background: var(--bg-white);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body { font-size: var(--body2-size); font-weight: var(--body2-weight); line-height: var(--body2-lh); }
+
+h1 { font-size: var(--title1-size); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; }
+h2 { font-size: var(--title2-size); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; }
+h3 { font-size: var(--title3-size); font-weight: 700; line-height: 1.5; }
+h4 { font-size: var(--title4-size); font-weight: 700; line-height: 1.5; }
+h5 { font-size: var(--title5-size); font-weight: 700; line-height: 1.5; }
+p  { font-size: var(--body2-size); font-weight: 300; line-height: 1.5; }
+small { font-size: var(--body4-size); font-weight: 300; }
+a  { color: var(--text-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* 타입 클래스 */
+.title1 { font-size: var(--title1-size); font-weight: 700; line-height: 1.5; }
+.title2 { font-size: var(--title2-size); font-weight: 700; line-height: 1.5; }
+.title3 { font-size: var(--title3-size); font-weight: 700; line-height: 1.5; }
+.title4 { font-size: var(--title4-size); font-weight: 700; line-height: 1.5; }
+.title5 { font-size: var(--title5-size); font-weight: 700; line-height: 1.5; }
+.subtitle1 { font-size: var(--subtitle1-size); font-weight: 400; line-height: 1.5; }
+.subtitle2 { font-size: var(--subtitle2-size); font-weight: 400; line-height: 1.5; }
+.subtitle3 { font-size: var(--subtitle3-size); font-weight: 400; line-height: 1.5; }
+.body1 { font-size: var(--body1-size); font-weight: 300; line-height: 1.5; }
+.body2 { font-size: var(--body2-size); font-weight: 300; line-height: 1.5; }
+.body3 { font-size: var(--body3-size); font-weight: 300; line-height: 1.5; }
+.body4 { font-size: var(--body4-size); font-weight: 300; line-height: 1.5; }
+.caption { font-size: var(--caption-size); font-weight: 300; line-height: 1.4; color: var(--text-body-3); }
+
+/* ===================== Responsive Type Tokens ===================== */
+/* Tablet — 768 ~ 1280px */
+@media (max-width: 1280px) and (min-width: 768px) {
+  :root {
+    --title1-size: 24px; --title2-size: 22px; --title3-size: 20px;
+    --title4-size: 18px; --title5-size: 16px;
+    --subtitle1-size: 18px; --subtitle2-size: 16px; --subtitle3-size: 14px;
+    --body1-size: 16px; --body2-size: 14px; --body3-size: 12px; --body4-size: 10px;
+    --caption-size: 12px;
+    --link-large-size: 16px; --link-medium-size: 14px; --link-small-size: 12px;
+    --input-large-size: 14px; --input-medium-size: 14px; --input-small-size: 12px;
+    /* Tablet radius scale — xLarge 14 대신 */
+    --radius-medium: 6px;
+    --radius-large: 10px;
+    --radius-xLarge: 14px;
+  }
+}
+
+/* Mobile — 0 ~ 767px */
+@media (max-width: 767px) {
+  :root {
+    /* 대부분 PC와 동일하되 subtitle·input은 재정렬 */
+    --title1-size: 26px; --title2-size: 22px; --title3-size: 22px;
+    --title4-size: 20px; --title5-size: 18px;
+    --subtitle1-size: 20px; --subtitle2-size: 18px; --subtitle3-size: 16px;
+    --body1-size: 18px; --body2-size: 16px; --body3-size: 14px; --body4-size: 12px;
+    --caption-size: 14px;
+    --input-large-size: 18px;
+    --input-medium-size: 18px;
+    --input-small-size: 16px;
+    --link-large-size: 18px; --link-medium-size: 16px; --link-small-size: 14px;
+  }
+}

package/dist-lib/favicon.svg

@@ -0,0 +1,5 @@
+<svg width="66" height="60" viewBox="0 0 66 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.8056 32.9375C64.8195 23.3389 53.8528 15.4731 41.3139 15.3662C28.7761 15.2638 19.403 22.9658 20.3896 32.5677C21.3748 42.1726 32.3415 50.0414 44.8837 50.1399C57.4226 50.2458 66.7873 42.5399 65.8056 32.9375ZM24.3194 30.5345C23.4625 22.7936 31.6048 16.5794 42.5016 16.6672C53.394 16.7511 62.9235 23.095 63.7766 30.8355C64.6356 38.5775 56.4966 44.7916 45.5945 44.7053C34.7041 44.6194 25.1745 38.2814 24.3194 30.5345Z" fill="#FBB584"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9903 29.2101C16.8121 36.6931 16.6937 48.1979 23.7228 54.9136C30.7567 61.6326 42.2816 61.0067 49.4593 53.5301C56.6434 46.0511 56.7569 34.5462 49.7259 27.8233C42.6949 21.1087 31.1725 21.7326 23.9903 29.2101ZM46.8685 50.3384C40.6955 56.7726 30.7839 57.3062 24.7365 51.5272C18.6779 45.756 18.7802 35.8516 24.962 29.4135C31.1375 22.9818 41.056 22.455 47.1014 28.2252C53.1536 33.9999 53.0509 43.9052 46.8685 50.3384Z" fill="#F89B6C"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7155 9.25269C-0.616701 19.7746 -4.0065 35.0185 5.13422 43.3054C14.2745 51.5888 32.4918 49.779 45.8226 39.2542C59.148 28.7303 62.5392 13.4824 53.4034 5.19903C44.2554 -3.08779 26.0419 -1.27365 12.7155 9.25269ZM24.64 5.12733C37.486 0.322937 50.1878 5.18294 53.015 15.9737C55.8428 26.7683 47.7161 39.4107 34.8696 44.2088C22.025 49.0161 9.32622 44.1512 6.49552 33.36C3.67215 22.5698 11.7989 9.92781 24.64 5.12733Z" fill="#F37321"></path>
+</svg>

package/dist-lib/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>