impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/sidebar.js

@@ -1,398 +1,426 @@
-import { jsx as t, jsxs as g, Fragment as k } from "react/jsx-runtime";
-import * as i from "react";
-import * as z from "@radix-ui/react-collapsible";
-import { Slot as C } from "@radix-ui/react-slot";
+import { jsx as a, jsxs as g, Fragment as C } from "react/jsx-runtime";
+import * as n from "react";
+import * as k from "@radix-ui/react-collapsible";
+import { Slot as N } from "@radix-ui/react-slot";
 import { cva as H } from "class-variance-authority";
-import { ChevronRight as A, HamburgerClosed as L, HamburgerOpen as j } from "../../icons/index.js";
+import { ChevronRight as A, HamburgerClosed as L, HamburgerOpen as P } from "../../icons/index.js";
 import { cn as l } from "../../lib/utils.js";
-import { Button as P } from "./button.js";
+import { Button as j } from "./button.js";
 import { Input as W } from "./input.js";
 import { Separator as $ } from "./separator.js";
-import { Skeleton as _ } from "./skeleton.js";
+import { Skeleton as I } from "./skeleton.js";
 import { Tooltip as F, TooltipTrigger as q, TooltipContent as K, TooltipProvider as V } from "./tooltip.js";
-import { useImpactNovaI18n as N } from "../../i18n/ImpactNovaI18nContext.js";
-const X = "sidebar_state", J = 3600 * 24 * 7, Q = "280px", U = "64px", B = i.createContext(null), I = i.createContext(null);
+import { useImpactNovaI18n as y } from "../../i18n/ImpactNovaI18nContext.js";
+const X = "sidebar_state", J = 3600 * 24 * 7, Q = "280px", U = "64px", B = n.createContext(null), _ = n.createContext(null);
 function S() {
-  const a = i.useContext(B);
-  if (!a)
+  const t = n.useContext(B);
+  if (!t)
     throw new Error("useSidebar must be used within a SidebarProvider.");
-  return a;
+  return t;
 }
-const Y = i.forwardRef(
+const Y = n.forwardRef(
   ({
-    defaultOpen: a = !1,
+    defaultOpen: t = !1,
     open: r,
     onOpenChange: e,
     className: o,
-    style: n,
+    style: i,
     children: s,
     autoHideAfter: c,
-    ...u
+    ...p
   }, f) => {
-    const [h, d] = i.useState(a), p = r ?? h, m = i.useCallback(
-      (v) => {
-        const M = typeof v == "function" ? v(p) : v;
-        e ? e(M) : d(M), document.cookie = `${X}=${M}; path=/; max-age=${J}`;
+    const [m, d] = n.useState(t), b = r ?? m, v = n.useCallback(
+      (h) => {
+        const z = typeof h == "function" ? h(b) : h;
+        e ? e(z) : d(z), document.cookie = `${X}=${z}; path=/; max-age=${J}`;
       },
-      [e, p]
-    ), x = i.useCallback(() => {
-      m((v) => !v);
-    }, [m]), b = p ? "expanded" : "collapsed", w = i.useMemo(
+      [e, b]
+    ), x = n.useCallback(() => {
+      v((h) => !h);
+    }, [v]), u = b ? "expanded" : "collapsed", w = n.useMemo(
       () => ({
-        state: b,
-        open: p,
-        setOpen: m,
+        state: u,
+        open: b,
+        setOpen: v,
         toggleSidebar: x,
         autoHideAfter: c
       }),
-      [b, p, m, x, c]
+      [u, b, v, x, c]
     );
-    return /* @__PURE__ */ t(B.Provider, { value: w, children: /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ a(B.Provider, { value: w, children: /* @__PURE__ */ a(V, { children: /* @__PURE__ */ a(
       "div",
       {
         style: {
           "--sidebar-width": Q,
           "--sidebar-width-icon": U,
-          ...n
+          ...i
         },
         className: l(
-          "group/sidebar-wrapper relative flex min-h-svh has-[[data-variant=inset]]:bg-sidebar",
+          "group/sidebar-wrapper relative flex min-h-svh has-[[data-variant=inset]]:bg-navigation",
           o
         ),
         ref: f,
-        ...u,
+        ...p,
         children: s
       }
     ) }) });
   }
 );
 Y.displayName = "SidebarProvider";
-const Z = i.forwardRef(
+const Z = n.forwardRef(
   ({
-    side: a = "left",
+    side: t = "left",
     variant: r = "sidebar",
     collapsible: e = "offcanvas",
     className: o,
-    children: n,
+    children: i,
     ...s
   }, c) => {
-    const { state: u } = S();
-    return e === "none" ? /* @__PURE__ */ t(
+    const { state: p, open: f, setOpen: m } = S();
+    return e === "none" ? /* @__PURE__ */ a(
       "div",
       {
         className: l(
-          "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+          "flex h-full w-[--sidebar-width] flex-col bg-navigation text-navigation-foreground",
           o
         ),
         ref: c,
         ...s,
-        children: n
+        children: i
       }
-    ) : /* @__PURE__ */ g(
-      "div",
-      {
-        ref: c,
-        className: "group peer hidden md:block text-sidebar-foreground",
-        "data-state": u,
-        "data-collapsible": u === "collapsed" ? e : "",
-        "data-variant": r,
-        "data-side": a,
-        children: [
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: l(
-                "relative h-full w-[--sidebar-width-icon] bg-transparent transition-[width] duration-200 ease-linear"
-              )
-            }
-          ),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: l(
-                "absolute inset-y-0 left-0 z-[45] duration-200 ease-linear md:flex h-full w-[--sidebar-width] flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
-                "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
-                a === "left" ? "border-r group-data-[variant=floating]:border-r-0" : "border-l group-data-[variant=floating]:border-l-0",
-                o
-              ),
-              ...s,
-              children: /* @__PURE__ */ t(
-                "div",
-                {
-                  "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
-                  children: n
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
+    ) : /* @__PURE__ */ g(C, { children: [
+      e === "offcanvas" && f ? /* @__PURE__ */ a(
+        "div",
+        {
+          role: "presentation",
+          "aria-hidden": !0,
+          "data-sidebar": "offcanvas-backdrop",
+          className: "fixed inset-0 z-[44] hidden  md:block",
+          onPointerDown: () => m(!1)
+        }
+      ) : null,
+      /* @__PURE__ */ g(
+        "div",
+        {
+          ref: c,
+          className: "group peer hidden md:block text-navigation-foreground",
+          "data-state": p,
+          "data-collapsible": p === "collapsed" ? e : "",
+          "data-variant": r,
+          "data-side": t,
+          children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: l(
+                  "relative h-full w-[--sidebar-width-icon] bg-transparent transition-[width] duration-200 ease-linear"
+                )
+              }
+            ),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: l(
+                  "absolute inset-y-0 left-0 z-[45] duration-200 ease-linear md:flex h-full w-[--sidebar-width] flex-col bg-navigation group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-navigation-border group-data-[variant=floating]:shadow",
+                  "group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+                  t === "left" ? "border-r group-data-[variant=floating]:border-r-0" : "border-l group-data-[variant=floating]:border-l-0",
+                  o
+                ),
+                ...s,
+                children: /* @__PURE__ */ a(
+                  "div",
+                  {
+                    "data-sidebar": "sidebar",
+                    className: "flex h-full w-full flex-col bg-navigation group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-navigation-border group-data-[variant=floating]:shadow",
+                    children: i
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
   }
 );
 Z.displayName = "Sidebar";
-const ee = i.forwardRef(({ className: a, onClick: r, ...e }, o) => {
-  const { t: n } = N(), { toggleSidebar: s, state: c } = S(), u = n("aria.toggleSidebar");
+const ee = n.forwardRef(({ className: t, onClick: r, ...e }, o) => {
+  const { t: i } = y(), { toggleSidebar: s, state: c } = S(), p = i("aria.toggleSidebar");
   return /* @__PURE__ */ g(
-    P,
+    j,
     {
       ref: o,
       "data-sidebar": "trigger",
       variant: "ghost",
       size: "icon",
-      className: l("rounded-lg p-0 hover:bg-transparent", a),
+      className: l(
+        "rounded-lg p-0 hover:bg-transparent h-10 w-10 min-h-10 min-w-10 [&_svg]:size-10",
+        t
+      ),
       onClick: (f) => {
         r?.(f), s();
       },
-      "aria-label": u,
+      "aria-label": p,
       ...e,
       children: [
-        c === "expanded" ? /* @__PURE__ */ t(L, { size: "3xl" }) : /* @__PURE__ */ t(j, { size: "3xl" }),
-        /* @__PURE__ */ t("span", { className: "sr-only", children: u })
+        c === "expanded" ? /* @__PURE__ */ a(L, { size: "3xl" }) : /* @__PURE__ */ a(P, { size: "3xl" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: p })
       ]
     }
   );
 });
 ee.displayName = "SidebarTrigger";
-const ae = i.forwardRef(({ className: a, ...r }, e) => {
-  const { t: o } = N(), { toggleSidebar: n } = S(), s = o("aria.toggleSidebar");
-  return /* @__PURE__ */ t(
+const ae = n.forwardRef(({ className: t, ...r }, e) => {
+  const { t: o } = y(), { toggleSidebar: i } = S(), s = o("aria.toggleSidebar");
+  return /* @__PURE__ */ a(
     "button",
     {
       ref: e,
       "data-sidebar": "rail",
       "aria-label": s,
       tabIndex: -1,
-      onClick: n,
+      onClick: i,
       title: s,
       className: l(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-navigation-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-navigation",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        a
+        t
       ),
       ...r
     }
   );
 });
 ae.displayName = "SidebarRail";
-const te = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const te = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     className: l(
-      "relative flex w-full flex-1 flex-col bg-background",
+      "relative flex w-full flex-1 flex-col bg-canvas",
       "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-      a
+      t
     ),
     ...r
   }
 ));
 te.displayName = "SidebarInset";
-const re = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const re = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   W,
   {
     ref: e,
     "data-sidebar": "input",
     className: l(
-      "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-      a
+      "h-8 w-full bg-canvas shadow-none focus-visible:ring-2 focus-visible:ring-navigation-ring",
+      t
     ),
     ...r
   }
 ));
 re.displayName = "SidebarInput";
-const ie = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const ne = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     "data-sidebar": "header",
     className: l(
       "flex mt-4 mb-6 items-center px-3 transition-all duration-200 ease-linear",
-      a
+      t
     ),
     ...r
   }
 ));
-ie.displayName = "SidebarHeader";
-const ne = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+ne.displayName = "SidebarHeader";
+const ie = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     "data-sidebar": "footer",
-    className: l("flex flex-col gap-2 py-2 group-data-[state=collapsed]:px-0", a),
+    className: l(
+      "flex shrink-0 flex-col gap-2 py-2 min-w-0 w-full overflow-x-hidden group-data-[state=collapsed]:px-0",
+      t
+    ),
     ...r
   }
 ));
-ne.displayName = "SidebarFooter";
-const oe = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+ie.displayName = "SidebarFooter";
+const oe = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   $,
   {
     ref: e,
     "data-sidebar": "separator",
-    className: l("mx-2 w-auto bg-sidebar-border", a),
+    className: l("mx-2 w-auto bg-navigation-border", t),
     ...r
   }
 ));
 oe.displayName = "SidebarSeparator";
-const se = i.forwardRef(({ className: a, routes: r, activeValue: e, isActive: o, onNavigate: n, asLinks: s = !1, children: c, ...u }, f) => {
-  const h = r ? /* @__PURE__ */ t(O, { children: r.map((d) => {
-    const p = !!d.children, m = e === d.value || p && d.children?.some((b) => b.value === e);
-    return /* @__PURE__ */ g(
-      p ? D : y,
+const se = n.forwardRef(
+  ({
+    className: t,
+    routes: r,
+    activeValue: e,
+    isActive: o,
+    onNavigate: i,
+    asLinks: s = !1,
+    children: c,
+    ...p
+  }, f) => {
+    const m = r ? /* @__PURE__ */ a(O, { children: r.map((d) => {
+      const b = !!d.children, v = e === d.value || b && d.children?.some((u) => u.value === e);
+      return /* @__PURE__ */ g(b ? D : R, { isActive: v, children: [
+        /* @__PURE__ */ a(
+          M,
+          {
+            asChild: s,
+            isActive: v,
+            tooltip: d.label,
+            onClick: () => {
+              !s && !b && !d.disabled && i?.(d.value);
+            },
+            disabled: d.disabled,
+            children: s ? /* @__PURE__ */ g(
+              "a",
+              {
+                href: d.url,
+                "aria-disabled": d.disabled,
+                className: d.disabled ? "pointer-events-none" : "",
+                onClick: (u) => {
+                  if (d.disabled) {
+                    u.preventDefault();
+                    return;
+                  }
+                  if (b) {
+                    u.preventDefault();
+                    return;
+                  }
+                  u.preventDefault(), i?.(d.value);
+                },
+                children: [
+                  d.icon,
+                  /* @__PURE__ */ a("span", { children: d.label })
+                ]
+              }
+            ) : /* @__PURE__ */ g(C, { children: [
+              d.icon,
+              /* @__PURE__ */ a("span", { children: d.label })
+            ] })
+          }
+        ),
+        b && d.children && /* @__PURE__ */ a(E, { children: d.children.map((u) => /* @__PURE__ */ a(T, { children: /* @__PURE__ */ a(
+          G,
+          {
+            asChild: s,
+            isActive: e === u.value,
+            href: s ? u.url : void 0,
+            onClick: s ? (w) => {
+              w.preventDefault(), i?.(u.value);
+            } : () => i?.(u.value),
+            children: /* @__PURE__ */ a("span", { children: u.label })
+          }
+        ) }, u.value)) })
+      ] }, d.value);
+    }) }) : c;
+    return /* @__PURE__ */ a(
+      "div",
       {
-        isActive: m,
-        children: [
-          /* @__PURE__ */ t(
-            R,
-            {
-              asChild: s,
-              isActive: m,
-              tooltip: d.label,
-              onClick: () => {
-                !s && !p && !d.disabled && n?.(d.value);
-              },
-              disabled: d.disabled,
-              children: s ? /* @__PURE__ */ g(
-                "a",
-                {
-                  href: d.url,
-                  "aria-disabled": d.disabled,
-                  className: d.disabled ? "pointer-events-none" : "",
-                  onClick: (b) => {
-                    if (d.disabled) {
-                      b.preventDefault();
-                      return;
-                    }
-                    if (p) {
-                      b.preventDefault();
-                      return;
-                    }
-                    b.preventDefault(), n?.(d.value);
-                  },
-                  children: [
-                    d.icon,
-                    /* @__PURE__ */ t("span", { children: d.label })
-                  ]
-                }
-              ) : /* @__PURE__ */ g(k, { children: [
-                d.icon,
-                /* @__PURE__ */ t("span", { children: d.label })
-              ] })
-            }
-          ),
-          p && d.children && /* @__PURE__ */ t(E, { children: d.children.map((b) => /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(
-            G,
-            {
-              asChild: s,
-              isActive: e === b.value,
-              href: s ? b.url : void 0,
-              onClick: s ? (w) => {
-                w.preventDefault(), n?.(b.value);
-              } : () => n?.(b.value),
-              children: /* @__PURE__ */ t("span", { children: b.label })
-            }
-          ) }, b.value)) })
-        ]
-      },
-      d.value
+        ref: f,
+        "data-sidebar": "content",
+        className: l(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
+          t
+        ),
+        ...p,
+        children: m
+      }
     );
-  }) }) : c;
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      ref: f,
-      "data-sidebar": "content",
-      className: l(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
-        a
-      ),
-      ...u,
-      children: h
-    }
-  );
-});
+  }
+);
 se.displayName = "SidebarContent";
-const de = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const de = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     "data-sidebar": "group",
-    className: l("relative flex w-full min-w-0 flex-col py-2 group-data-[state=collapsed]:px-0", a),
+    className: l(
+      "relative flex w-full min-w-0 flex-col py-2 group-data-[state=collapsed]:px-0",
+      t
+    ),
     ...r
   }
 ));
 de.displayName = "SidebarGroup";
-const le = i.forwardRef(({ className: a, asChild: r = !1, ...e }, o) => /* @__PURE__ */ t(
-  r ? C : "div",
+const le = n.forwardRef(({ className: t, asChild: r = !1, ...e }, o) => /* @__PURE__ */ a(
+  r ? N : "div",
   {
     ref: o,
     "data-sidebar": "group-label",
     className: l(
-      "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-navigation-foreground/70 outline-none ring-navigation-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-      a
+      t
     ),
     ...e
   }
 ));
 le.displayName = "SidebarGroupLabel";
-const ce = i.forwardRef(({ className: a, asChild: r = !1, ...e }, o) => /* @__PURE__ */ t(
-  r ? C : "button",
+const ce = n.forwardRef(({ className: t, asChild: r = !1, ...e }, o) => /* @__PURE__ */ a(
+  r ? N : "button",
   {
     ref: o,
     "data-sidebar": "group-action",
     className: l(
-      "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-navigation-foreground outline-none ring-navigation-ring transition-transform hover:bg-navigation-hover hover:text-navigation-on-hover focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       // Increases the hit area of the button on mobile.
       "after:absolute after:-inset-2 after:md:hidden",
       "group-data-[collapsible=icon]:hidden",
-      a
+      t
     ),
     ...e
   }
 ));
 ce.displayName = "SidebarGroupAction";
-const be = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const ue = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     "data-sidebar": "group-content",
-    className: l("w-full text-sm", a),
+    className: l("w-full text-sm", t),
     ...r
   }
 ));
-be.displayName = "SidebarGroupContent";
-const O = i.forwardRef(({ className: a, children: r, ...e }, o) => {
-  const { t: n } = N(), { autoHideAfter: s } = S(), [c, u] = i.useState(!1), f = i.Children.toArray(r), h = n("sidebar.viewMore"), d = n("sidebar.viewLess");
-  return /* @__PURE__ */ t(
+ue.displayName = "SidebarGroupContent";
+const O = n.forwardRef(({ className: t, children: r, ...e }, o) => {
+  const { t: i } = y(), { autoHideAfter: s } = S(), [c, p] = n.useState(!1), f = n.Children.toArray(r), m = i("sidebar.viewMore"), d = i("sidebar.viewLess");
+  return /* @__PURE__ */ a(
     "ul",
     {
       ref: o,
       "data-sidebar": "menu",
-      className: l("flex w-full min-w-0 flex-col gap-1", a),
+      className: l("flex w-full min-w-0 flex-col gap-1", t),
       ...e,
-      children: !s || f.length <= s + 1 ? r : /* @__PURE__ */ g(k, { children: [
+      children: !s || f.length <= s + 1 ? r : /* @__PURE__ */ g(C, { children: [
         f.slice(0, s),
-        /* @__PURE__ */ t(y, { children: /* @__PURE__ */ g(
-          R,
+        /* @__PURE__ */ a(R, { children: /* @__PURE__ */ g(
+          M,
           {
-            onClick: () => u(!c),
+            onClick: () => p(!c),
             className: "hover:bg-transparent",
-            tooltip: c ? d : h,
+            tooltip: c ? d : m,
             children: [
-              /* @__PURE__ */ t("div", { className: "text-[#3bb273]", children: /* @__PURE__ */ t(
+              /* @__PURE__ */ a("div", { className: "text-success", children: /* @__PURE__ */ a(
                 A,
                 {
                   size: "lg",
-                  className: l("transition-transform duration-200", c ? "-rotate-90" : "rotate-90")
+                  className: l(
+                    "transition-transform duration-200",
+                    c ? "-rotate-90" : "rotate-90"
+                  )
                 }
               ) }),
-              /* @__PURE__ */ t("span", { children: c ? d : h })
+              /* @__PURE__ */ a("span", { children: c ? d : m })
             ]
           }
         ) }),
@@ -402,42 +430,53 @@ const O = i.forwardRef(({ className: a, children: r, ...e }, o) => {
   );
 });
 O.displayName = "SidebarMenu";
-const y = i.forwardRef(({ className: a, isActive: r, ...e }, o) => /* @__PURE__ */ t(
+const R = n.forwardRef(({ className: t, isActive: r, ...e }, o) => /* @__PURE__ */ a(
   "li",
   {
     ref: o,
     "data-sidebar": "menu-item",
-    className: l("group/menu-item relative", a),
+    className: l("group/menu-item relative", t),
     ...e
   }
 ));
-y.displayName = "SidebarMenuItem";
-const D = i.forwardRef(({ children: a, isActive: r, defaultOpen: e, open: o, onOpenChange: n, ...s }, c) => {
-  const { state: u } = S(), [f, h] = i.useState(e ?? !1), d = o !== void 0 ? o : f, p = (m) => {
-    o === void 0 && h(m), n?.(m);
-  };
-  return i.useEffect(() => {
-    u === "expanded" && r && !d && p(!0);
-  }, [u, r]), /* @__PURE__ */ t(I.Provider, { value: { isCollapsible: !0 }, children: /* @__PURE__ */ t(
-    z.Root,
-    {
-      ref: c,
-      asChild: !0,
-      open: d,
-      onOpenChange: p,
-      ...s,
-      children: /* @__PURE__ */ t(y, { children: a })
-    }
-  ) });
-});
+R.displayName = "SidebarMenuItem";
+const D = n.forwardRef(
+  ({
+    children: t,
+    isActive: r,
+    defaultOpen: e,
+    open: o,
+    onOpenChange: i,
+    ...s
+  }, c) => {
+    const { state: p } = S(), [f, m] = n.useState(
+      e ?? !1
+    ), d = o !== void 0 ? o : f, b = (v) => {
+      o === void 0 && m(v), i?.(v);
+    };
+    return n.useEffect(() => {
+      p === "expanded" && r && !d && b(!0);
+    }, [p, r]), /* @__PURE__ */ a(_.Provider, { value: { isCollapsible: !0 }, children: /* @__PURE__ */ a(
+      k.Root,
+      {
+        ref: c,
+        asChild: !0,
+        open: d,
+        onOpenChange: b,
+        ...s,
+        children: /* @__PURE__ */ a(R, { children: t })
+      }
+    ) });
+  }
+);
 D.displayName = "SidebarMenuCollapsible";
-const ue = H(
-  "peer/menu-button flex w-full items-center gap-[22px] overflow-hidden py-[14px] px-[22px] text-left text-[14px] outline-none ring-sidebar-ring transition-[width,height,padding,background-color] hover:bg-[#1f2b4d] hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:text-[#7a8294] group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-[#7a8294] aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-[#1f2b4d] data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[22px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-[#3bb273] before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
+const pe = H(
+  "peer/menu-button flex w-full items-center gap-[22px] overflow-hidden py-[14px] px-[22px] text-left text-[14px] outline-none ring-navigation-ring transition-[width,height,padding,background-color] hover:bg-navigation-item-active hover:text-navigation-on-hover focus-visible:ring-2 disabled:pointer-events-none disabled:text-navigation-muted group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-navigation-muted aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-navigation-item-active data-[active=true]:font-medium data-[active=true]:text-navigation-on-hover cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[22px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-success before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
   {
     variants: {
       variant: {
         default: "",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+        outline: "bg-canvas shadow-[0_0_0_1px_var(--color-sidebar-border)] hover:bg-navigation-hover hover:text-navigation-on-hover hover:shadow-[0_0_0_1px_var(--color-sidebar-hover)]"
       },
       size: {
         default: "h-12 text-sm",
@@ -450,64 +489,71 @@ const ue = H(
       size: "default"
     }
   }
-), R = i.forwardRef(
+), M = n.forwardRef(
   ({
-    asChild: a = !1,
+    asChild: t = !1,
     isActive: r = !1,
     variant: e = "default",
     size: o = "default",
-    tooltip: n,
+    tooltip: i,
     className: s,
     children: c,
-    ...u
+    ...p
   }, f) => {
-    const h = a ? C : "button", { state: d, setOpen: p } = S(), x = !!i.useContext(I)?.isCollapsible, b = /* @__PURE__ */ t(
-      h,
+    const m = t ? N : "button", { state: d, setOpen: b } = S(), x = !!n.useContext(_)?.isCollapsible, u = /* @__PURE__ */ a(
+      m,
       {
         ref: f,
         "data-sidebar": "menu-button",
         "data-size": o,
         "data-active": r,
-        className: l("relative", ue({ variant: e, size: o }), s),
-        ...u,
-        onClick: (v) => {
-          d === "collapsed" && x && (p(!0), r && (v.preventDefault(), v.stopPropagation())), u.onClick?.(v);
+        className: l(
+          "relative",
+          pe({ variant: e, size: o }),
+          s
+        ),
+        ...p,
+        onClick: (h) => {
+          d === "collapsed" && x && (b(!0), r && (h.preventDefault(), h.stopPropagation())), p.onClick?.(h);
         },
-        children: a ? c : /* @__PURE__ */ g(k, { children: [
+        children: t ? c : /* @__PURE__ */ g(C, { children: [
           c,
-          x && /* @__PURE__ */ t(A, { "data-sidebar": "menu-button-chevron" })
+          x && /* @__PURE__ */ a(A, { "data-sidebar": "menu-button-chevron" })
         ] })
       }
-    ), w = x ? /* @__PURE__ */ t(z.Trigger, { asChild: !0, children: b }) : b;
-    return n ? (typeof n == "string" && (n = {
-      children: n
+    ), w = x ? /* @__PURE__ */ a(k.Trigger, { asChild: !0, children: u }) : u;
+    return i ? (typeof i == "string" && (i = {
+      children: i
     }), /* @__PURE__ */ g(F, { children: [
-      /* @__PURE__ */ t(q, { asChild: !0, children: w }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(q, { asChild: !0, children: w }),
+      /* @__PURE__ */ a(
         K,
         {
           side: "right",
           align: "center",
           variant: "tertiary",
           hidden: d !== "collapsed",
-          ...n
+          ...i
         }
       )
     ] })) : w;
   }
 );
-R.displayName = "SidebarMenuButton";
-const pe = i.forwardRef(({ className: a, isActive: r, ...e }, o) => {
-  const { t: n } = N(), s = n("sidebar.logout");
+M.displayName = "SidebarMenuButton";
+const be = n.forwardRef(({ className: t, isActive: r, ...e }, o) => {
+  const { t: i } = y(), s = i("sidebar.logout");
   return /* @__PURE__ */ g(
-    R,
+    M,
     {
       ref: o,
-      className: l("text-[#3bb273] hover:text-[#3bb273] hover:bg-[#30416e]", a),
+      className: l(
+        "text-success hover:text-success hover:bg-navigation-item-hover",
+        t
+      ),
       "aria-label": s,
       ...e,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "svg",
           {
             width: "20",
@@ -515,7 +561,7 @@ const pe = i.forwardRef(({ className: a, isActive: r, ...e }, o) => {
             viewBox: "0 0 24 24",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ t(
+            children: /* @__PURE__ */ a(
               "path",
               {
                 d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
@@ -527,74 +573,74 @@ const pe = i.forwardRef(({ className: a, isActive: r, ...e }, o) => {
             )
           }
         ),
-        /* @__PURE__ */ t("span", { children: s })
+        /* @__PURE__ */ a("span", { children: s })
       ]
     }
   );
 });
-pe.displayName = "SidebarLogout";
-const fe = i.forwardRef(({ className: a, asChild: r = !1, showOnHover: e = !1, ...o }, n) => /* @__PURE__ */ t(
-  r ? C : "button",
+be.displayName = "SidebarLogout";
+const fe = n.forwardRef(({ className: t, asChild: r = !1, showOnHover: e = !1, ...o }, i) => /* @__PURE__ */ a(
+  r ? N : "button",
   {
-    ref: n,
+    ref: i,
     "data-sidebar": "menu-action",
     className: l(
-      "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+      "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-navigation-foreground outline-none ring-navigation-ring transition-transform hover:bg-navigation-hover hover:text-navigation-on-hover focus-visible:ring-2 peer-hover/menu-button:text-navigation-on-hover [&>svg]:size-4 [&>svg]:shrink-0",
       // Increases the hit area of the button on mobile.
       "after:absolute after:-inset-2 after:md:hidden",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
       "peer-data-[size=lg]/menu-button:top-2.5",
       "group-data-[collapsible=icon]:hidden",
-      e && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-      a
+      e && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-navigation-on-hover md:opacity-0",
+      t
     ),
     ...o
   }
 ));
 fe.displayName = "SidebarMenuAction";
-const me = i.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+const me = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
     "data-sidebar": "menu-badge",
     className: l(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-navigation-foreground",
+      "peer-hover/menu-button:text-navigation-on-hover peer-data-[active=true]/menu-button:text-navigation-on-hover",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
       "peer-data-[size=lg]/menu-button:top-2.5",
       "group-data-[collapsible=icon]:hidden",
-      a
+      t
     ),
     ...r
   }
 ));
 me.displayName = "SidebarMenuBadge";
-const ge = i.forwardRef(({ className: a, showIcon: r = !1, ...e }, o) => {
-  const n = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+const ge = n.forwardRef(({ className: t, showIcon: r = !1, ...e }, o) => {
+  const i = n.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
   return /* @__PURE__ */ g(
     "div",
     {
       ref: o,
       "data-sidebar": "menu-skeleton",
-      className: l("flex h-8 items-center gap-2 rounded-md px-2", a),
+      className: l("flex h-8 items-center gap-2 rounded-md px-2", t),
       ...e,
       children: [
-        r && /* @__PURE__ */ t(
-          _,
+        r && /* @__PURE__ */ a(
+          I,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ t(
-          _,
+        /* @__PURE__ */ a(
+          I,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
             "data-sidebar": "menu-skeleton-text",
             style: {
-              "--skeleton-width": n
+              "--skeleton-width": i
             }
           }
         )
@@ -603,8 +649,8 @@ const ge = i.forwardRef(({ className: a, showIcon: r = !1, ...e }, o) => {
   );
 });
 ge.displayName = "SidebarMenuSkeleton";
-const E = i.forwardRef(({ className: a, ...r }, e) => {
-  const n = !!i.useContext(I)?.isCollapsible, s = /* @__PURE__ */ t(
+const E = n.forwardRef(({ className: t, ...r }, e) => {
+  const i = !!n.useContext(_)?.isCollapsible, s = /* @__PURE__ */ a(
     "ul",
     {
       ref: e,
@@ -612,63 +658,63 @@ const E = i.forwardRef(({ className: a, ...r }, e) => {
       className: l(
         "relative ml-8 mt-2 mb-2 flex min-w-0 flex-col gap-0 py-0",
         "group-data-[state=collapsed]:hidden",
-        a
+        t
       ),
       ...r
     }
   );
-  return n ? /* @__PURE__ */ t(z.Content, { className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", children: s }) : s;
+  return i ? /* @__PURE__ */ a(k.Content, { className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", children: s }) : s;
 });
 E.displayName = "SidebarMenuSub";
-const T = i.forwardRef(({ className: a, isActive: r, ...e }, o) => /* @__PURE__ */ t(
+const T = n.forwardRef(({ className: t, isActive: r, ...e }, o) => /* @__PURE__ */ a(
   "li",
   {
     ref: o,
     "data-sidebar": "menu-sub-item",
-    className: l("group/menu-sub-item relative", a),
+    className: l("group/menu-sub-item relative", t),
     ...e
   }
 ));
 T.displayName = "SidebarMenuSubItem";
-const G = i.forwardRef(({ asChild: a = !1, size: r = "md", isActive: e, className: o, ...n }, s) => /* @__PURE__ */ t(
-  a ? C : "a",
+const G = n.forwardRef(({ asChild: t = !1, size: r = "md", isActive: e, className: o, ...i }, s) => /* @__PURE__ */ a(
+  t ? N : "a",
   {
     ref: s,
     "data-sidebar": "menu-sub-button",
     "data-size": r,
     "data-active": e,
     className: l(
-      "relative flex h-auto min-w-0 items-center gap-2 overflow-hidden py-[14px] px-5 text-sidebar-foreground outline-none transition-colors hover:bg-[#30416e] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span]:truncate [&>span]:shrink [&>span]:text-[14px] [&>span]:whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
-      "data-[active=true]:font-medium data-[active=true]:text-[#3bb273]",
+      "relative flex h-auto min-w-0 items-center gap-2 overflow-hidden py-[14px] px-5 text-navigation-foreground outline-none transition-colors hover:bg-navigation-item-hover focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span]:truncate [&>span]:shrink [&>span]:text-[14px] [&>span]:whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
+      "data-[active=true]:font-medium data-[active=true]:text-success",
       "group-data-[state=collapsed]:hidden",
       "before:absolute before:left-0 before:top-0 before:w-1 before:transition-all before:duration-200 before:h-full before:z-10",
       "group-first/menu-sub-item:before:rounded-tr-[4px] group-last/menu-sub-item:before:rounded-br-[4px]",
-      e ? "before:bg-[#3bb273]" : "before:bg-[#1f2b4d]",
+      e ? "before:bg-success" : "before:bg-navigation-item-active",
       o
     ),
-    ...n,
-    children: n.children
+    ...i,
+    children: i.children
   }
 ));
 G.displayName = "SidebarMenuSubButton";
 export {
   Z as Sidebar,
   se as SidebarContent,
-  ne as SidebarFooter,
+  ie as SidebarFooter,
   de as SidebarGroup,
   ce as SidebarGroupAction,
-  be as SidebarGroupContent,
+  ue as SidebarGroupContent,
   le as SidebarGroupLabel,
-  ie as SidebarHeader,
+  ne as SidebarHeader,
   re as SidebarInput,
   te as SidebarInset,
-  pe as SidebarLogout,
+  be as SidebarLogout,
   O as SidebarMenu,
   fe as SidebarMenuAction,
   me as SidebarMenuBadge,
-  R as SidebarMenuButton,
+  M as SidebarMenuButton,
   D as SidebarMenuCollapsible,
-  y as SidebarMenuItem,
+  R as SidebarMenuItem,
   ge as SidebarMenuSkeleton,
   E as SidebarMenuSub,
   G as SidebarMenuSubButton,