ics-ui-kit 0.1.12 → 0.1.14

package/dist/components/sidebar.js

@@ -1,36 +1,27 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { e as T } from "../useBreakpoints-D8wKOvil.js";
+import { jsx as r, jsxs as p, Fragment as z } from "react/jsx-runtime";
+import { e as T } from "../useBreakpoints-DHvp74UL.js";
 import o from "react";
-import { T as B, b as D, c as A, a as E } from "../Tooltip-C4rVuWr4.js";
+import { T as B, b as D, c as A, a as E } from "../Tooltip-7Duaau0S.js";
 import { c as w } from "../cn-dsXlqdJg.js";
-import { S as G, a as L, b as O, d as H, e as P } from "../Sheet-zTMuP7C8.js";
+import { S as G, a as L, b as O, d as H, e as P } from "../Sheet-qTIXsqm0.js";
 import { I as R } from "../IconButton-DwkpNgn3.js";
 import { T as K } from "../TextInput-Cj50ImXi.js";
 import { D as j } from "../Divider-DPW5ZhZ8.js";
 import { S as v } from "../index-BtQfgaSF.js";
 import { T as n } from "../index-BVqs-uqP.js";
 import { S as I } from "../Skeleton-y6I-i9q5.js";
-import { S as $ } from "../ScrollShadowContainer-DdrnF8qU.js";
-import { c as k } from "../createLucideIcon-DwBrHnj9.js";
+import { S as F } from "../ScrollShadowContainer-DdrnF8qU.js";
+import { P as $ } from "../plus-BpxYPnAG.js";
+import { c as q } from "../createLucideIcon-DwBrHnj9.js";
 /**
  * @license lucide-react v0.460.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const q = k("PanelLeft", [
+const W = q("PanelLeft", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }]
-]);
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const F = k("Plus", [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
 ]), C = o.createContext(null);
 function N() {
   const e = o.useContext(C);
@@ -38,52 +29,52 @@ function N() {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return e;
 }
-const W = "sidebar_state", V = 60 * 60 * 24 * 7, U = "16rem", X = "18rem", Y = "3rem", J = "b", Q = n({
+const V = "sidebar_state", U = 60 * 60 * 24 * 7, X = "16rem", Y = "18rem", J = "3rem", Q = "b", Z = n({
   base: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-primary-bg"
-}), Z = o.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: i, style: s, children: d, ...p }, g) => {
-  const c = T(), [m, b] = o.useState(!1), [y, _] = o.useState(e), h = a ?? y, S = o.useCallback(
+}), ee = o.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: i, style: s, children: d, ...u }, m) => {
+  const c = T(), [f, g] = o.useState(!1), [y, k] = o.useState(e), h = a ?? y, S = o.useCallback(
     (l) => {
-      const u = typeof l == "function" ? l(h) : l;
-      t ? t(u) : _(u), document.cookie = `${W}=${u}; path=/; max-age=${V}`;
+      const b = typeof l == "function" ? l(h) : l;
+      t ? t(b) : k(b), document.cookie = `${V}=${b}; path=/; max-age=${U}`;
     },
     [t, h]
-  ), x = o.useCallback(() => c ? b((l) => !l) : S((l) => !l), [c, S, b]);
+  ), x = o.useCallback(() => c ? g((l) => !l) : S((l) => !l), [c, S, g]);
   o.useEffect(() => {
-    const l = (u) => {
-      u.key === J && (u.metaKey || u.ctrlKey) && (u.preventDefault(), x());
+    const l = (b) => {
+      b.key === Q && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
     };
     return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
   }, [x]);
-  const M = h ? "expanded" : "collapsed", z = o.useMemo(
+  const M = h ? "expanded" : "collapsed", _ = o.useMemo(
     () => ({
       state: M,
       open: h,
       setOpen: S,
       isMobile: c,
-      openMobile: m,
-      setOpenMobile: b,
+      openMobile: f,
+      setOpenMobile: g,
       toggleSidebar: x
     }),
-    [M, h, S, c, m, b, x]
+    [M, h, S, c, f, g, x]
   );
-  return /* @__PURE__ */ r(C.Provider, { value: z, children: /* @__PURE__ */ r(E, { delayDuration: 0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(C.Provider, { value: _, children: /* @__PURE__ */ r(E, { delayDuration: 0, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
-        "--sidebar-width": U,
-        "--sidebar-width-icon": Y,
+        "--sidebar-width": X,
+        "--sidebar-width-icon": J,
         ...s
       },
-      className: Q({ className: i }),
-      ref: g,
-      ...p,
+      className: Z({ className: i }),
+      ref: m,
+      ...u,
       children: d
     }
   ) }) });
 });
-Z.displayName = "SidebarProvider";
-const ee = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: i, children: s, ...d }, p) => {
-  const { isMobile: g, state: c, openMobile: m, setOpenMobile: b } = N();
+ee.displayName = "SidebarProvider";
+const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: i, children: s, ...d }, u) => {
+  const { state: m, openMobile: c, setOpenMobile: f } = N();
   return t === "none" ? /* @__PURE__ */ r(
     "div",
     {
@@ -91,82 +82,85 @@ const ee = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
         "text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col bg-sidebar-bg",
         i
       ),
-      ref: p,
+      ref: u,
       ...d,
       children: s
     }
-  ) : g ? /* @__PURE__ */ r(G, { open: m, onOpenChange: b, ...d, children: /* @__PURE__ */ f(
-    L,
-    {
-      "data-sidebar": "sidebar",
-      "data-mobile": "true",
-      className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
-      style: {
-        "--sidebar-width": X
-      },
-      side: e,
-      children: [
-        /* @__PURE__ */ f(O, { className: "sr-only", children: [
-          /* @__PURE__ */ r(H, { children: "Sidebar" }),
-          /* @__PURE__ */ r(P, { children: "Displays the mobile sidebar." })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
-      ]
-    }
-  ) }) : /* @__PURE__ */ f(
-    "div",
-    {
-      ref: p,
-      className: "text-sidebar-foreground group peer hidden md:block",
-      "data-state": c,
-      "data-collapsible": c === "collapsed" ? t : "",
-      "data-variant": a,
-      "data-side": e,
-      children: [
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: w(
-              "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              a === "floating" || a === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-            )
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: w(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-              e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-              // Adjust the padding for floating and inset variants.
-              a === "floating" || a === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
-              i
-            ),
-            ...d,
-            children: /* @__PURE__ */ r(
-              "div",
-              {
-                "data-sidebar": "sidebar",
-                className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
-                children: s
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  ) : /* @__PURE__ */ p(z, { children: [
+    /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(G, { open: c, onOpenChange: f, ...d, children: /* @__PURE__ */ p(
+      L,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
+        style: {
+          "--sidebar-width": Y
+        },
+        side: e,
+        children: [
+          /* @__PURE__ */ p(O, { className: "sr-only", children: [
+            /* @__PURE__ */ r(H, { children: "Sidebar" }),
+            /* @__PURE__ */ r(P, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        ref: u,
+        className: "text-sidebar-foreground group peer hidden lg:block",
+        "data-state": m,
+        "data-collapsible": m === "collapsed" ? t : "",
+        "data-variant": a,
+        "data-side": e,
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: w(
+                "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                "group-data-[collapsible=offcanvas]:w-0",
+                "group-data-[side=right]:rotate-180",
+                a === "floating" || a === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              )
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: w(
+                "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear lg:flex",
+                e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+                // Adjust the padding for floating and inset variants.
+                a === "floating" || a === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
+                i
+              ),
+              ...d,
+              children: /* @__PURE__ */ r(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
+                  children: s
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
 });
-ee.displayName = "Sidebar";
-const ae = o.forwardRef(
+ae.displayName = "Sidebar";
+const te = o.forwardRef(
   ({ onClick: e, ...a }, t) => {
     const { toggleSidebar: i } = N();
     return /* @__PURE__ */ r(
       R,
       {
-        icon: q,
+        icon: W,
         ref: t,
         "data-sidebar": "trigger",
         variant: "ghost",
@@ -179,8 +173,8 @@ const ae = o.forwardRef(
     );
   }
 );
-ae.displayName = "SidebarTrigger";
-const te = n({
+te.displayName = "SidebarTrigger";
+const re = n({
   base: [
     "absolute inset-y-0 z-20 hidden w-[5px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0 hover:after:-translate-x-1/2 hover:after:border-l hover:after:border-primary-border group-data-[side=left]:-right-[5px] group-data-[side=right]:left-0 sm:flex",
     "cursor-ew-resize",
@@ -188,7 +182,7 @@ const te = n({
     "[[data-side=left][data-collapsible=offcanvas]_&]:-right-[2.5px]",
     "[[data-side=right][data-collapsible=offcanvas]_&]:-left-[2.5px]"
   ]
-}), re = o.forwardRef(
+}), oe = o.forwardRef(
   ({ className: e, ...a }, t) => {
     const { toggleSidebar: i } = N();
     return /* @__PURE__ */ r(
@@ -200,58 +194,58 @@ const te = n({
         tabIndex: -1,
         onClick: i,
         title: "Toggle Sidebar",
-        className: te({ className: e }),
+        className: re({ className: e }),
         ...a
       }
     );
   }
 );
-re.displayName = "SidebarRail";
-const oe = n({
+oe.displayName = "SidebarRail";
+const ie = n({
   base: [
     "relative flex w-full flex-1 flex-col bg-secondary-bg",
     "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"
   ]
-}), ie = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("main", { ref: t, className: oe({ className: e }), ...a }));
-ie.displayName = "SidebarInset";
-const se = n({
+}), se = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: e }), ...a }));
+se.displayName = "SidebarInset";
+const ne = n({
   base: "h-8 w-full shadow-none"
-}), ne = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r(K, { ref: t, "data-sidebar": "input", className: se({ className: e }), ...a })
+}), de = o.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r(K, { ref: t, "data-sidebar": "input", className: ne({ className: e }), ...a })
 );
-ne.displayName = "SidebarInput";
-const de = n({
+de.displayName = "SidebarInput";
+const le = n({
   base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
-}), le = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: de({ className: e }), ...a }));
-le.displayName = "SidebarHeader";
-const ce = n({
+}), ce = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: le({ className: e }), ...a }));
+ce.displayName = "SidebarHeader";
+const be = n({
   base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
-}), be = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: ce({ className: e }), ...a }));
-be.displayName = "SidebarFooter";
-const ue = n({
+}), ue = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: e }), ...a }));
+ue.displayName = "SidebarFooter";
+const pe = n({
   base: "w-auto bg-secondary-border"
-}), pe = o.forwardRef(
+}), me = o.forwardRef(
   ({ className: e, ...a }, t) => /* @__PURE__ */ r(
     j,
     {
       ref: t,
       orientation: "horizontal",
       "data-sidebar": "separator",
-      className: ue({ className: e }),
+      className: pe({ className: e }),
       ...a
     }
   )
 );
-pe.displayName = "SidebarSeparator";
-const me = n({
+me.displayName = "SidebarSeparator";
+const fe = n({
   slots: {
     content: "flex flex-1 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden"
   }
-}), fe = o.forwardRef(
+}), ge = o.forwardRef(
   ({ className: e, children: a, ...t }, i) => {
-    const s = me();
+    const s = fe();
     return /* @__PURE__ */ r(
-      $,
+      F,
       {
         ref: i,
         "data-sidebar": "content",
@@ -263,54 +257,54 @@ const me = n({
     );
   }
 );
-fe.displayName = "SidebarContent";
-const ge = n({
+ge.displayName = "SidebarContent";
+const he = n({
   base: "relative flex w-full min-w-0 flex-col p-2 group-data-[variant=floating]:px-2.5"
-}), he = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ge({ className: e }), ...a }));
-he.displayName = "SidebarGroup";
-const ve = n({
+}), ve = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: he({ className: e }), ...a }));
+ve.displayName = "SidebarGroup";
+const ye = n({
   base: [
     "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-secondary-fg/70 outline-none 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"
   ]
-}), ye = o.forwardRef(
-  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(a ? v : "div", { ref: i, "data-sidebar": "group-label", className: ve({ className: e }), ...t })
+}), Se = o.forwardRef(
+  ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(a ? v : "div", { ref: i, "data-sidebar": "group-label", className: ye({ className: e }), ...t })
 );
-ye.displayName = "SidebarGroupLabel";
-const Se = n({
+Se.displayName = "SidebarGroupLabel";
+const xe = n({
   base: [
     "focus-visible:ring-primary2 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:shadow-focus [&>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"
   ]
-}), xe = o.forwardRef(
+}), we = o.forwardRef(
   ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(
     a ? v : "button",
     {
       ref: i,
       "data-sidebar": "group-action",
-      className: Se({ className: e }),
+      className: xe({ className: e }),
       ...t
     }
   )
 );
-xe.displayName = "SidebarGroupAction";
-const we = n({
+we.displayName = "SidebarGroupAction";
+const Ne = n({
   base: "w-full text-sm"
-}), Ne = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: we({ className: e }), ...a })
+}), Me = o.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Ne({ className: e }), ...a })
 );
-Ne.displayName = "SidebarGroupContent";
-const Me = n({
+Me.displayName = "SidebarGroupContent";
+const Ie = n({
   base: "flex w-full min-w-0 flex-col gap-1"
-}), Ie = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Me({ className: e }), ...a }));
-Ie.displayName = "SidebarMenu";
-const Re = n({
+}), Re = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Ie({ className: e }), ...a }));
+Re.displayName = "SidebarMenu";
+const Ce = n({
   base: "group/menu-item relative"
-}), ke = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: Re({ className: e }), ...a }));
+}), ke = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: Ce({ className: e }), ...a }));
 ke.displayName = "SidebarMenuItem";
-const Ce = n({
+const _e = n({
   base: [
     "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md bg-primary-bg p-2 text-left text-sm text-secondary-fg outline-none transition-[width,height,padding]",
     "hover:bg-primary-bg-hover hover:text-primary-fg focus-visible:shadow-focus",
@@ -339,27 +333,27 @@ const Ce = n({
     variant: "default",
     size: "default"
   }
-}), _e = o.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: i = "default", tooltip: s, className: d, ...p }, g) => {
-  const c = e ? v : "button", { isMobile: m, state: b } = N(), y = /* @__PURE__ */ r(
+}), ze = o.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: i = "default", tooltip: s, className: d, ...u }, m) => {
+  const c = e ? v : "button", { isMobile: f, state: g } = N(), y = /* @__PURE__ */ r(
     c,
     {
-      ref: g,
+      ref: m,
       "data-sidebar": "menu-button",
       "data-size": i,
       "data-active": a,
-      className: w(Ce({ variant: t, size: i }), d),
-      ...p
+      className: w(_e({ variant: t, size: i }), d),
+      ...u
     }
   );
   return s ? (typeof s == "string" && (s = {
     children: s
-  }), /* @__PURE__ */ f(B, { children: [
+  }), /* @__PURE__ */ p(B, { children: [
     /* @__PURE__ */ r(D, { asChild: !0, children: y }),
-    /* @__PURE__ */ r(A, { side: "right", align: "center", hidden: b !== "collapsed" || m, ...s })
+    /* @__PURE__ */ r(A, { side: "right", align: "center", hidden: g !== "collapsed" || f, ...s })
   ] })) : y;
 });
-_e.displayName = "SidebarMenuButton";
-const ze = n({
+ze.displayName = "SidebarMenuButton";
+const Te = n({
   base: [
     "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:ring-1 focus-visible:ring-primary peer-hover/menu-button:text-primary-fg [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
@@ -374,17 +368,17 @@ const ze = n({
       true: "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-primary-accent md:opacity-0"
     }
   }
-}), Te = o.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...i }, s) => /* @__PURE__ */ r(
+}), Be = o.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...i }, s) => /* @__PURE__ */ r(
   a ? v : "button",
   {
     ref: s,
     "data-sidebar": "menu-action",
-    className: ze({ isHover: t, className: e }),
+    className: Te({ isHover: t, className: e }),
     ...i
   }
 ));
-Te.displayName = "SidebarMenuAction";
-const Be = n({
+Be.displayName = "SidebarMenuAction";
+const De = n({
   base: [
     "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-normal tabular-nums leading-none text-muted",
     "peer-hover/menu-button:text-muted peer-disabled/menu-button:opacity-50 peer-data-[active=true]/menu-button:text-muted",
@@ -393,19 +387,19 @@ const Be = n({
     "peer-data-[size=lg]/menu-button:top-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), De = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Be({ className: e }), ...a })
+}), Ae = o.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: De({ className: e }), ...a })
 );
-De.displayName = "SidebarMenuBadge";
-const Ae = n({
+Ae.displayName = "SidebarMenuBadge";
+const Ee = n({
   slots: {
     wrapper: "flex h-8 items-center gap-2 rounded-md px-2",
     skeleton: "h-4 max-w-[--skeleton-width] flex-1",
     skeletonIcon: "size-4 rounded-md"
   }
-}), Ee = o.forwardRef(({ className: e, showIcon: a = !1, ...t }, i) => {
-  const s = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ae();
-  return /* @__PURE__ */ f("div", { ref: i, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: e }), ...t, children: [
+}), Ge = o.forwardRef(({ className: e, showIcon: a = !1, ...t }, i) => {
+  const s = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ee();
+  return /* @__PURE__ */ p("div", { ref: i, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: e }), ...t, children: [
     a && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
     /* @__PURE__ */ r(
       I,
@@ -419,23 +413,23 @@ const Ae = n({
     )
   ] });
 });
-Ee.displayName = "SidebarMenuSkeleton";
-const Ge = n({
+Ge.displayName = "SidebarMenuSkeleton";
+const Le = n({
   base: [
     "ml-3.5 flex min-w-0 flex-col gap-1 border-l border-secondary-border py-0.5 pl-2.5",
     "group-data-[collapsible=icon]:hidden"
   ]
-}), Le = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: Ge({ className: e }), ...a })
+}), Oe = o.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: Le({ className: e }), ...a })
 );
-Le.displayName = "SidebarMenuSub";
-const Oe = n({
+Oe.displayName = "SidebarMenuSub";
+const He = n({
   base: "rounded-md focus-visible:shadow-focus focus-visible:outline-none"
-}), He = o.forwardRef(
-  ({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, className: Oe({ className: e }), ...a })
+}), Pe = o.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, className: He({ className: e }), ...a })
 );
-He.displayName = "SidebarMenuSubItem";
-const Pe = n({
+Pe.displayName = "SidebarMenuSubItem";
+const Ke = n({
   base: [
     "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-secondary-fg outline-none hover:bg-secondary-bg-hover hover:text-primary-fg focus-visible:mr-0.5 focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-primary-fg",
     "data-[active=true]:bg-primary-bg-hover data-[active=true]:text-primary-accent",
@@ -447,19 +441,19 @@ const Pe = n({
       md: "text-sm"
     }
   }
-}), Ke = o.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: i, ...s }, d) => /* @__PURE__ */ r(
+}), je = o.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: i, ...s }, d) => /* @__PURE__ */ r(
   e ? v : "a",
   {
     ref: d,
     "data-sidebar": "menu-sub-button",
     "data-size": a,
     "data-active": t,
-    className: Pe({ size: a, className: i }),
+    className: Ke({ size: a, className: i }),
     ...s
   }
 ));
-Ke.displayName = "SidebarMenuSubButton";
-const je = n({
+je.displayName = "SidebarMenuSubButton";
+const Fe = n({
   slots: {
     wrapper: "group/insertion flex cursor-pointer flex-row items-center border-none bg-transparent p-0",
     icon: "peer/icon h-4 w-4 p-0.5 text-muted opacity-0 group-hover/insertion:opacity-100",
@@ -467,39 +461,39 @@ const je = n({
   }
 }), $e = o.forwardRef(
   ({ className: e, ...a }, t) => {
-    const i = je();
-    return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: e }), ref: t, ...a, children: [
-      /* @__PURE__ */ r(R, { icon: F, size: "xs", className: i.icon(), variant: "link" }),
+    const i = Fe();
+    return /* @__PURE__ */ p("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: e }), ref: t, ...a, children: [
+      /* @__PURE__ */ r(R, { icon: $, size: "xs", className: i.icon(), variant: "link" }),
       /* @__PURE__ */ r("div", { className: i.line() })
     ] });
   }
 );
 $e.displayName = "SidebarInsertionLine";
 export {
-  ee as Sidebar,
-  fe as SidebarContent,
-  be as SidebarFooter,
-  he as SidebarGroup,
-  xe as SidebarGroupAction,
-  Ne as SidebarGroupContent,
-  ye as SidebarGroupLabel,
-  le as SidebarHeader,
-  ne as SidebarInput,
+  ae as Sidebar,
+  ge as SidebarContent,
+  ue as SidebarFooter,
+  ve as SidebarGroup,
+  we as SidebarGroupAction,
+  Me as SidebarGroupContent,
+  Se as SidebarGroupLabel,
+  ce as SidebarHeader,
+  de as SidebarInput,
   $e as SidebarInsertionLine,
-  ie as SidebarInset,
-  Ie as SidebarMenu,
-  Te as SidebarMenuAction,
-  De as SidebarMenuBadge,
-  _e as SidebarMenuButton,
+  se as SidebarInset,
+  Re as SidebarMenu,
+  Be as SidebarMenuAction,
+  Ae as SidebarMenuBadge,
+  ze as SidebarMenuButton,
   ke as SidebarMenuItem,
-  Ee as SidebarMenuSkeleton,
-  Le as SidebarMenuSub,
-  Ke as SidebarMenuSubButton,
-  He as SidebarMenuSubItem,
-  Z as SidebarProvider,
-  re as SidebarRail,
-  pe as SidebarSeparator,
-  ae as SidebarTrigger,
+  Ge as SidebarMenuSkeleton,
+  Oe as SidebarMenuSub,
+  je as SidebarMenuSubButton,
+  Pe as SidebarMenuSubItem,
+  ee as SidebarProvider,
+  oe as SidebarRail,
+  me as SidebarSeparator,
+  te as SidebarTrigger,
   N as useSidebar
 };
 //# sourceMappingURL=sidebar.js.map