@petnow/ui 4.1.8 → 5.0.0

package/package.json

@@ -1,38 +1,23 @@
 {
   "name": "@petnow/ui",
-  "version": "4.1.8",
+  "version": "5.0.0",
   "type": "module",
   "packageManager": "pnpm@11.1.3",
-  "engines": {
-    "node": ">=22.13.0 <23",
-    "pnpm": "11.1.3"
-  },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build && npm run tailwind",
-    "tailwind": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css --minify",
+    "build": "tsc && vite build && pnpm run build:css",
+    "build:css": "node -e \"require('fs').copyFileSync('src/styles/components.css', 'dist/index.css')\"",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
-    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "format": "prettier . --check",
     "format:fix": "prettier . --write"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.9",
-    "@types/react-swipeable-views": "^0.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.4.0",
     "keen-slider": "^6.8.6",
-    "lucide-react": "^1.17.0",
     "radix-ui": "^1.4.3",
-    "react-datepicker": "^8.3.0",
-    "react-daum-postcode": "^4.0.0",
-    "react-icons": "^5.6.0",
-    "react-swipeable-views": "^0.14.1",
-    "shadcn": "^4.11.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
@@ -63,24 +48,29 @@
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
     "jest-transformer-svg": "^2.1.0",
+    "magic-string": "^0.30.21",
     "postcss": "^8.5.10",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "10.4.1",
+    "storybook": "10.6.2",
     "tailwindcss": "^4.1.14",
     "ts-jest": "^29.4.6",
     "typescript": "^5.7.2",
-    "vite": "^8.0.16",
+    "vite": "^8.1.6",
     "vite-plugin-dts": "^5.0.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0"
   },
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -186,7 +176,10 @@
   "files": [
     "dist",
     "tailwind.css",
-    "petnow-design-system-v1.css"
+    "petnow-design-system-v1.css",
+    "CHANGELOG.md",
+    "docs/adr",
+    "docs/migration"
   ],
   "publishConfig": {
     "access": "public"

package/petnow-design-system-v1.css

@@ -1,30 +1,5 @@
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 63%;
-    --radius: 0.625rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
     /* Ref Color */
 
     --petnow-main-0: #0a0b0c;
@@ -402,57 +377,9 @@
   --color-neutral-grey-95: var(--neutral-grey-95);
   --color-neutral-grey-100: var(--neutral-grey-100);
 
-  --color-red-0: var(--red-0);
-  --color-red-10: var(--red-10);
-  --color-red-20: var(--red-20);
-  --color-red-30: var(--red-30);
-  --color-red-40: var(--red-40);
-  --color-red-50: var(--red-50);
-  --color-red-60: var(--red-60);
-  --color-red-70: var(--red-70);
-  --color-red-80: var(--red-80);
-  --color-red-90: var(--red-90);
-  --color-red-95: var(--red-95);
-  --color-red-100: var(--red-100);
-
-  --color-purple-0: var(--purple-0);
-  --color-purple-10: var(--purple-10);
-  --color-purple-20: var(--purple-20);
-  --color-purple-30: var(--purple-30);
-  --color-purple-40: var(--purple-40);
-  --color-purple-50: var(--purple-50);
-  --color-purple-60: var(--purple-60);
-  --color-purple-70: var(--purple-70);
-  --color-purple-80: var(--purple-80);
-  --color-purple-90: var(--purple-90);
-  --color-purple-95: var(--purple-95);
-  --color-purple-100: var(--purple-100);
-
-  --color-green-0: var(--green-0);
-  --color-green-10: var(--green-10);
-  --color-green-20: var(--green-20);
-  --color-green-30: var(--green-30);
-  --color-green-40: var(--green-40);
-  --color-green-50: var(--green-50);
-  --color-green-60: var(--green-60);
-  --color-green-70: var(--green-70);
-  --color-green-80: var(--green-80);
-  --color-green-90: var(--green-90);
-  --color-green-95: var(--green-95);
-  --color-green-100: var(--green-100);
-
-  --color-yellow-0: var(--yellow-0);
-  --color-yellow-10: var(--yellow-10);
-  --color-yellow-20: var(--yellow-20);
-  --color-yellow-30: var(--yellow-30);
-  --color-yellow-40: var(--yellow-40);
-  --color-yellow-50: var(--yellow-50);
-  --color-yellow-60: var(--yellow-60);
-  --color-yellow-70: var(--yellow-70);
-  --color-yellow-80: var(--yellow-80);
-  --color-yellow-90: var(--yellow-90);
-  --color-yellow-95: var(--yellow-95);
-  --color-yellow-100: var(--yellow-100);
+  /* red, green, purple and yellow are not mapped to --color-*: their names would
+     override Tailwind's default palette (e.g. red-50, red-100) in consumer apps.
+     Use the semantic colors, or the raw vars, e.g. bg-(--red-95). */
 }
 
 /* Semantic tokens must be `inline`: utilities then reference the underlying

package/tailwind.css

@@ -1,71 +1,84 @@
-@import "tailwindcss";
+/*
+  @petnow/ui Tailwind entry.
+
+  Import this after your own `@import "tailwindcss"`. It adds the package's
+  tokens and utilities to your Tailwind build and registers the package's
+  `dist` as a source, so your build generates the classes our components use.
+  It does not import Tailwind and does not set fonts, base styles, shadcn
+  variables, or a dark-mode strategy; those belong to your app.
+*/
 
 @import "./petnow-design-system-v1.css";
 
 @import "tw-animate-css";
 
-@import "shadcn/tailwind.css";
-
-@custom-variant dark (&:is(.dark *));
+@source "./dist/**/*.js";
 
+/*
+  v0 tokens: deprecated. Use the v1 tokens in petnow-design-system-v1.css
+  (`petnow-main-*`, `petnow-sub-*`, `neutral-grey-*`, semantic colors, and
+  `text-<role>-<size>-<weight>` typography). Steps that exist in v1 resolve to
+  the v1 value; v0-only steps keep their own value.
+*/
 @theme {
   --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
   --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
 
-  --color-petnow-orange-0: #0a0b0c;
-  --color-petnow-orange-10: #3b1b12;
-  --color-petnow-orange-20: #6c2a19;
-  --color-petnow-orange-30: #9d3a1f;
-  --color-petnow-orange-40: #ce4926;
-  --color-petnow-orange-50: #ff592c;
-  --color-petnow-orange-60: #ff7a56;
-  --color-petnow-orange-70: #ff9b80;
-  --color-petnow-orange-80: #ffbdab;
-  --color-petnow-orange-90: #ffded5;
-  --color-petnow-orange-95: #ffeeea;
+  --color-petnow-orange-0: var(--petnow-main-0);
+  --color-petnow-orange-10: var(--petnow-main-10);
+  --color-petnow-orange-20: var(--petnow-main-20);
+  --color-petnow-orange-30: var(--petnow-main-30);
+  --color-petnow-orange-40: var(--petnow-main-40);
+  --color-petnow-orange-50: var(--petnow-main-50);
+  --color-petnow-orange-60: var(--petnow-main-60);
+  --color-petnow-orange-70: var(--petnow-main-70);
+  --color-petnow-orange-80: var(--petnow-main-80);
+  --color-petnow-orange-90: var(--petnow-main-90);
+  --color-petnow-orange-95: var(--petnow-main-95);
   --color-petnow-orange-99: #fff7f4;
-  --color-petnow-orange-100: #ffffff;
-  --color-petnow-orange-primary: #ff592c;
-  --color-petnow-orange-secondary: #ffeeea;
+  --color-petnow-orange-100: var(--petnow-main-100);
+  --color-petnow-orange-primary: var(--petnow-main-50);
+  --color-petnow-orange-secondary: var(--petnow-main-95);
   --color-petnow-orange-tertiary: #fff7f4;
 
-  --color-petnow-blue-0: #0a0b0c;
-  --color-petnow-blue-10: #152437;
-  --color-petnow-blue-20: #213d63;
-  --color-petnow-blue-30: #2c578e;
-  --color-petnow-blue-40: #3870ba;
-  --color-petnow-blue-50: #4389e5;
-  --color-petnow-blue-60: #69a1ea;
-  --color-petnow-blue-70: #8eb8ef;
-  --color-petnow-blue-80: #b4d0f5;
-  --color-petnow-blue-90: #d9e7fa;
-  --color-petnow-blue-95: #ecf3fc;
+  --color-petnow-blue-0: var(--petnow-sub-0);
+  --color-petnow-blue-10: var(--petnow-sub-10);
+  --color-petnow-blue-20: var(--petnow-sub-20);
+  --color-petnow-blue-30: var(--petnow-sub-30);
+  --color-petnow-blue-40: var(--petnow-sub-40);
+  --color-petnow-blue-50: var(--petnow-sub-50);
+  --color-petnow-blue-60: var(--petnow-sub-60);
+  --color-petnow-blue-70: var(--petnow-sub-70);
+  --color-petnow-blue-80: var(--petnow-sub-80);
+  --color-petnow-blue-90: var(--petnow-sub-90);
+  --color-petnow-blue-95: var(--petnow-sub-95);
   --color-petnow-blue-99: #f6f9fe;
-  --color-petnow-blue-100: #ffffff;
-  --color-petnow-blue-primary: #4389e5;
-  --color-petnow-blue-secondary: #ecf3fc;
+  --color-petnow-blue-100: var(--petnow-sub-100);
+  --color-petnow-blue-primary: var(--petnow-sub-50);
+  --color-petnow-blue-secondary: var(--petnow-sub-95);
   --color-petnow-blue-tertiary: #f6f9fe;
 
-  --color-petnow-red-50: #ff4055;
-  --color-petnow-red-95: #ffecf1;
+  --color-petnow-red-50: var(--red-50);
+  --color-petnow-red-95: var(--red-95);
   --color-petnow-red-99: #fff5f8;
-  --color-petnow-red-primary: #ff4055;
+  --color-petnow-red-primary: var(--red-50);
 
-  --color-petnow-green-50: #42d48e;
-  --color-petnow-green-95: #ecfbf4;
+  --color-petnow-green-50: var(--green-50);
+  --color-petnow-green-95: var(--green-95);
   --color-petnow-green-99: #f6fdf9;
-  --color-petnow-green-primary: #42d48e;
+  --color-petnow-green-primary: var(--green-50);
 
-  --color-petnow-purple-50: #af50dc;
-  --color-petnow-purple-95: #f7edfb;
+  --color-petnow-purple-50: var(--purple-50);
+  --color-petnow-purple-95: var(--purple-95);
   --color-petnow-purple-99: #fbf6fd;
-  --color-petnow-purple-primary: #af50dc;
+  --color-petnow-purple-primary: var(--purple-50);
 
-  --color-petnow-yellow-50: #ffd22d;
-  --color-petnow-yellow-95: #fff8e0;
+  --color-petnow-yellow-50: var(--yellow-50);
+  --color-petnow-yellow-95: var(--yellow-95);
   --color-petnow-yellow-99: #fffbeb;
-  --color-petnow-yellow-primary: #ffd22d;
+  --color-petnow-yellow-primary: var(--yellow-50);
 
+  /* A separate grey ramp from v1 `neutral-grey-*`; the values are not the same. */
   --color-petnow-grey-0: #0a0b0c;
   --color-petnow-grey-10: #16181a;
   --color-petnow-grey-20: #2c2f34;
@@ -87,24 +100,7 @@
   --color-background-secondary: #f8f8f9;
   --color-background-tertiary: #f0f1f2;
 
-  --color-black: #2c2f34;
-  --color-error: #ff323e;
-
-  --text-display-large: font-bold text-[34px] leading-[46px] tracking-normal;
-  --text-display-medium: font-bold text-[28px] leading-[38px] tracking-normal;
-  --text-title-large: font-bold text-[24px] leading-[34px] tracking-normal;
-  --text-title-medium: font-bold text-[20px] leading-[30px] tracking-normal;
-  --text-title-small: font-bold text-[18px] leading-[26px] tracking-normal;
-  --text-label-large: font-bold text-[16px] leading-[24px] tracking-normal;
-  --text-label-medium: font-bold text-[14px] leading-[22px] tracking-normal;
-  --text-label-small: font-bold text-[12px] leading-[18px] tracking-normal;
-  --text-body-large: font-medium text-[16px] leading-[24px] tracking-normal;
-  --text-body-medium: font-medium text-[14px] leading-[22px] tracking-normal;
-  --text-body-small: font-medium text-[12px] leading-[18px] tracking-normal;
-  --text-caption-large: font-normal text-[16px] leading-[24px] tracking-normal;
-  --text-caption-medium: font-normal text-[14px] leading-[22px] tracking-normal;
-  --text-caption-small: font-normal text-[12px] leading-[18px] tracking-normal;
-  --text-badge: font-medium text-[11px] leading-[16px] tracking-normal;
+  --color-error: var(--red-50);
 
   @keyframes shimmer {
     100% {
@@ -113,176 +109,94 @@
   }
 }
 
-@layer utilities {
-  .text-display-large {
-    @apply text-[34px] leading-[46px] font-bold tracking-normal;
-  }
-  .text-display-medium {
-    @apply text-[28px] leading-[38px] font-bold tracking-normal;
-  }
-  .text-title-large {
-    @apply text-[24px] leading-[34px] font-bold tracking-normal;
-  }
-  .text-title-medium {
-    @apply text-[20px] leading-[30px] font-bold tracking-normal;
-  }
-  .text-title-small {
-    @apply text-[18px] leading-[26px] font-bold tracking-normal;
-  }
-  .text-label-large {
-    @apply text-[16px] leading-[24px] font-bold tracking-normal;
-  }
-  .text-label-medium {
-    @apply text-[14px] leading-[22px] font-bold tracking-normal;
-  }
-  .text-label-small {
-    @apply text-[12px] leading-[18px] font-bold tracking-normal;
-  }
-  .text-body-large {
-    @apply text-[16px] leading-[24px] font-medium tracking-normal;
-  }
-  .text-body-medium {
-    @apply text-[14px] leading-[22px] font-medium tracking-normal;
-  }
-  .text-body-small {
-    @apply text-[12px] leading-[18px] font-medium tracking-normal;
-  }
-  .text-caption-large {
-    @apply text-[16px] leading-[24px] font-normal tracking-normal;
-  }
-  .text-caption-medium {
-    @apply text-[14px] leading-[22px] font-normal tracking-normal;
-  }
-  .text-caption-small {
-    @apply text-[12px] leading-[18px] font-normal tracking-normal;
-  }
-  .text-badge {
-    @apply text-[11px] leading-[16px] font-medium tracking-normal;
-  }
+/* v0 typography: deprecated. Use the v1 `text-<role>-<size>-<weight>` utilities. */
+@utility text-display-large {
+  font-size: 34px;
+  line-height: 46px;
+  font-weight: 700;
+  letter-spacing: 0;
 }
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+@utility text-display-medium {
+  font-size: 28px;
+  line-height: 38px;
+  font-weight: 700;
+  letter-spacing: 0;
 }
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+@utility text-title-large {
+  font-size: 24px;
+  line-height: 34px;
+  font-weight: 700;
+  letter-spacing: 0;
 }
-
-@theme inline {
-  --font-sans:
-    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
-    "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
+@utility text-title-medium {
+  font-size: 20px;
+  line-height: 30px;
+  font-weight: 700;
+  letter-spacing: 0;
 }
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  html {
-    @apply font-sans;
-  }
+@utility text-title-small {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+@utility text-label-large {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+@utility text-label-medium {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+@utility text-label-small {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+@utility text-body-large {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+@utility text-body-medium {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+@utility text-body-small {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+@utility text-caption-large {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+@utility text-caption-medium {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+@utility text-caption-small {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+@utility text-badge {
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0;
 }

package/dist/Popup-BCBW_e8Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popup-BCBW_e8Q.js","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/v1/popup/Popup.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 duration-200\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\nimport { CTAButton } from \"../cta-button/CTAButton\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\ntype PopupAction = {\n  label: string | React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  onClick?: () => void;\n};\n\nexport interface PopupProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  onClose?: () => void;\n  title?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  content?: React.ReactNode;\n  confirm?: PopupAction;\n  cancel?: PopupAction;\n  preventEasyClose?: boolean;\n  className?: string;\n}\n\nconst Popup = ({\n  isOpen,\n  setIsOpen,\n  onClose,\n  title,\n  description,\n  content,\n  confirm,\n  cancel,\n  preventEasyClose = false,\n  className,\n}: PopupProps) => {\n  const handleClose = () => {\n    setIsOpen(false);\n    onClose?.();\n  };\n\n  const handleConfirmAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n  };\n\n  const handleCancelAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n    handleClose();\n  };\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (preventEasyClose && !nextOpen) {\n      return;\n    }\n\n    if (!nextOpen) {\n      onClose?.();\n    }\n\n    setIsOpen(nextOpen);\n  };\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n      <DialogContent\n        onEscapeKeyDown={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        onInteractOutside={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        className={cn(\n          \"bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4\",\n          className,\n        )}\n      >\n        <div className=\"flex w-full flex-col gap-2 overflow-y-auto\">\n          {title && <DialogTitle className=\"text-title-18-bold text-text-prominent-neutral-4\">{title}</DialogTitle>}\n          {description && (\n            <div className=\"overflow-y-auto\">\n              <DialogDescription className=\"text-body-16-medium text-text-prominent-neutral-3\">\n                {description}\n              </DialogDescription>\n            </div>\n          )}\n          {content && <div className=\"overflow-y-auto\">{content}</div>}\n        </div>\n        {(confirm || cancel) && (\n          <div className=\"flex w-full flex-col gap-2\">\n            {confirm && (\n              <CTAButton\n                label={confirm.label}\n                icon={confirm.icon}\n                size=\"medium\"\n                hierarchy=\"primary\"\n                onClick={handleConfirmAction(confirm)}\n              />\n            )}\n            {cancel && (\n              <CTAButton\n                label={cancel.label}\n                icon={cancel.icon}\n                size=\"medium\"\n                hierarchy=\"tertiary\"\n                onClick={handleCancelAction(cancel)}\n              />\n            )}\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport { Popup };\n"],"mappings":";;;;;;AAKA,IAAM,IAAS,EAAgB;AACT,EAAgB;AACtC,IAAM,IAAe,EAAgB;AACjB,EAAgB;AAEpC,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,uKACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,gRACA,CACF;CACA,GAAI;AACL,CAAA,CACW,EAAA,CAAA,CACf;AACD,EAAc,cAAc,EAAgB,QAAQ;AAUpD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CAA4B;CAAK,WAAW,EAAG,yBAAyB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACjG;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,aAAjB;CAAkC;CAAK,WAAW,EAAG,iCAAiC,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAkB,cAAc,EAAgB,YAAY;;;ACrC5D,IAAM,KAAS,EACb,WACA,cACA,YACA,UACA,gBACA,YACA,YACA,WACA,sBAAmB,IACnB,mBACgB;CAChB,IAAM,UAAoB;EAExB,AADA,EAAU,EAAK,GACf,IAAU;CACZ;CAuBA,OACE,kBAAC,GAAD;EAAQ,MAAM;EAAQ,eAbE,MAAsB;GAC1C,KAAoB,CAAC,MAIpB,KACH,IAAU,GAGZ,EAAU,CAAQ;EACpB;YAII,kBAAC,GAAD;GACE,iBAAiB,KAAoB,MAAU,EAAM,eAAe,IAAI,KAAA;GACxE,mBAAmB,KAAoB,MAAU,EAAM,eAAe,IAAI,KAAA;GAC1E,WAAW,EACT,0HACA,CACF;aANF,CAQE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAS,kBAAC,GAAD;MAAa,WAAU;gBAAoD;KAAmB,CAAA;KACvG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAmB,WAAU;iBAC1B;MACgB,CAAA;KAChB,CAAA;KAEN,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAmB;KAAa,CAAA;IACxD;QACH,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAQ;KACf,MAAM,EAAQ;KACd,MAAK;KACL,WAAU;KACV,WAlDe,YAA+B;MAC1D,GAAQ,UAAU;KACpB,GAgD2C,CAAO;IACrC,CAAA,GAEF,KACC,kBAAC,GAAD;KACE,OAAO,EAAO;KACd,MAAM,EAAO;KACb,MAAK;KACL,WAAU;KACV,WAvDc,YAA+B;MAEzD,AADA,GAAQ,UAAU,GAClB,EAAY;KACd,GAoD0C,CAAM;IACnC,CAAA,CAEA;KAEM;;CACT,CAAA;AAEZ"}

package/dist/src/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import("react").JSX.Element;
-export default App;

package/dist/src/components/ui/button.d.ts

@@ -1,9 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "default" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): import("react").JSX.Element;
-export { Button, buttonVariants };

package/dist/src/components/v0/checkbox/Checkbox.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Checkbox } from './Checkbox';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-export declare const Default: Story;

package/dist/src/components/v0/radio/Radio.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Radio } from './Radio';
-declare const meta: Meta<typeof Radio>;
-export default meta;
-type Story = StoryObj<typeof Radio>;
-export declare const Default: Story;
-export declare const ChangeSize: Story;
-export declare const Disabled: Story;

package/dist/src/components/v0/tabs/Tabs.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Tabs } from './Tabs';
-declare const meta: Meta<typeof Tabs>;
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-export declare const Default: Story;
-export declare const ThreeTabWithCuratedContent: Story;

package/dist/src/components/v0/toggle/Toggle.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Toggle } from './Toggle';
-declare const meta: Meta<typeof Toggle>;
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-export declare const Default: Story;