@iamfiro/design 0.1.0 → 0.3.1

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";
+const e = c;
+(function(e, t) {
+	let n = c, r = e();
+	for (;;) try {
+		if (-parseInt(n(306)) / 1 * (-parseInt(n(311)) / 2) + -parseInt(n(294)) / 3 * (parseInt(n(282)) / 4) + -parseInt(n(310)) / 5 * (-parseInt(n(287)) / 6) + -parseInt(n(297)) / 7 * (parseInt(n(305)) / 8) + parseInt(n(293)) / 9 + -parseInt(n(295)) / 10 * (-parseInt(n(292)) / 11) + -parseInt(n(285)) / 12 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(g, 693264);
+import { useControllableState as t } from "../../hooks/useControllableState.js";
+import { cx as n } from "../../primitives/index.js";
+import { useSelection as r } from "../../hooks/useSelection.js";
+/* empty css          */
+import { createContext as i, useContext as a, useId as o, useRef as s } from "react";
+function c(e, t) {
+	e -= 272;
+	let n = g(), r = n[e];
+	c.wgdSiw === void 0 && (c.yTHQDg = 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);
+	}, c.fLGrYU = {}, c.wgdSiw = !0);
+	let i = n[0];
+	c.XsACOT !== i && (c.fLGrYU = {}, c.XsACOT = i);
+	let a = c.fLGrYU[e];
+	return a === void 0 ? (r = c.yTHQDg(r), c.fLGrYU[e] = r) : r = a, r;
+}
+import { ChevronDown as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+function f({ open: e, defaultOpen: n = !1, onOpenChange: r, ...i }) {
+	let [a, o] = t(e, n, r);
+	return u(p, {
+		...i,
+		open: a,
+		onToggle: () => o(!a)
+	});
+}
+function p({ label: e, description: t, icon: r, disabled: i, open: a, onToggle: s, children: f, variant: p = "default", iconTone: m = "default", className: h }) {
+	let g = c, _ = o(), v = p === "inline" ? "div" : "h3";
+	return d(g(301), {
+		className: n(g(314), p === g(317) && g(298), h),
+		"data-open": a || void 0,
+		"data-disabled": i || void 0,
+		children: [u(v, {
+			className: g(307),
+			children: d("button", {
+				type: g(283),
+				id: _ + g(309),
+				"aria-expanded": a,
+				"aria-controls": _ + g(284),
+				disabled: i,
+				className: g(308),
+				onClick: s,
+				children: [
+					r && u("span", {
+						className: g(280),
+						"data-tone": m === g(286) ? void 0 : m,
+						children: r
+					}),
+					d(g(304), {
+						className: g(279),
+						children: [u("span", {
+							className: g(288),
+							children: e
+						}), t && u("span", {
+							className: "ds-disclosure__desc",
+							children: t
+						})]
+					}),
+					u(l, {
+						className: g(312),
+						"aria-hidden": !0
+					})
+				]
+			})
+		}), u(g(301), {
+			id: _ + g(284),
+			role: g(278),
+			"aria-labelledby": _ + "-trigger",
+			className: g(291),
+			inert: !a || void 0,
+			children: u("div", {
+				className: g(290),
+				children: u(g(301), {
+					className: g(296),
+					children: f
+				})
+			})
+		})]
+	});
+}
+var m = i(null);
+function h({ variant: t = e(299), children: i, className: a, style: o, ...l }) {
+	let d = e, f = r(l), p = s(null);
+	return u(m[d(289)], {
+		value: {
+			isOpen: f[d(300)],
+			toggle: f[d(273)]
+		},
+		children: u("div", {
+			ref: p,
+			className: n("ds-accordion", d(313) + t, a),
+			style: o,
+			onKeyDown: (e) => {
+				let t = c, n = [...p[t(303)]?.[t(281)](".ds-disclosure__trigger:not(:disabled)") ?? []].filter((e) => e[t(275)](".ds-accordion") === p[t(303)]), r = n[t(302)](document.activeElement);
+				if (r < 0) return;
+				let i;
+				e.key === "ArrowDown" ? i = n[(r + 1) % n[t(277)]] : e[t(315)] === t(276) ? i = n[(r - 1 + n[t(277)]) % n.length] : e[t(315)] === t(272) ? i = n[0] : e[t(315)] === "End" && (i = n[n[t(277)] - 1]), i && (e.preventDefault(), i[t(274)]());
+			},
+			children: i
+		})
+	});
+}
+function g() {
+	let e = /* @__PURE__ */ "mM1vvhvXEa.zhmTzgLZy2XVC3vYzv9Fy2HLDNjVBG.zhmTywnJB3jKAw9Uls0.zhmTzgLZy2XVC3vYzq.A2v5.qwnJB3jKAw9UsxrLBsbTDxn0igjLihvZzwqGAw5ZAwrLidXby2nVCMrPB24+.Aw5SAw5L.sg9Tzq.Dg9Nz2XL.zM9JDxm.y2XVC2vZDa.qxjYB3DvCa.BgvUz3rO.CMvNAw9U.zhmTzgLZy2XVC3vYzv9FDgv4Da.zhmTzgLZy2XVC3vYzv9FAwnVBG.CxvLCNLtzwXLy3rVCKfSBa.mJu2yuH4EM11.yNv0Dg9U.lxjLz2LVBG.nJCYmte0menPDMz2tG.zgvMyxvSDa.otqYBeLQuK9u.zhmTzgLZy2XVC3vYzv9FBgfIzwW.uhjVDMLKzxi.zhmTzgLZy2XVC3vYzv9FAw5Uzxi.zhmTzgLZy2XVC3vYzv9FzM9Sza.otm1rfLpvKXq.ntaYoti4muHpC2DAyq.mJuZndrYwKroq3y.mtiYmJCWDgTsvw5p.zhmTzgLZy2XVC3vYzv9Fy29UDgvUDa.mtK0nJyWowzPrwflwG.zhmTzgLZy2XVC3vYzs0TAw5SAw5L.CgXHAw4.AxntzwXLy3rLza.zgL2.Aw5KzxHpzG.y3vYCMvUDa.C3bHBG.mJrmwfHUD1y.odKWm3bMrwnzvW.zhmTzgLZy2XVC3vYzv9FAgvHzgLUzW.zhmTzgLZy2XVC3vYzv9FDhjPz2DLCG.lxrYAwDNzxi.mZi1mJvkteXgzhO".split(".");
+	return g = function() {
+		return e;
+	}, g();
+}
+function _({ value: t, title: n, flush: r, ...i }) {
+	let o = e, s = a(m);
+	if (!s) throw Error(o(316));
+	return u(p, {
+		...i,
+		className: r ? "ds-disclosure--flush" : void 0,
+		label: n,
+		open: s.isOpen(t),
+		onToggle: () => s[o(273)](t)
+	});
+}
+h.Item = _;
+export { h as Accordion, _ as AccordionItem, f as Collapsible };

package/lib/components/ActionBar/ActionBar2.js

@@ -0,0 +1,66 @@
+"use client";
+var e = n;
+(function(e, t) {
+	for (var r = n, i = e();;) try {
+		if (parseInt(r(273)) / 1 * (-parseInt(r(267)) / 2) + parseInt(r(270)) / 3 + -parseInt(r(266)) / 4 + -parseInt(r(274)) / 5 * (-parseInt(r(262)) / 6) + parseInt(r(264)) / 7 * (parseInt(r(272)) / 8) + parseInt(r(269)) / 9 * (-parseInt(r(271)) / 10) + parseInt(r(260)) / 11 == t) break;
+		i.push(i.shift());
+	} catch {
+		i.push(i.shift());
+	}
+})(r, 361033);
+import { cx as t } from "../../primitives/index.js";
+function n(e, t) {
+	e -= 258;
+	var i = r(), a = i[e];
+	n.cnnNfB === void 0 && (n.JIdoDC = 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.BbmDXR = {}, n.cnnNfB = !0);
+	var o = i[0];
+	n.DiysCn !== o && (n.BbmDXR = {}, n.DiysCn = o);
+	var s = n.BbmDXR[e];
+	return s === void 0 ? (a = n.JIdoDC(a), n.BbmDXR[e] = a) : a = s, a;
+}
+function r() {
+	var e = [
+		"ndy5vhvOzwnm",
+		"zhmTywn0Aw9UlwjHCI0T",
+		"mtK0mdu4mfvuEe9bDG",
+		"mJyZofzLAufeDq",
+		"zhmTywn0Aw9UlwjHCI0TC3rPy2T5",
+		"nZaXnZiXwuDIs3vn",
+		"mtq0ode0oenuwNvNCa",
+		"mZb1rNb5v20",
+		"nZG4nZjpC0fuAwW",
+		"ntiZBNvkDK15",
+		"nwzPzenzsW",
+		"zgL2",
+		"zhmTywn0Aw9UlwjHCL9Fz3jVDxa",
+		"mZi1mdqZnhjVyLnKuG",
+		"y2vUDgvY",
+		"mtK4nJK1ngLbrMv6rq",
+		"zMLLBgrZzxq"
+	];
+	return r = function() {
+		return e;
+	}, r();
+}
+/* empty css          */
+import { jsx as i } from "react/jsx-runtime";
+function a({ children: n, align: r = e(261), sticky: a = !0, pending: o, "aria-label": s, className: c, style: l }) {
+	var u = e;
+	return i(u(258), {
+		className: t("ds-action-bar", u(265) + r, a && u(268), c),
+		"data-pending": o || void 0,
+		style: l,
+		children: i(u(263), {
+			className: u(259),
+			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 = i;
+(function(e, t) {
+	let n = i, r = e();
+	for (;;) try {
+		if (-parseInt(n(418)) / 1 * (-parseInt(n(400)) / 2) + parseInt(n(398)) / 3 + parseInt(n(422)) / 4 * (-parseInt(n(393)) / 5) + parseInt(n(395)) / 6 + parseInt(n(403)) / 7 + parseInt(n(420)) / 8 * (-parseInt(n(396)) / 9) + -parseInt(n(407)) / 10 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(f, 977308);
+import { Button as t, cx as n } from "../../primitives/index.js";
+/* empty css      */
+import { useState as r } from "react";
+function i(e, t) {
+	e -= 391;
+	let n = f(), r = n[e];
+	i.nbTKfX === void 0 && (i.YBedFN = 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);
+	}, i.bOgwOD = {}, i.nbTKfX = !0);
+	let a = n[0];
+	i.uCBDsV !== a && (i.bOgwOD = {}, i.uCBDsV = a);
+	let o = i.bOgwOD[e];
+	return o === void 0 ? (r = i.YBedFN(r), i.bOgwOD[e] = r) : r = o, r;
+}
+import { AlertTriangle as a, CheckCircle2 as o, Info as s, X as c, XCircle as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+function f() {
+	let e = /* @__PURE__ */ "zhmTywXLCNrFx2fJDgLVBNm.Aw5SAw5L.mteWnZu3otbht2r0sKK.ywXLCNq.C3rHy2TLza.z2HVC3q.zhmTyMfUBMvYls1MBhvZAa.zhmTywXLCNq.zgL2.zhmTyMfUBMvYx19Hy3rPB24.zhmTywXLCNqTlq.zhmTywXLCNrFx2nVBNrLBNq.C2v0vgLTzw91Da.mvP5tNjSwq.C3rHDhvZ.nZG0nZC2AwPlvhnM.zhmTywXLCNqTD3jHCa.ntm0otm2nhjzDhHkvG.zhmTywXLCNrFx3rPDgXL.67cW64siioUlQ+Q4Sa.C3bHBG.Aw5MBW.nwHJqKz6sW.zhmTywXLCNrFx2jVzhK.ntu4odGXnefcwxzTqq.nZj2wgf5AwC.zhmTyMfUBMvY.ndq3nZu3mKzmCw1Krq.zhmTywXLCNrFx2LJB24.odG2nJm0qK9fB1bZ.7jwm66A8ioUlQ+Q4Sa.zhmTywXLCNrFx2nSB3nL.otm3nZG1ohPbBwHSva.D2fYBMLUzW".split(".");
+	return f = function() {
+		return e;
+	}, f();
+}
+var p = {
+	neutral: u(s, {}),
+	info: u(s, {}),
+	success: u(o, {}),
+	warning: u(a, {}),
+	danger: u(l, {})
+}, m = 260;
+function h({ tone: a = e(392), title: o, children: s, icon: l, actions: f, onClose: h, layout: g = e(409), className: _ }) {
+	let v = e, [y, b] = r(!1);
+	return u(v(413), {
+		className: v(421),
+		"data-leaving": y || void 0,
+		children: d("div", {
+			role: a === "danger" || a === v(404) ? v(408) : v(419),
+			className: n(v(412), v(415) + a, "ds-alert--" + g, _),
+			children: [
+				l !== !1 && u(v(391), {
+					className: "ds-alert__icon",
+					children: l ?? p[a]
+				}),
+				d("div", {
+					className: v(416),
+					children: [
+						o && u("div", {
+							className: v(423),
+							children: o
+						}),
+						s && u(v(413), {
+							className: v(394),
+							children: s
+						}),
+						f && g === v(409) && u(v(413), {
+							className: v(405),
+							children: f
+						})
+					]
+				}),
+				f && g === v(406) && u(v(413), {
+					className: "ds-alert__actions",
+					children: f
+				}),
+				h && u(t, {
+					iconOnly: !0,
+					variant: "ghost",
+					size: "sm",
+					icon: u(c, {}),
+					"aria-label": v(401),
+					className: v(402),
+					onClick: () => {
+						let e = i;
+						b(!0), window[e(417)](() => h?.(), m);
+					}
+				})
+			]
+		})
+	});
+}
+function g({ tone: a = e(392), children: o, action: s, onClose: l, icon: f, flush: h, className: g }) {
+	let _ = e, [v, y] = r(!1);
+	return u("div", {
+		className: _(421),
+		"data-leaving": v || void 0,
+		children: d(_(413), {
+			role: _(419),
+			className: n(_(397), _(415) + a, h && _(411), g),
+			children: [
+				f !== !1 && u("span", {
+					className: _(399),
+					children: f ?? p[a]
+				}),
+				u("span", {
+					className: "ds-banner__text",
+					children: o
+				}),
+				s && u(_(391), {
+					className: _(414),
+					children: s
+				}),
+				l && u(t, {
+					iconOnly: !0,
+					variant: _(410),
+					size: "sm",
+					icon: u(c, {}),
+					"aria-label": _(424),
+					className: "ds-banner__close",
+					onClick: () => {
+						let e = i;
+						y(!0), window[e(417)](() => l?.(), m);
+					}
+				})
+			]
+		})
+	});
+}
+export { h as Alert, g as Banner };

package/lib/components/AppShell/AppShell2.js

@@ -0,0 +1,94 @@
+"use client";
+function e(n, r) {
+	n -= 343;
+	let i = t(), a = i[n];
+	e.YxTQky === void 0 && (e.UToKZm = 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);
+	}, e.rQRdQd = {}, e.YxTQky = !0);
+	let o = i[0];
+	e.sxZRsv !== o && (e.rQRdQd = {}, e.sxZRsv = o);
+	let s = e.rQRdQd[n];
+	return s === void 0 ? (a = e.UToKZm(a), e.rQRdQd[n] = a) : a = s, a;
+}
+function t() {
+	let e = /* @__PURE__ */ "A2v5.zhmTC2HLBgWTlq.zhmTC2HLBgWTlwfZAwrL.yxnPzgu.A2v5zg93BG.zhmTC2HLBgXFx21HAw4.odiWmejzq2nmBa.mJqZnZy5rercDwjZ.zhmTC2HLBgXFx2HLywrLCG.nJC5nunPteDZCG.mtmZnJG5mgLqA3z6wG.CgXHAw4.mZq0nZmWzfvtDe5P.Aw5Zzxq.mtCWnJu5nLHnELzUEG.zhmTC2HLBgXFx2nVBNrLBNq.zhmTC2nYB2XS.CMvTB3zLrxzLBNrmAxn0zw5LCG.y3vYCMvUDa.nJGWmdG4AK5eD1vk.nwjNA0PgEa.zgL2.rxnJyxbL.zhmTC2HLBgXFx3nJCMLT.zhmTC2HLBgXFx3nPzgvIyxi.odm5nZqXCw9rrLnK.C2nYB2XSvg8.zhmTC2HLBgXFx2fZAwrLlwLUBMvYigrZlxnJCM9SBa".split(".");
+	return t = function() {
+		return e;
+	}, t();
+}
+const n = e;
+(function(t, n) {
+	let r = e, i = t();
+	for (;;) try {
+		if (parseInt(r(351)) / 1 + -parseInt(r(356)) / 2 + parseInt(r(363)) / 3 + parseInt(r(358)) / 4 * (parseInt(r(364)) / 5) + parseInt(r(354)) / 6 + parseInt(r(369)) / 7 + parseInt(r(350)) / 8 * (-parseInt(r(353)) / 9) == n) break;
+		i.push(i.shift());
+	} catch {
+		i.push(i.shift());
+	}
+})(t, 293652);
+import { cx as r } from "../../primitives/index.js";
+/* empty css         */
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+function c({ sidebar: t, header: c, children: l, variant: u = n(355), 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 = n, S = a(null);
+	i(() => {
+		let t = e;
+		if (!p) return;
+		let n = (e) => e[t(344)] === t(366) && m?.(!1);
+		return document.addEventListener(t(348), n), () => document[t(361)]("keydown", n);
+	}, [p, m]);
+	let C = a(!0);
+	return i(() => {
+		let t = e;
+		C[t(362)] ? C.current = !1 : u === t(357) ? S[t(362)]?.[t(370)]({ top: 0 }) : window.scrollTo({ top: 0 });
+	}, [y, u]), s(x(365), {
+		className: r("ds-shell", x(345) + u, h != null && x(346), 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: [
+			o(x(365), {
+				className: x(368),
+				inert: f && !p ? !0 : void 0,
+				children: o("div", {
+					className: "ds-shell__sidebar-inner",
+					children: t
+				})
+			}),
+			o("div", {
+				className: x(367),
+				"aria-hidden": !0,
+				onClick: () => m?.(!1)
+			}),
+			s(x(365), {
+				ref: S,
+				className: r(x(349), u === x(357) && x(360)),
+				children: [c && o("header", {
+					className: x(352),
+					children: c
+				}), o("main", {
+					className: x(359),
+					children: l
+				})]
+			}),
+			h != null && o(x(347), {
+				className: "ds-shell__aside",
+				"aria-label": v,
+				inert: !_ || void 0,
+				children: o(x(365), {
+					className: x(343),
+					children: h
+				})
+			})
+		]
+	});
+}
+export { c as AppShell };

package/lib/components/AreaChart/AreaChart.js

@@ -0,0 +1,59 @@
+"use client";
+function e() {
+	var t = [
+		"oeHwAgHjtW",
+		"zhmTyxjLys1JAgfYDa",
+		"mtbOwMf0tMW",
+		"ndC4ntmWouPqse1jDG",
+		"mJeYndy1uMviv1LA",
+		"mZjSC01TDuO",
+		"mtu1nJK2mvjMu2LgsG",
+		"zgvMyxvSDa",
+		"mtC4qKf5D0LX",
+		"nZeWnZC3mxDOwMTUDq",
+		"odmYndK0C3npAfvn",
+		"mJa0ntfxy1rOs2K",
+		"z3jHzgLLBNq",
+		"7jIb7jETioYWQo2kUa",
+		"mJCYmJqZsgzvzhzg"
+	];
+	return e = function() {
+		return t;
+	}, e();
+}
+var t = i;
+(function(e, t) {
+	for (var n = i, r = e();;) try {
+		if (parseInt(n(424)) / 1 + parseInt(n(433)) / 2 * (parseInt(n(421)) / 3) + -parseInt(n(430)) / 4 * (parseInt(n(429)) / 5) + parseInt(n(435)) / 6 + -parseInt(n(431)) / 7 * (parseInt(n(425)) / 8) + -parseInt(n(428)) / 9 * (-parseInt(n(427)) / 10) + -parseInt(n(434)) / 11 == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(e, 340878);
+import { cx as n } from "../../primitives/index.js";
+import { LineChart as r } from "../LineChart/LineChart2.js";
+function i(t, n) {
+	t -= 421;
+	var r = e(), a = r[t];
+	i.bDGNpM === void 0 && (i.DUUSKg = 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.QZyBRK = {}, i.bDGNpM = !0);
+	var o = r[0];
+	i.mfQywK !== o && (i.QZyBRK = {}, i.mfQywK = o);
+	var s = i.QZyBRK[t];
+	return s === void 0 ? (a = i.DUUSKg(a), i.QZyBRK[t] = a) : a = s, a;
+}
+import { jsx as a } from "react/jsx-runtime";
+function o({ type: e = t(432), fill: i = t(422), "aria-label": o = t(423), className: s, ...c }) {
+	var l = t;
+	return a(r, {
+		...c,
+		area: i,
+		stack: e === "default" ? void 0 : e,
+		"aria-label": o,
+		className: n(l(426), s)
+	});
+}
+export { o as AreaChart };