klun-ui 0.1.19 → 0.1.21

package/dist/templates/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkXMNM45KO_cjs = require('../chunk-XMNM45KO.cjs');
+var chunkUMR3IWCQ_cjs = require('../chunk-UMR3IWCQ.cjs');
 require('../chunk-TPGAXYFU.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -72,13 +72,13 @@ function TopBar({ title, subtitle }) {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "gray", size: "small", children: "Live" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "gray", size: "small", children: "Live" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New transfer" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New transfer" })
   ] });
 }
 function OverviewScreen() {
@@ -104,24 +104,24 @@ function OverviewScreen() {
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32, display: "flex", flexDirection: "column", gap: 24 }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }), children: "Export" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }), children: "Export" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 18, children: [
+    /* @__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: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
         /* @__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 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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 })
+        /* @__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 })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: s.label }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: s.value })
     ] }, s.label)) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16, alignItems: "start" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 0, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", borderBottom: "1px solid var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Recent transactions" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "ghost", size: "xsmall", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }), children: "View all" })
+          /* @__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" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Tabs, { value: tab, onChange: setTab, items: [{ value: "all", label: "All" }, { value: "income", label: "Income" }, { value: "expense", label: "Expenses" }] }) }),
+        /* @__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" }] }) }),
         /* @__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: [
           /* @__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 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -132,12 +132,12 @@ function OverviewScreen() {
               t.date
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
           /* @__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 })
         ] }, i)) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--klun-static-static-white)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", opacity: 0.7 }, children: "Virtual card" }),
             /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-visa-line", style: { fontSize: 24 } })
@@ -148,12 +148,12 @@ function OverviewScreen() {
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "09 / 28" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 20, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 20, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Monthly budget" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "$11,240 / $16,000" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.ProgressBar, { value: 70 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ProgressBar, { value: 70 }) }),
           /* @__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: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-state-${c}-base)` } }),
             /* @__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() {
   const [m, setM] = react.useState(false);
   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: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Label, { required, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Label, { required, children: label }),
       hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: hint }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 420 }, children })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 24, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 24, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
       /* @__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" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Arthur Taylor" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "arthur@alignui.com" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-upload-2-line" }), children: "Change photo" })
+      /* @__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" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Input, { defaultValue: "Arthur Taylor" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Input, { type: "email", defaultValue: "arthur@alignui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Select, { defaultValue: "finance", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Arthur Taylor" }) }),
+      /* @__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" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Select, { defaultValue: "finance", children: [
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "finance", children: "Finance lead" }),
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "admin", children: "Administrator" }),
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "member", children: "Member" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Notifications", hint: "How we reach you.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Switch, { checked: n, onChange: setN }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: n, onChange: setN }),
           " Email notifications"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Switch, { checked: m, onChange: setM }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: m, onChange: setM }),
           " Marketing updates"
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Divider, { style: { margin: "8px 0 20px" } }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Divider, { style: { margin: "8px 0 20px" } }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "primary", children: "Save changes" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", children: "Save changes" })
     ] })
   ] }) });
 }
@@ -338,7 +338,7 @@ function AIChatView({ messages, busy, userInitials, onSuggest }) {
       Bubble,
       {
         from: m.from,
-        avatar: m.from === "me" ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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" }) }),
+        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" }) }),
         children: m.text
       },
       i
@@ -457,10 +457,10 @@ function AIAssistantTemplate() {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 24px", borderBottom: "1px solid var(--klun-stroke-soft-200)" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "New chat" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(AIChatView, { messages, busy, userInitials: user.initials, onSuggest: ask }),
       /* @__PURE__ */ jsxRuntime.jsx(AIComposer, { onSend: ask, busy })
@@ -598,7 +598,7 @@ function AgentSidebar({ sessions, activeId, onSelect, onNew, user }) {
                     font: "var(--klun-text-label-sm)"
                   },
                   children: [
-                    c.state ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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 } }),
+                    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 } }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: c.title })
                   ]
                 },
@@ -747,7 +747,7 @@ function ThinkingBlock({ block }) {
 }
 var STEP_ICON = {
   done: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-checkbox-circle-fill", style: { color: "var(--klun-state-success-base)" } }),
-  active: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Spinner, { size: "sm", color: "var(--klun-primary-base)" }),
+  active: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Spinner, { size: "sm", color: "var(--klun-primary-base)" }),
   todo: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-checkbox-blank-circle-line", style: { color: "var(--klun-icon-soft-400)" } })
 };
 function PlanBlock({ block }) {
@@ -815,7 +815,7 @@ function ToolBlock({ block }) {
           children: block.name
         }
       ),
-      block.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Spinner, { size: "xs", color: "var(--klun-state-warning-base)" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.StatusDot, { tone: tone.dot, size: "sm" }),
+      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" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: tone.label }),
       /* @__PURE__ */ jsxRuntime.jsx(Chevron, { open })
     ] }),
@@ -887,7 +887,7 @@ function AgentTurn({ msg }) {
 }
 function UserTurn({ msg, initials }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row-reverse", gap: 12, alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Avatar, { size: "32", initials, color: "purple" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Avatar, { size: "32", initials, color: "purple" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -969,7 +969,7 @@ function AgentThread({ messages, userInitials, agentName, suggestions, onSuggest
   ) }) });
 }
 function AgentRunBadge({ busy }) {
-  return busy ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line" }), children: "Idle" });
+  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" });
 }
 function AgentComposer({ onSend, onStop, busy, toolsOn, onToggleTools }) {
   const [text, setText] = react.useState("");
@@ -1412,8 +1412,8 @@ function AgentChatTemplate() {
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(AgentRunBadge, { busy }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
+            /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
           ]
         }
       ),
@@ -1484,7 +1484,7 @@ function CryptoSidebar({ active, onNavigate }) {
 }
 function Stat({ label, value, delta, trend = "up", tint = "feature", icon }) {
   const dc = trend === "up" ? "success" : "error";
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 18, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 18, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
       /* @__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 }),
       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() {
     ] }) },
     { key: "price", header: "Price", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)" }, children: r.price }) },
     { key: "amount", header: "Holdings", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--klun-text-sub-600)" }, children: r.amount }) },
-    { key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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 }) },
+    { 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 }) },
     { 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 }) },
     { key: "spark", header: "", width: 110, align: "right", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(Spark, { up: r.up }) }
   ];
@@ -1556,21 +1556,21 @@ function MarketsScreen() {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "$64,210.40" }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-up-line" }), children: "2.4%" })
+              /* @__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%" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Bitcoin \xB7 BTC/USD" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "1d", label: "1D" }, { value: "1w", label: "1W" }, { value: "1m", label: "1M" }, { value: "1y", label: "1Y" }] })
+        /* @__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" }] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(AreaChart, {})
     ] }),
     /* @__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: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Your holdings" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Table, { columns, rows: holdings, getRowId: (r) => r.sym, style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" } })
+      /* @__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)" } })
     ] })
   ] });
 }
@@ -1597,14 +1597,14 @@ function CryptoTemplate() {
       /* @__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: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "Portfolio" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
           /* @__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)" } }),
           /* @__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" } })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("main", { style: { flex: 1, overflow: "auto", background: "var(--klun-bg-weak-50)" }, children: /* @__PURE__ */ jsxRuntime.jsx(MarketsScreen, {}) })
     ] })
@@ -1619,12 +1619,12 @@ function MarketingNav() {
     ] }),
     /* @__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)) }),
     /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: "Sign in" }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
   ] }) });
 }
 function Stat2({ label, value, delta, trend = "up", tint = "feature", icon }) {
   const dc = trend === "up" ? "success" : "error";
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 18, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkUMR3IWCQ_cjs.Card, { variant: "stroke", padding: 18, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
       /* @__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 }),
       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() {
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { ...wrap, textAlign: "center", padding: "80px 24px 64px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "purple", variant: "lighter", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }), children: "Klun UI 2.0 is here" }) }),
+      /* @__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" }) }),
       /* @__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" }),
       /* @__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." }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "stroke", size: "large", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-github-fill" }), children: "View on GitHub" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
+        /* @__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" })
       ] }),
       /* @__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 } }) })
     ] }),
@@ -1682,7 +1682,7 @@ function MarketingSections() {
         /* @__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" }),
         /* @__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." })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "stroke", padding: 24, children: [
+      /* @__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: [
         /* @__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 }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 6 }, children: f.t }),
         /* @__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() {
       }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)" }, children: p.name }),
-          p.featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
+          p.featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16, display: "flex", alignItems: "baseline", gap: 6 }, children: [
           /* @__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() {
         }, children: p.cta })
       ] }, p.name)) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXMNM45KO_cjs.Card, { variant: "flat", padding: 40, style: { textAlign: "center", borderRadius: "var(--klun-radius-4xl)" }, children: [
+    /* @__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: [
       /* @__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)) }),
       /* @__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" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 24 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Avatar, { size: "48", initials: "SW", color: "purple" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Avatar, { size: "48", initials: "SW", color: "purple" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Sophia Williams" }),
           /* @__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() {
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { maxWidth: 720, margin: "0 auto", padding: "56px 24px" }, children: [
       /* @__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" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Accordion, { defaultOpen: "a", items: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Accordion, { defaultOpen: "a", items: [
         { 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." },
         { 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." },
         { 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() {
         /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Calendar" }),
         /* @__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" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New event" }) })
+      /* @__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" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", margin: "24px 0 16px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
@@ -1853,14 +1853,14 @@ function CalendarTemplate() {
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next period", onClick: () => {
           }, 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" }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.AvatarGroup, { variant: "stroke", size: "24", avatars: [{ initials: "AT", color: "blue" }, { initials: "MB", color: "green" }, { initials: "JK", color: "orange" }, { initials: "RP" }] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
+        /* @__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" }] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.HorizontalFilter, { value: filter, onChange: setFilter, items: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.HorizontalFilter, { value: filter, onChange: setFilter, items: [
       { value: "all", label: "All", count: 11 },
       { value: "meeting", label: "Meetings", count: 5, icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-group-line" }) },
       { value: "focus", label: "Focus", count: 3 },
@@ -1872,14 +1872,14 @@ function CalendarTemplate() {
       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))
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 28 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.ContentLabel, { icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
       /* @__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: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 4, height: 36, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-${CAT[e.c].color}-500)`, flex: "none" } }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: e.t }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: e.time })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
       ] }, i)) })
     ] })
   ] });
@@ -1943,12 +1943,12 @@ function PlanCard({ plan, cycle }) {
   }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: plan.name }),
-      featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
+      featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
     ] }),
     /* @__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 }),
     /* @__PURE__ */ jsxRuntime.jsx(Price, { plan, cycle }),
-    featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Divider, {}),
+    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 }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Divider, {}),
     /* @__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: [
       /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line", style: { fontSize: 18, color: "var(--klun-state-success-base)" } }),
       f
@@ -1965,34 +1965,34 @@ function PricingTemplate() {
   const [cycle, setCycle] = react.useState("monthly");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: 1080, margin: "0 auto", padding: "72px 32px 96px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, textAlign: "center", marginBottom: 40 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
       /* @__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" }),
       /* @__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." }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 10, marginTop: 8 }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkXMNM45KO_cjs.SegmentedControl,
+          chunkUMR3IWCQ_cjs.SegmentedControl,
           {
             value: cycle,
             onChange: (v) => setCycle(v),
             items: [{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "lighter", children: "Save 20%" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Badge, { color: "green", variant: "lighter", children: "Save 20%" })
       ] })
     ] }),
     /* @__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)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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." }),
+    /* @__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." }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 72 }, children: [
       /* @__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" }),
       /* @__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." }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Accordion, { items: FAQ }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Accordion, { items: FAQ }) })
     ] })
   ] });
 }
 function Row({ label, hint, children, top }) {
   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: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Label, { children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Label, { children: label }),
       hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)", textWrap: "pretty" }, children: hint }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 0 }, children })
@@ -2004,26 +2004,26 @@ function Panel({ children }) {
 function ProfileTab() {
   const [bio, setBio] = react.useState("Product designer focused on systems and tooling.");
   return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.ImageUpload, { label: "Upload new photo", hint: "Recommended 400\xD7400px", onRemove: () => {
+    /* @__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: () => {
     }, src: "" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Full name", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Input, { defaultValue: "Taylor", placeholder: "Last name" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Input, { defaultValue: "Taylor", placeholder: "Last name" })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Input, { type: "email", defaultValue: "arthur@klunui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.SelectMenu, { value: "design", onChange: () => {
+    /* @__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" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.SelectMenu, { value: "design", onChange: () => {
     }, options: [
       { value: "design", label: "Designer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-pencil-ruler-2-line" }) },
       { value: "eng", label: "Engineer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-code-s-slash-line" }) },
       { value: "pm", label: "Product manager", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-compass-3-line" }) }
     ] }) }),
     /* @__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: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.CharacterCounter, { value: bio.length, max: 160 }) })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.CharacterCounter, { value: bio.length, max: 160 }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 20 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Button, { children: "Save changes" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Button, { children: "Save changes" })
     ] })
   ] });
 }
@@ -2038,9 +2038,9 @@ function NotificationsTab() {
     { k: "marketing", label: "Marketing emails", hint: "Tips, offers and news." }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
-    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(chunkXMNM45KO_cjs.Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_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." })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
+    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)),
+    /* @__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." })
   ] });
 }
 function IntegrationsTab() {
@@ -2058,7 +2058,7 @@ function IntegrationsTab() {
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: r.desc })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Switch, { checked: c[r.k], onChange: () => set(r.k) })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Switch, { checked: c[r.k], onChange: () => set(r.k) })
   ] }, r.k)) });
 }
 var TABS = [
@@ -2074,9 +2074,9 @@ function SettingsTemplate() {
         /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Settings" }),
         /* @__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." })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Badge, { color: "green", variant: "lighter", dot: true, children: "All changes saved" }) })
+      /* @__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" }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkXMNM45KO_cjs.Tabs, { items: TABS, value: tab, onChange: setTab }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUMR3IWCQ_cjs.Tabs, { items: TABS, value: tab, onChange: setTab }) }),
     tab === "profile" ? /* @__PURE__ */ jsxRuntime.jsx(ProfileTab, {}) : tab === "notifications" ? /* @__PURE__ */ jsxRuntime.jsx(NotificationsTab, {}) : /* @__PURE__ */ jsxRuntime.jsx(IntegrationsTab, {})
   ] });
 }