@iamfiro/design 0.0.0-stage → 0.3.0

package/agents/typography/AGENTS.md

@@ -0,0 +1,396 @@
+# Typography
+
+> 파운데이션 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+글자는 역할(role)로 골라요. tokens.css의 --type-* 토큰이 역할마다 크기·줄 높이·굵기·자간을 정하고, Text · Heading이 그 값을 그대로 써요. 컨테이너에 data-density를 붙이면 그 안의 본문·라벨·헤딩이 함께 촘촘해지거나 여유로워져요. 마크다운처럼 이미 만들어진 HTML은 Prose로 감싸요.
+
+```tsx
+import { Heading, Prose, Text, type TextVariant } from '@iamfiro/design'
+```
+
+## API
+
+### Text
+
+나머지 props는 렌더되는 요소로 전달돼요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `variant` | `TextVariant` | `'body-md'` | 역할. display-lg/md/sm · heading-xl/lg/md/sm/xs · body-lg/md/sm/xs · label-lg/md/sm/xs · caption · overline · number-xl/lg/md/sm · code. |
+| `as` | `ElementType` |  | 렌더할 요소. 생략하면 역할에 맞게(display → h1, heading → h2, body → p, code → code, 나머지 → span). |
+| `tone` | `TextTone` | `'default'` | 'default' \| 'secondary' \| 'tertiary' \| 'disabled' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'inverse' \| 'inherit' |
+| `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold'` |  | 역할의 굵기를 덮어써요. |
+| `align` | `'start' \| 'center' \| 'end'` |  | 정렬. |
+| `truncate` | `boolean` |  | 한 줄 말줄임. |
+| `lineClamp` | `number` |  | N줄까지 보여주고 말줄임. |
+| `numeric` | `boolean` |  | 고정폭 숫자(tabular-nums). number-* 역할은 항상 켜져 있어요. |
+| `wrap` | `'balance' \| 'pretty'` |  | balance는 줄 길이를 고르게(제목), pretty는 마지막 줄에 단어 하나만 남지 않게(본문). |
+
+### Heading
+
+Text의 나머지 props(tone, weight, align, truncate …)를 모두 받아요. as · variant는 받지 않아요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | 문서 구조 레벨(h1–h6). 1 → heading-xl, 2 → heading-lg, 3 → heading-md, 4 → heading-sm, 5·6 → heading-xs. |
+| `size` | `TextVariant` |  | 레벨과 상관없이 보이는 크기. 예: level={2} size="display-sm". |
+| `wrap` | `'balance' \| 'pretty'` | `'balance'` | 줄 나눔 방식. |
+
+### Prose
+
+h1–h4, p, ul/ol, blockquote, code, pre, table, hr, a를 정돈해요. 나머지 props는 div로 전달돼요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 블록 전체 글자 크기. 제목과 간격도 함께 커지고 작아져요. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 타입 스케일
+
+디스플레이 · 헤딩 · 본문 · 라벨 · 작은 글씨 · 숫자 · 코드. 디스플레이는 화면 폭에 따라 유동적으로 커져요.
+
+```tsx
+import { Text, type TextVariant } from '@iamfiro/design'
+
+const SCALE: Array<{ group: string; roles: Array<[TextVariant, string]> }> = [
+  {
+    group: '디스플레이',
+    roles: [
+      ['display-lg', '팀의 모든 일을 한곳에서'],
+      ['display-md', '이번 달 매출 12% 성장'],
+      ['display-sm', '아직 프로젝트가 없어요'],
+    ],
+  },
+  {
+    group: '헤딩',
+    roles: [
+      ['heading-xl', '프로젝트 설정'],
+      ['heading-lg', '결제 및 구독'],
+      ['heading-md', '알림 채널'],
+      ['heading-sm', '최근 활동'],
+      ['heading-xs', '팀원 6명'],
+    ],
+  },
+  {
+    group: '본문',
+    roles: [
+      ['body-lg', '변경사항은 저장하는 즉시 모든 팀원에게 반영돼요.'],
+      ['body-md', '변경사항은 저장하는 즉시 모든 팀원에게 반영돼요.'],
+      ['body-sm', '변경사항은 저장하는 즉시 모든 팀원에게 반영돼요.'],
+      ['body-xs', '변경사항은 저장하는 즉시 모든 팀원에게 반영돼요.'],
+    ],
+  },
+  {
+    group: '라벨',
+    roles: [
+      ['label-lg', '변경사항 저장'],
+      ['label-md', '팀원 초대'],
+      ['label-sm', '필터 초기화'],
+      ['label-xs', '베타'],
+    ],
+  },
+  {
+    group: '작은 글씨 · 숫자 · 코드',
+    roles: [
+      ['caption', '마지막 수정 2분 전 · 김민지'],
+      ['overline', 'Workspace'],
+      ['number-xl', '₩12,480,000'],
+      ['number-lg', '98.6%'],
+      ['number-md', '1,284건'],
+      ['number-sm', '00:42:17'],
+      ['code', 'npm i @lumen/ui'],
+    ],
+  },
+]
+
+export default function Example() {
+  return (
+    <div style={{ width: '100%', display: 'grid', gap: 36 }}>
+      {SCALE.map((group) => (
+        <section key={group.group} style={{ display: 'grid', gap: 14 }}>
+          <Text as="h4" variant="overline" tone="tertiary">
+            {group.group}
+          </Text>
+          {group.roles.map(([variant, sample]) => (
+            <div key={variant} style={{ display: 'grid', gridTemplateColumns: '96px minmax(0, 1fr)', alignItems: 'baseline', gap: 16 }}>
+              <Text as="code" variant="label-xs" tone="tertiary">
+                {variant}
+              </Text>
+              <Text as="div" variant={variant} truncate>
+                {sample}
+              </Text>
+            </div>
+          ))}
+        </section>
+      ))}
+    </div>
+  )
+}
+```
+
+### 톤
+
+글자 색은 tone으로. 진한 정도(default · secondary · tertiary · disabled)와 상태색, 어두운 배경용 inverse가 있어요.
+
+```tsx
+import { Text, type TextTone } from '@iamfiro/design'
+
+const TONES: Array<[TextTone, string]> = [
+  ['default', '본문과 제목'],
+  ['secondary', '보조 설명'],
+  ['tertiary', '메타 정보 · 날짜'],
+  ['disabled', '사용할 수 없음'],
+  ['accent', '링크 · 강조'],
+  ['success', '결제 완료'],
+  ['warning', '검토 필요'],
+  ['danger', '연결 실패'],
+]
+
+export default function Example() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 140px)', gap: '20px 24px' }}>
+      {TONES.map(([tone, sample]) => (
+        <div key={tone} style={{ display: 'grid', gap: 4 }}>
+          <Text variant="label-md" tone={tone}>
+            {sample}
+          </Text>
+          <Text as="code" variant="caption" tone="tertiary">
+            {tone}
+          </Text>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+### 말줄임
+
+truncate는 한 줄, lineClamp는 N줄에서 말줄임표로 잘라요. 부모에 폭이 있어야 해요.
+
+```tsx
+import { Text } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ width: 340, display: 'grid', gap: 24 }}>
+      <div style={{ display: 'grid', gap: 4 }}>
+        <Text variant="caption" tone="tertiary">
+          truncate
+        </Text>
+        <Text variant="label-md" truncate>
+          2026년 3분기 이사회 보고서 최종본 — 재무, 인사, 제품 로드맵, 다음 분기 채용 계획 포함.pdf
+        </Text>
+      </div>
+      <div style={{ display: 'grid', gap: 4 }}>
+        <Text variant="caption" tone="tertiary">
+          lineClamp=2
+        </Text>
+        <Text tone="secondary" lineClamp={2}>
+          이번 업데이트로 대시보드 로딩 속도가 두 배 빨라졌고, 모든 리포트를 한 번의 클릭으로 CSV로 내보낼 수 있어요. 권한 설정도 팀 단위로
+          세분화되어 관리자가 프로젝트별로 접근 범위를 정할 수 있어요.
+        </Text>
+      </div>
+    </div>
+  )
+}
+```
+
+### 숫자 정렬
+
+number-* 역할은 자동으로, 다른 역할은 numeric을 켜면 고정폭 숫자를 써요. 값이 바뀌어도 폭이 흔들리지 않아요.
+
+```tsx
+import { useEffect, useState } from 'react'
+import { Text } from '@iamfiro/design'
+
+export default function Example() {
+  const [visitors, setVisitors] = useState(18204)
+
+  useEffect(() => {
+    const id = window.setInterval(() => setVisitors((v) => v + Math.floor(Math.random() * 37)), 150)
+    return () => window.clearInterval(id)
+  }, [])
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 200px)', gap: 32 }}>
+      <div style={{ display: 'grid', gap: 4 }}>
+        <Text variant="label-sm" tone="secondary">
+          오늘 방문자
+        </Text>
+        <Text variant="number-lg">{visitors.toLocaleString('ko-KR')}</Text>
+        <Text variant="caption" tone="tertiary">
+          number-lg · 자동으로 고정폭
+        </Text>
+      </div>
+      <div style={{ display: 'grid', gap: 4 }}>
+        <Text variant="label-sm" tone="secondary">
+          평균 체류 시간
+        </Text>
+        <Text variant="heading-lg" numeric>
+          {(visitors / 97).toFixed(2)}초
+        </Text>
+        <Text variant="caption" tone="tertiary">
+          heading-lg + numeric
+        </Text>
+      </div>
+    </div>
+  )
+}
+```
+
+### 제목 레벨과 크기
+
+level은 문서 구조(h1–h6), size는 보이는 크기. 구조는 지키면서 모양만 바꿀 수 있어요. 줄 길이는 기본으로 균형 있게 나눠요.
+
+```tsx
+import { Heading, Text } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ width: 420, display: 'grid', gap: 28 }}>
+      <div style={{ display: 'grid', gap: 10 }}>
+        <Heading level={1}>프로젝트 설정</Heading>
+        <Heading level={2}>결제 및 구독</Heading>
+        <Heading level={3}>알림 채널</Heading>
+        <Heading level={4}>최근 활동</Heading>
+        <Heading level={5}>팀원 6명</Heading>
+      </div>
+      <div style={{ display: 'grid', gap: 6 }}>
+        <Text variant="caption" tone="tertiary">
+          {'level={2} size="display-sm"'}
+        </Text>
+        <Heading level={2} size="display-sm">
+          팀원이 초대를 수락하면 바로 프로젝트에 참여할 수 있어요
+        </Heading>
+      </div>
+    </div>
+  )
+}
+```
+
+### 밀도
+
+데이터가 많은 화면은 compact, 읽는 화면은 comfortable. 컨테이너 단위로 바꿔요.
+
+```tsx
+import { useState } from 'react'
+import { Heading, Text, Card, CardBody, ToggleGroup, ToggleGroupItem } from '@iamfiro/design'
+
+type Density = 'compact' | 'default' | 'comfortable'
+
+export default function Example() {
+  const [density, setDensity] = useState<Density | null>('default')
+
+  return (
+    <div style={{ width: 400, display: 'grid', gap: 20, justifyItems: 'start' }}>
+      <ToggleGroup type="single" required value={density} onValueChange={setDensity} aria-label="밀도">
+        <ToggleGroupItem value="compact">촘촘하게</ToggleGroupItem>
+        <ToggleGroupItem value="default">기본</ToggleGroupItem>
+        <ToggleGroupItem value="comfortable">여유있게</ToggleGroupItem>
+      </ToggleGroup>
+      <Card data-density={density === 'default' ? undefined : density} style={{ width: '100%' }}>
+        <CardBody>
+          <div style={{ display: 'grid', gap: 12 }}>
+            <Heading level={3}>결제 수단</Heading>
+            <Text tone="secondary">등록된 카드로 매월 1일에 자동 결제돼요. 언제든 변경할 수 있어요.</Text>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Text variant="label-md">기본 카드</Text>
+              <Text variant="body-sm" tone="tertiary" numeric>
+                신한 •••• 4821
+              </Text>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Text variant="label-md">다음 결제</Text>
+              <Text variant="body-sm" tone="tertiary" numeric>
+                11월 1일 · ₩29,000
+              </Text>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  )
+}
+```
+
+### 인라인 코드 칩
+
+문장 안의 명령 · 값은 Text variant="code"(<code>)로. 회색 채움 칩에 고정폭 글자가 들어가요. 문장 맨 앞 "/명령" 칩에도 그대로 써요.
+
+```tsx
+import { Stack, Text } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={3} style={{ maxWidth: 420 }}>
+      <Text variant="body-md">
+        <Text variant="code">/수정</Text> 소개 문단을 두 문장으로 줄여 주세요.
+      </Text>
+      <Text variant="body-sm" tone="secondary">
+        설정 파일의 <Text variant="code">theme</Text> 값을 <Text variant="code">light</Text>로 바꾸면 밝은 화면으로 돌아가요.
+      </Text>
+    </Stack>
+  )
+}
+```
+
+### Prose
+
+마크다운으로 만든 문서, 변경 로그, 도움말, AI 답변 같은 HTML을 그대로 정돈해 보여줘요.
+
+```tsx
+import { Prose } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Prose style={{ width: '100%', maxWidth: 640 }}>
+      <h2>Lumen 2.5 업데이트</h2>
+      <p>
+        이번 버전은 <strong>대시보드 성능</strong>과 <a href="#permissions">권한 관리</a>에 집중했어요. 기존 설정은 그대로 유지돼요.
+      </p>
+      <h3>새로워진 점</h3>
+      <ul>
+        <li>대시보드 로딩이 평균 2배 빨라졌어요.</li>
+        <li>
+          모든 리포트를 <code>CSV</code>로 내보낼 수 있어요.
+        </li>
+        <li>팀 단위 권한을 지원해요.</li>
+      </ul>
+      <blockquote>업데이트 후 처음 접속하면 새 기능 안내가 한 번 표시돼요.</blockquote>
+      <pre>
+        <code>npm i @lumen/ui@2.5.0</code>
+      </pre>
+      <table>
+        <thead>
+          <tr>
+            <th>플랜</th>
+            <th>월 요금</th>
+            <th>팀원</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>스타터</td>
+            <td>₩9,000</td>
+            <td>3명</td>
+          </tr>
+          <tr>
+            <td>팀</td>
+            <td>₩29,000</td>
+            <td>20명</td>
+          </tr>
+          <tr>
+            <td>엔터프라이즈</td>
+            <td>문의</td>
+            <td>무제한</td>
+          </tr>
+        </tbody>
+      </table>
+    </Prose>
+  )
+}
+```

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 };