@thewhatmatters/wmds 0.4.30 → 0.4.31

package/dist/components/organisms/SiteNav/SiteNav.js

@@ -6,23 +6,23 @@ import { IconButton as r } from "../../atoms/IconButton/IconButton.js";
 import { TextLink as i } from "../../atoms/TextLink/TextLink.js";
 import { Dropdown as a } from "../../molecules/Dropdown/Dropdown.js";
 import { cardLayoutBodyOccupantRadiusClasses as o, cardLayoutBodyOccupantWellClasses as s } from "../../molecules/Card/cardStyles.js";
-import { Sheet as c } from "../Sheet/Sheet.js";
-import { textOf as l, useOverflowMenu as u } from "../../molecules/Dropdown/useOverflowMenu.js";
-import { siteNavBarBaseClasses as d, siteNavBarCompactLayoutClasses as f, siteNavBarStateClasses as p, siteNavBrandClasses as m, siteNavCompactLayouts as h, siteNavContainerClasses as g, siteNavDefaultCollapseAt as _, siteNavDefaultCollapseRatio as v, siteNavEndClasses as ee, siteNavExpandedHeightClasses as te, siteNavLinkClasses as y, siteNavLinkListClasses as b, siteNavLinksRootClasses as x, siteNavMeasureItemClasses as S, siteNavMeasureMoreClasses as C, siteNavMeasureRailClasses as w, siteNavMenuBackdropClasses as T, siteNavMenuContentClasses as E, siteNavMenuLinkClasses as D, siteNavMenuLinkGridClasses as O, siteNavMenuPopupClasses as ne, siteNavMenuPositionerClasses as k, siteNavMenuReadRowClasses as A, siteNavMenuReadThumbClasses as j, siteNavMenuSectionClasses as M, siteNavMenuSectionLabelClasses as N, siteNavMenuSectionSpanClasses as P, siteNavMenuViewportClasses as F, siteNavMiddleClasses as re, siteNavMiddleHugClasses as ie, siteNavMiddleHugResponsiveClasses as ae, siteNavMiddleResponsiveClasses as oe, siteNavMobileLinkClasses as I, siteNavMobileListClasses as se, siteNavMobileTriggerClasses as ce, siteNavMoreIconClasses as L, siteNavMoreTriggerClasses as R, siteNavNavigationRootClasses as z, siteNavPlacements as B, siteNavRootFixedClasses as le, siteNavRootFlowClasses as ue, siteNavRootInlineClasses as de, siteNavRootStickyClasses as fe, siteNavSlotsClasses as V, siteNavStartClasses as pe, siteNavStates as H, siteNavTriggerClasses as U, siteNavTriggerIconClasses as W, siteNavTriggerLabelClasses as G } from "./siteNavStyles.js";
-import { useSiteNavCollapse as me } from "./useSiteNavCollapse.js";
-import { Children as K, createContext as he, isValidElement as q, useContext as ge, useEffect as _e, useId as ve, useMemo as ye, useRef as be, useState as J } from "react";
-import { ChevronDown as Y, Menu as xe } from "lucide-react";
-import { Fragment as Se, jsx as X, jsxs as Z } from "react/jsx-runtime";
-import { AnimatePresence as Ce, motion as we, useReducedMotion as Te } from "motion/react";
-import { createPortal as Ee } from "react-dom";
-import { NavigationMenu as Q } from "@base-ui/react/navigation-menu";
+import { textOf as ee, useOverflowMenu as te } from "../../molecules/Dropdown/useOverflowMenu.js";
+import { siteNavBarBaseClasses as c, siteNavBarCompactLayoutClasses as ne, siteNavBarStateClasses as l, siteNavBrandClasses as u, siteNavCompactLayouts as d, siteNavContainerClasses as f, siteNavDefaultCollapseAt as p, siteNavDefaultCollapseRatio as m, siteNavEndActionsClasses as h, siteNavEndClasses as re, siteNavExpandedHeightClasses as ie, siteNavLinkClasses as g, siteNavLinkListClasses as _, siteNavLinksRootClasses as v, siteNavMeasureItemClasses as y, siteNavMeasureMoreClasses as b, siteNavMeasureRailClasses as x, siteNavMenuBackdropClasses as S, siteNavMenuContentClasses as C, siteNavMenuLinkClasses as w, siteNavMenuLinkGridClasses as T, siteNavMenuPopupClasses as E, siteNavMenuPositionerClasses as D, siteNavMenuReadRowClasses as O, siteNavMenuReadThumbClasses as k, siteNavMenuSectionClasses as A, siteNavMenuSectionLabelClasses as ae, siteNavMenuSectionSpanClasses as oe, siteNavMenuViewportClasses as j, siteNavMiddleClasses as se, siteNavMiddleHugClasses as ce, siteNavMiddleHugResponsiveClasses as le, siteNavMiddleResponsiveClasses as ue, siteNavMobileActionClasses as de, siteNavMobileLinkClasses as fe, siteNavMobileListClasses as pe, siteNavMobilePanelClasses as me, siteNavMobileTriggerClasses as he, siteNavMoreIconClasses as ge, siteNavMoreTriggerClasses as M, siteNavNavigationRootClasses as N, siteNavPlacements as P, siteNavRootFixedClasses as _e, siteNavRootFlowClasses as ve, siteNavRootInlineClasses as ye, siteNavRootStickyClasses as be, siteNavSlotsClasses as F, siteNavStartClasses as xe, siteNavStates as I, siteNavTriggerClasses as L, siteNavTriggerIconClasses as R, siteNavTriggerLabelClasses as z, siteNavWordmarkBrandClasses as B } from "./siteNavStyles.js";
+import { useSiteNavCollapse as Se } from "./useSiteNavCollapse.js";
+import { useSiteNavMobileMenu as Ce } from "./useSiteNavMobileMenu.js";
+import { Children as V, createContext as H, isValidElement as U, useCallback as we, useContext as W, useEffect as G, useId as Te, useMemo as Ee, useRef as K, useState as q } from "react";
+import { ChevronDown as J, Menu as De, X as Oe } from "lucide-react";
+import { Fragment as ke, jsx as Y, jsxs as X } from "react/jsx-runtime";
+import { AnimatePresence as Ae, motion as je, useReducedMotion as Me } from "motion/react";
+import { createPortal as Ne } from "react-dom";
+import { NavigationMenu as Z } from "@base-ui/react/navigation-menu";
 //#region src/components/organisms/SiteNav/SiteNav.tsx
-var De = he(null);
-function Oe(e, t, n, r) {
-	return t && (e || n) ? r ? V.threeHug : V.three : t ? V.middleOnly : e && n ? V.ends : e ? V.startOnly : V.endOnly;
+var Pe = H(null);
+function Fe(e, t, n, r) {
+	return t && (e || n) ? r ? F.threeHug : F.three : t ? F.middleOnly : e && n ? F.ends : e ? F.startOnly : F.endOnly;
 }
-function ke(e, t) {
-	_e(() => {
+function Ie(e, t) {
+	G(() => {
 		if (!e || typeof document > "u") return;
 		let n = t?.current ?? document.documentElement, r = n.style.scrollPaddingTop;
 		return n.style.scrollPaddingTop = "calc(var(--site-nav-height) + var(--spacing) * 4)", () => {
@@ -30,194 +30,247 @@ function ke(e, t) {
 		};
 	}, [e, t]);
 }
-function Ae({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", collapseAt: l, state: u, onStateChange: m, compactLayout: h = "hug", placement: _ = "fixed", scrollContainer: v, "aria-label": y = "Site", className: b }) {
-	let x = be(null), S = Te() ?? !1, { state: C, compact: w } = me({
-		collapseAt: l,
-		scrollContainer: v,
+function Le(e) {
+	let t = [...e.children].filter((e) => getComputedStyle(e).display !== "none"), n = Number.parseFloat(getComputedStyle(e).columnGap) || 0;
+	return t.reduce((e, t) => {
+		let n = getComputedStyle(t);
+		return e + t.getBoundingClientRect().width + Number.parseFloat(n.marginLeft) + Number.parseFloat(n.marginRight);
+	}, 0) + n * Math.max(0, t.length - 1);
+}
+function Re(e, t, n) {
+	let [r, i] = q(!1), a = K(0);
+	return G(() => {
+		let n = e.current;
+		if (!t || n == null || typeof ResizeObserver > "u") return;
+		let r = window.matchMedia("(min-width: 768px)"), o = () => {
+			if (r.matches) {
+				i(!1);
+				return;
+			}
+			i((e) => {
+				let t = Le(n);
+				return !e && t > n.clientWidth + 1 ? (a.current = t, !0) : e && n.clientWidth >= a.current ? !1 : e;
+			});
+		}, s = new ResizeObserver(o);
+		return s.observe(n), r.addEventListener("change", o), o(), () => {
+			s.disconnect(), r.removeEventListener("change", o);
+		};
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}
+function ze({ start: r, middle: i, end: a, mobile: o, mobileAction: s, mobileTitle: ee = "Menu", collapseAt: te, state: u, onStateChange: d, compactLayout: p = "hug", placement: m = "fixed", scrollContainer: g, "aria-label": _ = "Site", className: v }) {
+	let y = K(null), b = Me() ?? !1, { state: x, compact: S } = Se({
+		collapseAt: te,
+		scrollContainer: g,
 		controlledState: u,
-		placement: _,
-		onStateChange: m
-	}), [T, E] = J(!1), D = ve(), [O, ne] = J(!1), k = w && h === "hug", A = {
+		placement: m,
+		onStateChange: d
+	}), [C, w] = q(!1), T = Te(), E = K(null), D = K(null), O = K(null), k = we(() => w(!1), []), A = K(null), ae = Re(A, o != null && a != null, S ? "compact" : "expanded"), oe = Ce({
+		open: C,
+		onClose: k,
+		barRef: E,
+		panelRef: D,
+		triggerRef: O
+	}), [j, fe] = q(!1), ge = S && p === "hug", M = {
 		y: -72,
 		opacity: 0
-	}, j = {
+	}, N = {
 		y: 0,
 		opacity: 1
-	}, M = S ? { duration: 0 } : {
+	}, P = b ? { duration: 0 } : {
 		...t("medium"),
 		type: "tween"
-	}, N = v != null, P = _ === "fixed" || N;
-	ke(P && w, v);
-	let F = o != null, I = n != null, L = i != null, R = a != null || F, z = F ? /* @__PURE__ */ X(r, {
-		icon: /* @__PURE__ */ X(xe, { strokeWidth: 2 }),
-		"aria-label": T ? "Close menu" : "Open menu",
-		title: "",
-		size: "sm",
-		className: ce,
+	}, F = g != null, I = m === "fixed" || F;
+	Ie(I && S, g);
+	let L = o != null, R = r != null, z = i != null, B = a != null || L, V = L ? /* @__PURE__ */ Y(n, {
+		ref: O,
+		role: "ghost",
+		size: "md",
+		icon: Y(C ? Oe : De, { strokeWidth: 2 }),
+		className: he,
 		"aria-haspopup": "dialog",
-		"aria-expanded": T,
-		"aria-controls": T ? D : void 0,
-		onClick: () => E((e) => !e)
+		"aria-expanded": C,
+		"aria-controls": C ? T : void 0,
+		onClick: () => w((e) => !e),
+		children: C ? "Close" : "Menu"
 	}) : null;
-	function B(e) {
-		return /* @__PURE__ */ Z("div", {
-			className: Oe(I, L, R, e),
+	function H(e) {
+		return /* @__PURE__ */ X("div", {
+			ref: A,
+			className: Fe(R, z, B, e),
 			children: [
-				I ? /* @__PURE__ */ X("div", {
-					className: pe,
-					children: n
+				R ? /* @__PURE__ */ Y("div", {
+					className: xe,
+					children: r
 				}) : null,
-				L ? /* @__PURE__ */ X("div", {
-					className: F ? e ? ae : oe : e ? ie : re,
+				z ? /* @__PURE__ */ Y("div", {
+					className: L ? e ? le : ue : e ? ce : se,
 					children: i
 				}) : null,
-				R ? /* @__PURE__ */ Z("div", {
-					className: ee,
-					children: [a, z]
+				B ? /* @__PURE__ */ X("div", {
+					className: re,
+					children: [a != null && L ? /* @__PURE__ */ Y("div", {
+						className: h,
+						"data-tight": ae ? "" : void 0,
+						"data-menu-open": C ? "" : void 0,
+						children: a
+					}) : a, V]
 				}) : null
 			]
 		});
 	}
-	let V = e(d, p.compact, f[h]), H = /* @__PURE__ */ X("div", {
+	let U = e(c, l.compact, ne[p]), W = /* @__PURE__ */ Y("div", {
 		"data-state": "expanded",
-		className: e(d, p.expanded),
-		children: B(!1)
-	}), U = /* @__PURE__ */ X("div", {
-		ref: x,
-		className: e(g, "px-[var(--grid-margin)]"),
-		children: /* @__PURE__ */ X("div", {
+		className: e(c, l.expanded),
+		children: H(!1)
+	}), G = /* @__PURE__ */ Y("div", {
+		ref: y,
+		className: e(f, "px-[var(--grid-margin)]"),
+		children: /* @__PURE__ */ Y("div", {
 			"data-state": "compact",
-			className: V,
-			children: B(k)
+			className: U,
+			children: H(ge)
 		})
-	}), W = {
-		initial: !S && A,
-		animate: j,
-		exit: S ? j : A,
-		transition: M
-	}, G = N ? e(fe, "h-0 w-full overflow-visible") : le;
-	return /* @__PURE__ */ Z(De.Provider, {
+	}), Ee = {
+		initial: !b && M,
+		animate: N,
+		exit: b ? N : M,
+		transition: P
+	}, J = F ? e(be, "h-0 w-full overflow-visible") : _e;
+	return /* @__PURE__ */ X(Pe.Provider, {
 		value: {
-			state: C,
-			anchorRef: x,
-			menuOpen: O,
-			setMenuOpen: ne
+			state: x,
+			anchorRef: y,
+			menuOpen: j,
+			setMenuOpen: fe
 		},
-		children: [P ? /* @__PURE__ */ Z(Se, { children: [
-			/* @__PURE__ */ X(Ce, { children: w ? /* @__PURE__ */ X(we.div, {
-				...W,
-				className: e(G, !N && b),
-				children: /* @__PURE__ */ X("header", {
-					"aria-label": y,
+		children: [I ? /* @__PURE__ */ X(ke, { children: [
+			/* @__PURE__ */ Y(Ae, { children: S ? /* @__PURE__ */ Y(je.div, {
+				...Ee,
+				className: e(J, !F && v),
+				children: /* @__PURE__ */ Y("header", {
+					ref: E,
+					"aria-label": _,
 					"data-state": "compact",
-					"data-menu": O ? "open" : "closed",
-					className: e(N && e("w-full", b)),
-					children: U
+					"data-menu": j ? "open" : "closed",
+					className: e(F && e("w-full", v)),
+					children: G
 				})
 			}, "site-nav-compact") : null }),
-			w ? /* @__PURE__ */ X("div", {
-				className: e(te, "w-full"),
+			S ? /* @__PURE__ */ Y("div", {
+				className: e(ie, "w-full"),
 				"aria-hidden": !0
 			}) : null,
-			w ? null : /* @__PURE__ */ X("header", {
-				"aria-label": y,
+			S ? null : /* @__PURE__ */ Y("header", {
+				ref: E,
+				"aria-label": _,
 				"data-state": "expanded",
-				"data-menu": O ? "open" : "closed",
-				className: e(ue, b),
-				children: /* @__PURE__ */ X("div", {
-					ref: x,
-					className: g,
-					children: H
+				"data-menu": j ? "open" : "closed",
+				className: e(ve, v),
+				children: /* @__PURE__ */ Y("div", {
+					ref: y,
+					className: f,
+					children: W
 				})
 			})
-		] }) : /* @__PURE__ */ X("header", {
-			"aria-label": y,
-			"data-state": C,
-			"data-menu": O ? "open" : "closed",
-			className: e(de, b),
-			children: /* @__PURE__ */ X("div", {
-				ref: x,
-				className: e(g, w && "px-[var(--grid-margin)]"),
-				children: /* @__PURE__ */ X(Ce, {
+		] }) : /* @__PURE__ */ Y("header", {
+			ref: E,
+			"aria-label": _,
+			"data-state": x,
+			"data-menu": j ? "open" : "closed",
+			className: e(ye, v),
+			children: /* @__PURE__ */ Y("div", {
+				ref: y,
+				className: e(f, S && "px-[var(--grid-margin)]"),
+				children: /* @__PURE__ */ Y(Ae, {
 					initial: !1,
 					mode: "popLayout",
-					children: w ? /* @__PURE__ */ X(we.div, {
-						initial: !S && A,
-						animate: j,
-						exit: S ? j : A,
-						transition: M,
+					children: S ? /* @__PURE__ */ Y(je.div, {
+						initial: !b && M,
+						animate: N,
+						exit: b ? N : M,
+						transition: P,
 						"data-state": "compact",
-						className: V,
-						children: B(!0)
-					}, "compact") : /* @__PURE__ */ X("div", { children: H }, "expanded")
-				})
-			})
-		}), F ? /* @__PURE__ */ X(c, {
-			open: T,
-			onOpenChange: E,
-			children: /* @__PURE__ */ X(c.Content, {
-				id: D,
-				side: "end",
-				title: s,
-				children: /* @__PURE__ */ X("div", {
-					className: se,
-					children: o
+						className: U,
+						children: H(!0)
+					}, "compact") : /* @__PURE__ */ Y("div", { children: W }, "expanded")
 				})
 			})
-		}) : null]
+		}), L && C && typeof document < "u" ? Ne(/* @__PURE__ */ X("div", {
+			ref: D,
+			id: T,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ee,
+			className: me,
+			style: { top: oe },
+			onClick: (e) => {
+				e.target.closest("a[href]") != null && k();
+			},
+			children: [/* @__PURE__ */ Y("div", {
+				className: pe,
+				children: o
+			}), s == null ? null : /* @__PURE__ */ Y("div", {
+				className: de,
+				children: s
+			})]
+		}), document.body) : null]
 	});
 }
-function je({ href: e, icon: t, children: i, "aria-label": a }) {
-	let o = t ?? (q(i) && i.type !== void 0 ? i : null);
-	return o == null ? /* @__PURE__ */ X(n, {
+function Be({ href: e, icon: t, children: i, "aria-label": a }) {
+	let o = t ?? (U(i) && i.type !== void 0 ? i : null);
+	return o == null ? /* @__PURE__ */ Y(n, {
 		role: "ghost",
 		size: "sm",
-		render: /* @__PURE__ */ X("a", { href: e }),
+		render: /* @__PURE__ */ Y("a", { href: e }),
 		"aria-label": a,
-		className: m,
+		className: B,
 		children: i
-	}) : /* @__PURE__ */ X(r, {
+	}) : /* @__PURE__ */ Y(r, {
 		icon: o,
 		"aria-label": a ?? "Home",
 		role: "ghost",
 		size: "sm",
 		title: "",
-		render: /* @__PURE__ */ X("a", { href: e }),
-		className: m
+		render: /* @__PURE__ */ Y("a", { href: e }),
+		className: u
 	});
 }
-function Me(e) {
-	return K.toArray(e).filter(q);
+function Ve(e) {
+	return V.toArray(e).filter(U);
 }
-function $(e) {
+function Q(e) {
 	let t = e.props;
 	return typeof t.value == "string" && t.value.length > 0 ? t.value : typeof t.href == "string" ? t.href : typeof t.label == "string" ? t.label : "item";
 }
-function Ne(e) {
+function He(e) {
 	let t = e.props;
 	return t.label ?? t.children;
 }
-function Pe(e) {
+function $(e) {
 	return "label" in e.props && !("href" in e.props);
 }
-function Fe(e) {
-	for (let t of e) if (t.props.current) return $(t);
-	return e[0] == null ? "" : $(e[0]);
+function Ue(e) {
+	for (let t of e) if (t.props.current) return Q(t);
+	return e[0] == null ? "" : Q(e[0]);
 }
-function Ie({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDelay: o = 150 }) {
-	let s = ge(De), c = ye(() => Me(t), [t]), d = new Map(c.map((e) => [$(e), e])), f = (e) => e.flatMap((e) => d.get(e) ?? []), p = (e) => f(e).flatMap(v), m = u({
-		ids: c.map($),
-		activeId: Fe(c),
-		toMenuRows: (e) => p(e).map((e) => ({
-			label: l(e.label),
+function We({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDelay: o = 150 }) {
+	let s = W(Pe), c = Ee(() => Ve(t), [t]), ne = new Map(c.map((e) => [Q(e), e])), l = (e) => e.flatMap((e) => ne.get(e) ?? []), u = (e) => l(e).flatMap(h), d = te({
+		ids: c.map(Q),
+		activeId: Ue(c),
+		toMenuRows: (e) => u(e).map((e) => ({
+			label: ee(e.label),
 			disabled: e.href == null
 		}))
-	}), { menu: h } = m, g = f(m.visibleIds), _ = p(m.overflowIds);
-	function v(e) {
-		if (!Pe(e)) {
+	}), { menu: f } = d, p = l(d.visibleIds), m = u(d.overflowIds);
+	function h(e) {
+		if (!$(e)) {
 			let t = e.props;
 			return [{
-				id: $(e),
+				id: Q(e),
 				label: t.children,
 				href: t.href,
 				current: t.current
@@ -225,8 +278,8 @@ function Ie({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		}
 		let t = [];
 		function n(e) {
-			K.forEach(e, (e) => {
-				if (!q(e)) return;
+			V.forEach(e, (e) => {
+				if (!U(e)) return;
 				let r = e.props;
 				if (typeof r.href == "string" && r.label == null) {
 					t.push({
@@ -240,98 +293,98 @@ function Ie({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 			});
 		}
 		return n(e.props.children), t.length === 0 && t.push({
-			id: $(e),
-			label: Ne(e)
+			id: Q(e),
+			label: He(e)
 		}), t;
 	}
-	return /* @__PURE__ */ Z("div", {
-		...m.rowProps,
-		className: x,
+	return /* @__PURE__ */ X("div", {
+		...d.rowProps,
+		className: v,
 		children: [
-			/* @__PURE__ */ Z(Q.Root, {
+			/* @__PURE__ */ X(Z.Root, {
 				"aria-label": r,
 				delay: i,
 				closeDelay: o,
-				className: z,
+				className: N,
 				onValueChange: (e) => s?.setMenuOpen(e != null),
-				children: [/* @__PURE__ */ X(Q.List, {
-					className: b,
-					children: g
-				}), /* @__PURE__ */ Z(Q.Portal, { children: [/* @__PURE__ */ X(Q.Backdrop, { className: T }), /* @__PURE__ */ X(Q.Positioner, {
+				children: [/* @__PURE__ */ Y(Z.List, {
+					className: _,
+					children: p
+				}), /* @__PURE__ */ X(Z.Portal, { children: [/* @__PURE__ */ Y(Z.Backdrop, { className: S }), /* @__PURE__ */ Y(Z.Positioner, {
 					anchor: s?.anchorRef,
 					positionMethod: "fixed",
 					side: "bottom",
 					align: "center",
 					sideOffset: 8,
 					collisionPadding: 8,
-					className: k,
-					children: /* @__PURE__ */ X(Q.Popup, {
-						className: ne,
-						children: /* @__PURE__ */ X(Q.Viewport, { className: F })
+					className: D,
+					children: /* @__PURE__ */ Y(Z.Popup, {
+						className: E,
+						children: /* @__PURE__ */ Y(Z.Viewport, { className: j })
 					})
 				})] })]
 			}),
-			m.overflowIds.length > 0 ? /* @__PURE__ */ X(n, {
-				ref: m.moreRef,
+			d.overflowIds.length > 0 ? /* @__PURE__ */ Y(n, {
+				ref: d.moreRef,
 				role: "ghost",
 				size: "sm",
 				"aria-haspopup": "menu",
-				"aria-expanded": h.open,
-				"aria-controls": h.triggerProps["aria-controls"],
-				"data-state": h.open ? "open" : "closed",
-				className: R,
-				onClick: h.toggle,
-				children: /* @__PURE__ */ Z("span", {
-					className: G,
-					children: ["More", /* @__PURE__ */ X("span", {
-						className: L,
-						"data-state": h.open ? "open" : "closed",
-						children: /* @__PURE__ */ X(Y, {
+				"aria-expanded": f.open,
+				"aria-controls": f.triggerProps["aria-controls"],
+				"data-state": f.open ? "open" : "closed",
+				className: M,
+				onClick: f.toggle,
+				children: /* @__PURE__ */ X("span", {
+					className: z,
+					children: ["More", /* @__PURE__ */ Y("span", {
+						className: ge,
+						"data-state": f.open ? "open" : "closed",
+						children: /* @__PURE__ */ Y(J, {
 							strokeWidth: 2,
 							"aria-hidden": !0
 						})
 					})]
 				})
 			}) : null,
-			/* @__PURE__ */ Z("div", {
-				className: w,
+			/* @__PURE__ */ X("div", {
+				className: x,
 				"aria-hidden": !0,
 				children: [c.map((t) => {
-					let n = $(t), r = Ne(t), i = Pe(t);
-					return /* @__PURE__ */ Z("span", {
-						ref: m.measureRef(n),
-						className: e(S, i ? U : y),
-						children: [r, i ? /* @__PURE__ */ X(Y, {
+					let n = Q(t), r = He(t), i = $(t);
+					return /* @__PURE__ */ X("span", {
+						ref: d.measureRef(n),
+						className: e(y, i ? L : g),
+						children: [r, i ? /* @__PURE__ */ Y(J, {
 							className: "ml-1 size-3.5",
 							strokeWidth: 2
 						}) : null]
 					}, n);
-				}), /* @__PURE__ */ Z("span", {
-					ref: m.moreMeasureRef,
-					className: e(R, C),
-					children: ["More", /* @__PURE__ */ X(Y, {
+				}), /* @__PURE__ */ X("span", {
+					ref: d.moreMeasureRef,
+					className: e(M, b),
+					children: ["More", /* @__PURE__ */ Y(J, {
 						className: "size-3.5",
 						strokeWidth: 2
 					})]
 				})]
 			}),
-			h.open && h.menuStyle != null ? Ee(/* @__PURE__ */ X(a.Menu, {
-				...h.menuProps,
+			f.open && f.menuStyle != null ? Ne(/* @__PURE__ */ Y(a.Menu, {
+				...f.menuProps,
 				role: "menu",
 				"aria-label": `${r} overflow`,
-				children: _.map((e, t) => /* @__PURE__ */ X("li", {
+				children: m.map((e, t) => /* @__PURE__ */ Y("li", {
 					role: "presentation",
-					children: /* @__PURE__ */ X(a.Item, {
-						...h.rowProps(t),
+					children: /* @__PURE__ */ Y(a.Item, {
+						...f.rowProps(t),
 						role: "menuitem",
 						truncate: !1,
 						selected: !!e.current,
 						disabled: e.href == null,
-						render: e.href == null ? void 0 : /* @__PURE__ */ X("a", {
+						render: e.href == null ? void 0 : /* @__PURE__ */ Y("a", {
 							href: e.href,
 							"aria-current": e.current ? "page" : void 0
 						}),
-						onClick: () => h.close(),
+						onClick: () => f.close(),
 						children: e.label
 					})
 				}, e.id))
@@ -339,123 +392,123 @@ function Ie({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		]
 	});
 }
-function Le({ href: e, children: t, current: r = !1, value: i }) {
-	return /* @__PURE__ */ X(Q.Item, {
+function Ge({ href: e, children: t, current: r = !1, value: i }) {
+	return /* @__PURE__ */ Y(Z.Item, {
 		value: i ?? e,
-		children: /* @__PURE__ */ X(Q.Link, {
+		children: /* @__PURE__ */ Y(Z.Link, {
 			href: e,
 			active: r,
 			"aria-current": r ? "page" : void 0,
-			render: /* @__PURE__ */ X(n, {
+			render: /* @__PURE__ */ Y(n, {
 				role: "ghost",
 				size: "sm",
-				render: /* @__PURE__ */ X("a", {}),
-				className: y,
+				render: /* @__PURE__ */ Y("a", {}),
+				className: g,
 				children: t
 			})
 		})
 	});
 }
-function Re({ label: e, children: t, value: r }) {
+function Ke({ label: e, children: t, value: r }) {
 	let i = r ?? (typeof e == "string" ? e : void 0);
-	return /* @__PURE__ */ Z(Q.Item, {
+	return /* @__PURE__ */ X(Z.Item, {
 		value: i,
-		children: [/* @__PURE__ */ X(Q.Trigger, { render: /* @__PURE__ */ X(n, {
+		children: [/* @__PURE__ */ Y(Z.Trigger, { render: /* @__PURE__ */ Y(n, {
 			role: "ghost",
 			size: "sm",
-			className: U,
-			children: /* @__PURE__ */ Z("span", {
-				className: G,
-				children: [e, /* @__PURE__ */ X(Q.Icon, {
-					className: W,
-					children: /* @__PURE__ */ X(Y, {
+			className: L,
+			children: /* @__PURE__ */ X("span", {
+				className: z,
+				children: [e, /* @__PURE__ */ Y(Z.Icon, {
+					className: R,
+					children: /* @__PURE__ */ Y(J, {
 						strokeWidth: 2,
 						"aria-hidden": !0
 					})
 				})]
 			})
-		}) }), /* @__PURE__ */ X(Q.Content, {
-			className: E,
+		}) }), /* @__PURE__ */ Y(Z.Content, {
+			className: C,
 			children: t
 		})]
 	});
 }
-function ze({ label: t, span: n = 1, children: r }) {
-	return /* @__PURE__ */ Z("section", {
-		className: e(M, P[n]),
-		children: [t == null ? null : /* @__PURE__ */ X("h3", {
-			className: N,
+function qe({ label: t, span: n = 1, children: r }) {
+	return /* @__PURE__ */ X("section", {
+		className: e(A, oe[n]),
+		children: [t == null ? null : /* @__PURE__ */ Y("h3", {
+			className: ae,
 			children: t
 		}), r]
 	});
 }
-function Be({ href: e, children: t, icon: r, external: i = !1, newTab: a = !1, size: o = "sm" }) {
+function Je({ href: e, children: t, icon: r, external: i = !1, newTab: a = !1, size: o = "sm" }) {
 	let s = i && a;
-	return /* @__PURE__ */ X(Q.Link, {
+	return /* @__PURE__ */ Y(Z.Link, {
 		href: e,
 		target: s ? "_blank" : void 0,
 		rel: s ? "noopener noreferrer" : void 0,
-		render: /* @__PURE__ */ Z(n, {
+		render: /* @__PURE__ */ X(n, {
 			role: "ghost",
 			size: o,
-			render: /* @__PURE__ */ X("a", {}),
-			className: D,
+			render: /* @__PURE__ */ Y("a", {}),
+			className: w,
 			icon: r,
-			children: [t, s ? /* @__PURE__ */ X("span", {
+			children: [t, s ? /* @__PURE__ */ Y("span", {
 				className: "sr-only",
 				children: " (opens in a new tab)"
 			}) : null]
 		})
 	});
 }
-function Ve({ children: e }) {
-	return /* @__PURE__ */ X("div", {
-		className: O,
+function Ye({ children: e }) {
+	return /* @__PURE__ */ Y("div", {
+		className: T,
 		children: e
 	});
 }
-function He({ label: t, variant: n = "thumb", className: r }) {
-	return /* @__PURE__ */ X("div", {
+function Xe({ label: t, variant: n = "thumb", className: r }) {
+	return /* @__PURE__ */ Y("div", {
 		role: "img",
 		"aria-label": t,
-		className: e(s, o, n === "featured" ? "aspect-[16/10] w-full" : j, r)
+		className: e(s, o, n === "featured" ? "aspect-[16/10] w-full" : k, r)
 	});
 }
-function Ue({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
-	return /* @__PURE__ */ Z("div", {
+function Ze({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+	return /* @__PURE__ */ X("div", {
 		className: "flex flex-col gap-1 type-body",
 		children: [
 			e,
-			/* @__PURE__ */ X("h2", {
+			/* @__PURE__ */ Y("h2", {
 				className: "type-heading-2 text-fg",
 				children: t
 			}),
-			n == null ? null : /* @__PURE__ */ X("p", {
+			n == null ? null : /* @__PURE__ */ Y("p", {
 				className: "text-muted",
 				children: n
 			}),
-			/* @__PURE__ */ X(i, {
+			/* @__PURE__ */ Y(i, {
 				href: r,
 				children: a
 			})
 		]
 	});
 }
-function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
-	return /* @__PURE__ */ Z("div", {
-		className: A,
-		children: [e, /* @__PURE__ */ Z("div", {
+function Qe({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+	return /* @__PURE__ */ X("div", {
+		className: O,
+		children: [e, /* @__PURE__ */ X("div", {
 			className: "flex min-w-0 flex-col gap-1 type-body",
 			children: [
-				/* @__PURE__ */ X("h3", {
+				/* @__PURE__ */ Y("h3", {
 					className: "type-heading-3 text-fg",
 					children: t
 				}),
-				n == null ? null : /* @__PURE__ */ X("p", {
+				n == null ? null : /* @__PURE__ */ Y("p", {
 					className: "text-muted",
 					children: n
 				}),
-				/* @__PURE__ */ X(i, {
+				/* @__PURE__ */ Y(i, {
 					href: r,
 					children: a
 				})
@@ -463,28 +516,28 @@ function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read
 		})]
 	});
 }
-function Ge({ href: e, children: t, current: r = !1 }) {
-	return /* @__PURE__ */ X(n, {
+function $e({ href: e, children: t, current: r = !1 }) {
+	return /* @__PURE__ */ Y(n, {
 		role: "ghost",
 		size: "md",
-		render: /* @__PURE__ */ X("a", { href: e }),
+		render: /* @__PURE__ */ Y("a", { href: e }),
 		"aria-current": r ? "page" : void 0,
-		className: I,
+		className: fe,
 		children: t
 	});
 }
-var Ke = Object.assign(Ae, {
-	Brand: je,
-	Links: Ie,
-	Link: Le,
-	Menu: Re,
-	MenuSection: ze,
-	MenuLink: Be,
-	MenuLinkGrid: Ve,
-	MenuMedia: He,
-	Featured: Ue,
-	ReadRow: We,
-	MobileLink: Ge
+var et = Object.assign(ze, {
+	Brand: Be,
+	Links: We,
+	Link: Ge,
+	Menu: Ke,
+	MenuSection: qe,
+	MenuLink: Je,
+	MenuLinkGrid: Ye,
+	MenuMedia: Xe,
+	Featured: Ze,
+	ReadRow: Qe,
+	MobileLink: $e
 });
 //#endregion
-export { Ke as SiteNav, h as siteNavCompactLayouts, _ as siteNavDefaultCollapseAt, v as siteNavDefaultCollapseRatio, te as siteNavExpandedHeightClasses, A as siteNavMenuReadRowClasses, j as siteNavMenuReadThumbClasses, B as siteNavPlacements, H as siteNavStates };
+export { et as SiteNav, d as siteNavCompactLayouts, p as siteNavDefaultCollapseAt, m as siteNavDefaultCollapseRatio, ie as siteNavExpandedHeightClasses, O as siteNavMenuReadRowClasses, k as siteNavMenuReadThumbClasses, P as siteNavPlacements, I as siteNavStates };