@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/_chunks/sidebar.js

@@ -1,27 +1,29 @@
 "use client";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { bk as I, S as v } from "./primitives.js";
-import { e as z } from "./vendor-utils.js";
-import { IconLayoutSidebarLeftCollapse as O } from "@tabler/icons-react";
-import { useIsMobile as G } from "../hooks/use-mobile.js";
+import { jsx as s, jsxs as h, Fragment as G } from "react/jsx-runtime";
+import { bb as k, S as w } from "./primitives.js";
+import { ag as z } from "./vendor-utils.js";
+import { IconLayoutSidebarLeftCollapse as q } from "@tabler/icons-react";
+import { useIsMobile as L } from "../hooks/use-mobile.js";
+import { m as j, s as H } from "./motion2.js";
 import { c as i } from "./utils.js";
-import { B as q } from "./button.js";
+import { B as K } from "./button.js";
 import * as B from "react";
-import { createContext as L, forwardRef as o, useState as _, useCallback as C, useEffect as j, useMemo as E, useContext as H } from "react";
-import { u as K } from "./form.js";
-import { Sheet as V, SheetContent as F } from "../ui/sheet.js";
-import { Skeleton as k } from "../ui/skeleton.js";
-import { T as $, a as P, b as W, c as U } from "./tooltip.js";
-const X = z([
+import { createContext as F, forwardRef as o, useState as _, useCallback as C, useEffect as V, useMemo as E, useContext as P } from "react";
+import { u as $ } from "./form.js";
+import { m as T } from "./motion.js";
+import { Sheet as W, SheetContent as U } from "../ui/sheet.js";
+import { Skeleton as I } from "../ui/skeleton.js";
+import { T as X, a as Y, b as J, c as Q } from "./tooltip.js";
+const Z = z([
   "flex w-full font-sans",
-  "bg-field text-text-primary",
-  "border border-border-subtle rounded-ds-md",
-  "placeholder:text-text-placeholder",
-  "hover:bg-field-hover",
+  "bg-surface-3 text-surface-fg",
+  "border border-surface-border rounded-ds-md",
+  "placeholder:text-surface-fg-subtle",
+  "hover:bg-surface-4",
   "transition-colors duration-fast-01",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus/50 focus-visible:border-border-subtle",
-  "disabled:cursor-not-allowed disabled:opacity-[0.38]",
-  "read-only:bg-layer-02 read-only:cursor-default"
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-7 focus-visible:border-surface-border",
+  "disabled:cursor-not-allowed disabled:opacity-action-disabled",
+  "read-only:bg-surface-2 read-only:cursor-default"
 ], {
   variants: {
     size: {
@@ -31,127 +33,127 @@ const X = z([
     }
   },
   defaultVariants: { size: "md" }
-}), T = B.forwardRef(({ className: a, type: e, state: t, size: d, startIcon: s, endIcon: n, ...c }, f) => {
-  const l = K(), u = t ?? (l.state === "helper" ? void 0 : l.state), m = c["aria-describedby"] ?? l.helperTextId, g = c["aria-required"] ?? l.required, y = r("input", { type: e, className: i(X({ size: d }), s && "pl-ds-07", n && "pr-ds-07", u === "error" && "border-border-error focus-visible:ring-error", u === "warning" && "border-border-warning focus-visible:ring-warning", u === "success" && "border-border-success focus-visible:ring-success", a), "aria-invalid": u === "error" || void 0, "aria-describedby": m, "aria-required": g || void 0, ref: f, ...c });
-  return !s && !n ? y : x("div", { className: "relative flex items-center w-full", children: [s && r("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: s }), y, n && r("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: n })] });
+}), R = B.forwardRef(({ className: a, type: e, state: t, size: d, startIcon: r, endIcon: n, ...c }, p) => {
+  const l = $(), u = t ?? (l.state === "helper" ? void 0 : l.state), f = c["aria-describedby"] ?? l.helperTextId, v = c["aria-required"] ?? l.required, g = s(T.input, { type: e, className: i(Z({ size: d }), r && "pl-ds-07", n && "pr-ds-07", u === "error" && "border-error-7 focus-visible:ring-error-7", u === "warning" && "border-warning-7 focus-visible:ring-warning-7", u === "success" && "border-success-7 focus-visible:ring-success-7", a), "aria-invalid": u === "error" || void 0, "aria-describedby": f, "aria-required": v || void 0, ref: p, ...j(c) });
+  return !r && !n ? g : h("div", { className: "relative flex items-center w-full", children: [r && s("span", { className: "absolute left-ds-03 flex items-center text-surface-fg-muted pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: r }), g, n && s("span", { className: "absolute right-ds-03 flex items-center text-surface-fg-muted pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: n })] });
 });
-T.displayName = "Input";
-const R = B.forwardRef(({ className: a, orientation: e = "horizontal", decorative: t = !0, ...d }, s) => r(I, { ref: s, decorative: t, orientation: e, className: i("shrink-0 bg-border-subtle", e === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a), ...d }));
-R.displayName = I.displayName;
-const Y = "sidebar:state", J = 60 * 60 * 24 * 7, Q = "16rem", Z = "18rem", ee = "3rem", ae = "b", A = L(null);
+R.displayName = "Input";
+const D = B.forwardRef(({ className: a, orientation: e = "horizontal", decorative: t = !0, ...d }, r) => s(k, { ref: r, decorative: t, orientation: e, className: i("shrink-0 bg-surface-border", e === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a), ...d }));
+D.displayName = k.displayName;
+const ee = "sidebar:state", ae = 60 * 60 * 24 * 7, te = "16rem", se = "18rem", re = "3rem", ie = "b", A = F(null);
 function N() {
-  const a = H(A);
+  const a = P(A);
   if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return a;
 }
-const te = o(
+const de = o(
   ({
     defaultOpen: a = !0,
     open: e,
     onOpenChange: t,
     className: d,
-    style: s,
+    style: r,
     children: n,
     ...c
-  }, f) => {
-    const l = G(), [u, m] = _(!1), [g, y] = _(a), h = e ?? g, w = C(
-      (p) => {
-        const b = typeof p == "function" ? p(h) : p;
-        t ? t(b) : y(b), document.cookie = `${Y}=${b}; path=/; max-age=${J}`;
+  }, p) => {
+    const l = L(), [u, f] = _(!1), [v, g] = _(a), x = e ?? v, S = C(
+      (m) => {
+        const b = typeof m == "function" ? m(x) : m;
+        t ? t(b) : g(b), document.cookie = `${ee}=${b}; path=/; max-age=${ae}`;
       },
-      [t, h]
-    ), S = C(() => l ? m((p) => !p) : w((p) => !p), [l, w, m]);
-    j(() => {
-      const p = (b) => {
-        b.key === ae && (b.metaKey || b.ctrlKey) && (b.preventDefault(), S());
+      [t, x]
+    ), y = C(() => l ? f((m) => !m) : S((m) => !m), [l, S, f]);
+    V(() => {
+      const m = (b) => {
+        b.key === ie && (b.metaKey || b.ctrlKey) && (b.preventDefault(), y());
       };
-      return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
-    }, [S]);
-    const M = h ? "expanded" : "collapsed", D = E(
+      return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
+    }, [y]);
+    const M = x ? "expanded" : "collapsed", O = E(
       () => ({
         state: M,
-        open: h,
-        setOpen: w,
+        open: x,
+        setOpen: S,
         isMobile: l,
         openMobile: u,
-        setOpenMobile: m,
-        toggleSidebar: S
+        setOpenMobile: f,
+        toggleSidebar: y
       }),
       [
         M,
-        h,
-        w,
+        x,
+        S,
         l,
         u,
-        m,
-        S
+        f,
+        y
       ]
     );
-    return /* @__PURE__ */ r(A.Provider, { value: D, children: /* @__PURE__ */ r($, { delayDuration: 0, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ s(A.Provider, { value: O, children: /* @__PURE__ */ s(X, { delayDuration: 0, children: /* @__PURE__ */ s(
       "div",
       {
         style: {
-          "--sidebar-width": Q,
-          "--sidebar-width-icon": ee,
-          ...s
+          "--sidebar-width": te,
+          "--sidebar-width-icon": re,
+          ...r
         },
         className: i(
-          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-background",
+          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-1",
           d
         ),
-        ref: f,
+        ref: p,
         ...c,
         children: n
       }
     ) }) });
   }
 );
-te.displayName = "SidebarProvider";
-const re = o(
+de.displayName = "SidebarProvider";
+const oe = o(
   ({
     side: a = "left",
     variant: e = "sidebar",
     collapsible: t = "offcanvas",
     className: d,
-    children: s,
+    children: r,
     ...n
   }, c) => {
-    const { isMobile: f, state: l, openMobile: u, setOpenMobile: m } = N();
-    return t === "none" ? /* @__PURE__ */ r(
+    const { isMobile: p, state: l, openMobile: u, setOpenMobile: f } = N();
+    return t === "none" ? /* @__PURE__ */ s(
       "div",
       {
         className: i(
-          "flex h-full w-[--sidebar-width] flex-col bg-layer-01 text-text-primary",
+          "flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-surface-fg",
           d
         ),
         ref: c,
         ...n,
-        children: s
+        children: r
       }
-    ) : f ? /* @__PURE__ */ r(V, { open: u, onOpenChange: m, ...n, children: /* @__PURE__ */ r(
-      F,
+    ) : p ? /* @__PURE__ */ s(W, { open: u, onOpenChange: f, ...n, children: /* @__PURE__ */ s(
+      U,
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-layer-01 p-0 text-text-primary [&>button]:hidden",
+        className: "w-[--sidebar-width] bg-surface-1 p-0 text-surface-fg [&>button]:hidden",
         style: {
-          "--sidebar-width": Z
+          "--sidebar-width": se
         },
         side: a,
-        children: /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
+        children: /* @__PURE__ */ s("div", { className: "flex h-full w-full flex-col", children: r })
       }
-    ) }) : /* @__PURE__ */ x(
+    ) }) : /* @__PURE__ */ h(
       "div",
       {
         ref: c,
-        className: "group peer hidden text-text-primary md:block",
+        className: "group peer hidden text-surface-fg md:block",
         "data-state": l,
         "data-collapsible": l === "collapsed" ? t : "",
         "data-variant": e,
         "data-side": a,
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ s(
             "div",
             {
               className: i(
@@ -162,7 +164,7 @@ const re = o(
               )
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ s(
             "div",
             {
               className: i(
@@ -172,12 +174,12 @@ const re = o(
                 d
               ),
               ...n,
-              children: /* @__PURE__ */ r(
+              children: /* @__PURE__ */ s(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-layer-01 group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow",
-                  children: s
+                  className: "flex h-full w-full flex-col bg-surface-1 group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
+                  children: r
                 }
               )
             }
@@ -187,11 +189,11 @@ const re = o(
     );
   }
 );
-re.displayName = "Sidebar";
-const se = o(({ className: a, onClick: e, ...t }, d) => {
-  const { toggleSidebar: s } = N();
-  return /* @__PURE__ */ x(
-    q,
+oe.displayName = "Sidebar";
+const ne = o(({ className: a, onClick: e, ...t }, d) => {
+  const { toggleSidebar: r } = N();
+  return /* @__PURE__ */ h(
+    K,
     {
       ref: d,
       "data-sidebar": "trigger",
@@ -199,21 +201,21 @@ const se = o(({ className: a, onClick: e, ...t }, d) => {
       size: "icon-md",
       className: i("h-ds-xs-plus w-ds-xs-plus", a),
       onClick: (n) => {
-        e == null || e(n), s();
+        e == null || e(n), r();
       },
       ...t,
       children: [
-        /* @__PURE__ */ r(O, {}),
-        /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ s(q, {}),
+        /* @__PURE__ */ s("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
-se.displayName = "SidebarTrigger";
-const ie = o(
+ne.displayName = "SidebarTrigger";
+const le = o(
   ({ className: a, ...e }, t) => {
     const { toggleSidebar: d } = N();
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ s(
       "button",
       {
         ref: t,
@@ -223,10 +225,10 @@ const ie = o(
         onClick: d,
         title: "Toggle Sidebar",
         className: i(
-          "hover:after:bg-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] 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-layer-02",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-2",
           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
           "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
           a
@@ -236,14 +238,14 @@ const ie = o(
     );
   }
 );
-ie.displayName = "SidebarRail";
-const de = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+le.displayName = "SidebarRail";
+const ce = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "main",
     {
       ref: t,
       className: i(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "relative flex min-h-svh flex-1 flex-col bg-surface-1",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow",
         a
       ),
@@ -251,22 +253,22 @@ const de = o(
     }
   )
 );
-de.displayName = "SidebarInset";
-const oe = o(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  T,
+ce.displayName = "SidebarInset";
+const ue = o(({ className: a, ...e }, t) => /* @__PURE__ */ s(
+  R,
   {
     ref: t,
     "data-sidebar": "input",
     className: i(
-      "h-ds-sm w-full bg-layer-01 shadow-none focus-visible:ring-2 focus-visible:ring-focus",
+      "h-ds-sm w-full bg-surface-1 shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
       a
     ),
     ...e
   }
 ));
-oe.displayName = "SidebarInput";
-const ne = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+ue.displayName = "SidebarInput";
+const fe = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -276,9 +278,9 @@ const ne = o(
     }
   )
 );
-ne.displayName = "SidebarHeader";
-const le = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+fe.displayName = "SidebarHeader";
+const me = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -288,22 +290,22 @@ const le = o(
     }
   )
 );
-le.displayName = "SidebarFooter";
-const ce = o(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  R,
+me.displayName = "SidebarFooter";
+const be = o(({ className: a, ...e }, t) => /* @__PURE__ */ s(
+  D,
   {
     ref: t,
     "data-sidebar": "separator",
     className: i(
-      "bg-border-subtle mx-ds-03 w-auto",
+      "bg-surface-border mx-ds-03 w-auto",
       a
     ),
     ...e
   }
 ));
-ce.displayName = "SidebarSeparator";
-const ue = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+be.displayName = "SidebarSeparator";
+const pe = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -316,9 +318,9 @@ const ue = o(
     }
   )
 );
-ue.displayName = "SidebarContent";
-const me = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+pe.displayName = "SidebarContent";
+const ge = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -328,28 +330,28 @@ const me = o(
     }
   )
 );
-me.displayName = "SidebarGroup";
-const pe = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
-  e ? v : "div",
+ge.displayName = "SidebarGroup";
+const he = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ s(
+  e ? w : "div",
   {
     ref: d,
     "data-sidebar": "group-label",
     className: i(
-      "flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-text-secondary outline-none ring-focus transition-[margin,opa] duration-moderate-02 ease-linear focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      "flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-none ring-accent-9 transition-[margin,opa] duration-moderate-02 ease-linear focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
       a
     ),
     ...t
   }
 ));
-pe.displayName = "SidebarGroupLabel";
-const be = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
-  e ? v : "button",
+he.displayName = "SidebarGroupLabel";
+const ve = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ s(
+  e ? w : "button",
   {
     ref: d,
     "data-sidebar": "group-action",
     className: i(
-      "hover:bg-layer-02 absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-text-primary outline-none ring-focus transition-transform hover:text-text-primary focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      "hover:bg-surface-2 absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       "after:absolute after:-inset-2 after:md:hidden",
       "group-data-[collapsible=icon]:hidden",
       a
@@ -357,9 +359,9 @@ const be = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
     ...t
   }
 ));
-be.displayName = "SidebarGroupAction";
-const fe = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+ve.displayName = "SidebarGroupAction";
+const xe = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -369,9 +371,9 @@ const fe = o(
     }
   )
 );
-fe.displayName = "SidebarGroupContent";
-const ge = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+xe.displayName = "SidebarGroupContent";
+const we = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "ul",
     {
       ref: t,
@@ -381,9 +383,9 @@ const ge = o(
     }
   )
 );
-ge.displayName = "SidebarMenu";
-const he = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+we.displayName = "SidebarMenu";
+const Se = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "li",
     {
       ref: t,
@@ -393,14 +395,14 @@ const he = o(
     }
   )
 );
-he.displayName = "SidebarMenuItem";
-const xe = z(
-  "peer/menu-button hover:bg-layer-02 active:bg-interactive-subtle data-[active=true]:bg-interactive-subtle data-[state=open]:hover:bg-layer-02 flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-none ring-focus transition-[width,height,padding] hover:text-text-primary focus-visible:ring-2 active:text-text-primary disabled:pointer-events-none disabled:opacity-[0.38] group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-[0.38] data-[active=true]:font-medium data-[active=true]:text-text-primary data-[state=open]:hover:text-text-primary group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+Se.displayName = "SidebarMenuItem";
+const ye = z(
+  "peer/menu-button hover:bg-surface-2 active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-2 flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-none ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-layer-02 hover:text-text-primary",
-        outline: "hover:bg-layer-02 bg-background shadow-[0_0_0_1px_var(--color-border-subtle)] hover:text-text-primary hover:shadow-[0_0_0_1px_var(--color-border-strong)]"
+        default: "hover:bg-surface-2 hover:text-surface-fg",
+        outline: "hover:bg-surface-2 bg-surface-1 shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
       },
       size: {
         md: "h-ds-sm text-ds-md",
@@ -413,72 +415,84 @@ const xe = z(
       size: "md"
     }
   }
-), ve = o(
+), Ne = o(
   ({
     asChild: a = !1,
     isActive: e = !1,
     variant: t = "default",
     size: d = "md",
-    tooltip: s,
+    tooltip: r,
     className: n,
-    ...c
-  }, f) => {
-    const l = a ? v : "button", { isMobile: u, state: m } = N(), g = /* @__PURE__ */ r(
-      l,
+    children: c,
+    ...p
+  }, l) => {
+    const u = a ? w : "button", { isMobile: f, state: v } = N(), g = /* @__PURE__ */ s(
+      u,
       {
-        ref: f,
+        ref: l,
         "data-sidebar": "menu-button",
         "data-size": d,
         "data-active": e,
-        className: i(xe({ variant: t, size: d }), n),
-        ...c
+        className: i(ye({ variant: t, size: d }), !a && "relative", n),
+        ...p,
+        children: a ? c : /* @__PURE__ */ h(G, { children: [
+          e && /* @__PURE__ */ s(
+            T.span,
+            {
+              layoutId: "sidebar-active-indicator",
+              className: "absolute inset-0 rounded-ds-md bg-accent-2",
+              transition: H.smooth
+            }
+          ),
+          /* @__PURE__ */ s("span", { className: "relative z-[1] flex w-full items-center gap-[inherit]", children: c })
+        ] })
       }
     );
-    return s ? (typeof s == "string" && (s = {
-      children: s
-    }), /* @__PURE__ */ x(P, { children: [
-      /* @__PURE__ */ r(W, { asChild: !0, children: g }),
-      /* @__PURE__ */ r(
-        U,
+    return r ? (typeof r == "string" && (r = {
+      children: r
+    }), /* @__PURE__ */ h(Y, { children: [
+      /* @__PURE__ */ s(J, { asChild: !0, children: g }),
+      /* @__PURE__ */ s(
+        Q,
         {
           side: "right",
           align: "center",
-          hidden: m !== "collapsed" || u,
-          ...s
+          hidden: v !== "collapsed" || f,
+          ...r
         }
       )
     ] })) : g;
   }
 );
-ve.displayName = "SidebarMenuButton";
-const ye = o(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, s) => /* @__PURE__ */ r(
-  e ? v : "button",
+Ne.displayName = "SidebarMenuButton";
+const Me = o(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, r) => /* @__PURE__ */ s(
+  e ? w : "button",
   {
-    ref: s,
+    ref: r,
     "data-sidebar": "menu-action",
     className: i(
-      "hover:bg-layer-02 absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-text-primary outline-none ring-focus transition-transform hover:text-text-primary focus-visible:ring-2 peer-hover/menu-button:text-text-primary [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      "hover:bg-surface-2 absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       "after:absolute after:-inset-2 after:md:hidden",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=md]/menu-button:top-ds-02b",
       "peer-data-[size=lg]/menu-button:top-ds-03",
       "group-data-[collapsible=icon]:hidden",
-      t && "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-text-primary md:opacity-0",
+      t && "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-surface-fg md:opacity-0",
       a
     ),
     ...d
   }
 ));
-ye.displayName = "SidebarMenuAction";
-const we = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+Me.displayName = "SidebarMenuAction";
+const _e = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "div",
     {
       ref: t,
       "data-sidebar": "menu-badge",
       className: i(
-        "pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-text-primary",
-        "peer-hover/menu-button:text-text-primary peer-data-[active=true]/menu-button:text-text-primary",
+        "pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg",
+        "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=md]/menu-button:top-ds-02b",
         "peer-data-[size=lg]/menu-button:top-ds-03",
@@ -489,10 +503,10 @@ const we = o(
     }
   )
 );
-we.displayName = "SidebarMenuBadge";
-const Se = o(({ className: a, showIcon: e = !1, ...t }, d) => {
-  const s = E(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ x(
+_e.displayName = "SidebarMenuBadge";
+const Ce = o(({ className: a, showIcon: e = !1, ...t }, d) => {
+  const r = E(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: d,
@@ -500,20 +514,20 @@ const Se = o(({ className: a, showIcon: e = !1, ...t }, d) => {
       className: i("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", a),
       ...t,
       children: [
-        e && /* @__PURE__ */ r(
-          k,
+        e && /* @__PURE__ */ s(
+          I,
           {
             className: "h-ico-sm w-ico-sm rounded-ds-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ r(
-          k,
+        /* @__PURE__ */ s(
+          I,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
             "data-sidebar": "menu-skeleton-text",
             style: {
-              "--skeleton-width": s
+              "--skeleton-width": r
             }
           }
         )
@@ -521,15 +535,15 @@ const Se = o(({ className: a, showIcon: e = !1, ...t }, d) => {
     }
   );
 });
-Se.displayName = "SidebarMenuSkeleton";
-const Ne = o(
-  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+Ce.displayName = "SidebarMenuSkeleton";
+const Ie = o(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
     "ul",
     {
       ref: t,
       "data-sidebar": "menu-sub",
       className: i(
-        "mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-border-subtle px-ds-03 py-ds-01",
+        "mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01",
         "group-data-[collapsible=icon]:hidden",
         a
       ),
@@ -537,56 +551,56 @@ const Ne = o(
     }
   )
 );
-Ne.displayName = "SidebarMenuSub";
-const Me = o(
-  ({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a })
+Ie.displayName = "SidebarMenuSub";
+const ke = o(
+  ({ ...a }, e) => /* @__PURE__ */ s("li", { ref: e, ...a })
 );
-Me.displayName = "SidebarMenuSubItem";
-const _e = o(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...s }, n) => /* @__PURE__ */ r(
-  a ? v : "a",
+ke.displayName = "SidebarMenuSubItem";
+const ze = o(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...r }, n) => /* @__PURE__ */ s(
+  a ? w : "a",
   {
     ref: n,
     "data-sidebar": "menu-sub-button",
     "data-size": e,
     "data-active": t,
     className: i(
-      "hover:bg-layer-02 active:bg-interactive-subtle flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-text-primary outline-none ring-focus hover:text-text-primary focus-visible:ring-2 active:text-text-primary disabled:pointer-events-none disabled:opacity-[0.38] aria-disabled:pointer-events-none aria-disabled:opacity-[0.38] [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-text-primary",
-      "data-[active=true]:bg-interactive-subtle data-[active=true]:text-text-primary",
+      "hover:bg-surface-2 active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-none ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg",
+      "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg",
       e === "sm" && "text-ds-sm",
       e === "md" && "text-ds-md",
       "group-data-[collapsible=icon]:hidden",
       d
     ),
-    ...s
+    ...r
   }
 ));
-_e.displayName = "SidebarMenuSubButton";
+ze.displayName = "SidebarMenuSubButton";
 export {
-  T as I,
-  re as S,
-  ne as a,
-  ce as b,
-  ue as c,
-  me as d,
-  pe as e,
-  be as f,
-  fe as g,
-  ge as h,
-  le as i,
-  he as j,
-  ve as k,
-  we as l,
-  Ne as m,
-  Me as n,
-  _e as o,
-  se as p,
-  R as q,
-  oe as r,
-  de as s,
-  ye as t,
-  Se as u,
-  te as v,
-  ie as w,
-  X as x,
+  R as I,
+  oe as S,
+  fe as a,
+  be as b,
+  pe as c,
+  ge as d,
+  he as e,
+  ve as f,
+  xe as g,
+  we as h,
+  me as i,
+  Se as j,
+  Ne as k,
+  _e as l,
+  Ie as m,
+  ke as n,
+  ze as o,
+  ne as p,
+  D as q,
+  ue as r,
+  ce as s,
+  Me as t,
+  Ce as u,
+  de as v,
+  le as w,
+  Z as x,
   N as y
 };