chordia-ui 3.2.4 → 3.2.6

package/dist/components/navigation.es.js

@@ -1,86 +1,89 @@
-import { jsxs as d, jsx as r, Fragment as R } from "react/jsx-runtime";
-import D, { useState as S } from "react";
-import { PanelLeft as B, PanelLeftClose as H, ChevronDown as W, SquareDot as C, Home as O, FolderClosed as T, Users as z, LayoutDashboard as P, Clock3 as I, Activity as L, Lightbulb as $, Bell as G, Plug as _, Settings as U, BarChart3 as Y, FileText as M, Headphones as q, Shield as N, Sliders as V, Workflow as X, LogOut as J } from "lucide-react";
+import { jsxs as d, jsx as t, Fragment as B } from "react/jsx-runtime";
+import j, { useState as w } from "react";
+import { PanelLeft as P, PanelLeftClose as D, ChevronDown as M, SquareDot as C, Home as H, FolderClosed as T, Users as A, LayoutDashboard as O, Clock3 as I, Activity as E, Lightbulb as $, Bell as G, Plug as _, Settings as U, BarChart3 as Y, FileText as z, Headphones as q, Shield as N, Sliders as V, Workflow as X, LogOut as J } from "lucide-react";
 const K = {
-  home: O,
+  home: H,
   projects: T,
   folder: T,
-  organization: z,
-  users: z,
-  dashboard: P,
+  organization: A,
+  users: A,
+  dashboard: O,
   history: I,
   sessions: I,
-  monitoring: L,
-  activity: L,
+  monitoring: E,
+  activity: E,
   insights: $,
   notifications: G,
   integrations: _,
   settings: U,
   usage: Y,
-  docs: M,
-  documentation: M,
+  docs: z,
+  documentation: z,
   agents: q,
   security: N,
   configuration: V,
   workflow: X
 };
-function F(e) {
+function L(e) {
   return e ? typeof e == "string" ? K[e.toLowerCase()] || C : e : C;
 }
-function ae({
+function oe({
   menuItems: e = [],
-  activeId: t,
-  onNavigate: n,
-  collapsed: o,
-  onToggleCollapse: u,
+  activeId: r,
+  onNavigate: o,
+  collapsed: i,
+  onToggleCollapse: g,
   header: p,
-  footer: c,
-  width: s = 240,
-  collapsedWidth: x = 56
+  footer: s,
+  width: c = 244,
+  collapsedWidth: h = 56
 }) {
-  const [i, v] = S(!1), l = o !== void 0 ? o : i, h = u || (() => v(!i)), [y, g] = S(() => {
+  const [n, y] = w(!1), l = i !== void 0 ? i : n, x = g || (() => y(!n)), [v, f] = w(() => {
     const a = {};
-    return e.forEach((f) => {
+    return e.forEach((u) => {
       var b;
-      if ((b = f.children) != null && b.length) {
-        const E = f.children.some((w) => w.id === t || w.active);
-        a[f.id] = E;
+      if ((b = u.children) != null && b.length) {
+        const F = u.children.some((S) => S.id === r || S.active);
+        a[u.id] = F;
       }
     }), a;
-  }), A = (a) => {
-    g((f) => ({ ...f, [a]: !f[a] }));
-  }, k = l ? x : s;
+  }), W = (a) => {
+    f((u) => ({ ...u, [a]: !u[a] }));
+  }, m = l ? h : c;
   return /* @__PURE__ */ d(
     "nav",
     {
       style: {
-        width: k,
-        minWidth: k,
+        width: m,
+        minWidth: m,
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        background: "var(--paper-elevated)",
-        borderRight: "1px solid var(--border)",
+        alignItems: "flex-start",
+        padding: l ? "0" : "0 0 24px 24px",
+        gap: 24,
+        background: "var(--Background-Inverse, #0B0B0B)",
         fontFamily: "var(--font-sans)",
         transition: "width 0.2s ease, min-width 0.2s ease",
         overflow: "hidden",
         flexShrink: 0
       },
       children: [
-        p && !l && /* @__PURE__ */ r("div", { style: { padding: "16px 16px 8px", flexShrink: 0 }, children: p }),
-        /* @__PURE__ */ r(
+        p && !l && /* @__PURE__ */ t("div", { style: { padding: "16px 16px 8px", flexShrink: 0, width: "100%" }, children: p }),
+        /* @__PURE__ */ t(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: l ? "center" : "flex-end",
-              padding: l ? "12px 0" : "8px 12px",
-              flexShrink: 0
+              padding: l ? "12px 0" : "8px 0 0",
+              flexShrink: 0,
+              width: "100%"
             },
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ t(
               "button",
               {
-                onClick: h,
+                onClick: x,
                 title: l ? "Expand sidebar" : "Collapse sidebar",
                 style: {
                   display: "flex",
@@ -91,34 +94,35 @@ function ae({
                   borderRadius: "var(--radius-sm)",
                   border: "none",
                   background: "transparent",
-                  color: "var(--text-faint)",
+                  color: "rgba(255, 255, 255, 0.5)",
                   cursor: "pointer",
                   transition: "background 0.15s ease, color 0.15s ease"
                 },
                 onMouseEnter: (a) => {
-                  a.currentTarget.style.background = "var(--hover-warm)", a.currentTarget.style.color = "var(--text-muted)";
+                  a.currentTarget.style.background = "rgba(255, 255, 255, 0.08)", a.currentTarget.style.color = "rgba(255, 255, 255, 0.8)";
                 },
                 onMouseLeave: (a) => {
-                  a.currentTarget.style.background = "transparent", a.currentTarget.style.color = "var(--text-faint)";
+                  a.currentTarget.style.background = "transparent", a.currentTarget.style.color = "rgba(255, 255, 255, 0.5)";
                 },
-                children: l ? /* @__PURE__ */ r(B, { size: 16 }) : /* @__PURE__ */ r(H, { size: 16 })
+                children: l ? /* @__PURE__ */ t(P, { size: 16 }) : /* @__PURE__ */ t(D, { size: 16 })
               }
             )
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "div",
           {
             style: {
               flex: 1,
               overflowY: "auto",
               overflowX: "hidden",
-              padding: l ? "0 8px" : "0 10px"
+              padding: l ? "0 8px" : "0",
+              width: "100%"
             },
-            children: e.map((a, f) => {
+            children: e.map((a, u) => {
               var b;
-              return /* @__PURE__ */ d(D.Fragment, { children: [
-                a.section && !l && /* @__PURE__ */ r(
+              return /* @__PURE__ */ d(j.Fragment, { children: [
+                a.section && !l && /* @__PURE__ */ t(
                   "div",
                   {
                     style: {
@@ -126,95 +130,99 @@ function ae({
                       fontWeight: 650,
                       letterSpacing: "0.08em",
                       textTransform: "uppercase",
-                      color: "var(--text-faint)",
+                      color: "rgba(255, 255, 255, 0.35)",
                       padding: "16px 8px 6px",
                       lineHeight: 1
                     },
                     children: a.section
                   }
                 ),
-                (b = a.children) != null && b.length ? /* @__PURE__ */ r(
+                (b = a.children) != null && b.length ? /* @__PURE__ */ t(
                   Q,
                   {
                     item: a,
-                    activeId: t,
-                    expanded: !!y[a.id],
-                    onToggle: () => A(a.id),
-                    onNavigate: n,
+                    activeId: r,
+                    expanded: !!v[a.id],
+                    onToggle: () => W(a.id),
+                    onNavigate: o,
                     collapsed: l
                   }
-                ) : /* @__PURE__ */ r(
-                  j,
+                ) : /* @__PURE__ */ t(
+                  R,
                   {
                     item: a,
-                    active: a.id === t || a.active,
-                    onNavigate: n,
+                    active: a.id === r || a.active,
+                    onNavigate: o,
                     collapsed: l
                   }
                 )
-              ] }, a.id || f);
+              ] }, a.id || u);
             })
           }
         ),
-        c && !l && /* @__PURE__ */ r(
+        s && !l && /* @__PURE__ */ t(
           "div",
           {
             style: {
               padding: "12px 16px",
-              borderTop: "1px solid var(--border-subtle)",
-              flexShrink: 0
+              borderTop: "1px solid rgba(255, 255, 255, 0.08)",
+              flexShrink: 0,
+              width: "100%"
             },
-            children: c
+            children: s
           }
         )
       ]
     }
   );
 }
-function j({ item: e, active: t, onNavigate: n, collapsed: o }) {
-  const u = F(e.icon), p = typeof e.icon != "string" && typeof e.icon < "u";
+function R({ item: e, active: r, onNavigate: o, collapsed: i }) {
+  const g = L(e.icon), p = typeof e.icon != "string" && typeof e.icon < "u";
   return /* @__PURE__ */ d(
     "button",
     {
-      onClick: () => n == null ? void 0 : n(e.href || e.id),
-      title: o ? e.label : void 0,
+      onClick: () => o == null ? void 0 : o(e.href || e.id),
+      title: i ? e.label : void 0,
       style: {
         display: "flex",
         alignItems: "center",
-        gap: o ? 0 : 10,
-        justifyContent: o ? "center" : "flex-start",
+        gap: i ? 0 : 12,
+        justifyContent: i ? "center" : "flex-start",
         width: "100%",
-        padding: o ? "10px 0" : "8px 10px",
-        borderRadius: "var(--radius-sm)",
-        border: "none",
-        background: t ? "var(--hover-warm)" : "transparent",
-        color: t ? "var(--text-ink)" : "var(--text-base)",
-        fontWeight: t ? 550 : 400,
+        padding: i ? "10px 0" : "12px 24px 12px 12px",
+        borderRadius: r ? "4px 0 0 4px" : "4px",
+        borderRight: r ? "2px solid #00A66E" : "2px solid transparent",
+        borderTop: "none",
+        borderBottom: "none",
+        borderLeft: "none",
+        background: r ? "var(--Background-MonoPressed, #323232)" : "transparent",
+        color: r ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
+        fontWeight: r ? 550 : 400,
         fontSize: "var(--text-sm)",
         fontFamily: "var(--font-sans)",
         cursor: "pointer",
         textAlign: "left",
-        transition: "background 0.15s ease, color 0.1s ease",
+        transition: "background 0.15s ease, color 0.1s ease, border-color 0.15s ease",
         marginBottom: 2
       },
-      onMouseEnter: (c) => {
-        t || (c.currentTarget.style.background = "var(--hover-warm-subtle)");
+      onMouseEnter: (s) => {
+        r || (s.currentTarget.style.background = "var(--Background-MonoPressed, #323232)", s.currentTarget.style.color = "#00A66E");
       },
-      onMouseLeave: (c) => {
-        t || (c.currentTarget.style.background = "transparent");
+      onMouseLeave: (s) => {
+        r || (s.currentTarget.style.background = "transparent", s.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)");
       },
       children: [
-        p ? /* @__PURE__ */ r("span", { style: { flexShrink: 0, display: "flex" }, children: e.icon }) : /* @__PURE__ */ r(
-          u,
+        p ? /* @__PURE__ */ t("span", { style: { flexShrink: 0, display: "flex" }, children: e.icon }) : /* @__PURE__ */ t(
+          g,
           {
-            size: 16,
+            size: 18,
             style: {
               flexShrink: 0,
-              color: t ? "var(--text-strong)" : "var(--text-muted)"
+              color: "inherit"
             }
           }
         ),
-        !o && /* @__PURE__ */ r(
+        !i && /* @__PURE__ */ t(
           "span",
           {
             style: {
@@ -229,13 +237,13 @@ function j({ item: e, active: t, onNavigate: n, collapsed: o }) {
     }
   );
 }
-function Q({ item: e, activeId: t, expanded: n, onToggle: o, onNavigate: u, collapsed: p }) {
-  var x;
-  const c = F(e.icon), s = (x = e.children) == null ? void 0 : x.some((i) => i.id === t || i.active);
-  return p ? /* @__PURE__ */ r(
+function Q({ item: e, activeId: r, expanded: o, onToggle: i, onNavigate: g, collapsed: p }) {
+  var h;
+  const s = L(e.icon), c = (h = e.children) == null ? void 0 : h.some((n) => n.id === r || n.active);
+  return p ? /* @__PURE__ */ t(
     "button",
     {
-      onClick: o,
+      onClick: i,
       title: e.label,
       style: {
         display: "flex",
@@ -243,25 +251,25 @@ function Q({ item: e, activeId: t, expanded: n, onToggle: o, onNavigate: u, coll
         justifyContent: "center",
         width: "100%",
         padding: "10px 0",
-        borderRadius: "var(--radius-sm)",
+        borderRadius: "4px",
         border: "none",
-        background: s ? "var(--hover-warm)" : "transparent",
-        color: s ? "var(--text-ink)" : "var(--text-base)",
+        background: c ? "var(--Background-MonoPressed, #323232)" : "transparent",
+        color: c ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
         cursor: "pointer",
         marginBottom: 2,
         transition: "background 0.15s ease"
       },
-      onMouseEnter: (i) => {
-        s || (i.currentTarget.style.background = "var(--hover-warm-subtle)");
+      onMouseEnter: (n) => {
+        c || (n.currentTarget.style.background = "var(--Background-MonoPressed, #323232)", n.currentTarget.style.color = "#00A66E");
       },
-      onMouseLeave: (i) => {
-        s || (i.currentTarget.style.background = "transparent");
+      onMouseLeave: (n) => {
+        c || (n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)");
       },
-      children: /* @__PURE__ */ r(
-        c,
+      children: /* @__PURE__ */ t(
+        s,
         {
-          size: 16,
-          style: { color: s ? "var(--text-strong)" : "var(--text-muted)" }
+          size: 18,
+          style: { color: "inherit" }
         }
       )
     }
@@ -269,42 +277,42 @@ function Q({ item: e, activeId: t, expanded: n, onToggle: o, onNavigate: u, coll
     /* @__PURE__ */ d(
       "button",
       {
-        onClick: o,
+        onClick: i,
         style: {
           display: "flex",
           alignItems: "center",
-          gap: 10,
+          gap: 12,
           width: "100%",
-          padding: "8px 10px",
-          borderRadius: "var(--radius-sm)",
+          padding: "12px 24px 12px 12px",
+          borderRadius: "4px",
           border: "none",
           background: "transparent",
-          color: s ? "var(--text-ink)" : "var(--text-base)",
-          fontWeight: s ? 550 : 400,
+          color: c ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
+          fontWeight: c ? 550 : 400,
           fontSize: "var(--text-sm)",
           fontFamily: "var(--font-sans)",
           cursor: "pointer",
           textAlign: "left",
-          transition: "background 0.15s ease"
+          transition: "background 0.15s ease, color 0.15s ease"
         },
-        onMouseEnter: (i) => {
-          i.currentTarget.style.background = "var(--hover-warm-subtle)";
+        onMouseEnter: (n) => {
+          n.currentTarget.style.background = "var(--Background-MonoPressed, #323232)", n.currentTarget.style.color = "#00A66E";
         },
-        onMouseLeave: (i) => {
-          i.currentTarget.style.background = "transparent";
+        onMouseLeave: (n) => {
+          n.currentTarget.style.background = "transparent", c ? n.currentTarget.style.color = "#00A66E" : n.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
         },
         children: [
-          /* @__PURE__ */ r(
-            c,
+          /* @__PURE__ */ t(
+            s,
             {
-              size: 16,
+              size: 18,
               style: {
                 flexShrink: 0,
-                color: s ? "var(--text-strong)" : "var(--text-muted)"
+                color: "inherit"
               }
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             "span",
             {
               style: {
@@ -316,14 +324,15 @@ function Q({ item: e, activeId: t, expanded: n, onToggle: o, onNavigate: u, coll
               children: e.label
             }
           ),
-          /* @__PURE__ */ r(
-            W,
+          /* @__PURE__ */ t(
+            M,
             {
               size: 14,
               style: {
                 flexShrink: 0,
-                color: "var(--text-faint)",
-                transform: n ? "rotate(0deg)" : "rotate(-90deg)",
+                color: "inherit",
+                opacity: 0.7,
+                transform: o ? "rotate(0deg)" : "rotate(-90deg)",
                 transition: "transform 0.2s ease"
               }
             }
@@ -331,19 +340,19 @@ function Q({ item: e, activeId: t, expanded: n, onToggle: o, onNavigate: u, coll
         ]
       }
     ),
-    n && /* @__PURE__ */ r("div", { style: { paddingLeft: 18, marginTop: 2 }, children: e.children.map((i, v) => /* @__PURE__ */ r(
-      j,
+    o && /* @__PURE__ */ t("div", { style: { paddingLeft: 18, marginTop: 2 }, children: e.children.map((n, y) => /* @__PURE__ */ t(
+      R,
       {
-        item: i,
-        active: i.id === t || i.active,
-        onNavigate: u,
+        item: n,
+        active: n.id === r || n.active,
+        onNavigate: g,
         collapsed: !1
       },
-      i.id || v
+      n.id || y
     )) })
   ] });
 }
-const m = [
+const k = [
   "#5a8a6e",
   // sage green
   "#b07d4f",
@@ -363,27 +372,27 @@ const m = [
 ];
 function Z(e) {
   if (!e)
-    return m[0];
-  let t = 0;
-  for (let n = 0; n < e.length; n++)
-    t = (t << 5) - t + e.charCodeAt(n) | 0;
-  return m[Math.abs(t) % m.length];
+    return k[0];
+  let r = 0;
+  for (let o = 0; o < e.length; o++)
+    r = (r << 5) - r + e.charCodeAt(o) | 0;
+  return k[Math.abs(r) % k.length];
 }
-function oe({
+function ae({
   logo: e,
-  title: t,
-  userName: n,
-  userEmail: o,
-  userInitials: u,
+  title: r,
+  userName: o,
+  userEmail: i,
+  userInitials: g,
   userRole: p,
-  onSignOut: c,
-  children: s,
-  trailing: x,
-  userMenu: i,
-  height: v = 48,
+  onSignOut: s,
+  children: c,
+  trailing: h,
+  userMenu: n,
+  height: y = 48,
   style: l
 }) {
-  const h = n || o || "", y = u || ee(h);
+  const x = o || i || "", v = g || ee(x);
   return /* @__PURE__ */ d(
     "header",
     {
@@ -392,7 +401,7 @@ function oe({
         alignItems: "center",
         justifyContent: "space-between",
         padding: "0 20px",
-        height: v,
+        height: y,
         borderBottom: "1px solid var(--border)",
         background: "var(--paper-elevated)",
         flexShrink: 0,
@@ -404,35 +413,35 @@ function oe({
       },
       children: [
         /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }, children: [
-          e !== void 0 ? e : /* @__PURE__ */ r("span", { style: {
+          e !== void 0 ? e : /* @__PURE__ */ t("span", { style: {
             fontSize: "var(--text-lg)",
             fontWeight: 700,
             fontFamily: "var(--font-display)",
             color: "var(--text-ink)",
             letterSpacing: "-0.01em"
           }, children: "Chordia" }),
-          t && /* @__PURE__ */ d(R, { children: [
-            /* @__PURE__ */ r("span", { style: {
+          r && /* @__PURE__ */ d(B, { children: [
+            /* @__PURE__ */ t("span", { style: {
               width: 1,
               height: 18,
               background: "var(--border)",
               flexShrink: 0
             } }),
-            /* @__PURE__ */ r("span", { style: {
+            /* @__PURE__ */ t("span", { style: {
               fontSize: "var(--text-md)",
               fontWeight: 500,
               color: "var(--text-muted)"
-            }, children: t })
+            }, children: r })
           ] })
         ] }),
-        s && /* @__PURE__ */ r("div", { style: {
+        c && /* @__PURE__ */ t("div", { style: {
           display: "flex",
           alignItems: "center",
           gap: 8,
           flex: 1,
           justifyContent: "center",
           minWidth: 0
-        }, children: s }),
+        }, children: c }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -443,41 +452,41 @@ function oe({
               flexShrink: 0
             },
             children: [
-              x,
-              i || h && /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ r("div", { style: {
+              h,
+              n || x && /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ t("div", { style: {
                   width: 30,
                   height: 30,
                   borderRadius: "50%",
-                  background: Z(h),
+                  background: Z(x),
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
                   flexShrink: 0
-                }, children: /* @__PURE__ */ r("span", { style: {
+                }, children: /* @__PURE__ */ t("span", { style: {
                   fontSize: 11,
                   fontWeight: 600,
                   color: "#fff",
                   letterSpacing: "0.02em",
                   lineHeight: 1
-                }, children: y }) }),
+                }, children: v }) }),
                 /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-                  /* @__PURE__ */ r("span", { style: {
+                  /* @__PURE__ */ t("span", { style: {
                     fontSize: "var(--text-sm)",
                     fontWeight: 550,
                     color: "var(--text-strong)",
                     lineHeight: 1.2
-                  }, children: h }),
-                  p && /* @__PURE__ */ r("span", { style: {
+                  }, children: x }),
+                  p && /* @__PURE__ */ t("span", { style: {
                     fontSize: "var(--text-xs)",
                     color: "var(--text-muted)",
                     lineHeight: 1.2
                   }, children: p })
                 ] }),
-                c && /* @__PURE__ */ r(
+                s && /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: c,
+                    onClick: s,
                     title: "Sign out",
                     style: {
                       display: "flex",
@@ -492,13 +501,13 @@ function oe({
                       cursor: "pointer",
                       transition: "background 0.15s ease, color 0.15s ease"
                     },
-                    onMouseEnter: (g) => {
-                      g.currentTarget.style.background = "var(--hover-warm)", g.currentTarget.style.color = "var(--text-muted)";
+                    onMouseEnter: (f) => {
+                      f.currentTarget.style.background = "var(--hover-warm)", f.currentTarget.style.color = "var(--text-muted)";
                     },
-                    onMouseLeave: (g) => {
-                      g.currentTarget.style.background = "transparent", g.currentTarget.style.color = "var(--text-faint)";
+                    onMouseLeave: (f) => {
+                      f.currentTarget.style.background = "transparent", f.currentTarget.style.color = "var(--text-faint)";
                     },
-                    children: /* @__PURE__ */ r(J, { size: 14 })
+                    children: /* @__PURE__ */ t(J, { size: 14 })
                   }
                 )
               ] })
@@ -509,11 +518,11 @@ function oe({
     }
   );
 }
-function ie({ label: e, color: t = "var(--text-muted)", active: n, onClick: o }) {
+function ie({ label: e, color: r = "var(--text-muted)", active: o, onClick: i }) {
   return /* @__PURE__ */ d(
     "button",
     {
-      onClick: o,
+      onClick: i,
       style: {
         display: "flex",
         alignItems: "center",
@@ -523,26 +532,26 @@ function ie({ label: e, color: t = "var(--text-muted)", active: n, onClick: o })
         fontFamily: "var(--font-sans)",
         padding: "4px 10px",
         borderRadius: "var(--radius-sm)",
-        border: `1px solid color-mix(in srgb, ${t} 30%, transparent)`,
-        background: `color-mix(in srgb, ${t} 10%, transparent)`,
-        color: t,
+        border: `1px solid color-mix(in srgb, ${r} 30%, transparent)`,
+        background: `color-mix(in srgb, ${r} 10%, transparent)`,
+        color: r,
         cursor: "pointer",
         transition: "background 0.15s ease, border-color 0.15s ease"
       },
-      onMouseEnter: (u) => {
-        u.currentTarget.style.background = `color-mix(in srgb, ${t} 18%, transparent)`;
+      onMouseEnter: (g) => {
+        g.currentTarget.style.background = `color-mix(in srgb, ${r} 18%, transparent)`;
       },
-      onMouseLeave: (u) => {
-        u.currentTarget.style.background = `color-mix(in srgb, ${t} 10%, transparent)`;
+      onMouseLeave: (g) => {
+        g.currentTarget.style.background = `color-mix(in srgb, ${r} 10%, transparent)`;
       },
       children: [
         e,
-        /* @__PURE__ */ r(
-          W,
+        /* @__PURE__ */ t(
+          M,
           {
             size: 12,
             style: {
-              transform: n ? "rotate(180deg)" : "rotate(0deg)",
+              transform: o ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform 0.2s ease",
               opacity: 0.7
             }
@@ -552,19 +561,19 @@ function ie({ label: e, color: t = "var(--text-muted)", active: n, onClick: o })
     }
   );
 }
-function se({ open: e, onClose: t, children: n, align: o = "left" }) {
-  return e ? /* @__PURE__ */ d(R, { children: [
-    /* @__PURE__ */ r(
+function se({ open: e, onClose: r, children: o, align: i = "left" }) {
+  return e ? /* @__PURE__ */ d(B, { children: [
+    /* @__PURE__ */ t(
       "div",
       {
-        onClick: t,
+        onClick: r,
         style: { position: "fixed", inset: 0, zIndex: 99, background: "rgba(0,0,0,0.03)" }
       }
     ),
-    /* @__PURE__ */ r("div", { style: {
+    /* @__PURE__ */ t("div", { style: {
       position: "absolute",
       top: "100%",
-      [o === "right" ? "right" : "left"]: 0,
+      [i === "right" ? "right" : "left"]: 0,
       marginTop: 4,
       zIndex: 100,
       background: "#fff",
@@ -575,37 +584,37 @@ function se({ open: e, onClose: t, children: n, align: o = "left" }) {
       maxHeight: 280,
       overflowY: "auto",
       boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
-    }, children: n })
+    }, children: o })
   ] }) : null;
 }
-function le({ label: e, active: t, onClick: n }) {
-  return /* @__PURE__ */ r(
+function le({ label: e, active: r, onClick: o }) {
+  return /* @__PURE__ */ t(
     "div",
     {
-      onClick: n,
+      onClick: o,
       style: {
         padding: "8px 10px",
         borderRadius: "var(--radius-sm)",
         cursor: "pointer",
         fontSize: "var(--text-sm)",
-        color: t ? "var(--text-ink)" : "var(--text-base)",
-        fontWeight: t ? 600 : 400,
+        color: r ? "var(--text-ink)" : "var(--text-base)",
+        fontWeight: r ? 600 : 400,
         fontFamily: "var(--font-sans)",
-        background: t ? "var(--hover-warm)" : "transparent",
+        background: r ? "var(--hover-warm)" : "transparent",
         transition: "background 0.1s ease"
       },
-      onMouseEnter: (o) => {
-        t || (o.currentTarget.style.background = "var(--hover-warm-subtle)");
+      onMouseEnter: (i) => {
+        r || (i.currentTarget.style.background = "var(--hover-warm-subtle)");
       },
-      onMouseLeave: (o) => {
-        t || (o.currentTarget.style.background = "transparent");
+      onMouseLeave: (i) => {
+        r || (i.currentTarget.style.background = "transparent");
       },
       children: e
     }
   );
 }
-function de({ connected: e, label: t }) {
-  return /* @__PURE__ */ r("span", { style: {
+function de({ connected: e, label: r }) {
+  return /* @__PURE__ */ t("span", { style: {
     fontSize: "var(--text-xs)",
     fontFamily: "var(--font-sans)",
     padding: "3px 10px",
@@ -614,20 +623,20 @@ function de({ connected: e, label: t }) {
     color: e ? "var(--state-present)" : "var(--text-faint)",
     background: e ? "rgba(37,163,114,0.08)" : "transparent",
     transition: "all 0.2s ease"
-  }, children: t || (e ? "Connected" : "Disconnected") });
+  }, children: r || (e ? "Connected" : "Disconnected") });
 }
 function ee(e) {
   if (!e)
     return "?";
-  const t = e.trim().split(/\s+/);
-  return t.length >= 2 ? (t[0][0] + t[t.length - 1][0]).toUpperCase() : e.slice(0, 2).toUpperCase();
+  const r = e.trim().split(/\s+/);
+  return r.length >= 2 ? (r[0][0] + r[r.length - 1][0]).toUpperCase() : e.slice(0, 2).toUpperCase();
 }
 export {
   se as NavDropdown,
   le as NavDropdownItem,
   ie as NavPill,
-  oe as NavigationBar,
-  ae as Sidebar,
+  ae as NavigationBar,
+  oe as Sidebar,
   de as StatusIndicator
 };
 //# sourceMappingURL=navigation.es.js.map