klun-ui 0.1.20 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/{chunk-JFRI333P.js → chunk-T3IFNMYU.js} +80 -7
  3. package/dist/chunk-T3IFNMYU.js.map +1 -0
  4. package/dist/{chunk-XNBVAUVT.cjs → chunk-UMR3IWCQ.cjs} +80 -7
  5. package/dist/chunk-UMR3IWCQ.cjs.map +1 -0
  6. package/dist/index.cjs +158 -158
  7. package/dist/index.d.cts +17 -3
  8. package/dist/index.d.ts +17 -3
  9. package/dist/index.js +1 -1
  10. package/dist/styles.css +56 -0
  11. package/dist/templates/index.cjs +89 -89
  12. package/dist/templates/index.js +1 -1
  13. package/package.json +19 -12
  14. package/dist/chunk-JFRI333P.js.map +0 -1
  15. package/dist/chunk-XNBVAUVT.cjs.map +0 -1
package/dist/templates/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkXNBVAUVT_cjs = require('../chunk-XNBVAUVT.cjs');
3
+ var chunkUMR3IWCQ_cjs = require('../chunk-UMR3IWCQ.cjs');
4
4
  require('../chunk-TPGAXYFU.cjs');
5
5
  var react = require('react');
6
6
  var jsxRuntime = require('react/jsx-runtime');
@@ -72,13 +72,13 @@ function TopBar({ title, subtitle }) {
72
72
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
73
73
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
74
74
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: title }),
75
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "gray", size: "small", children: "Live" })
75
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "gray", size: "small", children: "Live" })
76
76
  ] }),
77
77
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: subtitle })
78
78
  ] }),
79
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
80
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
81
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New transfer" })
79
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
80
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
81
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New transfer" })
82
82
  ] });
83
83
  }
84
84
  function OverviewScreen() {
@@ -104,24 +104,24 @@ function OverviewScreen() {
104
104
  ];
105
105
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32, display: "flex", flexDirection: "column", gap: 24 }, children: [
106
106
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
107
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
108
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }), children: "Export" })
107
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
108
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }), children: "Export" })
109
109
  ] }),
110
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 18, children: [
110
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 18, children: [
111
111
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
112
112
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: `var(--klun-state-${s.tint}-lighter)`, color: `var(--klun-state-${s.tint}-base)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.icon }) }),
113
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: s.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: s.delta })
113
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: s.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: s.delta })
114
114
  ] }),
115
115
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: s.label }),
116
116
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: s.value })
117
117
  ] }, s.label)) }),
118
118
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16, alignItems: "start" }, children: [
119
- /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 0, children: [
119
+ /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 0, children: [
120
120
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", borderBottom: "1px solid var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
121
121
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Recent transactions" }),
122
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "ghost", size: "xsmall", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }), children: "View all" })
122
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "ghost", size: "xsmall", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }), children: "View all" })
123
123
  ] }),
124
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Tabs, { value: tab, onChange: setTab, items: [{ value: "all", label: "All" }, { value: "income", label: "Income" }, { value: "expense", label: "Expenses" }] }) }),
124
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Tabs, { value: tab, onChange: setTab, items: [{ value: "all", label: "All" }, { value: "income", label: "Income" }, { value: "expense", label: "Expenses" }] }) }),
125
125
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: tx.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderTop: i ? "1px solid var(--klun-stroke-soft-200)" : "none" }, children: [
126
126
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 38, height: 38, borderRadius: "var(--klun-radius-lg)", background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: t.icon }) }),
127
127
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -132,12 +132,12 @@ function OverviewScreen() {
132
132
  t.date
133
133
  ] })
134
134
  ] }),
135
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
135
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
136
136
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 92, textAlign: "right", font: "var(--klun-text-label-sm)", color: t.amt[0] === "+" ? "var(--klun-state-success-base)" : "var(--klun-text-strong-950)" }, children: t.amt })
137
137
  ] }, i)) })
138
138
  ] }),
139
139
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
140
- /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
140
+ /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
141
141
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--klun-static-static-white)" }, children: [
142
142
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", opacity: 0.7 }, children: "Virtual card" }),
143
143
  /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-visa-line", style: { fontSize: 24 } })
@@ -148,12 +148,12 @@ function OverviewScreen() {
148
148
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "09 / 28" })
149
149
  ] })
150
150
  ] }),
151
- /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 20, children: [
151
+ /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 20, children: [
152
152
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
153
153
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Monthly budget" }),
154
154
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "$11,240 / $16,000" })
155
155
  ] }),
156
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.ProgressBar, { value: 70 }) }),
156
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ProgressBar, { value: 70 }) }),
157
157
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }, children: budget.map(([l, p, c]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
158
158
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-state-${c}-base)` } }),
159
159
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: l }),
@@ -172,46 +172,46 @@ function SettingsScreen() {
172
172
  const [m, setM] = react.useState(false);
173
173
  const Field = ({ label, children, hint, required }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "220px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--klun-stroke-soft-200)" }, children: [
174
174
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
175
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Label, { required, children: label }),
175
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Label, { required, children: label }),
176
176
  hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: hint }) : null
177
177
  ] }),
178
178
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 420 }, children })
179
179
  ] });
180
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 24, children: [
180
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 24, children: [
181
181
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
182
182
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 64, height: 64, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-feature-lighter)", color: "var(--klun-state-feature-base)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-title-h5)" }, children: "AT" }),
183
183
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
184
184
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
185
185
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Arthur Taylor" }),
186
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
186
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
187
187
  ] }),
188
188
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "arthur@alignui.com" })
189
189
  ] }),
190
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-upload-2-line" }), children: "Change photo" })
190
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-upload-2-line" }), children: "Change photo" })
191
191
  ] }),
192
192
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
193
- /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Input, { defaultValue: "Arthur Taylor" }) }),
194
- /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Input, { type: "email", defaultValue: "arthur@alignui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
195
- /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Select, { defaultValue: "finance", children: [
193
+ /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Arthur Taylor" }) }),
194
+ /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { type: "email", defaultValue: "arthur@alignui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
195
+ /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Select, { defaultValue: "finance", children: [
196
196
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "finance", children: "Finance lead" }),
197
197
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "admin", children: "Administrator" }),
198
198
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "member", children: "Member" })
199
199
  ] }) }),
200
200
  /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Notifications", hint: "How we reach you.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
201
201
  /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
202
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Switch, { checked: n, onChange: setN }),
202
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: n, onChange: setN }),
203
203
  " Email notifications"
204
204
  ] }),
205
205
  /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
206
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Switch, { checked: m, onChange: setM }),
206
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: m, onChange: setM }),
207
207
  " Marketing updates"
208
208
  ] })
209
209
  ] }) })
210
210
  ] }),
211
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Divider, { style: { margin: "8px 0 20px" } }),
211
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Divider, { style: { margin: "8px 0 20px" } }),
212
212
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
213
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
214
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "primary", children: "Save changes" })
213
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
214
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", children: "Save changes" })
215
215
  ] })
216
216
  ] }) });
217
217
  }
@@ -338,7 +338,7 @@ function AIChatView({ messages, busy, userInitials, onSuggest }) {
338
338
  Bubble,
339
339
  {
340
340
  from: m.from,
341
- avatar: m.from === "me" ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Avatar, { size: "32", initials: userInitials, color: "purple" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }) }),
341
+ avatar: m.from === "me" ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Avatar, { size: "32", initials: userInitials, color: "purple" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }) }),
342
342
  children: m.text
343
343
  },
344
344
  i
@@ -457,10 +457,10 @@ function AIAssistantTemplate() {
457
457
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
458
458
  /* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 24px", borderBottom: "1px solid var(--klun-stroke-soft-200)" }, children: [
459
459
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "New chat" }),
460
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
460
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
461
461
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
462
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
463
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
462
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
463
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
464
464
  ] }),
465
465
  /* @__PURE__ */ jsxRuntime.jsx(AIChatView, { messages, busy, userInitials: user.initials, onSuggest: ask }),
466
466
  /* @__PURE__ */ jsxRuntime.jsx(AIComposer, { onSend: ask, busy })
@@ -598,7 +598,7 @@ function AgentSidebar({ sessions, activeId, onSelect, onNew, user }) {
598
598
  font: "var(--klun-text-label-sm)"
599
599
  },
600
600
  children: [
601
- c.state ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.StatusDot, { tone: DOT_TONE[c.state], size: "sm", pulse: c.state === "running" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-chat-1-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)", flexShrink: 0 } }),
601
+ c.state ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.StatusDot, { tone: DOT_TONE[c.state], size: "sm", pulse: c.state === "running" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-chat-1-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)", flexShrink: 0 } }),
602
602
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: c.title })
603
603
  ]
604
604
  },
@@ -747,7 +747,7 @@ function ThinkingBlock({ block }) {
747
747
  }
748
748
  var STEP_ICON = {
749
749
  done: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-checkbox-circle-fill", style: { color: "var(--klun-state-success-base)" } }),
750
- active: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Spinner, { size: "sm", color: "var(--klun-primary-base)" }),
750
+ active: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Spinner, { size: "sm", color: "var(--klun-primary-base)" }),
751
751
  todo: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-checkbox-blank-circle-line", style: { color: "var(--klun-icon-soft-400)" } })
752
752
  };
753
753
  function PlanBlock({ block }) {
@@ -815,7 +815,7 @@ function ToolBlock({ block }) {
815
815
  children: block.name
816
816
  }
817
817
  ),
818
- block.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Spinner, { size: "xs", color: "var(--klun-state-warning-base)" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.StatusDot, { tone: tone.dot, size: "sm" }),
818
+ block.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Spinner, { size: "xs", color: "var(--klun-state-warning-base)" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.StatusDot, { tone: tone.dot, size: "sm" }),
819
819
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: tone.label }),
820
820
  /* @__PURE__ */ jsxRuntime.jsx(Chevron, { open })
821
821
  ] }),
@@ -887,7 +887,7 @@ function AgentTurn({ msg }) {
887
887
  }
888
888
  function UserTurn({ msg, initials }) {
889
889
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row-reverse", gap: 12, alignItems: "flex-start" }, children: [
890
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Avatar, { size: "32", initials, color: "purple" }),
890
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Avatar, { size: "32", initials, color: "purple" }),
891
891
  /* @__PURE__ */ jsxRuntime.jsx(
892
892
  "div",
893
893
  {
@@ -969,7 +969,7 @@ function AgentThread({ messages, userInitials, agentName, suggestions, onSuggest
969
969
  ) }) });
970
970
  }
971
971
  function AgentRunBadge({ busy }) {
972
- return busy ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "orange", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-loader-4-line", style: { animation: "klun-agent-spin .9s linear infinite" } }), children: "Working" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line" }), children: "Idle" });
972
+ return busy ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "orange", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-loader-4-line", style: { animation: "klun-agent-spin .9s linear infinite" } }), children: "Working" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line" }), children: "Idle" });
973
973
  }
974
974
  function AgentComposer({ onSend, onStop, busy, toolsOn, onToggleTools }) {
975
975
  const [text, setText] = react.useState("");
@@ -1412,8 +1412,8 @@ function AgentChatTemplate() {
1412
1412
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: title }),
1413
1413
  /* @__PURE__ */ jsxRuntime.jsx(AgentRunBadge, { busy }),
1414
1414
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
1415
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
1416
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
1415
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
1416
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
1417
1417
  ]
1418
1418
  }
1419
1419
  ),
@@ -1484,7 +1484,7 @@ function CryptoSidebar({ active, onNavigate }) {
1484
1484
  }
1485
1485
  function Stat({ label, value, delta, trend = "up", tint = "feature", icon }) {
1486
1486
  const dc = trend === "up" ? "success" : "error";
1487
- return /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 18, children: [
1487
+ return /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 18, children: [
1488
1488
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
1489
1489
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
1490
1490
  delta != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
@@ -1539,7 +1539,7 @@ function MarketsScreen() {
1539
1539
  ] }) },
1540
1540
  { key: "price", header: "Price", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)" }, children: r.price }) },
1541
1541
  { key: "amount", header: "Holdings", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--klun-text-sub-600)" }, children: r.amount }) },
1542
- { key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: r.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: r.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: r.chg }) },
1542
+ { key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: r.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: r.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: r.chg }) },
1543
1543
  { key: "value", header: "Value", align: "right", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.value }) },
1544
1544
  { key: "spark", header: "", width: 110, align: "right", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(Spark, { up: r.up }) }
1545
1545
  ];
@@ -1556,21 +1556,21 @@ function MarketsScreen() {
1556
1556
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1557
1557
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1558
1558
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "$64,210.40" }),
1559
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-up-line" }), children: "2.4%" })
1559
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-up-line" }), children: "2.4%" })
1560
1560
  ] }),
1561
1561
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Bitcoin \xB7 BTC/USD" })
1562
1562
  ] })
1563
1563
  ] }),
1564
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "1d", label: "1D" }, { value: "1w", label: "1W" }, { value: "1m", label: "1M" }, { value: "1y", label: "1Y" }] })
1564
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "1d", label: "1D" }, { value: "1w", label: "1W" }, { value: "1m", label: "1M" }, { value: "1y", label: "1Y" }] })
1565
1565
  ] }),
1566
1566
  /* @__PURE__ */ jsxRuntime.jsx(AreaChart, {})
1567
1567
  ] }),
1568
1568
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: "var(--klun-bg-white-0)", borderRadius: "var(--klun-radius-2xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", overflow: "hidden" }, children: [
1569
1569
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
1570
1570
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Your holdings" }),
1571
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
1571
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
1572
1572
  ] }),
1573
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Table, { columns, rows: holdings, getRowId: (r) => r.sym, style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" } })
1573
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Table, { columns, rows: holdings, getRowId: (r) => r.sym, style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" } })
1574
1574
  ] })
1575
1575
  ] });
1576
1576
  }
@@ -1597,14 +1597,14 @@ function CryptoTemplate() {
1597
1597
  /* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 16, padding: "16px 28px", borderBottom: "1px solid var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: [
1598
1598
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1599
1599
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "Portfolio" }),
1600
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
1600
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
1601
1601
  ] }) }),
1602
1602
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
1603
1603
  /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-search-line", style: { position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
1604
1604
  /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search assets", style: { width: 220, boxSizing: "border-box", height: 36, padding: "0 12px 0 36px", borderRadius: "var(--klun-radius-lg)", border: "none", background: "var(--klun-bg-weak-50)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-strong-950)", outline: "none" } })
1605
1605
  ] }),
1606
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
1607
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
1606
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
1607
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
1608
1608
  ] }),
1609
1609
  /* @__PURE__ */ jsxRuntime.jsx("main", { style: { flex: 1, overflow: "auto", background: "var(--klun-bg-weak-50)" }, children: /* @__PURE__ */ jsxRuntime.jsx(MarketsScreen, {}) })
1610
1610
  ] })
@@ -1619,12 +1619,12 @@ function MarketingNav() {
1619
1619
  ] }),
1620
1620
  /* @__PURE__ */ jsxRuntime.jsx("nav", { style: { display: "flex", gap: 4, flex: 1 }, children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: { padding: "6px 12px", borderRadius: "var(--klun-radius-md)", font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: l }, l)) }),
1621
1621
  /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: "Sign in" }),
1622
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
1622
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
1623
1623
  ] }) });
1624
1624
  }
1625
1625
  function Stat2({ label, value, delta, trend = "up", tint = "feature", icon }) {
1626
1626
  const dc = trend === "up" ? "success" : "error";
1627
- return /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 18, children: [
1627
+ return /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 18, children: [
1628
1628
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
1629
1629
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
1630
1630
  delta != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
@@ -1658,12 +1658,12 @@ function MarketingSections() {
1658
1658
  ];
1659
1659
  return /* @__PURE__ */ jsxRuntime.jsxs("main", { children: [
1660
1660
  /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { ...wrap, textAlign: "center", padding: "80px 24px 64px" }, children: [
1661
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "purple", variant: "lighter", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }), children: "Klun UI 2.0 is here" }) }),
1661
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "purple", variant: "lighter", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }), children: "Klun UI 2.0 is here" }) }),
1662
1662
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: "0 auto", maxWidth: 760, font: "var(--klun-text-title-h1)", letterSpacing: "var(--klun-title-h1-tracking)", color: "var(--klun-text-strong-950)" }, children: "The design system that ships with you" }),
1663
1663
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "20px auto 0", maxWidth: 560, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)" }, children: "Tokens, components and full product templates \u2014 themeable, dark-mode ready, and built to move from Figma to production without the redraw." }),
1664
1664
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }, children: [
1665
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
1666
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "stroke", size: "large", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-github-fill" }), children: "View on GitHub" })
1665
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
1666
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", size: "large", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-github-fill" }), children: "View on GitHub" })
1667
1667
  ] }),
1668
1668
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 40, height: 280, borderRadius: "var(--klun-radius-3xl)", background: "linear-gradient(180deg, var(--klun-bg-weak-50), var(--klun-bg-white-0))", boxShadow: "var(--klun-shadow-lg), inset 0 0 0 1px var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--klun-text-disabled-300)" }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-layout-masonry-line", style: { fontSize: 56 } }) })
1669
1669
  ] }),
@@ -1682,7 +1682,7 @@ function MarketingSections() {
1682
1682
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Everything you need to design fast" }),
1683
1683
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "12px 0 0", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)" }, children: "One coherent system from the smallest token to the full screen." })
1684
1684
  ] }),
1685
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "stroke", padding: 24, children: [
1685
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 24, children: [
1686
1686
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: "var(--klun-primary-lighter)", color: "var(--klun-primary-base)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: f.icon }) }),
1687
1687
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 6 }, children: f.t }),
1688
1688
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: f.d })
@@ -1699,7 +1699,7 @@ function MarketingSections() {
1699
1699
  }, children: [
1700
1700
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1701
1701
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)" }, children: p.name }),
1702
- p.featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
1702
+ p.featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
1703
1703
  ] }),
1704
1704
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16, display: "flex", alignItems: "baseline", gap: 6 }, children: [
1705
1705
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-title-h2)", letterSpacing: "var(--klun-title-h2-tracking)" }, children: p.price }),
@@ -1721,11 +1721,11 @@ function MarketingSections() {
1721
1721
  }, children: p.cta })
1722
1722
  ] }, p.name)) })
1723
1723
  ] }),
1724
- /* @__PURE__ */ jsxRuntime.jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXNBVAUVT_cjs.Card, { variant: "flat", padding: 40, style: { textAlign: "center", borderRadius: "var(--klun-radius-4xl)" }, children: [
1724
+ /* @__PURE__ */ jsxRuntime.jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "flat", padding: 40, style: { textAlign: "center", borderRadius: "var(--klun-radius-4xl)" }, children: [
1725
1725
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", gap: 4, color: "var(--klun-state-away-base)", marginBottom: 16 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-star-fill", style: { fontSize: 20 } }, i)) }),
1726
1726
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 auto", maxWidth: 680, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", fontFamily: "var(--klun-font-display)" }, children: "\u201CWe replaced three internal libraries with Klun UI and shipped our dashboard a month early. The token system alone paid for itself.\u201D" }),
1727
1727
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 24 }, children: [
1728
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Avatar, { size: "48", initials: "SW", color: "purple" }),
1728
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Avatar, { size: "48", initials: "SW", color: "purple" }),
1729
1729
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
1730
1730
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Sophia Williams" }),
1731
1731
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Head of Design, Northwind" })
@@ -1734,7 +1734,7 @@ function MarketingSections() {
1734
1734
  ] }) }),
1735
1735
  /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { maxWidth: 720, margin: "0 auto", padding: "56px 24px" }, children: [
1736
1736
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 28px", textAlign: "center", font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Frequently asked" }),
1737
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Accordion, { defaultOpen: "a", items: [
1737
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Accordion, { defaultOpen: "a", items: [
1738
1738
  { id: "a", title: "Is Klun UI free to use?", content: "The Starter tier with core tokens and 30 components is free forever. Pro unlocks the full component set, templates and themes." },
1739
1739
  { id: "b", title: "Does it work with my framework?", content: "Components ship as framework-agnostic patterns driven by CSS custom properties \u2014 drop the tokens into React, Vue, Svelte or plain HTML." },
1740
1740
  { id: "c", title: "Can I customize the theme?", content: "Yes. Swap the accent (blue/purple/orange/green) and neutral ramp (gray/slate) with a single data attribute, or override any token." },
@@ -1837,7 +1837,7 @@ function CalendarTemplate() {
1837
1837
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Calendar" }),
1838
1838
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "March 2026 \xB7 11 events this month" })
1839
1839
  ] }),
1840
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New event" }) })
1840
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New event" }) })
1841
1841
  ] }),
1842
1842
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", margin: "24px 0 16px" }, children: [
1843
1843
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
@@ -1853,14 +1853,14 @@ function CalendarTemplate() {
1853
1853
  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next period", onClick: () => {
1854
1854
  }, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, border: "none", background: "transparent", color: "var(--klun-icon-sub-600)", cursor: "pointer", fontSize: 18, borderRadius: "var(--klun-radius-sm)" }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }) })
1855
1855
  ] }),
1856
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
1856
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
1857
1857
  ] }),
1858
1858
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
1859
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.AvatarGroup, { variant: "stroke", size: "24", avatars: [{ initials: "AT", color: "blue" }, { initials: "MB", color: "green" }, { initials: "JK", color: "orange" }, { initials: "RP" }] }),
1860
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
1859
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.AvatarGroup, { variant: "stroke", size: "24", avatars: [{ initials: "AT", color: "blue" }, { initials: "MB", color: "green" }, { initials: "JK", color: "orange" }, { initials: "RP" }] }),
1860
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
1861
1861
  ] })
1862
1862
  ] }),
1863
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.HorizontalFilter, { value: filter, onChange: setFilter, items: [
1863
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.HorizontalFilter, { value: filter, onChange: setFilter, items: [
1864
1864
  { value: "all", label: "All", count: 11 },
1865
1865
  { value: "meeting", label: "Meetings", count: 5, icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-group-line" }) },
1866
1866
  { value: "focus", label: "Focus", count: 3 },
@@ -1872,14 +1872,14 @@ function CalendarTemplate() {
1872
1872
  cells.map((day, i) => day == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 116, background: "var(--klun-bg-weak-50)", boxShadow: "inset -1px -1px 0 var(--klun-stroke-soft-200)" } }, i) : /* @__PURE__ */ jsxRuntime.jsx(DayCell, { day, today: day === 12 }, i))
1873
1873
  ] }) }),
1874
1874
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 28 }, children: [
1875
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.ContentLabel, { icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
1875
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
1876
1876
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }, children: AGENDA.map((e, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderRadius: "var(--klun-radius-xl)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
1877
1877
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 4, height: 36, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-${CAT[e.c].color}-500)`, flex: "none" } }),
1878
1878
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1879
1879
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: e.t }),
1880
1880
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: e.time })
1881
1881
  ] }),
1882
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
1882
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
1883
1883
  ] }, i)) })
1884
1884
  ] })
1885
1885
  ] });
@@ -1943,12 +1943,12 @@ function PlanCard({ plan, cycle }) {
1943
1943
  }, children: [
1944
1944
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
1945
1945
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: plan.name }),
1946
- featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
1946
+ featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
1947
1947
  ] }),
1948
1948
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)", minHeight: 40, textWrap: "pretty" }, children: plan.tagline }),
1949
1949
  /* @__PURE__ */ jsxRuntime.jsx(Price, { plan, cycle }),
1950
- featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
1951
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Divider, {}),
1950
+ featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
1951
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Divider, {}),
1952
1952
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: plan.features.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: [
1953
1953
  /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line", style: { fontSize: 18, color: "var(--klun-state-success-base)" } }),
1954
1954
  f
@@ -1965,34 +1965,34 @@ function PricingTemplate() {
1965
1965
  const [cycle, setCycle] = react.useState("monthly");
1966
1966
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: 1080, margin: "0 auto", padding: "72px 32px 96px" }, children: [
1967
1967
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, textAlign: "center", marginBottom: 40 }, children: [
1968
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
1968
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
1969
1969
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h1)", color: "var(--klun-text-strong-950)", letterSpacing: "-.03em", maxWidth: 640, textWrap: "balance" }, children: "Simple pricing that scales with you" }),
1970
1970
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)", maxWidth: 520, textWrap: "pretty" }, children: "Start free, then pick a plan when your team is ready. No hidden fees." }),
1971
1971
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 10, marginTop: 8 }, children: [
1972
1972
  /* @__PURE__ */ jsxRuntime.jsx(
1973
- chunkXNBVAUVT_cjs.SegmentedControl,
1973
+ chunkUMR3IWCQ_cjs.SegmentedControl,
1974
1974
  {
1975
1975
  value: cycle,
1976
1976
  onChange: (v) => setCycle(v),
1977
1977
  items: [{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]
1978
1978
  }
1979
1979
  ),
1980
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "lighter", children: "Save 20%" })
1980
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "lighter", children: "Save 20%" })
1981
1981
  ] })
1982
1982
  ] }),
1983
1983
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 20, alignItems: "stretch", flexWrap: "wrap" }, children: PLANS.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { plan: p, cycle }, p.id)) }),
1984
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Alert, { status: "information", title: "Education & nonprofits", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-lightbulb-line" }), style: { marginTop: 24 }, children: "Qualifying teams get 50% off any paid plan \u2014 reach out to sales to verify eligibility." }),
1984
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Alert, { status: "information", title: "Education & nonprofits", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-lightbulb-line" }), style: { marginTop: 24 }, children: "Qualifying teams get 50% off any paid plan \u2014 reach out to sales to verify eligibility." }),
1985
1985
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 72 }, children: [
1986
1986
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 8px", font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)", letterSpacing: "-.02em", textAlign: "center" }, children: "Frequently asked questions" }),
1987
1987
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 28px", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)", textAlign: "center" }, children: "Everything you need to know about plans and billing." }),
1988
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Accordion, { items: FAQ }) })
1988
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Accordion, { items: FAQ }) })
1989
1989
  ] })
1990
1990
  ] });
1991
1991
  }
1992
1992
  function Row({ label, hint, children, top }) {
1993
1993
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "240px 1fr", gap: 24, padding: "20px 0", alignItems: top ? "flex-start" : "center", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
1994
1994
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
1995
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Label, { children: label }),
1995
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Label, { children: label }),
1996
1996
  hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)", textWrap: "pretty" }, children: hint }) : null
1997
1997
  ] }),
1998
1998
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 0 }, children })
@@ -2004,26 +2004,26 @@ function Panel({ children }) {
2004
2004
  function ProfileTab() {
2005
2005
  const [bio, setBio] = react.useState("Product designer focused on systems and tooling.");
2006
2006
  return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
2007
- /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.ImageUpload, { label: "Upload new photo", hint: "Recommended 400\xD7400px", onRemove: () => {
2007
+ /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ImageUpload, { label: "Upload new photo", hint: "Recommended 400\xD7400px", onRemove: () => {
2008
2008
  }, src: "" }) }),
2009
2009
  /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Full name", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
2010
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
2011
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Input, { defaultValue: "Taylor", placeholder: "Last name" })
2010
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
2011
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Taylor", placeholder: "Last name" })
2012
2012
  ] }) }),
2013
- /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Input, { type: "email", defaultValue: "arthur@klunui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
2014
- /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.SelectMenu, { value: "design", onChange: () => {
2013
+ /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { type: "email", defaultValue: "arthur@klunui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
2014
+ /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SelectMenu, { value: "design", onChange: () => {
2015
2015
  }, options: [
2016
2016
  { value: "design", label: "Designer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-pencil-ruler-2-line" }) },
2017
2017
  { value: "eng", label: "Engineer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-code-s-slash-line" }) },
2018
2018
  { value: "pm", label: "Product manager", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-compass-3-line" }) }
2019
2019
  ] }) }),
2020
2020
  /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bio", hint: "A short description for your profile.", top: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
2021
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
2022
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.CharacterCounter, { value: bio.length, max: 160 }) })
2021
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
2022
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.CharacterCounter, { value: bio.length, max: 160 }) })
2023
2023
  ] }) }),
2024
2024
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 20 }, children: [
2025
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
2026
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Button, { children: "Save changes" })
2025
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
2026
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { children: "Save changes" })
2027
2027
  ] })
2028
2028
  ] });
2029
2029
  }
@@ -2038,9 +2038,9 @@ function NotificationsTab() {
2038
2038
  { k: "marketing", label: "Marketing emails", hint: "Tips, offers and news." }
2039
2039
  ];
2040
2040
  return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
2041
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
2042
- items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(Row, { label: it.label, hint: it.hint, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
2043
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Alert, { status: "information", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-information-2-line" }), style: { marginTop: 20 }, children: "Security alerts can't be turned off \u2014 they protect your account." })
2041
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
2042
+ items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(Row, { label: it.label, hint: it.hint, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
2043
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Alert, { status: "information", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-information-2-line" }), style: { marginTop: 20 }, children: "Security alerts can't be turned off \u2014 they protect your account." })
2044
2044
  ] });
2045
2045
  }
2046
2046
  function IntegrationsTab() {
@@ -2058,7 +2058,7 @@ function IntegrationsTab() {
2058
2058
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
2059
2059
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: r.desc })
2060
2060
  ] }),
2061
- /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Switch, { checked: c[r.k], onChange: () => set(r.k) })
2061
+ /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: c[r.k], onChange: () => set(r.k) })
2062
2062
  ] }, r.k)) });
2063
2063
  }
2064
2064
  var TABS = [
@@ -2074,9 +2074,9 @@ function SettingsTemplate() {
2074
2074
  /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Settings" }),
2075
2075
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Manage your profile, notifications and connected apps." })
2076
2076
  ] }),
2077
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Badge, { color: "green", variant: "lighter", dot: true, children: "All changes saved" }) })
2077
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "lighter", dot: true, children: "All changes saved" }) })
2078
2078
  ] }),
2079
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXNBVAUVT_cjs.Tabs, { items: TABS, value: tab, onChange: setTab }) }),
2079
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Tabs, { items: TABS, value: tab, onChange: setTab }) }),
2080
2080
  tab === "profile" ? /* @__PURE__ */ jsxRuntime.jsx(ProfileTab, {}) : tab === "notifications" ? /* @__PURE__ */ jsxRuntime.jsx(NotificationsTab, {}) : /* @__PURE__ */ jsxRuntime.jsx(IntegrationsTab, {})
2081
2081
  ] });
2082
2082
  }