@solostylist/ui-kit 2.0.2 → 2.0.4

package/dist/s-mega-menu/s-mega-menu.js

@@ -1,67 +1,64 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../useEventCallback-DGCsaRIu.js";
-import { t as i } from "../appendOwnerState-CFQTq3pb.js";
-import { t as ee } from "../useControlled-DqNPBJNp.js";
-import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
-import { t as te } from "../mega-menu-trigger-BcOo8I5_.js";
-import { contains as o, focusAdjacentTrigger as s, getFirstRow as c } from "./utils.js";
-import { SMegaMenuPopover as ne, SMegaMenuRoot as re } from "./mega-menu-slots.js";
-import { MegaMenuPanelContent as ie } from "./mega-menu-panel.js";
-import * as l from "react";
-import { jsx as u, jsxs as ae } from "react/jsx-runtime";
-import { useMediaQuery as oe, useThemeProps as se } from "@mui/material";
+import { contains as n, focusAdjacentTrigger as r, getFirstRow as i } from "./utils.js";
+import { SMegaMenuPopover as a, SMegaMenuRoot as ee } from "./mega-menu-slots.js";
+import { MegaMenuPanelContent as te } from "./mega-menu-panel.js";
+import { MegaMenuTriggerButton as ne } from "./mega-menu-trigger.js";
+import * as o from "react";
+import { jsx as s, jsxs as re } from "react/jsx-runtime";
+import { useMediaQuery as ie, useThemeProps as ae } from "@mui/material";
+import { mergeSlotProps as c, useControlled as oe, useEventCallback as l, useForkRef as u } from "@mui/material/utils";
+import d from "@mui/utils/appendOwnerState";
 //#region lib/s-mega-menu/s-mega-menu.tsx
-var ce = 0;
-function d(e, t) {
-	return e.href === t || !!e.children?.some((e) => d(e, t));
+var se = 0;
+function f(e, t) {
+	return e.href === t || !!e.children?.some((e) => f(e, t));
 }
-function f(f, p) {
-	let { activeHref: m, closeDelay: h = ce, defaultOpenId: g = null, getIsActive: _, items: v, keepMounted: y = !1, layout: b = "auto", linkComponent: x, onOpenChange: S, openDelay: C = 0, openId: le, renderItem: ue, renderTrigger: de, slotProps: w, slots: T, sx: fe, ...E } = se({
-		props: f,
+function p(p, m) {
+	let { activeHref: h, closeDelay: g = se, defaultOpenId: _ = null, getIsActive: v, items: y, keepMounted: b = !1, layout: x = "auto", linkComponent: S, onOpenChange: C, openDelay: w = 0, openId: ce, renderItem: le, renderTrigger: ue, slotProps: T, slots: E, sx: de, ...fe } = ae({
+		props: p,
 		name: "SMegaMenu"
-	}), [D, O] = ee({
-		controlled: le,
-		default: g,
+	}), [D, O] = oe({
+		controlled: ce,
+		default: _,
 		name: "SMegaMenu",
 		state: "openId"
-	}), [k, A] = l.useState(null), pe = oe("(prefers-reduced-motion: reduce)", { noSsr: !0 }), j = l.useId(), M = `${j}-panel`, N = l.useRef(null), P = l.useRef(/* @__PURE__ */ new Map()), F = l.useRef(void 0), I = l.useRef(void 0), L = l.useRef(!1), R = l.useRef(0), me = n(N, p), [z, he] = l.useState(g);
+	}), [k, A] = o.useState(null), pe = ie("(prefers-reduced-motion: reduce)", { noSsr: !0 }), j = o.useId(), M = `${j}-panel`, N = o.useRef(null), P = o.useRef(/* @__PURE__ */ new Map()), F = o.useRef(void 0), I = o.useRef(void 0), L = o.useRef(!1), R = o.useRef(0), me = u(N, m), [z, he] = o.useState(_);
 	D != null && D !== z && he(D);
-	let B = v.find((e) => e.id === (D ?? z)) ?? null, V = B ? v.indexOf(B) : -1, ge = V >= 0 ? `${j}-trigger-${V}` : void 0, H = !!(D == null ? null : B)?.children?.length && k != null, U = {
-		activeHref: m,
-		closeDelay: h,
-		items: v,
-		keepMounted: y,
-		layout: b,
-		openDelay: C,
+	let B = y.find((e) => e.id === (D ?? z)) ?? null, V = B ? y.indexOf(B) : -1, ge = V >= 0 ? `${j}-trigger-${V}` : void 0, H = !!(D == null ? null : B)?.children?.length && k != null, U = {
+		activeHref: h,
+		closeDelay: g,
+		items: y,
+		keepMounted: b,
+		layout: x,
+		openDelay: w,
 		openId: D ?? null
 	};
-	l.useEffect(() => {}, [v, b]);
-	let W = l.useCallback(() => typeof document > "u" ? null : document.getElementById(M), [M]), G = l.useCallback(() => {
+	o.useEffect(() => {}, [y, x]);
+	let W = o.useCallback(() => typeof document > "u" ? null : document.getElementById(M), [M]), G = o.useCallback(() => {
 		F.current &&= (clearTimeout(F.current), void 0), I.current &&= (clearTimeout(I.current), void 0);
 	}, []);
-	l.useEffect(() => G, [G]);
-	let K = r((e) => _ ? _(e) : !!(m && d(e, m))), q = r((e, t, n, r, i = !1) => {
-		G(), !(e.disabled || D === e.id) && (L.current = i, A(t), O(e.id), S?.(n, e.id, e, r));
-	}), J = r(({ event: e, focusTrigger: t = !1, reason: n }) => {
-		G(), D != null && (t && P.current.get(D)?.focus(), L.current = !1, O(null), S?.(e, null, null, n));
-	}), Y = r((e) => {
+	o.useEffect(() => G, [G]);
+	let K = l((e) => v ? v(e) : !!(h && f(e, h))), q = l((e, t, n, r, i = !1) => {
+		G(), !(e.disabled || D === e.id) && (L.current = i, A(t), O(e.id), C?.(n, e.id, e, r));
+	}), J = l(({ event: e, focusTrigger: t = !1, reason: n }) => {
+		G(), D != null && (t && P.current.get(D)?.focus(), L.current = !1, O(null), C?.(e, null, null, n));
+	}), Y = l((e) => {
 		G(), I.current = setTimeout(() => J({
 			event: e,
 			reason: "pointerLeave"
-		}), h);
+		}), g);
 	});
-	l.useEffect(() => {
+	o.useEffect(() => {
 		if (D == null) return;
 		let e = P.current.get(D);
 		e && e !== k && A(e);
-	}, [k, D]), l.useEffect(() => {
-		H && L.current && (L.current = !1, c(W())?.focus());
-	}, [W, H]), l.useEffect(() => {
+	}, [k, D]), o.useEffect(() => {
+		H && L.current && (L.current = !1, i(W())?.focus());
+	}, [W, H]), o.useEffect(() => {
 		if (!H) return;
 		let e = (e) => {
-			o(W(), e.target) || o(N.current, e.target) || J({
+			n(W(), e.target) || n(N.current, e.target) || J({
 				event: e,
 				reason: "outsidePress"
 			});
@@ -72,25 +69,25 @@ function f(f, p) {
 		W,
 		H
 	]);
-	let _e = l.useCallback((e, t) => {
+	let _e = o.useCallback((e, t) => {
 		t ? P.current.set(e, t) : P.current.delete(e);
-	}, []), X = r((e) => {
+	}, []), X = l((e) => {
 		let t = e.relatedTarget;
-		!t || o(N.current, t) || o(W(), t) || J({
+		!t || n(N.current, t) || n(W(), t) || J({
 			event: e,
 			reason: "blur"
 		});
-	}), ve = r((e, t) => {
+	}), ve = l((e, t) => {
 		if (e.disabled || t.pointerType === "touch" || Date.now() < R.current || !e.children?.length) return;
 		let n = t.currentTarget, r = t.nativeEvent;
-		if (G(), C > 0 && D == null) {
-			F.current = setTimeout(() => q(e, n, r, "triggerHover"), C);
+		if (G(), w > 0 && D == null) {
+			F.current = setTimeout(() => q(e, n, r, "triggerHover"), w);
 			return;
 		}
 		q(e, n, t, "triggerHover");
-	}), ye = r((e) => {
+	}), ye = l((e) => {
 		Date.now() >= R.current && (R.current = 0), e.pointerType !== "touch" && Y(e.nativeEvent);
-	}), be = r((e, t) => {
+	}), be = l((e, t) => {
 		let n = !!e.children?.length;
 		if (n && D !== e.id) {
 			q(e, t.currentTarget, t, "triggerClick");
@@ -107,23 +104,23 @@ function f(f, p) {
 			event: t,
 			reason: "itemClick"
 		});
-	}), xe = r((e, t) => {
+	}), xe = l((e, t) => {
 		D != null && D !== e.id && J({
 			event: t,
 			reason: "triggerFocus"
 		});
-	}), Se = r((e, t) => {
-		let n = t.currentTarget, r = !!e.children?.length;
+	}), Se = l((e, t) => {
+		let n = t.currentTarget, a = !!e.children?.length;
 		switch (t.key) {
 			case "ArrowDown":
-				if (!r) break;
-				t.preventDefault(), D === e.id ? c(W())?.focus() : q(e, n, t, "triggerKeyDown", !0);
+				if (!a) break;
+				t.preventDefault(), D === e.id ? i(W())?.focus() : q(e, n, t, "triggerKeyDown", !0);
 				break;
 			case "ArrowRight":
-				t.preventDefault(), s(N.current, n, 1);
+				t.preventDefault(), r(N.current, n, 1);
 				break;
 			case "ArrowLeft":
-				t.preventDefault(), s(N.current, n, -1);
+				t.preventDefault(), r(N.current, n, -1);
 				break;
 			case "Escape":
 				D != null && (t.preventDefault(), J({
@@ -133,11 +130,11 @@ function f(f, p) {
 				break;
 			default: break;
 		}
-	}), Ce = r((e) => {
+	}), Ce = l((e) => {
 		e.pointerType !== "touch" && G();
-	}), we = r((e) => {
+	}), we = l((e) => {
 		e.pointerType !== "touch" && Y(e.nativeEvent);
-	}), Z = r((e) => {
+	}), Z = l((e) => {
 		e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), J({
 			event: e,
 			focusTrigger: !0,
@@ -146,16 +143,16 @@ function f(f, p) {
 	}), Te = {
 		closeMenu: J,
 		getIsActive: K,
-		keepMounted: y,
-		linkComponent: x,
+		keepMounted: b,
+		linkComponent: S,
 		ownerState: U,
-		renderItem: ue,
-		slotProps: w,
-		slots: T
-	}, Q = T?.root ?? re, $ = T?.popover ?? ne, { ref: Ee, sx: De, ...Oe } = i(Q, a(t(w?.root, U), {
-		...E,
+		renderItem: le,
+		slotProps: T,
+		slots: E
+	}, Q = E?.root ?? ee, $ = E?.popover ?? a, { ref: Ee, sx: De, ...Oe } = d(Q, c(t(T?.root, U), {
+		...fe,
 		onBlurCapture: X
-	}), U), ke = n(Ee, me), { slotProps: Ae, sx: je, ...Me } = t(w?.popover, U) ?? {}, Ne = a(Ae?.paper, {
+	}), U), ke = u(Ee, me), { slotProps: Ae, sx: je, ...Me } = t(T?.popover, U) ?? {}, Ne = c(Ae?.paper, {
 		"aria-labelledby": ge,
 		id: M,
 		onBlurCapture: X,
@@ -171,14 +168,14 @@ function f(f, p) {
 		})],
 		role: "region",
 		tabIndex: -1
-	}), Pe = i($, a(Me, {
+	}), Pe = d($, c(Me, {
 		anchorEl: k,
 		disableAutoFocus: !0,
 		disableEnforceFocus: !0,
 		disableRestoreFocus: !0,
 		disableScrollLock: !0,
 		hideBackdrop: !0,
-		keepMounted: y,
+		keepMounted: b,
 		onClose: (e, t) => J({
 			event: e,
 			focusTrigger: t === "escapeKeyDown",
@@ -187,15 +184,15 @@ function f(f, p) {
 		placement: "bottom-start",
 		transitionDuration: pe ? 0 : void 0
 	}), U);
-	return /* @__PURE__ */ ae(Q, {
+	return /* @__PURE__ */ re(Q, {
 		...Oe,
 		ref: ke,
-		sx: [...e(De), ...e(fe)],
-		children: [v.map((e, t) => /* @__PURE__ */ u(te, {
+		sx: [...e(De), ...e(de)],
+		children: [y.map((e, t) => /* @__PURE__ */ s(ne, {
 			active: K(e),
 			hasPanel: !!e.children?.length,
 			item: e,
-			linkComponent: x,
+			linkComponent: S,
 			onClick: (t) => be(e, t),
 			onFocus: (t) => xe(e, t),
 			onKeyDown: (t) => Se(e, t),
@@ -205,16 +202,16 @@ function f(f, p) {
 			ownerState: U,
 			panelId: M,
 			registerRef: _e,
-			renderTrigger: de,
-			slotProps: w,
-			slots: T,
+			renderTrigger: ue,
+			slotProps: T,
+			slots: E,
 			triggerId: `${j}-trigger-${t}`
-		}, e.id)), /* @__PURE__ */ u($, {
+		}, e.id)), /* @__PURE__ */ s($, {
 			...Pe,
 			open: H,
 			slotProps: { paper: Ne },
 			sx: [...e(je)],
-			children: B?.children?.length ? /* @__PURE__ */ u(ie, {
+			children: B?.children?.length ? /* @__PURE__ */ s(te, {
 				ctx: Te,
 				depth: 0,
 				items: B.children
@@ -222,7 +219,7 @@ function f(f, p) {
 		})]
 	});
 }
-var p = l.forwardRef(f);
-p.displayName = "SMegaMenu";
+var m = o.forwardRef(p);
+m.displayName = "SMegaMenu";
 //#endregion
-export { p as SMegaMenu, p as default };
+export { m as SMegaMenu, m as default };

package/dist/s-mobile-dock/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-mobile-dock-8F3UWAb8.js";
+import { SMobileDock as e } from "./s-mobile-dock.js";
 export { e as SMobileDock, e as default };

package/dist/s-mobile-dock/s-mobile-dock.js

@@ -1,2 +1,145 @@
-import { t as e } from "../s-mobile-dock-8F3UWAb8.js";
-export { e as SMobileDock, e as default };
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { actionHoverMedia as t, getFocusVisibleStyle as n, reducedMotionMedia as r } from "../theme/components/action-styles.js";
+import { styled as i, useThemeProps as a } from "@mui/material/styles";
+import * as o from "react";
+import { createElement as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { mergeSlotProps as l, useControlled as u, useEventCallback as d, useForkRef as f } from "@mui/material/utils";
+import p from "@mui/utils/appendOwnerState";
+import { visuallyHidden as m } from "@mui/utils";
+import h from "@mui/material/Box";
+import g from "@mui/material/Badge";
+import _ from "@mui/material/BottomNavigation";
+import v, { bottomNavigationActionClasses as y } from "@mui/material/BottomNavigationAction";
+//#region lib/s-mobile-dock/s-mobile-dock.tsx
+var b = 416, x = 44, S = i(_, {
+	name: "SMobileDock",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	border: `1px solid ${(e.vars ?? e).palette.divider}`,
+	borderRadius: e.radius.full,
+	boxShadow: e.shadows[8],
+	gap: e.spacing(.5),
+	height: "auto",
+	justifyContent: "space-around",
+	marginInline: "auto",
+	maxWidth: `calc(100% - ${e.spacing(3)})`,
+	padding: e.spacing(.75),
+	paddingBottom: `calc(${e.spacing(.75)} + env(safe-area-inset-bottom))`,
+	width: b
+})), C = i(v, {
+	name: "SMobileDock",
+	slot: "Action"
+})(({ theme: e, ownerState: i }) => ({
+	borderRadius: e.radius.full,
+	color: (e.vars ?? e).palette.text.secondary,
+	gap: e.spacing(.5),
+	minHeight: x,
+	minWidth: x,
+	padding: e.spacing(.75, 1),
+	transition: e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+	[`& .${y.label}`]: {
+		fontSize: e.typography.body2.fontSize,
+		lineHeight: e.typography.body2.lineHeight,
+		[`&.${y.selected}`]: { fontSize: e.typography.body2.fontSize },
+		...i.labelVisibility === "never" && m
+	},
+	[`&.${y.selected}`]: {
+		backgroundColor: e.alpha((e.vars ?? e).palette.primary.main, (e.vars ?? e).palette.action.selectedOpacity),
+		color: (e.vars ?? e).palette.primary.main
+	},
+	"&.Mui-disabled": { color: (e.vars ?? e).palette.action.disabled },
+	[`&.${y.selected}.Mui-disabled`]: { backgroundColor: (e.vars ?? e).palette.action.disabledBackground },
+	"&.Mui-focusVisible": n(e),
+	[t]: {
+		"&:hover": {
+			backgroundColor: (e.vars ?? e).palette.action.hover,
+			color: (e.vars ?? e).palette.text.primary
+		},
+		[`&.${y.selected}:hover`]: {
+			backgroundColor: e.alpha((e.vars ?? e).palette.primary.main, Math.min(e.palette.action.selectedOpacity + e.palette.action.hoverOpacity, 1)),
+			color: (e.vars ?? e).palette.primary.main
+		}
+	},
+	[r]: { transition: "none" }
+})), w = i(h, {
+	name: "SMobileDock",
+	slot: "Icon"
+})({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), T = i(g, {
+	name: "SMobileDock",
+	slot: "Badge"
+})({}), E = i("span", {
+	name: "SMobileDock",
+	slot: "Label"
+})({});
+function D(t, n) {
+	let r = a({
+		props: t,
+		name: "SMobileDock"
+	}), { defaultValue: i, items: o, labelVisibility: m = "always", linkComponent: h, onChange: g, slotProps: _, slots: v, value: y, ...b } = r, [x, D] = u({
+		controlled: y,
+		default: i ?? null,
+		name: "SMobileDock",
+		state: "value"
+	}), O = {
+		...r,
+		labelVisibility: m,
+		value: x
+	}, k = v?.root ?? S, A = v?.action ?? C, j = v?.icon ?? w, M = v?.badge ?? T, N = v?.label ?? E, P = d((e, t) => {
+		D(t), g?.(e, t);
+	}), { ref: F, ...I } = p(k, l(e(_?.root, O), {
+		...b,
+		onChange: P,
+		showLabels: !0,
+		value: x
+	}), O), L = f(n, F);
+	return /* @__PURE__ */ c(k, {
+		...I,
+		ref: L,
+		component: "nav",
+		children: o.map((t) => {
+			let n = t.value === x, r = {
+				...O,
+				item: t,
+				selected: n
+			}, i = t.component ?? (t.href == null ? "button" : h ?? "a"), a = p(A, l(e(_?.action, r), {
+				"aria-current": n ? "page" : void 0,
+				"aria-label": t.ariaLabel,
+				component: i,
+				disabled: t.disabled,
+				href: t.disabled ? void 0 : t.href,
+				nativeButton: i === "button",
+				onClick: t.onClick,
+				rel: t.rel,
+				target: t.target
+			}), r), o = p(j, e(_?.icon, r) ?? {}, r), u = p(M, e(_?.badge, r) ?? {}, r), d = p(N, e(_?.label, r) ?? {}, r);
+			return /* @__PURE__ */ s(A, {
+				...a,
+				key: t.value,
+				icon: /* @__PURE__ */ c(j, {
+					...o,
+					children: t.badge == null ? t.icon : /* @__PURE__ */ c(M, {
+						badgeContent: t.badge,
+						color: "error",
+						...u,
+						children: t.icon
+					})
+				}),
+				label: t.label,
+				slotProps: { label: d },
+				slots: { label: N },
+				value: t.value
+			});
+		})
+	});
+}
+var O = o.forwardRef(D);
+O.displayName = "SMobileDock";
+//#endregion
+export { O as SMobileDock, O as default };

package/dist/s-nav-item/s-nav-item.js

@@ -1,21 +1,20 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../appendOwnerState-CFQTq3pb.js";
-import { actionHoverMedia as i } from "../theme/components/action-styles.js";
-import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
-import { SListActionItem as o } from "../s-list-action-item/s-list-action-item.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { styled as u, useThemeProps as d } from "@mui/material";
+import { actionHoverMedia as n } from "../theme/components/action-styles.js";
+import { SListActionItem as r } from "../s-list-action-item/s-list-action-item.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { styled as s, useThemeProps as c } from "@mui/material";
+import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
+import d from "@mui/utils/appendOwnerState";
 //#region lib/s-nav-item/s-nav-item.tsx
-var f = u("li", {
+var f = s("li", {
 	name: "SNavItem",
 	slot: "Root"
 })({
 	display: "block",
 	userSelect: "none"
-}), p = u(o, {
+}), p = s(r, {
 	name: "SNavItem",
 	slot: "Item",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -24,16 +23,16 @@ var f = u("li", {
 	color: (e.vars ?? e).palette.text.secondary,
 	padding: e.spacing(1.5),
 	"&.Mui-selected": { color: (e.vars ?? e).palette.text.primary },
-	[i]: { "&:hover": { color: (e.vars ?? e).palette.text.primary } }
-})), m = s.forwardRef(function(i, o) {
-	let s = d({
-		props: i,
+	[n]: { "&:hover": { color: (e.vars ?? e).palette.text.primary } }
+})), m = i.forwardRef(function(n, r) {
+	let i = c({
+		props: n,
 		name: "SNavItem"
-	}), { children: u, disabled: m = !1, href: h, icon: g, label: _, onClick: v, selected: y = !1, slotProps: b, slots: x, sx: S, trailing: C, ...w } = s, T = {
-		...s,
+	}), { children: s, disabled: m = !1, href: h, icon: g, label: _, onClick: v, selected: y = !1, slotProps: b, slots: x, sx: S, trailing: C, ...w } = i, T = {
+		...i,
 		disabled: m,
 		selected: y
-	}, E = x?.root ?? f, D = x?.item ?? p, { ref: O, sx: k, ...A } = r(E, a(t(b?.root, T), w), T), j = n(O, o), M = r(D, a(t(b?.item, T), {
+	}, E = x?.root ?? f, D = x?.item ?? p, { ref: O, sx: k, ...A } = d(E, l(t(b?.root, T), w), T), j = u(O, r), M = d(D, l(t(b?.item, T), {
 		disabled: m,
 		href: h,
 		icon: g,
@@ -51,14 +50,14 @@ var f = u("li", {
 		},
 		trailing: C
 	}), T);
-	return /* @__PURE__ */ l(E, {
+	return /* @__PURE__ */ o(E, {
 		...A,
 		ref: j,
 		sx: [...e(k), ...e(S)],
-		children: [/* @__PURE__ */ c(D, {
+		children: [/* @__PURE__ */ a(D, {
 			...M,
 			label: _
-		}), u]
+		}), s]
 	});
 });
 m.displayName = "SNavItem";

package/dist/s-nav-items/s-nav-items.js

@@ -1,17 +1,16 @@
-import { t as e } from "../Box-9oeZgA1U.js";
-import { t } from "../styled-Bog8QCl3.js";
-import { t as n } from "../Stack-C0LGzM4c.js";
-import { t as r } from "../useThemeProps-Dw9dmKyT.js";
-import { toSxArray as i } from "../utils/sx.js";
-import { reducedMotionMedia as a } from "../theme/components/action-styles.js";
-import { t as o } from "../ExpandMore-sOgvEha9.js";
-import { SNavItem as s } from "../s-nav-item/s-nav-item.js";
-import { t as c } from "../Collapse-DPUr1cbP.js";
-import * as l from "react";
-import { jsx as u } from "react/jsx-runtime";
+import { toSxArray as e } from "../utils/sx.js";
+import { reducedMotionMedia as t } from "../theme/components/action-styles.js";
+import { SNavItem as n } from "../s-nav-item/s-nav-item.js";
+import { styled as r, useThemeProps as i } from "@mui/material/styles";
+import * as a from "react";
+import { jsx as o } from "react/jsx-runtime";
+import s from "@mui/icons-material/ExpandMore";
+import c from "@mui/material/Stack";
+import l from "@mui/material/Box";
+import u from "@mui/material/Collapse";
 //#region lib/s-nav-items/s-nav-items.tsx
-var d = t(l.forwardRef(function(e, t) {
-	return /* @__PURE__ */ u(n, {
+var d = r(a.forwardRef(function(e, t) {
+	return /* @__PURE__ */ o(c, {
 		component: "ul",
 		...e,
 		ref: t
@@ -33,89 +32,89 @@ function m(e, t) {
 		childActive: n.length > 0 && f(n, t)
 	};
 }
-function h({ item: t, pathname: n, depth: r, linkComponent: i }) {
-	let d = !!(t.items && t.items.length > 0), { active: f, childActive: p } = m(t, n), [h, _] = l.useState(t.defaultOpen ?? p);
-	if (l.useEffect(() => {
+function h({ item: e, pathname: r, depth: i, linkComponent: c }) {
+	let d = !!(e.items && e.items.length > 0), { active: f, childActive: p } = m(e, r), [h, _] = a.useState(e.defaultOpen ?? p);
+	if (a.useEffect(() => {
 		p && _(!0);
-	}, [p]), !d) return /* @__PURE__ */ u(s, {
-		disabled: t.disabled,
-		href: t.href,
-		icon: t.icon ? t.icon(f) : null,
-		label: t.title,
+	}, [p]), !d) return /* @__PURE__ */ o(n, {
+		disabled: e.disabled,
+		href: e.href,
+		icon: e.icon ? e.icon(f) : null,
+		label: e.title,
 		selected: f,
 		slotProps: { item: {
-			component: t.component ?? i,
-			rel: t.rel,
-			target: t.target,
-			sx: r > 0 ? { pl: `${(r - 1) * 12 + 12}px` } : void 0
+			component: e.component ?? c,
+			rel: e.rel,
+			target: e.target,
+			sx: i > 0 ? { pl: `${(i - 1) * 12 + 12}px` } : void 0
 		} }
 	});
 	let v = f || p;
-	return /* @__PURE__ */ u(s, {
-		disabled: t.disabled,
-		icon: t.icon ? t.icon(v) : null,
-		label: t.title,
+	return /* @__PURE__ */ o(n, {
+		disabled: e.disabled,
+		icon: e.icon ? e.icon(v) : null,
+		label: e.title,
 		onClick: () => _((e) => !e),
 		selected: v,
 		slotProps: {
 			item: {
 				"aria-current": void 0,
 				"aria-expanded": h,
-				sx: { pl: r > 0 ? `${r * 12 + 12}px` : "12px" }
+				sx: { pl: i > 0 ? `${i * 12 + 12}px` : "12px" }
 			},
 			trailing: { sx: {
 				transform: h ? "rotate(0deg)" : "rotate(-90deg)",
 				transition: (e) => e.transitions.create("transform", { duration: e.transitions.duration.shorter }),
-				[a]: { transition: "none" }
+				[t]: { transition: "none" }
 			} }
 		},
-		trailing: /* @__PURE__ */ u(o, {}),
-		children: /* @__PURE__ */ u(c, {
+		trailing: /* @__PURE__ */ o(s, {}),
+		children: /* @__PURE__ */ o(u, {
 			in: h,
 			timeout: 200,
 			unmountOnExit: !0,
-			children: /* @__PURE__ */ u(e, {
+			children: /* @__PURE__ */ o(l, {
 				sx: {
-					ml: r > 0 ? `${r * 16 + 12}px` : "12px",
+					ml: i > 0 ? `${i * 16 + 12}px` : "12px",
 					mt: 1,
 					mb: 1,
 					pl: 1
 				},
-				children: /* @__PURE__ */ u(g, {
-					items: t.items,
-					pathname: n,
-					depth: r + 1,
-					linkComponent: i
+				children: /* @__PURE__ */ o(g, {
+					items: e.items,
+					pathname: r,
+					depth: i + 1,
+					linkComponent: c
 				})
 			})
 		})
 	});
 }
 h.displayName = "SNavGroupItem";
-var g = l.forwardRef(function(e, t) {
-	let n = r({
-		props: e,
+var g = a.forwardRef(function(t, n) {
+	let r = i({
+		props: t,
 		name: "SNavItems"
-	}), { depth: a = 0, items: o, linkComponent: s, pathname: c = "", sx: l, ...f } = n, p = {
-		...n,
+	}), { depth: a = 0, items: s, linkComponent: c, pathname: l = "", sx: u, ...f } = r, p = {
+		...r,
 		depth: a,
-		pathname: c
+		pathname: l
 	};
-	return /* @__PURE__ */ u(d, {
+	return /* @__PURE__ */ o(d, {
 		spacing: 1,
 		...f,
-		ref: t,
+		ref: n,
 		ownerState: p,
 		sx: [{
 			listStyle: "none",
 			m: 0,
 			p: 0
-		}, ...i(l)],
-		children: o.map((e) => /* @__PURE__ */ u(h, {
+		}, ...e(u)],
+		children: s.map((e) => /* @__PURE__ */ o(h, {
 			item: e,
-			pathname: c,
+			pathname: l,
 			depth: a,
-			linkComponent: s
+			linkComponent: c
 		}, e.key))
 	});
 });