@alfadocs/ui-kit 1.54.2 → 1.55.0

package/dist/_chunks/{sidebar-2GBc0ZUa.js → sidebar-DLsG2AIk.js}

@@ -4,15 +4,15 @@ import * as R from "@radix-ui/react-dialog";
 import * as M from "@radix-ui/react-collapsible";
 import * as E from "@radix-ui/react-accordion";
 import * as h from "@radix-ui/react-tooltip";
-import { a as ts } from "./accordion-C11v9ouP.js";
-import { S as os } from "./scroll-area-BZOvUhwQ.js";
+import { a as os } from "./accordion-Ch3xp0mX.js";
+import { S as ts } from "./scroll-area-ZtFCv9K7.js";
 import { Slot as ls } from "@radix-ui/react-slot";
 import { c as T } from "./index-D2ZczOXr.js";
 import { useTranslation as A } from "react-i18next";
 import { u as cs } from "./registry-DvAUVLHh.js";
 import { u as us } from "./use-edge-resize-DHbyQwu8.js";
 import { c as ms } from "./compose-refs-C0k0tdqF.js";
-import { a as vs, b as ps, d as fs } from "./input-surface-xyERuLU_.js";
+import { a as vs, b as ps, d as fs } from "./input-surface-iBmxVBfr.js";
 import { X as gs } from "./x-B5YnXwCz.js";
 import { c as ss } from "./createLucideIcon-DhHxpK9K.js";
 import { G as bs } from "./grip-vertical-onSb1JXO.js";
@@ -29,18 +29,18 @@ const ys = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-], Ns = ss("panel-left-close", ys);
+], ws = ss("panel-left-close", ys);
 /**
  * @license lucide-react v1.22.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ws = [
+const Ns = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
-], zs = ss("panel-left-open", ws), Ss = {
+], zs = ss("panel-left-open", Ns), Ss = {
   id: "sidebar",
   capabilities: ["expand"],
   state: {
@@ -78,7 +78,7 @@ const ws = [
 }, $ = Z({
   mode: "expanded",
   density: "default"
-}), N = () => q($), es = "ui.sidebar.state";
+}), w = () => q($), es = "ui.sidebar.state";
 function js(e) {
   if (typeof window > "u") return e;
   try {
@@ -98,27 +98,24 @@ function Cs(e) {
 const Y = T(
   [
     "ds:flex ds:flex-col",
-    // Sidebar sits at the page background in light mode (white-on-white
-    // chrome separated by the inline-end border + --shadow-md). In dark
-    // mode the Header already blends with --background, so we step the
-    // sidebar one layer down (blue-600) to keep it visually distinct from
-    // the header band — matches the PDF dark mockups' "flat Dark Blue
-    // surface with subtle depth via layering" recipe.
-    "ds:bg-[var(--background)] ds:[.theme-dark_&]:bg-[color:var(--color-blue-600)] ds:text-[var(--foreground)]",
-    "ds:border-inline-end ds:border-[var(--border)]",
-    // Resting-surface elevation — `--shadow-md` is deliberately lighter
-    // than `--shadow-card` so it reads as chrome, not a floating card,
-    // while still separating the rail from the page content on light
-    // backgrounds. Forced-colors strips shadows globally, so the
-    // `border-inline-end` above carries the separation cue for HCM.
+    // `--sidebar-surface`: the page background in light mode (white-on-white
+    // chrome separated by --shadow-md). In dark mode the Header already
+    // blends with --background, so the token steps the sidebar one layer
+    // down (blue-600) to keep it visually distinct from the header band —
+    // matches the PDF dark mockups' "flat Dark Blue surface with subtle
+    // depth via layering" recipe. A token, so a light sidebar nested in a
+    // dark page stays light.
+    "ds:bg-[var(--sidebar-surface,var(--background))] ds:text-[var(--foreground)]",
+    // The inline-end hairline is drawn in the accessible themes only
+    // (--accessible-edge-width is 0 elsewhere).
+    "ds:[:where(&)]:border-e-[length:var(--accessible-edge-width,0px)] ds:border-[var(--border)]",
+    // Elevation is set per mode below. Forced colours strip shadows, so
+    // there only the accessible themes' `border-e` separates the rail.
     //
     // `relative z-[1]` lifts the rail above any sibling that paints a
     // solid background (e.g. AppFrame's `<main>` surface), otherwise
     // the shadow that projects towards the inline-end gets covered.
-    "ds:relative ds:z-[1] ds:shadow-[var(--shadow-md)]",
-    // Accessible (AAA) theme prefers a solid border over a soft shadow as the
-    // separation cue — swap the resting elevation for a real 1px `border-e`.
-    "ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:shadow-none",
+    "ds:relative ds:z-[1]",
     "ds:h-full",
     "ds:transition-[inline-size] ds:duration-[var(--animation-duration)]",
     "ds:motion-reduce:transition-none",
@@ -128,11 +125,13 @@ const Y = T(
   ].join(" "),
   {
     variants: {
+      // Tokenised widths (Linear / Jira proportions) and one elevation per
+      // mode: chrome `--shadow-md` docked, `--shadow-xl` for the drawer, none
+      // in the accessible themes. `[:where(&)]` lets a className shadow win.
       mode: {
-        // Tokenised widths modelled on Linear / Jira proportions.
-        expanded: "ds:w-[var(--sidebar-modern-expanded-size)]",
-        icon: "ds:w-[var(--sidebar-modern-icon-size)]",
-        overlay: "ds:w-[var(--sidebar-modern-expanded-size)]"
+        expanded: "ds:w-[var(--sidebar-modern-expanded-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-md))]",
+        icon: "ds:w-[var(--sidebar-modern-icon-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-md))]",
+        overlay: "ds:w-[var(--sidebar-modern-expanded-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-xl))]"
       },
       density: {
         default: "",
@@ -162,20 +161,20 @@ const Y = T(
     onStateChange: r,
     density: d = "default",
     open: n,
-    onOpenChange: o,
-    resizable: t = !1,
+    onOpenChange: t,
+    resizable: o = !1,
     "aria-label": l,
     className: c,
     children: m,
     id: f,
     ...g
   }, y) => {
-    const { t: x } = A("ui"), i = e !== void 0, [w, z] = B(
+    const { t: x } = A("ui"), i = e !== void 0, [N, z] = B(
       () => i ? e : js(a)
-    ), v = i ? e : w;
+    ), v = i ? e : N;
     L(() => {
-      i || Cs(w);
-    }, [w, i]);
+      i || Cs(N);
+    }, [N, i]);
     const S = Q(
       (k) => {
         i || z(k), r == null || r(k);
@@ -196,20 +195,20 @@ const Y = T(
       [S]
     );
     cs(Ss, F, f);
-    const D = G(null), _ = O(() => ms(y, D), [y]), { separatorProps: U, isResizing: P } = us({
+    const D = G(null), P = O(() => ms(y, D), [y]), { separatorProps: U, isResizing: _ } = us({
       edge: "inline-end",
       targetRef: D,
       cssProperty: "--sidebar-modern-expanded-size",
       minSize: ks,
       maxSize: Ts,
       defaultSize: Is,
-      disabled: !t || v !== "expanded"
-    }), V = t && v === "expanded";
+      disabled: !o || v !== "expanded"
+    }), V = o && v === "expanded";
     return v === "overlay" ? /* @__PURE__ */ s(
       $.Provider,
       {
         value: { mode: "overlay", density: d, transitionTo: S },
-        children: /* @__PURE__ */ s(R.Root, { open: n, onOpenChange: o, children: /* @__PURE__ */ u(R.Portal, { children: [
+        children: /* @__PURE__ */ s(R.Root, { open: n, onOpenChange: t, children: /* @__PURE__ */ u(R.Portal, { children: [
           /* @__PURE__ */ s(
             R.Overlay,
             {
@@ -234,7 +233,6 @@ const Y = T(
                 "ds:start-0 ds:top-0",
                 "ds:h-dvh",
                 Y({ mode: "overlay", density: d }),
-                "ds:shadow-[var(--shadow-xl)]",
                 "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
                 "ds:data-[state=open]:slide-in-from-left ds:data-[state=closed]:slide-out-to-left",
                 "ds:rtl:data-[state=open]:slide-in-from-right ds:rtl:data-[state=closed]:slide-out-to-right",
@@ -246,7 +244,7 @@ const Y = T(
                 /* @__PURE__ */ s(
                   "nav",
                   {
-                    ref: _,
+                    ref: P,
                     id: f,
                     "aria-label": j,
                     "data-component": "sidebar",
@@ -285,14 +283,14 @@ const Y = T(
         children: /* @__PURE__ */ s(h.Provider, { delayDuration: 300, children: /* @__PURE__ */ u(
           "nav",
           {
-            ref: _,
+            ref: P,
             id: f,
             "aria-label": j,
             "data-component": "sidebar",
             "data-component-id": f,
             "data-mode": v,
             "data-density": d,
-            "data-resizing": P ? "" : void 0,
+            "data-resizing": _ ? "" : void 0,
             className: [
               Y({ mode: v, density: d }),
               d === "compact" ? "ds:density-compact" : "",
@@ -306,7 +304,7 @@ const Y = T(
                 {
                   ...U,
                   "aria-label": x("navigation.sidebar.resize"),
-                  "data-resizing": P ? "" : void 0,
+                  "data-resizing": _ ? "" : void 0,
                   className: Rs
                 }
               ) : null
@@ -319,7 +317,7 @@ const Y = T(
 );
 Bs.displayName = "Sidebar";
 const As = b(({ className: e, ...a }, r) => {
-  const { mode: d } = N();
+  const { mode: d } = w();
   return /* @__PURE__ */ s(
     "div",
     {
@@ -356,7 +354,7 @@ const Ds = b(
     // body box (the ScrollArea root). Padding + `ref` + div props go on the inner
     // content div so the scrollbar sits flush at the inline-end edge.
     /* @__PURE__ */ s(
-      os,
+      ts,
       {
         orientation: "vertical",
         className: ["ds:flex-1 ds:min-h-0", e ?? ""].filter(Boolean).join(" "),
@@ -374,8 +372,8 @@ const Ds = b(
   )
 );
 Ds.displayName = "SidebarBody";
-const _s = b(({ className: e, ...a }, r) => {
-  const { mode: d } = N();
+const Ps = b(({ className: e, ...a }, r) => {
+  const { mode: d } = w();
   return /* @__PURE__ */ s(
     "div",
     {
@@ -397,8 +395,8 @@ const _s = b(({ className: e, ...a }, r) => {
     }
   );
 });
-_s.displayName = "SidebarFooter";
-const Ps = [
+Ps.displayName = "SidebarFooter";
+const _s = [
   "ds:group/section-label ds:flex ds:w-full ds:items-center",
   "type-eyebrow",
   "ds:text-[var(--muted-foreground)]",
@@ -420,16 +418,16 @@ const Ps = [
     collapsible: r = !0,
     defaultOpen: d = !0,
     open: n,
-    onOpenChange: o,
-    className: t,
+    onOpenChange: t,
+    className: o,
     children: l,
     ...c
   }, m) => {
-    const { mode: f } = N(), g = f === "icon", y = r && !g && !!e, x = [
+    const { mode: f } = w(), g = f === "icon", y = r && !g && !!e, x = [
       "ds:flex ds:flex-col",
       "ds:gap-[var(--spacing-xs)]",
       "ds:mt-[var(--spacing-sm)]",
-      t ?? ""
+      o ?? ""
     ].filter(Boolean).join(" ");
     if (!y)
       return /* @__PURE__ */ u("div", { ref: m, className: x, ...c, children: [
@@ -460,10 +458,10 @@ const Ps = [
         collapsible: !0,
         defaultValue: n === void 0 && d ? i : void 0,
         value: n === void 0 ? void 0 : n ? i : "",
-        onValueChange: o ? (w) => o(w === i) : void 0,
+        onValueChange: t ? (N) => t(N === i) : void 0,
         asChild: !0,
         children: /* @__PURE__ */ s("div", { ref: m, className: x, ...c, children: /* @__PURE__ */ u(E.Item, { value: i, children: [
-          /* @__PURE__ */ s(E.Header, { className: "ds:flex", children: /* @__PURE__ */ u(E.Trigger, { className: Ps, children: [
+          /* @__PURE__ */ s(E.Header, { className: "ds:flex", children: /* @__PURE__ */ u(E.Trigger, { className: _s, children: [
             a ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: J, children: a }) : null,
             /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:text-start", children: e }),
             /* @__PURE__ */ s(
@@ -475,7 +473,7 @@ const Ps = [
             )
           ] }) }),
           /* @__PURE__ */ s(
-            ts,
+            os,
             {
               "aria-label": e,
               className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
@@ -506,18 +504,18 @@ const Es = [
     children: r,
     className: d,
     defaultOpen: n,
-    open: o,
-    onOpenChange: t,
+    open: t,
+    onOpenChange: o,
     ...l
   }, c) => {
-    const { mode: m } = N();
+    const { mode: m } = w();
     return /* @__PURE__ */ u(
       M.Root,
       {
         ref: c,
         defaultOpen: n,
-        open: o,
-        onOpenChange: t,
+        open: t,
+        onOpenChange: o,
         className: d,
         ...l,
         children: [
@@ -634,13 +632,13 @@ const Fs = T(
     navId: r,
     isPinned: d = !1,
     onPinChange: n,
-    pinLabel: o,
-    className: t,
+    pinLabel: t,
+    className: o,
     children: l,
     "aria-label": c,
     ...m
   }, f) => {
-    const { mode: g, density: y } = N(), x = e ? ls : "a", i = n !== void 0 && g !== "icon", [w, z] = B(null), v = g === "icon" && c != null && w ? `${c}, ${w}` : c, S = /* @__PURE__ */ s(
+    const { mode: g, density: y } = w(), x = e ? ls : "a", i = n !== void 0 && g !== "icon", [N, z] = B(null), v = g === "icon" && c != null && N ? `${c}, ${N}` : c, S = /* @__PURE__ */ s(
       x,
       {
         ref: f,
@@ -651,7 +649,7 @@ const Fs = T(
           mode: g,
           density: y,
           isActive: a,
-          className: i ? "ds:flex-1 ds:min-w-0" : t
+          className: i ? "ds:flex-1 ds:min-w-0" : o
         }),
         ...m,
         children: l
@@ -661,7 +659,7 @@ const Fs = T(
       {
         className: [
           "ds:group/item ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
-          t ?? ""
+          o ?? ""
         ].filter(Boolean).join(" "),
         children: [
           S,
@@ -669,7 +667,7 @@ const Fs = T(
             W,
             {
               isPinned: d,
-              label: o ?? c ?? "",
+              label: t ?? c ?? "",
               onPinChange: n
             }
           )
@@ -723,7 +721,7 @@ const Us = b(({ className: e, children: a, ...r }, d) => /* @__PURE__ */ s(
 ));
 Us.displayName = "SidebarItemIcon";
 const Vs = b(({ className: e, children: a, ...r }, d) => {
-  const { mode: n } = N();
+  const { mode: n } = w();
   return /* @__PURE__ */ s(
     "span",
     {
@@ -742,20 +740,20 @@ const Vs = b(({ className: e, children: a, ...r }, d) => {
 });
 Vs.displayName = "SidebarItemLabel";
 const Ks = b(({ className: e, children: a, ...r }, d) => {
-  const { mode: n } = N(), o = n === "icon", t = q(rs);
+  const { mode: n } = w(), t = n === "icon", o = q(rs);
   return L(() => {
-    if (!t || !o) return;
+    if (!o || !t) return;
     const l = a == null || a === !1 ? null : String(a).trim() || null;
-    return t(l), () => t(null);
-  }, [t, a, o]), /* @__PURE__ */ s(
+    return o(l), () => o(null);
+  }, [o, a, t]), /* @__PURE__ */ s(
     "span",
     {
       ref: d,
-      "aria-hidden": o ? "true" : void 0,
+      "aria-hidden": t ? "true" : void 0,
       className: [
         "ds:inline-flex ds:items-center ds:justify-center",
         "ds:font-[var(--font-weight-semibold)]",
-        o ? [
+        t ? [
           "ds:absolute ds:top-[2px] ds:end-[2px]",
           "ds:min-w-0 ds:size-[10px] ds:ps-0 ds:pe-0",
           "ds:rounded-[var(--radius-full)]",
@@ -806,17 +804,18 @@ const Ms = T(
         // <SearchBar size="sm"> renders as a genuinely matched pair (identical
         // 32px box and label size) and stays in lockstep if that surface
         // evolves. `gap-3` + the shared `ps-3` line the pin glyph and label up
-        // with the search input's icon and text below. The bordered
-        // `--input`/`--shadow-input`/`--radius-sm` chrome mirrors the input's
-        // resting surface; opaque hover keeps the fill solid over a
-        // brand-tinted parent. 32px clears WCAG 2.5.8 (24px AA).
+        // with the search input's icon and text below. The 3:1
+        // `--control-border` edge and the `--input`/`--shadow-input`/
+        // `--radius-sm` chrome mirror the input's resting surface; opaque
+        // hover keeps the fill solid over a brand-tinted parent. 32px clears
+        // WCAG 2.5.8 (24px AA).
         field: [
           vs.sm,
           ps.sm,
           fs.sm,
           "ds:gap-3",
           "ds:rounded-[var(--radius-sm)]",
-          "ds:border ds:border-[var(--border)] ds:bg-[var(--input)]",
+          "ds:border ds:border-[color:var(--control-border)] ds:bg-[var(--input)]",
           "ds:shadow-[var(--shadow-input)]",
           "ds:hover:bg-[color-mix(in_srgb,var(--muted)_20%,var(--input))]"
         ].join(" ")
@@ -825,16 +824,16 @@ const Ms = T(
     defaultVariants: { variant: "ghost" }
   }
 ), Ls = b(
-  ({ logo: e, name: a, showChevron: r = !0, variant: d = "ghost", className: n, ...o }, t) => {
-    const { mode: l } = N(), c = l !== "icon";
+  ({ logo: e, name: a, showChevron: r = !0, variant: d = "ghost", className: n, ...t }, o) => {
+    const { mode: l } = w(), c = l !== "icon";
     return /* @__PURE__ */ u(
       "button",
       {
-        ref: t,
+        ref: o,
         type: "button",
         "aria-label": a,
         className: [Ms({ variant: d }), n].filter(Boolean).join(" "),
-        ...o,
+        ...t,
         children: [
           /* @__PURE__ */ s(
             "span",
@@ -883,16 +882,16 @@ const Gs = T(
     },
     defaultVariants: { mode: "expanded" }
   }
-), Os = b(({ icon: e, label: a, shortcut: r, className: d, ...n }, o) => {
-  const { mode: t } = N(), l = t !== "icon";
+), Os = b(({ icon: e, label: a, shortcut: r, className: d, ...n }, t) => {
+  const { mode: o } = w(), l = o !== "icon";
   return /* @__PURE__ */ u(
     "button",
     {
-      ref: o,
+      ref: t,
       type: "button",
       "aria-label": a,
       "aria-keyshortcuts": r,
-      className: [Gs({ mode: t }), d].filter(Boolean).join(" "),
+      className: [Gs({ mode: o }), d].filter(Boolean).join(" "),
       ...n,
       children: [
         /* @__PURE__ */ s(
@@ -937,14 +936,14 @@ const $s = [
   "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)]",
   "ds:motion-reduce:transition-none"
 ].join(" "), W = b(
-  ({ isPinned: e, onPinChange: a, label: r, className: d, onClick: n, ...o }, t) => {
-    const { t: l } = A("ui"), { mode: c } = N();
+  ({ isPinned: e, onPinChange: a, label: r, className: d, onClick: n, ...t }, o) => {
+    const { t: l } = A("ui"), { mode: c } = w();
     if (c === "icon") return null;
     const m = e ? l("navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : l("navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
     return /* @__PURE__ */ s(
       "button",
       {
-        ref: t,
+        ref: o,
         type: "button",
         "aria-label": m,
         "aria-pressed": e,
@@ -952,7 +951,7 @@ const $s = [
         onClick: (f) => {
           f.preventDefault(), f.stopPropagation(), a == null || a(!e), n == null || n(f);
         },
-        ...o,
+        ...t,
         children: /* @__PURE__ */ s(
           hs,
           {
@@ -967,9 +966,9 @@ const $s = [
 );
 W.displayName = "SidebarPinButton";
 const ds = Z(null), Xs = () => q(ds), qs = b(
-  ({ heading: e, emptyMessage: a, onReorder: r, className: d, children: n, ...o }, t) => {
-    const { t: l } = A("ui"), c = e ?? l("navigation.sidebar.favorites", "Favourites"), m = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], f = m.length, g = f > 0, [y, x] = B(null), [i, w] = B(""), z = G(!1), v = Q((j) => {
-      z.current = !z.current, w(z.current ? j : `${j}​`);
+  ({ heading: e, emptyMessage: a, onReorder: r, className: d, children: n, ...t }, o) => {
+    const { t: l } = A("ui"), c = e ?? l("navigation.sidebar.favorites", "Favourites"), m = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], f = m.length, g = f > 0, [y, x] = B(null), [i, N] = B(""), z = G(!1), v = Q((j) => {
+      z.current = !z.current, N(z.current ? j : `${j}​`);
     }, []), S = O(
       () => ({ onReorder: r, count: f, dragSource: y, setDragSource: x, announce: v }),
       [r, f, y, v]
@@ -977,10 +976,10 @@ const ds = Z(null), Xs = () => q(ds), qs = b(
     return !g && !a ? null : /* @__PURE__ */ s(ds.Provider, { value: S, children: /* @__PURE__ */ u(
       as,
       {
-        ref: t,
+        ref: o,
         label: c,
         className: d,
-        ...o,
+        ...t,
         children: [
           g ? m : /* @__PURE__ */ s("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: a }),
           /* @__PURE__ */ s("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: i })
@@ -1030,14 +1029,14 @@ const Zs = T(
     asChild: r = !1,
     reorderLabel: d,
     isPinned: n = !1,
-    onPinChange: o,
-    pinLabel: t,
+    onPinChange: t,
+    pinLabel: o,
     "aria-label": l,
     className: c,
     children: m,
     ...f
   }, g) => {
-    const { t: y } = A("ui"), { mode: x } = N(), i = Xs(), [w, z] = B(!1), v = !!(i != null && i.onReorder) && x !== "icon", S = d ?? l ?? "", j = ns(), C = (p, I) => {
+    const { t: y } = A("ui"), { mode: x } = w(), i = Xs(), [N, z] = B(!1), v = !!(i != null && i.onReorder) && x !== "icon", S = d ?? l ?? "", j = ns(), C = (p, I) => {
       if (!(i != null && i.onReorder)) return;
       const K = Math.max(0, Math.min(i.count - 1, I));
       K !== p && (i.onReorder(p, K), i.announce(
@@ -1051,11 +1050,11 @@ const Zs = T(
       v && (p.altKey && p.key === "ArrowUp" ? (p.preventDefault(), C(e, e - 1)) : p.altKey && p.key === "ArrowDown" ? (p.preventDefault(), C(e, e + 1)) : p.key === "Home" && p.altKey ? (p.preventDefault(), C(e, 0)) : p.key === "End" && p.altKey && (p.preventDefault(), C(e, i.count - 1)));
     }, D = (p) => {
       v && (i == null || i.setDragSource(e), p.dataTransfer && (p.dataTransfer.effectAllowed = "move", p.dataTransfer.setData("ds:text/plain", String(e))));
-    }, _ = () => {
+    }, P = () => {
       i == null || i.setDragSource(null), z(!1);
     }, U = (p) => {
       !v || (i == null ? void 0 : i.dragSource) === null || (p.preventDefault(), p.dataTransfer && (p.dataTransfer.dropEffect = "move"), z(!0));
-    }, P = () => z(!1), V = (p) => {
+    }, _ = () => z(!1), V = (p) => {
       if (!v) return;
       p.preventDefault();
       const I = i == null ? void 0 : i.dragSource;
@@ -1066,13 +1065,13 @@ const Zs = T(
       {
         className: Zs({
           dragging: k,
-          dropTarget: w && !k
+          dropTarget: N && !k
         }),
         draggable: v || void 0,
         onDragStart: v ? D : void 0,
-        onDragEnd: v ? _ : void 0,
+        onDragEnd: v ? P : void 0,
         onDragOver: U,
-        onDragLeave: P,
+        onDragLeave: _,
         onDrop: V,
         children: [
           /* @__PURE__ */ s(
@@ -1104,12 +1103,12 @@ const Zs = T(
               children: /* @__PURE__ */ s(bs, { "aria-hidden": "true", className: "ds:size-4" })
             }
           ) : null,
-          o && x !== "icon" ? /* @__PURE__ */ s(
+          t && x !== "icon" ? /* @__PURE__ */ s(
             W,
             {
               isPinned: n,
-              label: t ?? l ?? "",
-              onPinChange: o
+              label: o ?? l ?? "",
+              onPinChange: t
             }
           ) : null
         ]
@@ -1131,16 +1130,16 @@ const Js = T(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:no-underline"
   ].join(" ")
-), Qs = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: d, className: n, ...o }, t) => {
-  const { mode: l } = N(), c = l !== "icon", m = typeof r == "string" ? r : d;
+), Qs = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: d, className: n, ...t }, o) => {
+  const { mode: l } = w(), c = l !== "icon", m = typeof r == "string" ? r : d;
   return /* @__PURE__ */ u(
     "button",
     {
-      ref: t,
+      ref: o,
       type: "button",
       "aria-label": m ? `${a}, ${m}` : a,
       className: [Js(), n].filter(Boolean).join(" "),
-      ...o,
+      ...t,
       children: [
         /* @__PURE__ */ s(
           "span",
@@ -1170,12 +1169,12 @@ const se = [
   "ds:forced-colors:focus-visible:outline-[CanvasText]",
   "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
 ].join(" "), ee = b(({ className: e, "aria-label": a, onClick: r, ...d }, n) => {
-  const { t: o } = A("ui"), { mode: t, density: l, transitionTo: c } = N();
-  if (t === "overlay") return null;
-  const m = t === "expanded", f = m ? [
+  const { t } = A("ui"), { mode: o, density: l, transitionTo: c } = w();
+  if (o === "overlay") return null;
+  const m = o === "expanded", f = m ? [
     "ds:justify-start",
     l === "compact" ? "ds:ps-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-sm)]"
-  ].join(" ") : "ds:justify-center", g = a ?? (m ? o("navigation.sidebar.collapse", "Collapse sidebar") : o("navigation.sidebar.expand", "Expand sidebar")), y = /* @__PURE__ */ s(
+  ].join(" ") : "ds:justify-center", g = a ?? (m ? t("navigation.sidebar.collapse", "Collapse sidebar") : t("navigation.sidebar.expand", "Expand sidebar")), y = /* @__PURE__ */ s(
     "button",
     {
       ref: n,
@@ -1188,7 +1187,7 @@ const se = [
       className: [se, f, e].filter(Boolean).join(" "),
       ...d,
       children: /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center", children: m ? /* @__PURE__ */ s(
-        Ns,
+        ws,
         {
           "aria-hidden": "true",
           className: "ds:size-4 ds:rtl:-scale-x-100"
@@ -1207,7 +1206,7 @@ const se = [
     /* @__PURE__ */ s(h.Portal, { children: /* @__PURE__ */ u(
       h.Content,
       {
-        side: t === "icon" ? "right" : "top",
+        side: o === "icon" ? "right" : "top",
         sideOffset: 6,
         className: [
           "ds:z-[var(--z-tooltip)] ds:max-w-[16rem]",
@@ -1256,17 +1255,17 @@ const ae = T(
     },
     defaultVariants: { mode: "expanded" }
   }
-), re = b(({ title: e, description: a, icon: r, className: d, ...n }, o) => {
-  const { mode: t } = N(), l = t === "icon", c = (
+), re = b(({ title: e, description: a, icon: r, className: d, ...n }, t) => {
+  const { mode: o } = w(), l = o === "icon", c = (
     // aria-label only in icon mode (where the copy is hidden) — in
     // expanded mode the accessible name comes from the visible contents
     // so the description isn't excluded from it.
     /* @__PURE__ */ u(
       "a",
       {
-        ref: o,
+        ref: t,
         "aria-label": l ? e : void 0,
-        className: ae({ mode: t, className: d }),
+        className: ae({ mode: o, className: d }),
         ...n,
         children: [
           /* @__PURE__ */ s(
@@ -1331,7 +1330,7 @@ export {
   ee as b,
   Ys as c,
   qs as d,
-  _s as e,
+  Ps as e,
   Hs as f,
   As as g,
   is as h,
@@ -1345,6 +1344,6 @@ export {
   re as p,
   Ls as q,
   Ss as s,
-  N as u
+  w as u
 };
-//# sourceMappingURL=sidebar-2GBc0ZUa.js.map
+//# sourceMappingURL=sidebar-DLsG2AIk.js.map