@iamfiro/design 0.3.2 → 0.3.5

package/agents/INDEX.md

@@ -18,7 +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)
+- **SocialLoginButton** — Google · Apple · Microsoft 계정으로 로그인하는 버튼. → [`agents/social-login-button/AGENTS.md`](social-login-button/AGENTS.md)
 - **Toolbar** — 버튼 · 토글 · ToggleGroup · 메뉴 트리거를 한 줄로 묶는 WAI-ARIA 툴바. → [`agents/toolbar/AGENTS.md`](toolbar/AGENTS.md)
 
 ## 라벨 & 배지

package/agents/app-shell/AGENTS.md

@@ -23,7 +23,9 @@ import { AppShell, Sidebar, SidebarGroup, SidebarItem } from '@iamfiro/design'
 | `children` (필수) | `ReactNode` |  | 본문. |
 | `variant` | `'plain' \| 'inset'` | `'plain'` | plain: 흰 한 장, 창 전체가 스크롤. inset: 회색 바탕 위 흰 패널로 떠 있는 본문, 패널 안에서만 스크롤. |
 | `sidebarWidth` | `number` | `264` | 넓은 화면에서 사이드바 너비(px). 드로어는 최대 화면의 86%. |
-| `sidebarCollapsed` | `boolean` | `false` | 넓은 화면에서 사이드바를 접어요. 사이드바가 밀려 나가며 본문이 넓어져요. |
+| `sidebarCollapse` | `'hide' \| 'rail'` | `'hide'` | 접었을 때 모양. hide: 밀려 나가며 본문이 넓어져요. rail: 아이콘만 남은 64px 줄이 되고 이름은 툴팁으로 보여요(넓은 화면만). |
+| `sidebarIndent` | `number` | `0` | inset에서 사이드바 내용 왼쪽에 더하는 여백(px). 메뉴보다 넓은 사이드바를 쓸 때. 드로어에서는 0이에요. |
+| `sidebarCollapsed` | `boolean` | `false` | 넓은 화면에서 사이드바를 접어요. 접는 모양은 sidebarCollapse. |
 | `mobileSidebarOpen` | `boolean` | `false` | 좁은 화면(≤ 900px)에서 드로어 열림 여부. |
 | `onMobileSidebarOpenChange` | `(open: boolean) => void` |  | 바깥 클릭이나 Esc로 닫힐 때 false로 호출돼요. |
 | `aside` | `ReactNode` |  | 오른쪽 패널(도구, 상세 정보). 패널 안만 따로 스크롤되고, 900px 이하에선 숨어요. |
@@ -182,6 +184,102 @@ export default function Example() {
 }
 ```
 
+### 아이콘만 남기고 접기 (rail)
+
+sidebarCollapse="rail"이면 접었을 때 사이드바가 아이콘 줄(64px)로 좁아지고, 항목 이름은 마우스를 올리면 오른쪽에 툴팁으로 보여요. 그룹 제목과 배지는 숨어요. 접기 버튼은 사이드바 머리 오른쪽에 두고, 접힌 동안 머리 · 발에는 아이콘 버튼과 아바타만 남겨요(사이드바 안 컴포넌트는 useSidebarRail()로 접힘을 알 수 있어요). 900px 이하에선 드로어로 바뀌어요.
+
+```tsx
+import { useState, type CSSProperties } from 'react'
+import { FolderKanban, House, Inbox, PanelLeft, Settings } from 'lucide-react'
+import { Avatar, Badge, Button, IconTile, Inline, SelectorButton, Text, Tooltip, AppShell, Breadcrumb, Card, Sidebar, SidebarGroup, SidebarItem } from '@iamfiro/design'
+
+const MENU = [
+  { id: 'home', label: '홈', icon: <House /> },
+  { id: 'inbox', label: '받은 편지함', icon: <Inbox />, badge: <Badge tone="accent">3</Badge> },
+  { id: 'projects', label: '프로젝트', icon: <FolderKanban /> },
+]
+
+export default function Example() {
+  const [page, setPage] = useState('home')
+  const [collapsed, setCollapsed] = useState(false)
+  const current = MENU.find((m) => m.id === page)!
+
+  const toggle = (
+    <Tooltip content={collapsed ? '사이드바 펼치기' : '사이드바 접기'} side="right">
+      <Button
+        iconOnly
+        variant="ghost"
+        size="sm"
+        icon={<PanelLeft />}
+        aria-label={collapsed ? '사이드바 펼치기' : '사이드바 접기'}
+        onClick={() => setCollapsed((c) => !c)}
+      />
+    </Tooltip>
+  )
+
+  const sidebar = (
+    <Sidebar
+      header={
+        collapsed ? (
+          toggle
+        ) : (
+          <Inline justify="between" gap={1} wrap={false}>
+            <SelectorButton
+              leading={
+                <IconTile tone="surface" size={24}>
+                  A
+                </IconTile>
+              }
+              label="Acme"
+            />
+            {toggle}
+          </Inline>
+        )
+      }
+      footer={
+        collapsed ? (
+          <Avatar name="김민지" size={28} />
+        ) : (
+          <SelectorButton block leading={<Avatar name="김민지" size={28} tooltip={false} />} label="김민지" description="minji@acme.kr" chevron="updown" />
+        )
+      }
+    >
+      <SidebarGroup>
+        {MENU.map((m) => (
+          <SidebarItem key={m.id} icon={m.icon} badge={m.badge} active={m.id === page} onClick={() => setPage(m.id)}>
+            {m.label}
+          </SidebarItem>
+        ))}
+      </SidebarGroup>
+      <SidebarGroup label="워크스페이스">
+        <SidebarItem icon={<Settings />} active={page === 'settings'} onClick={() => setPage('settings')}>
+          설정
+        </SidebarItem>
+      </SidebarGroup>
+    </Sidebar>
+  )
+
+  // 미리보기용 상자예요. 실제 앱에서는 AppShell을 최상단에 두면 화면 전체를 채워요.
+  return (
+    <Card padding="none" style={{ width: '100%', maxWidth: 760, height: 420, overflow: 'hidden', contain: 'layout paint', '--shell-height': '420px' } as CSSProperties}>
+      <AppShell
+        variant="inset"
+        sidebar={sidebar}
+        header={<Breadcrumb items={[{ label: 'Acme', onClick: () => setPage('home') }, { label: current?.label ?? '설정' }]} />}
+        sidebarWidth={220}
+        sidebarCollapsed={collapsed}
+        sidebarCollapse="rail"
+        scrollKey={page}
+      >
+        <div style={{ padding: '8px 20px 24px' }}>
+          <Text variant="heading-md">{current?.label ?? '설정'}</Text>
+        </div>
+      </AppShell>
+    </Card>
+  )
+}
+```
+
 ### 모바일 드로어
 
 좁은 화면에서는 mobileSidebarOpen / onMobileSidebarOpenChange로 드로어를 열고 닫아요. 바깥의 어두운 영역을 누르거나 Esc를 누르면 닫혀요. 항목을 고른 뒤에도 직접 닫아 주세요.

package/agents/brand-icon/AGENTS.md

@@ -25,7 +25,7 @@ import { BrandIcon, BRAND_NAMES } from '@iamfiro/design'
 
 ### 로고 목록
 
-지금 들어 있는 로고 10개(Gmail, Slack, ClickUp, Figma, GitHub, HubSpot, Notion, Google Calendar, Google, Apple). Apple은 한 색 로고라 글자색을 따라요. 새 앱은 BrandIcon.tsx의 MARKS에 추가해요.
+지금 들어 있는 로고 11개(Gmail, Slack, ClickUp, Figma, GitHub, HubSpot, Notion, Google Calendar, Google, Apple, Microsoft). Apple은 한 색 로고라 글자색을 따라요. 새 앱은 BrandIcon.tsx의 MARKS에 추가해요.
 
 ```tsx
 import { BRAND_NAMES, BrandIcon, Inline, Stack, Text } from '@iamfiro/design'

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

@@ -2,7 +2,7 @@
 
 > 버튼 & 링크 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
 
-Google · Apple 계정으로 로그인하는 버튼. 각 브랜드 가이드대로 Google은 흰 바탕 + 옅은 윤곽 + 색 G 로고, Apple은 검정 바탕 + 흰 로고예요. 문구는 action으로 고르고, 나머지 props는 Button과 같아요.
+Google · Apple · Microsoft 계정으로 로그인하는 버튼. 각 브랜드 가이드대로 Google · Microsoft는 흰 바탕 + 옅은 윤곽 + 색 로고, Apple은 검정 바탕 + 흰 로고예요. 문구는 action으로 고르고, 나머지 props는 Button과 같아요.
 
 ```tsx
 import { SocialLoginButton } from '@iamfiro/design'
@@ -16,7 +16,7 @@ variant · icon은 provider가 정해요. 나머지 props(size · block · loadi
 
 | prop | 타입 | 기본값 | 설명 |
 | --- | --- | --- | --- |
-| `provider` (필수) | `'google' \| 'apple'` |  | 로그인 제공자. 색 · 로고 · 이름이 정해져요. |
+| `provider` (필수) | `'google' \| 'apple' \| 'microsoft'` |  | 로그인 제공자. 색 · 로고 · 이름이 정해져요. |
 | `action` | `'continue' \| 'signin' \| 'signup'` | `'continue'` | "Google로 계속하기" · "Google로 로그인" · "Google로 가입하기". |
 | `children` | `ReactNode` |  | 문구를 직접 바꿀 때. |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 높이 28 / 34 / 40px. 로고는 14 / 16 / 18px. |
@@ -30,7 +30,7 @@ variant · icon은 provider가 정해요. 나머지 props(size · block · loadi
 
 ### 기본
 
-로그인 화면에선 block으로 폭을 채워 위아래로 쌓아요. 순서는 보통 Google → Apple.
+로그인 화면에선 block으로 폭을 채워 위아래로 쌓아요. 순서는 보통 Google → Apple → Microsoft.
 
 ```tsx
 import { SocialLoginButton, Stack } from '@iamfiro/design'
@@ -40,6 +40,7 @@ export default function Example() {
     <Stack gap={2} style={{ width: 320 }}>
       <SocialLoginButton provider="google" size="lg" block />
       <SocialLoginButton provider="apple" size="lg" block />
+      <SocialLoginButton provider="microsoft" size="lg" block />
     </Stack>
   )
 }

package/lib/components/Accordion/Accordion2.js

@@ -1,20 +1,20 @@
 "use client";
-const e = f;
+function e() {
+	let t = /* @__PURE__ */ "ntiWodqYEvzICufP.zhmTzgLZy2XVC3vYzq.y2XVC2vZDa.sg9Tzq.C3bHBG.lxjLz2LVBG.zhmTzgLZy2XVC3vYzv9FDhjPz2DLCG.AxnpCgvU.lxrYAwDNzxi.A2v5.zhmTzgLZy2XVC3vYzv9Fy29UDgvUDa.Aw5KzxHpzG.AxntzwXLy3rLza.qxjYB3DeB3DU.Dg9Nz2XL.BgvUz3rO.zgL2.zhmTzgLZy2XVC3vYzv9FzM9Sza.nti3nta4vLHcy0fm.zhmTzgLZy2XVC3vYzv9FzgvZyW.mZe3nZa1EuPAsxL4.qwnJB3jKAw9UsxrLBsbTDxn0igjLihvZzwqGAw5ZAwrLidXby2nVCMrPB24+.zgvMyxvSDa.zhmTzgLZy2XVC3vYzs0TzMX1C2G.m3LhDe9bEa.zhmTzgLZy2XVC3vYzv9FAw5Uzxi.zhmTywnJB3jKAw9U.ChjLDMvUDerLzMf1Bhq.mJGYmZjfBgfpv0q.mZaXrfHWCLnk.rw5K.ywn0AxzLrwXLBwvUDa.zM9JDxm.zhmTzgLZy2XVC3vYzs0TAw5SAw5L.y3vYCMvUDa.zhmTzgLZy2XVC3vYzv9FAgvHzgLUzW.Aw5SAw5L.mti5nJq3mfnmvuDRCa.zMLSDgvY.mty4nJG0nfjkCe1PsW.yNv0Dg9U.oxDZELv4zG.ndaYntG3mePHEwnZsW.qxjYB3DvCa.zhmTzgLZy2XVC3vYzv9FAwnVBG.CgXHAw4".split(".");
+	return e = function() {
+		return t;
+	}, e();
+}
+const t = _;
 (function(e, t) {
-	let n = f, r = e();
+	let n = _, r = e();
 	for (;;) try {
-		if (parseInt(n(390)) / 1 * (parseInt(n(427)) / 2) + -parseInt(n(401)) / 3 + -parseInt(n(411)) / 4 + -parseInt(n(396)) / 5 + parseInt(n(428)) / 6 * (-parseInt(n(419)) / 7) + parseInt(n(405)) / 8 + parseInt(n(417)) / 9 == t) break;
+		if (parseInt(n(476)) / 1 + parseInt(n(474)) / 2 + parseInt(n(480)) / 3 * (parseInt(n(449)) / 4) + -parseInt(n(493)) / 5 + parseInt(n(456)) / 6 + -parseInt(n(485)) / 7 * (parseInt(n(484)) / 8) + parseInt(n(451)) / 9 * (-parseInt(n(452)) / 10) == t) break;
 		r.push(r.shift());
 	} catch {
 		r.push(r.shift());
 	}
-})(t, 911233);
-function t() {
-	let e = /* @__PURE__ */ "zhmTzgLZy2XVC3vYzv9FBgfIzwW.zhmTzgLZy2XVC3vYzv9Fy2HLDNjVBG.y3vYCMvUDa.lxrYAwDNzxi.mtC1otuZmLfTAe15qW.qwnJB3jKAw9UsxrLBsbTDxn0igjLihvZzwqGAw5ZAwrLidXby2nVCMrPB24+.ywn0AxzLrwXLBwvUDa.A2v5.sg9Tzq.rw5K.mJq1otq4mdrpB0DsAMO.CgXHAw4.mZvqDKj2DNC.zMLSDgvY.zhmTywnJB3jKAw9U.Aw5KzxHpzG.zhmTzgLZy2XVC3vYzv9Fy29UDgvUDa.zhmTzgLZy2XVC3vYzv9FzM9Sza.zhmTywnJB3jKAw9Uls0.zgvMyxvSDa.odeXnZCWuMTisgPM.mty2ntK3oefgrKrcuG.zgL2.uhjVDMLKzxi.C3bHBG.lMrZlwrPC2nSB3n1CMvFx3rYAwDNzxi6BM90kdPKAxnHyMXLzcK.y2XVC2vZDa.zhmTzgLZy2XVC3vYzs0TzMX1C2G.zhmTzgLZy2XVC3vYzv9FzgvZyW.AxnpCgvU.CxvLCNLtzwXLy3rVCKfSBa.m29KrgXosq.qxjYB3DeB3DU.zhmTzgLZy2XVC3vYzv9FAwnVBG.zhmTzgLZy2XVC3vYzq.Aw5SAw5L.zhmTzgLZy2XVC3vYzv9FAgvHzgLUzW.nJi0ndyWnwDXwfHQsa.lMrZlwfJy29YzgLVBG.Dg9Nz2XL.AxntzwXLy3rLza.zhmTzgLZy2XVC3vYzv9FDgv4Da.mtiZmZq1nLrArgj0Aq.zhmTzgLZy2XVC3vYzs0TAw5SAw5L.zhmTzgLZy2XVC3vYzv9FDhjPz2DLCG.lxjLz2LVBG.mZu5mJC0nfLjwLfQBa.BgvUz3rO".split(".");
-	return t = function() {
-		return e;
-	}, t();
-}
+})(e, 276349);
 import { useControllableState as n } from "../../hooks/useControllableState.js";
 import { cx as r } from "../../primitives/index.js";
 import { useSelection as i } from "../../hooks/useSelection.js";
@@ -22,114 +22,114 @@ import { useSelection as i } from "../../hooks/useSelection.js";
 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(e, n) {
-	e -= 388;
-	let r = t(), i = r[e];
-	f.PHwuGE === void 0 && (f.zxlDlk = 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);
-	}, f.pLAvGE = {}, f.PHwuGE = !0);
-	let a = r[0];
-	f.eJJbrN !== a && (f.pLAvGE = {}, f.eJJbrN = a);
-	let o = f.pLAvGE[e];
-	return o === void 0 ? (i = f.zxlDlk(i), f.pLAvGE[e] = i) : i = o, i;
-}
-function p({ open: e, defaultOpen: t = !1, onOpenChange: r, ...i }) {
+function f({ open: e, defaultOpen: t = !1, onOpenChange: r, ...i }) {
 	let [a, o] = n(e, t, r);
-	return u(m, {
+	return u(p, {
 		...i,
 		open: a,
 		onToggle: () => o(!a)
 	});
 }
-function m({ label: t, description: n, icon: i, disabled: a, open: o, onToggle: c, children: f, variant: p = e(426), iconTone: m = "default", className: h }) {
-	let g = e, _ = s(), v = p === g(394) ? g(429) : "h3";
-	return d(g(429), {
-		className: r(g(393), p === g(394) && g(402), h),
+function p({ label: e, description: n, icon: i, disabled: a, open: o, onToggle: c, children: f, variant: p = t(478), iconTone: m = t(478), className: h }) {
+	let g = t, _ = s(), v = p === g(492) ? g(472) : "h3";
+	return d(g(472), {
+		className: r(g(457), p === "inline" && g(489), h),
 		"data-open": o || void 0,
 		"data-disabled": a || void 0,
 		children: [u(v, {
-			className: g(395),
-			children: d("button", {
-				type: "button",
-				id: _ + g(410),
+			className: g(491),
+			children: d(g(450), {
+				type: g(450),
+				id: _ + g(464),
 				"aria-expanded": o,
-				"aria-controls": _ + g(404),
+				"aria-controls": _ + g(461),
 				disabled: a,
-				className: g(403),
+				className: g(462),
 				onClick: c,
 				children: [
-					i && u(g(431), {
-						className: g(392),
-						"data-tone": m === g(426) ? void 0 : m,
+					i && u(g(460), {
+						className: g(454),
+						"data-tone": m === g(478) ? void 0 : m,
 						children: i
 					}),
-					d(g(431), {
-						className: g(400),
-						children: [u(g(431), {
-							className: g(407),
-							children: t
-						}), n && u(g(431), {
-							className: g(435),
+					d("span", {
+						className: "ds-disclosure__text",
+						children: [u(g(460), {
+							className: "ds-disclosure__label",
+							children: e
+						}), n && u(g(460), {
+							className: g(475),
 							children: n
 						})]
 					}),
 					u(l, {
-						className: g(408),
+						className: "ds-disclosure__chevron",
 						"aria-hidden": !0
 					})
 				]
 			})
-		}), u(g(429), {
-			id: _ + g(404),
+		}), u(g(472), {
+			id: _ + g(461),
 			role: "region",
-			"aria-labelledby": _ + "-trigger",
-			className: g(424),
+			"aria-labelledby": _ + g(464),
+			className: g(473),
 			inert: !o || void 0,
-			children: u(g(429), {
-				className: "ds-disclosure__inner",
-				children: u(g(429), {
-					className: g(423),
+			children: u(g(472), {
+				className: g(481),
+				children: u(g(472), {
+					className: g(466),
 					children: f
 				})
 			})
 		})]
 	});
 }
-var h = a(null);
-function g({ variant: t = e(418), children: n, className: a, style: o, ...s }) {
-	let l = e, d = i(s), p = c(null);
-	return u(h[l(430)], {
+var m = a(null);
+function h({ variant: e = t(455), children: n, className: a, style: o, ...s }) {
+	let l = t, d = i(s), f = c(null);
+	return u(m.Provider, {
 		value: {
-			isOpen: d[l(399)],
-			toggle: d[l(398)]
+			isOpen: d[l(468)],
+			toggle: d[l(470)]
 		},
 		children: u("div", {
-			ref: p,
-			className: r(l(421), l(425) + t, a),
+			ref: f,
+			className: r(l(482), "ds-accordion--" + e, a),
 			style: o,
 			onKeyDown: (e) => {
-				let t = f, n = [...p[t(409)]?.[t(389)](t(432)) ?? []][t(420)]((e) => e[t(433)](t(397)) === p.current), r = n[t(422)](document[t(413)]);
+				let t = _, n = [...f[t(490)]?.querySelectorAll(".ds-disclosure__trigger:not(:disabled)") ?? []][t(448)]((e) => e[t(458)](".ds-accordion") === f[t(490)]), r = n[t(467)](document[t(487)]);
 				if (r < 0) return;
 				let i;
-				e[t(414)] === t(391) ? i = n[(r + 1) % n[t(406)]] : e.key === "ArrowUp" ? i = n[(r - 1 + n.length) % n[t(406)]] : e.key === t(415) ? i = n[0] : e.key === t(416) && (i = n[n[t(406)] - 1]), i && (e.preventDefault(), i.focus());
+				e[t(465)] === t(469) ? i = n[(r + 1) % n[t(471)]] : e[t(465)] === t(453) ? i = n[(r - 1 + n[t(471)]) % n[t(471)]] : e[t(465)] === t(459) ? i = n[0] : e.key === t(486) && (i = n[n[t(471)] - 1]), i && (e[t(483)](), i[t(488)]());
 			},
 			children: n
 		})
 	});
 }
-function _({ value: t, title: n, flush: r, ...i }) {
-	let a = e, s = o(h);
-	if (!s) throw Error(a(412));
-	return u(m, {
+function g({ value: e, title: n, flush: r, ...i }) {
+	let a = t, s = o(m);
+	if (!s) throw Error(a(477));
+	return u(p, {
 		...i,
-		className: r ? a(434) : void 0,
+		className: r ? a(479) : void 0,
 		label: n,
-		open: s[a(388)](t),
-		onToggle: () => s[a(398)](t)
+		open: s[a(463)](e),
+		onToggle: () => s.toggle(e)
 	});
 }
-g.Item = _;
-export { g as Accordion, _ as AccordionItem, p as Collapsible };
+function _(t, n) {
+	t -= 448;
+	let r = e(), i = r[t];
+	_.lYVWHG === void 0 && (_.rfJnFD = 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);
+	}, _.wdJysf = {}, _.lYVWHG = !0);
+	let a = r[0];
+	_.lkhHOe !== a && (_.wdJysf = {}, _.lkhHOe = a);
+	let o = _.wdJysf[t];
+	return o === void 0 ? (i = _.rfJnFD(i), _.wdJysf[t] = i) : i = o, i;
+}
+h.Item = g;
+export { h as Accordion, g as AccordionItem, f as Collapsible };

package/lib/components/ActionBar/ActionBar2.js

@@ -1,60 +1,62 @@
 "use client";
-var e = r;
+var e = i;
 (function(e, t) {
-	for (var n = r, i = e();;) try {
-		if (-parseInt(n(158)) / 1 + parseInt(n(164)) / 2 * (parseInt(n(161)) / 3) + parseInt(n(159)) / 4 * (-parseInt(n(168)) / 5) + -parseInt(n(160)) / 6 + -parseInt(n(154)) / 7 + parseInt(n(157)) / 8 * (-parseInt(n(155)) / 9) + -parseInt(n(167)) / 10 * (-parseInt(n(165)) / 11) == t) break;
-		i.push(i.shift());
+	for (var n = i, r = e();;) try {
+		if (parseInt(n(423)) / 1 * (-parseInt(n(412)) / 2) + parseInt(n(415)) / 3 + parseInt(n(414)) / 4 * (-parseInt(n(421)) / 5) + parseInt(n(425)) / 6 * (parseInt(n(426)) / 7) + parseInt(n(418)) / 8 + parseInt(n(424)) / 9 * (parseInt(n(422)) / 10) + -parseInt(n(411)) / 11 * (parseInt(n(420)) / 12) == t) break;
+		r.push(r.shift());
 	} catch {
-		i.push(i.shift());
+		r.push(r.shift());
 	}
-})(i, 412273);
+})(r, 544928);
 import { cx as t } from "../../primitives/index.js";
 /* empty css          */
 import { jsx as n } from "react/jsx-runtime";
-function r(e, t) {
-	e -= 153;
-	var n = i(), a = n[e];
-	r.gIgryb === void 0 && (r.RpVNAJ = 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);
-	}, r.dcqamE = {}, r.gIgryb = !0);
-	var o = n[0];
-	r.NMjFRW !== o && (r.dcqamE = {}, r.NMjFRW = o);
-	var s = r.dcqamE[e];
-	return s === void 0 ? (a = r.RpVNAJ(a), r.dcqamE[e] = a) : a = s, a;
-}
-function i() {
+function r() {
 	var e = [
-		"mtaWnZu2ne9VuwPmyW",
-		"mJGYodK4mKjStNrQvG",
-		"owzArvDZyq",
-		"y2vUDgvY",
-		"zhmTywn0Aw9UlwjHCG",
-		"ndy4nZCWt3P6Ew1s",
-		"mtmWmtnuzg9xthq",
-		"zgL2",
-		"mtmYmJbKCw9wv2q",
-		"nwjbBgf5EG",
-		"zhmTywn0Aw9UlwjHCL9Fz3jVDxa",
-		"ndmZmtaZm0jWC2Tvwa",
-		"odq1ntC3qvLfBuXb",
+		"mtC2ody4ohjNAvnkza",
 		"zhmTywn0Aw9UlwjHCI0TC3rPy2T5",
-		"mJrrqKPTuvm",
-		"mJmWodqYA0nhBNzU"
+		"ntq3nZa3nKzvzg1MBW",
+		"mtb4s2nOzwm",
+		"mtCWCgfkAKHe",
+		"mZK4yvbssLrU",
+		"nZq1mMTxBe5qqG",
+		"mZa2v0zJthv5",
+		"mtm0odGZAgrxrhDY",
+		"zgL2",
+		"zMLLBgrZzxq",
+		"mtf3uMvfz0u",
+		"oty0wvPgteD2",
+		"zhmTywn0Aw9UlwjHCG",
+		"mtGYnZaWog9IquXXua",
+		"mJy2nJqZmfj0uhrmBW",
+		"y2vUDgvY",
+		"zhmTywn0Aw9UlwjHCI0T"
 	];
-	return i = function() {
+	return r = function() {
 		return e;
-	}, i();
+	}, r();
+}
+function i(e, t) {
+	e -= 411;
+	var n = r(), a = n[e];
+	i.BcUaRa === void 0 && (i.rQxFGv = 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.OSJWZG = {}, i.BcUaRa = !0);
+	var o = n[0];
+	i.JXxIfL !== o && (i.OSJWZG = {}, i.JXxIfL = o);
+	var s = i.OSJWZG[e];
+	return s === void 0 ? (a = i.rQxFGv(a), i.OSJWZG[e] = a) : a = s, a;
 }
-function a({ children: r, align: i = e(162), sticky: a = !0, pending: o, "aria-label": s, className: c, style: l }) {
+function a({ children: r, align: i = e(416), sticky: a = !0, pending: o, "aria-label": s, className: c, style: l }) {
 	var u = e;
-	return n(u(166), {
-		className: t(u(163), "ds-action-bar--" + i, a && u(156), c),
+	return n(u(427), {
+		className: t(u(413), u(417) + i, a && u(419), c),
 		"data-pending": o || void 0,
 		style: l,
-		children: n("fieldset", {
-			className: u(153),
+		children: n(u(428), {
+			className: "ds-action-bar__group",
 			disabled: o,
 			"aria-label": s,
 			"aria-busy": o || void 0,