@iamfiro/design 0.1.0 → 0.3.0

package/AGENTS.md

@@ -55,6 +55,7 @@ export function App() {
 | --- | --- |
 | 앱 뼈대 · 사이드바 · 상단 경로 | `AppShell` · `Sidebar` · `Breadcrumb` |
 | 버튼 · 아이콘 버튼 · 링크 | `Button`(`iconOnly` + `aria-label` + `Tooltip`) · `Link` |
+| Google · Apple 로그인 | `SocialLoginButton`(`provider` · `action`) — 로고 · 브랜드 색을 직접 그리지 않는다 |
 | 콘텐츠 묶음 | `Card` + `CardHeader` / `CardBody` / `CardFooter` |
 | 사람 · 파일 · 설정 행 목록 | `List` + `ListItem`(`leading` · `trailing`) + `Avatar` / `IconTile` |
 | 폼 | `Field` + `Input` / `Textarea` / `Select` / `Combobox` / `Checkbox` / `Switch` / `DatePicker` |

package/agents/INDEX.md

@@ -18,6 +18,7 @@
 - **SelectorButton** — 지금 선택된 것을 보여 주고 눌러서 바꾸는 조용한 버튼. → [`agents/selector-button/AGENTS.md`](selector-button/AGENTS.md)
 - **Link** — 글 속 링크. → [`agents/link/AGENTS.md`](link/AGENTS.md)
 - **ActionBar** — 상세 화면 · 검토 화면 아래에 붙는 동작 바. → [`agents/action-bar/AGENTS.md`](action-bar/AGENTS.md)
+- **SocialLoginButton** — Google · Apple 계정으로 로그인하는 버튼. → [`agents/social-login-button/AGENTS.md`](social-login-button/AGENTS.md)
 - **Toolbar** — 버튼 · 토글 · ToggleGroup · 메뉴 트리거를 한 줄로 묶는 WAI-ARIA 툴바. → [`agents/toolbar/AGENTS.md`](toolbar/AGENTS.md)
 
 ## 라벨 & 배지

package/agents/brand-icon/AGENTS.md

@@ -14,7 +14,7 @@ import { BrandIcon, BRAND_NAMES } from '@iamfiro/design'
 
 | prop | 타입 | 기본값 | 설명 |
 | --- | --- | --- | --- |
-| `name` (필수) | `'gmail' \| 'slack' \| 'clickup' \| 'figma' \| 'github' \| 'hubspot' \| 'notion' \| 'google-calendar'` |  | 앱. |
+| `name` (필수) | `'gmail' \| 'slack' \| 'clickup' \| 'figma' \| 'github' \| 'hubspot' \| 'notion' \| 'google-calendar' \| 'google' \| 'apple'` |  | 앱. |
 | `size` | `number` | `18` | 가로·세로(px). |
 | `title` | `string` |  | 접근성 이름. 없으면 장식으로 취급해요(옆에 글자가 있을 때). |
 | `className` | `string` |  | svg에 붙일 클래스. |
@@ -25,7 +25,7 @@ import { BrandIcon, BRAND_NAMES } from '@iamfiro/design'
 
 ### 로고 목록
 
-지금 들어 있는 로고 8개(Gmail, Slack, ClickUp, Figma, GitHub, HubSpot, Notion, Google Calendar). 새 앱은 BrandIcon.tsx의 MARKS에 추가해요.
+지금 들어 있는 로고 10개(Gmail, Slack, ClickUp, Figma, GitHub, HubSpot, Notion, Google Calendar, Google, Apple). Apple은 한 색 로고라 글자색을 따라요. 새 앱은 BrandIcon.tsx의 MARKS에 추가해요.
 
 ```tsx
 import { BRAND_NAMES, BrandIcon, Inline, Stack, Text } from '@iamfiro/design'

package/agents/social-login-button/AGENTS.md

@@ -0,0 +1,156 @@
+# SocialLoginButton
+
+> 버튼 & 링크 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+Google · Apple 계정으로 로그인하는 버튼. 각 브랜드 가이드대로 Google은 흰 바탕 + 옅은 윤곽 + 색 G 로고, Apple은 검정 바탕 + 흰 로고예요. 문구는 action으로 고르고, 나머지 props는 Button과 같아요.
+
+```tsx
+import { SocialLoginButton } from '@iamfiro/design'
+```
+
+## API
+
+### SocialLoginButton
+
+variant · icon은 provider가 정해요. 나머지 props(size · block · loading · disabled · onClick…)는 Button에 그대로 전달돼요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `provider` (필수) | `'google' \| 'apple'` |  | 로그인 제공자. 색 · 로고 · 이름이 정해져요. |
+| `action` | `'continue' \| 'signin' \| 'signup'` | `'continue'` | "Google로 계속하기" · "Google로 로그인" · "Google로 가입하기". |
+| `children` | `ReactNode` |  | 문구를 직접 바꿀 때. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 높이 28 / 34 / 40px. 로고는 14 / 16 / 18px. |
+| `iconOnly` | `boolean` |  | 로고만 보이는 정사각형 버튼. aria-label은 문구로 붙어요. |
+| `block` | `boolean` |  | 너비 100%. |
+| `loading` | `boolean` |  | 로고 자리에 스피너, 클릭 막음. 인증 창으로 넘어가는 동안 써요. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+로그인 화면에선 block으로 폭을 채워 위아래로 쌓아요. 순서는 보통 Google → Apple.
+
+```tsx
+import { SocialLoginButton, Stack } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={2} style={{ width: 320 }}>
+      <SocialLoginButton provider="google" size="lg" block />
+      <SocialLoginButton provider="apple" size="lg" block />
+    </Stack>
+  )
+}
+```
+
+### 문구
+
+action='continue'(기본) · 'signin' · 'signup'. 로그인과 가입을 한 화면에서 받으면 continue를 써요.
+
+```tsx
+import { SocialLoginButton, Inline, Stack } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={3}>
+      <Inline gap={2}>
+        <SocialLoginButton provider="google" action="continue" />
+        <SocialLoginButton provider="google" action="signin" />
+        <SocialLoginButton provider="google" action="signup" />
+      </Inline>
+      <Inline gap={2}>
+        <SocialLoginButton provider="apple" action="continue" />
+        <SocialLoginButton provider="apple" action="signin" />
+        <SocialLoginButton provider="apple" action="signup" />
+      </Inline>
+    </Stack>
+  )
+}
+```
+
+### 크기 · 아이콘만
+
+sm · md · lg는 Button과 같은 높이. iconOnly면 로고만 보이고 aria-label은 문구로 자동으로 붙어요.
+
+```tsx
+import { SocialLoginButton, Inline, Stack } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={3}>
+      <Inline gap={2}>
+        <SocialLoginButton provider="google" size="sm" />
+        <SocialLoginButton provider="google" />
+        <SocialLoginButton provider="google" size="lg" />
+      </Inline>
+      <Inline gap={2}>
+        <SocialLoginButton provider="google" iconOnly />
+        <SocialLoginButton provider="apple" iconOnly />
+        <SocialLoginButton provider="google" size="lg" iconOnly />
+        <SocialLoginButton provider="apple" size="lg" iconOnly />
+      </Inline>
+    </Stack>
+  )
+}
+```
+
+### 로그인 카드
+
+Card 안에 소셜 버튼 → "또는" Separator → 이메일 입력. 누르면 loading으로 잠가 두 번 눌리지 않게 해요.
+
+```tsx
+import { useState } from 'react'
+import { Card, CardBody, CardHeader, SocialLoginButton, type SocialProvider, Button, Field, Input, Separator, Stack, Text } from '@iamfiro/design'
+
+export default function Example() {
+  const [pending, setPending] = useState<SocialProvider | null>(null)
+
+  // 실제 앱에선 여기서 OAuth 창으로 넘어가요. 예제는 2초 뒤 풀어요.
+  const signIn = (provider: SocialProvider) => {
+    setPending(provider)
+    window.setTimeout(() => setPending(null), 2000)
+  }
+
+  return (
+    <Card style={{ width: 360 }}>
+      <CardHeader title="Lumen에 로그인" description="팀 워크스페이스로 계속하려면 로그인하세요." />
+      <CardBody>
+        <Stack gap={4}>
+          <Stack gap={2}>
+            <SocialLoginButton
+              provider="google"
+              size="lg"
+              block
+              loading={pending === 'google'}
+              disabled={pending !== null}
+              onClick={() => signIn('google')}
+            />
+            <SocialLoginButton
+              provider="apple"
+              size="lg"
+              block
+              loading={pending === 'apple'}
+              disabled={pending !== null}
+              onClick={() => signIn('apple')}
+            />
+          </Stack>
+          <Separator label="또는" />
+          <Stack gap={3}>
+            <Field label="이메일" htmlFor="login-email">
+              <Input id="login-email" type="email" placeholder="minji@lumen.co" />
+            </Field>
+            <Button variant="secondary" size="lg" block>
+              이메일로 계속하기
+            </Button>
+          </Stack>
+          <Text variant="caption" tone="secondary">
+            계속하면 서비스 약관과 개인정보 처리방침에 동의하게 돼요.
+          </Text>
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}
+```

package/lib/components/Accordion/Accordion2.js

@@ -0,0 +1,135 @@
+"use client";
+function e() {
+	let t = /* @__PURE__ */ "zhmTzgLZy2XVC3vYzs0TzMX1C2G.zhmTzgLZy2XVC3vYzv9Fy29UDgvUDa.zgvMyxvSDa.AxntzwXLy3rLza.Dg9Nz2XL.yNv0Dg9U.zMLSDgvY.sg9Tzq.C3bHBG.mta1mduXmhvRsKTOAG.zgL2.zhmTzgLZy2XVC3vYzv9FzM9Sza.zhmTzgLZy2XVC3vYzv9FDhjPz2DLCG.y2XVC2vZDa.zhmTzgLZy2XVC3vYzv9FDgv4Da.ChjLDMvUDerLzMf1Bhq.A2v5.mti5ntaWne9xuLLlBq.ntu2nZqWoeflqvLbEa.lMrZlwfJy29YzgLVBG.zhmTzgLZy2XVC3vYzv9FAwnVBG.qxjYB3DvCa.CgXHAw4.BgvUz3rO.CxvLCNLtzwXLy3rVCKfSBa.lxjLz2LVBG.CMvNAw9U.sxrLBq.zhmTywnJB3jKAw9Uls0.zM9JDxm.nty0ntu0nuHyu1PrDq.lxrYAwDNzxi.lMrZlwrPC2nSB3n1CMvFx3rYAwDNzxi6BM90kdPKAxnHyMXLzcK.ntG3mtn5C0fZyM0.ote4ndm3zvLsEuLO.y3vYCMvUDa.Aw5SAw5L.mtmZodmXmKX0r0DhwG.Aw5KzxHpzG.zhmTzgLZy2XVC3vYzq.zhmTzgLZy2XVC3vYzv9FAw5Uzxi.zhmTzgLZy2XVC3vYzv9FzgvZyW.AxnpCgvU.zhmTzgLZy2XVC3vYzv9FBgfIzwW".split(".");
+	return e = function() {
+		return t;
+	}, e();
+}
+const t = h;
+(function(e, t) {
+	let n = h, r = e();
+	for (;;) try {
+		if (parseInt(n(361)) / 1 + -parseInt(n(380)) / 2 + parseInt(n(360)) / 3 + parseInt(n(364)) / 4 + -parseInt(n(357)) / 5 + parseInt(n(388)) / 6 + parseInt(n(389)) / 7 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(e, 629400);
+import { useControllableState as n } from "../../hooks/useControllableState.js";
+import { cx as r } from "../../primitives/index.js";
+import { useSelection as i } from "../../hooks/useSelection.js";
+/* empty css          */
+import { createContext as a, useContext as o, useId as s, useRef as c } from "react";
+import { ChevronDown as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+function f({ open: e, defaultOpen: t = !1, onOpenChange: r, ...i }) {
+	let [a, o] = n(e, t, r);
+	return u(p, {
+		...i,
+		open: a,
+		onToggle: () => o(!a)
+	});
+}
+function p({ label: e, description: n, icon: i, disabled: a, open: o, onToggle: c, children: f, variant: p = t(373), iconTone: m = "default", className: h }) {
+	let g = t, _ = s(), v = p === "inline" ? g(381) : "h3";
+	return d(g(381), {
+		className: r(g(366), p === g(363) && "ds-disclosure--inline", h),
+		"data-open": o || void 0,
+		"data-disabled": a || void 0,
+		children: [u(v, {
+			className: "ds-disclosure__heading",
+			children: d(g(376), {
+				type: g(376),
+				id: _ + g(358),
+				"aria-expanded": o,
+				"aria-controls": _ + g(396),
+				disabled: a,
+				className: g(383),
+				onClick: c,
+				children: [
+					i && u(g(379), {
+						className: g(391),
+						"data-tone": m === "default" ? void 0 : m,
+						children: i
+					}),
+					d(g(379), {
+						className: g(385),
+						children: [u(g(379), {
+							className: g(370),
+							children: e
+						}), n && u(g(379), {
+							className: g(368),
+							children: n
+						})]
+					}),
+					u(l, {
+						className: "ds-disclosure__chevron",
+						"aria-hidden": !0
+					})
+				]
+			})
+		}), u(g(381), {
+			id: _ + g(396),
+			role: g(397),
+			"aria-labelledby": _ + g(358),
+			className: g(382),
+			inert: !o || void 0,
+			children: u("div", {
+				className: g(367),
+				children: u(g(381), {
+					className: g(372),
+					children: f
+				})
+			})
+		})]
+	});
+}
+var m = a(null);
+function h(t, n) {
+	t -= 355;
+	let r = e(), i = r[t];
+	h.rDemQm === void 0 && (h.NLxyOx = function(e) {
+		let t = "", n = "";
+		for (let n = 0, r, i, a = 0; i = e.charAt(a++); ~i && (r = n % 4 ? r * 64 + i : i, n++ % 4) && (t += String.fromCharCode(255 & r >> (-2 * n & 6)))) i = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(i);
+		for (let e = 0, r = t.length; e < r; e++) n += "%" + ("00" + t.charCodeAt(e).toString(16)).slice(-2);
+		return decodeURIComponent(n);
+	}, h.wVZXmv = {}, h.rDemQm = !0);
+	let a = r[0];
+	h.BkMNcy !== a && (h.wVZXmv = {}, h.BkMNcy = a);
+	let o = h.wVZXmv[t];
+	return o === void 0 ? (i = h.NLxyOx(i), h.wVZXmv[t] = i) : i = o, i;
+}
+function g({ variant: e = t(393), children: n, className: a, style: o, ...s }) {
+	let l = t, d = i(s), f = c(null);
+	return u(m.Provider, {
+		value: {
+			isOpen: d[l(374)],
+			toggle: d[l(375)]
+		},
+		children: u(l(381), {
+			ref: f,
+			className: r("ds-accordion", l(355) + e, a),
+			style: o,
+			onKeyDown: (e) => {
+				let t = h, n = [...f[t(362)]?.[t(395)](t(359)) ?? []][t(377)]((e) => e[t(384)](t(390)) === f[t(362)]), r = n[t(365)](document.activeElement);
+				if (r < 0) return;
+				let i;
+				e[t(387)] === "ArrowDown" ? i = n[(r + 1) % n[t(394)]] : e[t(387)] === t(392) ? i = n[(r - 1 + n.length) % n[t(394)]] : e[t(387)] === t(378) ? i = n[0] : e[t(387)] === "End" && (i = n[n[t(394)] - 1]), i && (e[t(386)](), i[t(356)]());
+			},
+			children: n
+		})
+	});
+}
+function _({ value: e, title: n, flush: r, ...i }) {
+	let a = t, s = o(m);
+	if (!s) throw Error("AccordionItem must be used inside <Accordion>");
+	return u(p, {
+		...i,
+		className: r ? a(371) : void 0,
+		label: n,
+		open: s[a(369)](e),
+		onToggle: () => s.toggle(e)
+	});
+}
+g[t(398)] = _;
+export { g as Accordion, _ as AccordionItem, f as Collapsible };

package/lib/components/ActionBar/ActionBar2.js

@@ -0,0 +1,65 @@
+"use client";
+var e = i;
+(function(e, t) {
+	for (var n = i, r = e();;) try {
+		if (parseInt(n(274)) / 1 + parseInt(n(271)) / 2 * (-parseInt(n(266)) / 3) + -parseInt(n(269)) / 4 * (parseInt(n(262)) / 5) + parseInt(n(259)) / 6 * (-parseInt(n(264)) / 7) + parseInt(n(270)) / 8 * (parseInt(n(268)) / 9) + parseInt(n(267)) / 10 + -parseInt(n(272)) / 11 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(n, 666149);
+import { cx as t } from "../../primitives/index.js";
+/* empty css          */
+function n() {
+	var e = [
+		"mZG5mta4ngDOu1n1ra",
+		"zhmTywn0Aw9UlwjHCI0T",
+		"zMLLBgrZzxq",
+		"ntC4nunYyxvyEa",
+		"y2vUDgvY",
+		"n2zttwjbCG",
+		"zhmTywn0Aw9UlwjHCL9Fz3jVDxa",
+		"m1PZvg9HBq",
+		"mZG2nJiXmgLMwfLqEq",
+		"mtCWnJG0mwvRsvH3CW",
+		"nJi4wxDoveXt",
+		"ntzrzfrZEeK",
+		"ntC3ode4yuPNtwrT",
+		"mteZmZaZnJntyNbls2i",
+		"zgL2",
+		"mteWmta5mgL5Cfn4zq"
+	];
+	return n = function() {
+		return e;
+	}, n();
+}
+import { jsx as r } from "react/jsx-runtime";
+function i(e, t) {
+	e -= 259;
+	var r = n(), a = r[e];
+	i.hnVKUd === void 0 && (i.EsmgwF = function(e) {
+		for (var t = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=", n = "", r = "", i = 0, a, o, s = 0; o = e.charAt(s++); ~o && (a = i % 4 ? a * 64 + o : o, i++ % 4) && (n += String.fromCharCode(255 & a >> (-2 * i & 6)))) o = t.indexOf(o);
+		for (var c = 0, l = n.length; c < l; c++) r += "%" + ("00" + n.charCodeAt(c).toString(16)).slice(-2);
+		return decodeURIComponent(r);
+	}, i.ucYSUe = {}, i.hnVKUd = !0);
+	var o = r[0];
+	i.SzOtaB !== o && (i.ucYSUe = {}, i.SzOtaB = o);
+	var s = i.ucYSUe[e];
+	return s === void 0 ? (a = i.EsmgwF(a), i.ucYSUe[e] = a) : a = s, a;
+}
+function a({ children: n, align: i = e(263), sticky: a = !0, pending: o, "aria-label": s, className: c, style: l }) {
+	var u = e;
+	return r(u(273), {
+		className: t("ds-action-bar", u(260) + i, a && "ds-action-bar--sticky", c),
+		"data-pending": o || void 0,
+		style: l,
+		children: r(u(261), {
+			className: u(265),
+			disabled: o,
+			"aria-label": s,
+			"aria-busy": o || void 0,
+			children: n
+		})
+	});
+}
+export { a as ActionBar };

package/lib/components/Alert/Alert2.js

@@ -0,0 +1,131 @@
+"use client";
+const e = n;
+(function(e, t) {
+	let r = n, i = e();
+	for (;;) try {
+		if (parseInt(r(275)) / 1 + parseInt(r(288)) / 2 * (parseInt(r(286)) / 3) + parseInt(r(274)) / 4 + -parseInt(r(271)) / 5 + parseInt(r(294)) / 6 + -parseInt(r(296)) / 7 + -parseInt(r(278)) / 8 * (parseInt(r(293)) / 9) == t) break;
+		i.push(i.shift());
+	} catch {
+		i.push(i.shift());
+	}
+})(t, 793408);
+function t() {
+	let e = /* @__PURE__ */ "Aw5SAw5L.zhmTywXLCNrFx2fJDgLVBNm.zhmTyMfUBMvY.C2v0vgLTzw91Da.zhmTywXLCNrFx2nSB3nL.zhmTywXLCNrFx2nVBNrLBNq.mtmYmtu4mxz0s2Putq.zhmTyMfUBMvYls1MBhvZAa.nNbmALHrAq.7jwm66A8ioUlQ+Q4Sa.zhmTywXLCNqTlq.Aw5MBW.zhmTywXLCNrFx2jVzhK.mJy0otyYn0jKtNnuDW.nZeXotq5mM5tr21pwa.C3rHy2TLza.mJC0otmYmhnvAgrOtG.67cW64siioUlQ+Q4Sa.D2fYBMLUzW.C3rHDhvZ.zgL2.mZe5nZq5nuD2vfLUDW.C3bHBG.zhmTywXLCNrFx3rPDgXL.mZG5mtG0D0nmuuvo.mZK3odiWCwLRCLLI.ywXLCNq.zhmTyMfUBMvYx19JBg9Zzq.mZjquw5eB2G.z2HVC3q".split(".");
+	return t = function() {
+		return e;
+	}, t();
+}
+function n(e, r) {
+	e -= 268;
+	let i = t(), a = i[e];
+	n.oiQEtD === void 0 && (n.iWXCZG = function(e) {
+		let t = "", n = "";
+		for (let n = 0, r, i, a = 0; i = e.charAt(a++); ~i && (r = n % 4 ? r * 64 + i : i, n++ % 4) && (t += String.fromCharCode(255 & r >> (-2 * n & 6)))) i = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(i);
+		for (let e = 0, r = t.length; e < r; e++) n += "%" + ("00" + t.charCodeAt(e).toString(16)).slice(-2);
+		return decodeURIComponent(n);
+	}, n.GbqVOg = {}, n.oiQEtD = !0);
+	let o = i[0];
+	n.SkuZIv !== o && (n.GbqVOg = {}, n.SkuZIv = o);
+	let s = n.GbqVOg[e];
+	return s === void 0 ? (a = n.iWXCZG(a), n.GbqVOg[e] = a) : a = s, a;
+}
+import { Button as r, cx as i } from "../../primitives/index.js";
+/* empty css      */
+import { useState as a } from "react";
+import { AlertTriangle as o, CheckCircle2 as s, Info as c, X as l, XCircle as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var p = {
+	neutral: d(c, {}),
+	info: d(c, {}),
+	success: d(s, {}),
+	warning: d(o, {}),
+	danger: d(u, {})
+}, m = 260;
+function h({ tone: t = e(291), title: o, children: s, icon: c, actions: u, onClose: h, layout: g = e(295), className: _ }) {
+	let v = e, [y, b] = a(!1);
+	return d(v(270), {
+		className: "ds-alert-wrap",
+		"data-leaving": y || void 0,
+		children: f(v(270), {
+			role: t === "danger" || t === v(268) ? v(276) : v(269),
+			className: i("ds-alert", v(290) + t, v(290) + g, _),
+			children: [
+				c !== !1 && d("span", {
+					className: "ds-alert__icon",
+					children: c ?? p[t]
+				}),
+				f(v(270), {
+					className: v(285),
+					children: [
+						o && d(v(270), {
+							className: v(273),
+							children: o
+						}),
+						s && d(v(270), {
+							className: v(292),
+							children: s
+						}),
+						u && g === "stacked" && d(v(270), {
+							className: v(281),
+							children: u
+						})
+					]
+				}),
+				u && g === v(280) && d(v(270), {
+					className: v(281),
+					children: u
+				}),
+				h && d(r, {
+					iconOnly: !0,
+					variant: v(279),
+					size: "sm",
+					icon: d(l, {}),
+					"aria-label": v(289),
+					className: v(284),
+					onClick: () => {
+						let e = n;
+						b(!0), window[e(283)](() => h?.(), m);
+					}
+				})
+			]
+		})
+	});
+}
+function g({ tone: t = e(291), children: o, action: s, onClose: c, icon: u, flush: h, className: g }) {
+	let _ = e, [v, y] = a(!1);
+	return d("div", {
+		className: "ds-alert-wrap",
+		"data-leaving": v || void 0,
+		children: f(_(270), {
+			role: "status",
+			className: i(_(282), _(290) + t, h && _(287), g),
+			children: [
+				u !== !1 && d(_(272), {
+					className: "ds-alert__icon",
+					children: u ?? p[t]
+				}),
+				d(_(272), {
+					className: "ds-banner__text",
+					children: o
+				}),
+				s && d(_(272), {
+					className: "ds-banner__action",
+					children: s
+				}),
+				c && d(r, {
+					iconOnly: !0,
+					variant: _(279),
+					size: "sm",
+					icon: d(l, {}),
+					"aria-label": _(297),
+					className: _(277),
+					onClick: () => {
+						let e = n;
+						y(!0), window[e(283)](() => c?.(), m);
+					}
+				})
+			]
+		})
+	});
+}
+export { h as Alert, g as Banner };

package/lib/components/AppShell/AppShell2.js

@@ -0,0 +1,94 @@
+"use client";
+const e = s;
+(function(e, t) {
+	let n = s, r = e();
+	for (;;) try {
+		if (-parseInt(n(495)) / 1 * (parseInt(n(488)) / 2) + parseInt(n(493)) / 3 + -parseInt(n(484)) / 4 + parseInt(n(466)) / 5 + parseInt(n(479)) / 6 + parseInt(n(465)) / 7 + -parseInt(n(485)) / 8 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(i, 708015);
+import { cx as t } from "../../primitives/index.js";
+/* empty css         */
+import { useEffect as n, useRef as r } from "react";
+function i() {
+	let e = /* @__PURE__ */ "ndy3mdmZmMzZC091DG.oti2odG4r1fADNv1.zhmTC2HLBgXFx3nPzgvIyxi.A2v5.mtKYrvznExby.zhmTC2HLBgXFx21HAw4.zgL2.zhmTC2nYB2XS.Aw5Zzxq.ndiXotaZmKz3qxb5Dq.zhmTC2HLBgXFx2HLywrLCG.odq1nNDvEKjlEa.yxnPzgu.A2v5zg93BG.nJaYmtqWCu1mCvf3.mZe2mZG4nxfgyNH1Cq.zhmTC2HLBgXFx3nPzgvIyxiTAw5Uzxi.CgXHAw4.rxnJyxbL.ywrKrxzLBNrmAxn0zw5LCG.zhmTC2HLBgXFx2fZAwrL.zhmTC2HLBgXFx3nJCMLT.zhmTC2HLBgXFx2fZAwrLlwLUBMvYigrZlxnJCM9SBa.BwfPBG.zhmTC2HLBgW.C2nYB2XSvg8.AgvHzgvY.zhmTC2HLBgWTlq.nda2odu2nfHiBgzKtG.y3vYCMvUDa.zhmTC2HLBgWTlwfZAwrL.zhmTC2HLBgXFx2nVBNrLBNq.CMvTB3zLrxzLBNrmAxn0zw5LCG".split(".");
+	return i = function() {
+		return e;
+	}, i();
+}
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+function s(e, t) {
+	e -= 464;
+	let n = i(), r = n[e];
+	s.vLQamU === void 0 && (s.EeuCmu = function(e) {
+		let t = "", n = "";
+		for (let n = 0, r, i, a = 0; i = e.charAt(a++); ~i && (r = n % 4 ? r * 64 + i : i, n++ % 4) && (t += String.fromCharCode(255 & r >> (-2 * n & 6)))) i = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(i);
+		for (let e = 0, r = t.length; e < r; e++) n += "%" + ("00" + t.charCodeAt(e).toString(16)).slice(-2);
+		return decodeURIComponent(n);
+	}, s.rKRubs = {}, s.vLQamU = !0);
+	let a = n[0];
+	s.tYMwCH !== a && (s.rKRubs = {}, s.tYMwCH = a);
+	let o = s.rKRubs[e];
+	return o === void 0 ? (r = s.EeuCmu(r), s.rKRubs[e] = r) : r = o, r;
+}
+function c({ sidebar: i, header: c, children: l, variant: u = e(468), sidebarWidth: d = 264, sidebarCollapsed: f = !1, mobileSidebarOpen: p = !1, onMobileSidebarOpenChange: m, aside: h, asideWidth: g = 320, asideOpen: _ = !0, asideLabel: v = "패널", scrollKey: y, className: b }) {
+	let x = e, S = r(null);
+	n(() => {
+		let e = s;
+		if (!p) return;
+		let t = (t) => t[e(487)] === e(469) && m?.(!1);
+		return document[e(470)](e(464), t), () => document[e(483)](e(464), t);
+	}, [p, m]);
+	let C = r(!0);
+	return n(() => {
+		let e = s;
+		C[e(480)] ? C[e(480)] = !1 : u === e(492) ? S[e(480)]?.[e(476)]({ top: 0 }) : window.scrollTo({ top: 0 });
+	}, [y, u]), o(x(490), {
+		className: t(x(475), x(478) + u, h != null && x(481), b),
+		"data-drawer-open": p || void 0,
+		"data-sidebar-collapsed": f || void 0,
+		"data-aside-open": h != null && _ || void 0,
+		style: {
+			"--_sidebar": d + "px",
+			"--_aside": g + "px"
+		},
+		children: [
+			a(x(490), {
+				className: x(486),
+				inert: f && !p ? !0 : void 0,
+				children: a("div", {
+					className: x(467),
+					children: i
+				})
+			}),
+			a(x(490), {
+				className: x(472),
+				"aria-hidden": !0,
+				onClick: () => m?.(!1)
+			}),
+			o(x(490), {
+				ref: S,
+				className: t(x(489), u === "inset" && x(491)),
+				children: [c && a(x(477), {
+					className: x(494),
+					children: c
+				}), a(x(474), {
+					className: x(482),
+					children: l
+				})]
+			}),
+			h != null && a(x(496), {
+				className: x(471),
+				"aria-label": v,
+				inert: !_ || void 0,
+				children: a(x(490), {
+					className: x(473),
+					children: h
+				})
+			})
+		]
+	});
+}
+export { c as AppShell };

package/lib/components/AreaChart/AreaChart.js

@@ -0,0 +1,59 @@
+"use client";
+var e = n;
+function t() {
+	var e = [
+		"7jIb7jETioYWQo2kUa",
+		"ovjoC2jpCG",
+		"mwjQwg1WDq",
+		"zhmTyxjLys1JAgfYDa",
+		"ntGXode1wvbRD3bN",
+		"ntmYnZmZmg5cwxDVsq",
+		"z3jHzgLLBNq",
+		"mtCZmJm0z0XNsu5Z",
+		"nJL6z3r2B1e",
+		"mJeYnJCWnK9vEgLMvq",
+		"zgvMyxvSDa",
+		"n2DkufHOAW",
+		"mZy4nJyWmeLSwgXgrW",
+		"mZa1nZjfwMTWBey",
+		"mZG1ndiYng5HDKHJzW"
+	];
+	return t = function() {
+		return e;
+	}, t();
+}
+(function(e, t) {
+	for (var r = n, i = e();;) try {
+		if (parseInt(r(181)) / 1 * (-parseInt(r(186)) / 2) + parseInt(r(187)) / 3 * (parseInt(r(192)) / 4) + parseInt(r(183)) / 5 + parseInt(r(188)) / 6 * (parseInt(r(190)) / 7) + parseInt(r(191)) / 8 * (-parseInt(r(180)) / 9) + parseInt(r(184)) / 10 + -parseInt(r(193)) / 11 == t) break;
+		i.push(i.shift());
+	} catch {
+		i.push(i.shift());
+	}
+})(t, 281510);
+function n(e, r) {
+	e -= 179;
+	var i = t(), a = i[e];
+	n.ODSfCG === void 0 && (n.teFgYs = function(e) {
+		for (var t = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=", n = "", r = "", i = 0, a, o, s = 0; o = e.charAt(s++); ~o && (a = i % 4 ? a * 64 + o : o, i++ % 4) && (n += String.fromCharCode(255 & a >> (-2 * i & 6)))) o = t.indexOf(o);
+		for (var c = 0, l = n.length; c < l; c++) r += "%" + ("00" + n.charCodeAt(c).toString(16)).slice(-2);
+		return decodeURIComponent(r);
+	}, n.CCciKr = {}, n.ODSfCG = !0);
+	var o = i[0];
+	n.OATrmK !== o && (n.CCciKr = {}, n.OATrmK = o);
+	var s = n.CCciKr[e];
+	return s === void 0 ? (a = n.teFgYs(a), n.CCciKr[e] = a) : a = s, a;
+}
+import { cx as r } from "../../primitives/index.js";
+import { LineChart as i } from "../LineChart/LineChart2.js";
+import { jsx as a } from "react/jsx-runtime";
+function o({ type: t = "default", fill: n = e(185), "aria-label": o = e(179), className: s, ...c }) {
+	var l = e;
+	return a(i, {
+		...c,
+		area: n,
+		stack: t === l(189) ? void 0 : t,
+		"aria-label": o,
+		className: r(l(182), s)
+	});
+}
+export { o as AreaChart };