@devalok/shilp-sutra 0.55.1 → 0.57.0

package/dist/ui/sidebar.js

@@ -1,70 +1,70 @@
 "use client";
 import { Slot as e } from "../_chunks/primitives-internal.js";
 import { springs as t } from "./lib/motion.js";
-import { cva as n } from "../_chunks/vendor-utils.js";
-import { cn as r } from "./lib/utils.js";
-import { Icon as i } from "./icon.js";
-import { useIsMobile as a } from "../hooks/use-mobile.js";
-import { Input as o } from "./input.js";
-import { Skeleton as s } from "./skeleton.js";
-import { Button as c } from "./button.js";
-import { Separator as l } from "./separator.js";
-import { Tooltip as u, TooltipContent as d, TooltipProvider as f, TooltipTrigger as p } from "./tooltip.js";
-import { Sheet as m, SheetContent as h } from "./sheet.js";
-import { createContext as g, forwardRef as _, useCallback as v, useContext as y, useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { IconLayoutSidebarLeftCollapse as ee } from "@tabler/icons-react";
-import { motion as D, useReducedMotion as te } from "framer-motion";
+import { cn as n } from "./lib/utils.js";
+import { Icon as r } from "./icon.js";
+import { useIsMobile as i } from "../hooks/use-mobile.js";
+import { Input as a } from "./input.js";
+import { Skeleton as o } from "./skeleton.js";
+import { Button as s } from "./button.js";
+import { Separator as c } from "./separator.js";
+import { Tooltip as l, TooltipContent as u, TooltipProvider as d, TooltipTrigger as f } from "./tooltip.js";
+import { Sheet as p, SheetContent as m } from "./sheet.js";
+import { createContext as h, forwardRef as g, useCallback as _, useContext as v, useEffect as ee, useMemo as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { IconLayoutSidebarLeftCollapse as T } from "@tabler/icons-react";
+import { motion as E, useReducedMotion as te } from "framer-motion";
+import { cva as ne } from "class-variance-authority";
 //#region src/ui/sidebar.tsx
-var ne = "sidebar:state", re = 3600 * 24 * 7, ie = "16rem", ae = "18rem", oe = "3rem", O = "b", k = g(null);
+var re = "sidebar:state", ie = 3600 * 24 * 7, ae = "16rem", D = "18rem", O = "3rem", oe = "b", k = h(null);
 function A() {
-	let e = y(k);
+	let e = v(k);
 	if (!e) throw Error("useSidebar must be used within a SidebarProvider.");
 	return e;
 }
-var j = _(({ defaultOpen: e = !0, open: t, onOpenChange: n, className: i, style: o, children: s, ...c }, l) => {
-	let u = a(), [d, p] = C(!1), [m, h] = C(e), g = t ?? m, _ = v((e) => {
+var j = g(({ defaultOpen: e = !0, open: t, onOpenChange: r, className: a, style: o, children: s, ...c }, l) => {
+	let u = i(), [f, p] = x(!1), [m, h] = x(e), g = t ?? m, v = _((e) => {
 		let t = typeof e == "function" ? e(g) : e;
-		n ? n(t) : h(t), typeof document < "u" && (document.cookie = `${ne}=${t}; path=/; max-age=${re}`);
-	}, [n, g]), y = v(() => u ? p((e) => !e) : _((e) => !e), [
+		r ? r(t) : h(t), typeof document < "u" && (document.cookie = `${re}=${t}; path=/; max-age=${ie}`);
+	}, [r, g]), b = _(() => u ? p((e) => !e) : v((e) => !e), [
 		u,
-		_,
+		v,
 		p
 	]);
-	b(() => {
+	ee(() => {
 		let e = (e) => {
-			e.key === O && (e.metaKey || e.ctrlKey) && (e.preventDefault(), y());
+			e.key === oe && (e.metaKey || e.ctrlKey) && (e.preventDefault(), b());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [y]);
-	let S = g ? "expanded" : "collapsed", w = x(() => ({
+	}, [b]);
+	let S = g ? "expanded" : "collapsed", w = y(() => ({
 		state: S,
 		open: g,
-		setOpen: _,
+		setOpen: v,
 		isMobile: u,
-		openMobile: d,
+		openMobile: f,
 		setOpenMobile: p,
-		toggleSidebar: y
+		toggleSidebar: b
 	}), [
 		S,
 		g,
-		_,
+		v,
 		u,
-		d,
+		f,
 		p,
-		y
+		b
 	]);
-	return /* @__PURE__ */ T(k.Provider, {
+	return /* @__PURE__ */ C(k.Provider, {
 		value: w,
-		children: /* @__PURE__ */ T(f, {
+		children: /* @__PURE__ */ C(d, {
 			delayDuration: 0,
-			children: /* @__PURE__ */ T("div", {
+			children: /* @__PURE__ */ C("div", {
 				style: {
-					"--sidebar-width": ie,
-					"--sidebar-width-icon": oe,
+					"--sidebar-width": ae,
+					"--sidebar-width-icon": O,
 					...o
 				},
-				className: r("group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken", i),
+				className: n("group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken", a),
 				ref: l,
 				...c,
 				children: s
@@ -74,8 +74,8 @@ var j = _(({ defaultOpen: e = !0, open: t, onOpenChange: n, className: i, style:
 });
 j.displayName = "SidebarProvider";
 function se({ side: e, onClose: t, children: n }) {
-	let r = te(), i = S(null), a = e === "left" ? { right: 0 } : { left: 0 };
-	return /* @__PURE__ */ T(D.div, {
+	let r = te(), i = b(null), a = e === "left" ? { right: 0 } : { left: 0 };
+	return /* @__PURE__ */ C(E.div, {
 		ref: i,
 		className: "h-full w-full",
 		drag: !r && "x",
@@ -88,181 +88,181 @@ function se({ side: e, onClose: t, children: n }) {
 		children: n
 	});
 }
-var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanvas", className: i, children: a, ...o }, s) => {
+var M = g(({ side: e = "left", variant: t = "sidebar", collapsible: r = "offcanvas", className: i, children: a, ...o }, s) => {
 	let { isMobile: c, state: l, openMobile: u, setOpenMobile: d } = A();
-	return n === "none" ? /* @__PURE__ */ T("aside", {
+	return r === "none" ? /* @__PURE__ */ C("aside", {
 		"aria-label": "Sidebar",
-		className: r("flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg", i),
+		className: n("flex h-full w-(--sidebar-width) flex-col bg-surface-base text-surface-fg", i),
 		ref: s,
 		...o,
 		children: a
-	}) : c ? /* @__PURE__ */ T(m, {
+	}) : c ? /* @__PURE__ */ C(p, {
 		open: u,
 		onOpenChange: d,
 		...o,
-		children: /* @__PURE__ */ T(h, {
+		children: /* @__PURE__ */ C(m, {
 			"data-sidebar": "sidebar",
 			"data-mobile": "true",
-			className: "w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden",
-			style: { "--sidebar-width": ae },
+			className: "w-(--sidebar-width) bg-surface-base p-0 text-surface-fg [&>button]:hidden",
+			style: { "--sidebar-width": D },
 			side: e,
 			responsive: !1,
-			children: /* @__PURE__ */ T(se, {
+			children: /* @__PURE__ */ C(se, {
 				side: e,
 				onClose: () => d(!1),
-				children: /* @__PURE__ */ T("aside", {
+				children: /* @__PURE__ */ C("aside", {
 					"aria-label": "Sidebar",
 					className: "flex h-full w-full flex-col",
 					children: a
 				})
 			})
 		})
-	}) : /* @__PURE__ */ E("div", {
+	}) : /* @__PURE__ */ w("div", {
 		ref: s,
 		className: "group peer hidden text-surface-fg md:block",
 		"data-state": l,
-		"data-collapsible": l === "collapsed" ? n : "",
+		"data-collapsible": l === "collapsed" ? r : "",
 		"data-variant": t,
 		"data-side": e,
-		children: [/* @__PURE__ */ T("div", { className: r("relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t === "floating" || t === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ T("div", {
-			className: r("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit 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)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
+		children: [/* @__PURE__ */ C("div", { className: n("relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t === "floating" || t === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ C("div", {
+			className: n("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit 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)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
 			...o,
-			children: /* @__PURE__ */ T("aside", {
+			children: /* @__PURE__ */ C("aside", {
 				"aria-label": "Sidebar",
 				"data-sidebar": "sidebar",
-				className: "flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised",
+				className: "flex h-full w-full flex-col bg-surface-base group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised",
 				children: a
 			})
 		})]
 	});
 });
 M.displayName = "Sidebar";
-var N = _(({ className: e, onClick: t, ...n }, a) => {
+var N = g(({ className: e, onClick: t, ...i }, a) => {
 	let { toggleSidebar: o } = A();
-	return /* @__PURE__ */ E(c, {
+	return /* @__PURE__ */ w(s, {
 		ref: a,
 		"data-sidebar": "trigger",
 		variant: "ghost",
 		size: "icon-md",
-		className: r("h-ds-xs-plus w-ds-xs-plus", e),
+		className: n("h-ds-xs-plus w-ds-xs-plus", e),
 		onClick: (e) => {
 			t?.(e), o();
 		},
-		...n,
-		children: [/* @__PURE__ */ T(i, {
-			icon: ee,
+		...i,
+		children: [/* @__PURE__ */ C(r, {
+			icon: T,
 			size: "sm"
-		}), /* @__PURE__ */ T("span", {
+		}), /* @__PURE__ */ C("span", {
 			className: "sr-only",
 			children: "Toggle Sidebar"
 		})]
 	});
 });
 N.displayName = "SidebarTrigger";
-var P = _(({ className: e, ...t }, n) => {
+var P = g(({ className: e, ...t }, r) => {
 	let { toggleSidebar: i } = A();
-	return /* @__PURE__ */ T("button", {
-		ref: n,
+	return /* @__PURE__ */ C("button", {
+		ref: r,
 		"data-sidebar": "rail",
 		"aria-label": "Toggle Sidebar",
 		tabIndex: -1,
 		onClick: i,
 		title: "Toggle Sidebar",
-		className: r("hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 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-surface-raised-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
+		className: n("hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 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-surface-panel-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
 		...t
 	});
 });
 P.displayName = "SidebarRail";
-var F = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("main", {
-	ref: n,
-	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] 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-overlay-lg md:peer-data-[variant=inset]:shadow-raised", e),
+var F = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("main", {
+	ref: r,
+	className: n("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] 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-overlay-lg", e),
 	...t
 }));
 F.displayName = "SidebarInset";
-var I = _(({ className: e, wrapperClassName: t, ...n }, i) => /* @__PURE__ */ T(o, {
+var I = g(({ className: e, wrapperClassName: t, ...r }, i) => /* @__PURE__ */ C(a, {
 	ref: i,
 	"data-sidebar": "input",
 	size: "sm",
-	wrapperClassName: r("bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
-	className: r("w-full", e),
-	...n
+	wrapperClassName: n("bg-surface-panel shadow-none focus-within:ring-2 focus-within:ring-accent-9", t),
+	className: n("w-full", e),
+	...r
 }));
 I.displayName = "SidebarInput";
-var L = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var L = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "header",
-	className: r("flex flex-col gap-ds-03 p-ds-03", e),
+	className: n("flex flex-col gap-ds-03 p-ds-03", e),
 	...t
 }));
 L.displayName = "SidebarHeader";
-var R = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var R = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "footer",
-	className: r("flex flex-col gap-ds-03 p-ds-03", e),
+	className: n("flex flex-col gap-ds-03 p-ds-03", e),
 	...t
 }));
 R.displayName = "SidebarFooter";
-var z = _(({ className: e, ...t }, n) => /* @__PURE__ */ T(l, {
-	ref: n,
+var z = g(({ className: e, ...t }, r) => /* @__PURE__ */ C(c, {
+	ref: r,
 	"data-sidebar": "separator",
-	className: r("bg-surface-border mx-ds-03 w-auto", e),
+	className: n("bg-surface-border mx-ds-03 w-auto", e),
 	...t
 }));
 z.displayName = "SidebarSeparator";
-var B = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var B = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "content",
-	className: r("flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden", e),
+	className: n("flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden", e),
 	...t
 }));
 B.displayName = "SidebarContent";
-var V = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var V = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "group",
-	className: r("relative flex w-full min-w-0 flex-col p-ds-03", e),
+	className: n("relative flex w-full min-w-0 flex-col p-ds-03", e),
 	...t
 }));
 V.displayName = "SidebarGroup";
-var H = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ T(n ? e : "div", {
+var H = g(({ className: t, asChild: r = !1, ...i }, a) => /* @__PURE__ */ C(r ? e : "div", {
 	ref: a,
 	"data-sidebar": "group-label",
-	className: r("flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit 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", t),
+	className: n("flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit 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", t),
 	...i
 }));
 H.displayName = "SidebarGroupLabel";
-var U = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ T(n ? e : "button", {
+var U = g(({ className: t, asChild: r = !1, ...i }, a) => /* @__PURE__ */ C(r ? e : "button", {
 	ref: a,
 	"data-sidebar": "group-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden 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", t),
+	className: n("hover:bg-surface-panel-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden 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", t),
 	...i
 }));
 U.displayName = "SidebarGroupAction";
-var W = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var W = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "group-content",
-	className: r("w-full text-body-md", e),
+	className: n("w-full text-body-md", e),
 	...t
 }));
 W.displayName = "SidebarGroupContent";
-var G = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
-	ref: n,
+var G = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("ul", {
+	ref: r,
 	"data-sidebar": "menu",
-	className: r("flex w-full min-w-0 flex-col gap-ds-02", e),
+	className: n("flex w-full min-w-0 flex-col gap-ds-02", e),
 	...t
 }));
 G.displayName = "SidebarMenu";
-var K = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("li", {
-	ref: n,
+var K = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("li", {
+	ref: r,
 	"data-sidebar": "menu-item",
-	className: r("group/menu-item relative", e),
+	className: n("group/menu-item relative", e),
 	...t
 }));
 K.displayName = "SidebarMenuItem";
-var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden 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", {
+var ce = ne("peer/menu-button hover:bg-surface-panel-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden 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-surface-raised-hover hover:text-surface-fg",
-			outline: "hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
+			default: "hover:bg-surface-panel-hover hover:text-surface-fg",
+			outline: "hover:bg-surface-panel-hover bg-surface-panel 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-body-md",
@@ -274,30 +274,30 @@ var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 		variant: "default",
 		size: "md"
 	}
-}), q = _(({ asChild: n = !1, isActive: i = !1, variant: a = "default", size: o = "md", tooltip: s, className: c, children: l, ...f }, m) => {
-	let h = n ? e : "button", { isMobile: g, state: _ } = A(), v = /* @__PURE__ */ T(h, {
+}), q = g(({ asChild: r = !1, isActive: i = !1, variant: a = "default", size: o = "md", tooltip: s, className: c, children: d, ...p }, m) => {
+	let h = r ? e : "button", { isMobile: g, state: _ } = A(), v = /* @__PURE__ */ C(h, {
 		ref: m,
 		"data-sidebar": "menu-button",
 		"data-size": o,
 		"data-active": i,
-		className: r(ce({
+		className: n(ce({
 			variant: a,
 			size: o
-		}), !n && "relative", c),
-		...f,
-		children: n ? l : /* @__PURE__ */ E(w, { children: [i && /* @__PURE__ */ T(D.span, {
+		}), !r && "relative", c),
+		...p,
+		children: r ? d : /* @__PURE__ */ w(S, { children: [i && /* @__PURE__ */ C(E.span, {
 			layoutId: "sidebar-active-indicator",
 			className: "absolute inset-0 rounded-control bg-accent-2",
 			transition: t.smooth
-		}), /* @__PURE__ */ T("span", {
+		}), /* @__PURE__ */ C("span", {
 			className: "relative z-[1] flex w-full items-center gap-[inherit]",
-			children: l
+			children: d
 		})] })
 	});
-	return s ? (typeof s == "string" && (s = { children: s }), /* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(p, {
+	return s ? (typeof s == "string" && (s = { children: s }), /* @__PURE__ */ w(l, { children: [/* @__PURE__ */ C(f, {
 		asChild: !0,
 		children: v
-	}), /* @__PURE__ */ T(d, {
+	}), /* @__PURE__ */ C(u, {
 		side: "right",
 		align: "center",
 		hidden: _ !== "collapsed" || g,
@@ -305,31 +305,31 @@ var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 	})] })) : v;
 });
 q.displayName = "SidebarMenuButton";
-var J = _(({ className: t, asChild: n = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ T(n ? e : "button", {
+var J = g(({ className: t, asChild: r = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ C(r ? e : "button", {
 	ref: o,
 	"data-sidebar": "menu-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden 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", i && "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", t),
+	className: n("hover:bg-surface-panel-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden 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", i && "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", t),
 	...a
 }));
 J.displayName = "SidebarMenuAction";
-var Y = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("div", {
-	ref: n,
+var Y = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("div", {
+	ref: r,
 	"data-sidebar": "menu-badge",
-	className: r("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-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", "group-data-[collapsible=icon]:hidden", e),
+	className: n("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-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", "group-data-[collapsible=icon]:hidden", e),
 	...t
 }));
 Y.displayName = "SidebarMenuBadge";
-var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
-	let a = x(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-	return /* @__PURE__ */ E("div", {
+var X = g(({ className: e, showIcon: t = !1, ...r }, i) => {
+	let a = y(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+	return /* @__PURE__ */ w("div", {
 		ref: i,
 		"data-sidebar": "menu-skeleton",
-		className: r("flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03", e),
-		...n,
-		children: [t && /* @__PURE__ */ T(s, {
+		className: n("flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03", e),
+		...r,
+		children: [t && /* @__PURE__ */ C(o, {
 			className: "h-ico-sm w-ico-sm rounded-control",
 			"data-sidebar": "menu-skeleton-icon"
-		}), /* @__PURE__ */ T(s, {
+		}), /* @__PURE__ */ C(o, {
 			className: "h-4 max-w-(--skeleton-width) flex-1",
 			"data-sidebar": "menu-skeleton-text",
 			style: { "--skeleton-width": a }
@@ -337,24 +337,24 @@ var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
 	});
 });
 X.displayName = "SidebarMenuSkeleton";
-var Z = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("ul", {
-	ref: n,
+var Z = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("ul", {
+	ref: r,
 	"data-sidebar": "menu-sub",
-	className: r("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", e),
+	className: n("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", e),
 	...t
 }));
 Z.displayName = "SidebarMenuSub";
-var Q = _(({ ...e }, t) => /* @__PURE__ */ T("li", {
+var Q = g(({ ...e }, t) => /* @__PURE__ */ C("li", {
 	ref: t,
 	...e
 }));
 Q.displayName = "SidebarMenuSubItem";
-var $ = _(({ asChild: t = !1, size: n = "md", isActive: i, className: a, ...o }, s) => /* @__PURE__ */ T(t ? e : "a", {
+var $ = g(({ asChild: t = !1, size: r = "md", isActive: i, className: a, ...o }, s) => /* @__PURE__ */ C(t ? e : "a", {
 	ref: s,
 	"data-sidebar": "menu-sub-button",
-	"data-size": n,
+	"data-size": r,
 	"data-active": i,
-	className: r("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden 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", n === "sm" && "text-body-sm", n === "md" && "text-body-md", "group-data-[collapsible=icon]:hidden", a),
+	className: n("hover:bg-surface-panel-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden 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", r === "sm" && "text-body-sm", r === "md" && "text-body-md", "group-data-[collapsible=icon]:hidden", a),
 	...o
 }));
 $.displayName = "SidebarMenuSubButton";