@goliapkg/gds 1.6.1 → 2.0.0

package/dist/{l7-patterns-8fc4b3eE.js → l7-patterns-Dn7X2pQC.js}

@@ -1,89 +1,194 @@
 import { r as e, t } from "./glass-CQTlX7IO.js";
 import { t as n } from "./button-avu-rQU4.js";
+import "./motion-DUPegem-.js";
 import { r, t as i } from "./separator-Dqs23A9D.js";
-import { i as a, r as o, t as s } from "./spinner-N7UNjdsQ.js";
+import { i as a, r as o, t as s } from "./spinner-DyrwL4JQ.js";
 import { t as c } from "./progress-wAKN3Czz.js";
 import { t as l } from "./skeleton-C9FFZSYN.js";
 import { t as u } from "./avatar-l3SaMCmU.js";
 import { n as d, t as f } from "./resize-handle-ilSc7QRM.js";
-import { i as p, n as m, r as h, t as g } from "./stepper-DWJfv7TA.js";
-import { Children as _, forwardRef as v, useCallback 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 { a as p, i as m, n as h, r as g, t as _ } from "./stepper-DKJuH1ws.js";
+import { a as v } from "./hooks-BE-_EmDI.js";
+import { Children as y, createContext as b, forwardRef as x, useCallback as S, useContext as C, useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/l7-patterns/action-bar.tsx
-var D = {
+var j = {
 	between: "justify-between",
 	center: "justify-center",
 	end: "justify-end",
 	start: "justify-start"
-}, O = v(function({ children: n, className: r, glass: i = !0, justify: a = "end", position: o = "bottom" }, s) {
-	return /* @__PURE__ */ T("div", {
+}, ee = x(function({ children: n, className: r, glass: i = !0, justify: a = "end", position: o = "bottom" }, s) {
+	return /* @__PURE__ */ k("div", {
 		ref: s,
-		className: e("sticky z-10 flex items-center gds-pad-x-lg gds-pad-y", o === "bottom" ? "bottom-0 border-t" : "top-0 border-b", D[a], i === !0 ? e(t(i), "border-white/10 bg-bg/60") : "border-border bg-surface", r),
+		className: e("sticky z-10 flex items-center gds-pad-x-lg gds-pad-y", o === "bottom" ? "bottom-0 border-t" : "top-0 border-b", j[a], i === !0 ? e(t(i), "border-white/10 bg-bg/60") : "border-border bg-surface", r),
 		"data-component": "action-bar",
 		children: n
 	});
-}), ee = v(function({ sidebar: t, topbar: n, children: r, sidebarWidth: i = 240, className: a }, o) {
-	return /* @__PURE__ */ E("div", {
-		ref: o,
-		className: e("flex h-screen min-h-0 bg-bg", a),
+});
+//#endregion
+//#region src/l7-patterns/admin-layout.tsx
+function te() {
+	return /* @__PURE__ */ k("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		children: /* @__PURE__ */ k("path", { d: "M3 5h14M3 10h14M3 15h14" })
+	});
+}
+function ne({ collapsed: t }) {
+	return /* @__PURE__ */ k("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: e("transition-transform duration-200", t && "rotate-180"),
+		children: /* @__PURE__ */ k("path", { d: "M10 3L5 8l5 5" })
+	});
+}
+var re = x(function({ sidebar: t, topbar: n, children: r, sidebarWidth: i = 240, sidebarCollapsible: a = !0, sidebarDefaultCollapsed: o = !1, mobileDrawer: s = !0, topbarHeight: c = 48, topbarSticky: l = !0, logo: u, className: d }, f) {
+	let p = v(), [m, g] = D(!1), [_, y] = D(o), b = s && p, x = _ ? 56 : i;
+	return /* @__PURE__ */ A("div", {
+		ref: f,
+		className: e("flex h-screen min-h-0 bg-bg", d),
 		"data-component": "admin-layout",
-		children: [/* @__PURE__ */ T("aside", {
-			className: "shrink-0 overflow-y-auto border-r border-border bg-surface",
-			style: { width: i },
-			children: t
-		}), /* @__PURE__ */ E("div", {
-			className: "flex flex-1 flex-col min-w-0",
-			children: [n !== void 0 && /* @__PURE__ */ T("header", {
-				className: "sticky top-0 z-10 shrink-0 border-b border-border bg-surface/80 backdrop-blur-sm",
-				children: n
-			}), /* @__PURE__ */ T("main", {
-				className: "flex-1 overflow-auto",
-				children: r
-			})]
-		})]
+		children: [
+			!b && /* @__PURE__ */ A("aside", {
+				className: "relative shrink-0 overflow-y-auto border-r border-border bg-surface transition-[width] duration-200",
+				style: { width: x },
+				children: [
+					u !== void 0 && /* @__PURE__ */ k("div", {
+						className: "flex items-center border-b border-border px-3",
+						style: { height: c },
+						children: u
+					}),
+					/* @__PURE__ */ k("div", {
+						className: e(_ && "overflow-hidden"),
+						children: t
+					}),
+					a && /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: () => y((e) => !e),
+						className: e("absolute bottom-3 right-2 flex h-6 w-6 items-center justify-center rounded-md text-fg-muted hover:text-fg hover:bg-surface-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
+						"aria-label": _ ? "Expand sidebar" : "Collapse sidebar",
+						children: /* @__PURE__ */ k(ne, { collapsed: _ })
+					})
+				]
+			}),
+			b && /* @__PURE__ */ A(h, {
+				open: m,
+				onClose: () => g(!1),
+				side: "left",
+				width: i,
+				children: [u !== void 0 && /* @__PURE__ */ k("div", {
+					className: "mb-2",
+					children: u
+				}), t]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex flex-1 flex-col min-w-0",
+				children: [(n !== void 0 || b) && /* @__PURE__ */ A("header", {
+					className: e("z-10 shrink-0 flex items-center border-b border-border bg-surface/80 backdrop-blur-sm", l && "sticky top-0"),
+					style: { height: c },
+					children: [b && /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: () => g(!0),
+						className: e("ml-2 flex h-9 w-9 items-center justify-center rounded-md text-fg-muted hover:text-fg hover:bg-surface-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
+						"aria-label": "Open sidebar menu",
+						"data-testid": "admin-layout-hamburger",
+						children: /* @__PURE__ */ k(te, {})
+					}), n !== void 0 && /* @__PURE__ */ k("div", {
+						className: "flex-1 min-w-0",
+						children: n
+					})]
+				}), /* @__PURE__ */ k("main", {
+					className: "flex-1 overflow-auto",
+					children: r
+				})]
+			})
+		]
 	});
-}), te = v(function({ charts: t, className: n, data: r, metrics: i }, a) {
-	return /* @__PURE__ */ E("div", {
+}), ie = x(function({ charts: t, className: n, data: r, metrics: i }, a) {
+	return /* @__PURE__ */ A("div", {
 		className: e("flex flex-col gds-gap", n),
 		"data-component": "analytics-dashboard",
 		ref: a,
 		children: [
-			i !== void 0 && /* @__PURE__ */ T("section", {
+			i !== void 0 && /* @__PURE__ */ k("section", {
 				className: "flex flex-wrap gds-gap",
 				"data-slot": "metrics",
 				children: i
 			}),
-			t !== void 0 && /* @__PURE__ */ T("section", {
+			t !== void 0 && /* @__PURE__ */ k("section", {
 				className: "flex flex-col gds-gap",
 				"data-slot": "charts",
 				children: t
 			}),
-			r !== void 0 && /* @__PURE__ */ T("section", {
+			r !== void 0 && /* @__PURE__ */ k("section", {
 				className: "flex flex-col gds-gap",
 				"data-slot": "data",
 				children: r
 			})
 		]
 	});
-}), ne = {
+}), ae = x(function({ sidebar: n, children: r, statusBar: i, mobileNav: a, sidebarWidth: o = 56, sidebarPosition: s = "left", padded: c = !1, gap: l = 0, glass: u, className: d, ...f }, p) {
+	let m = v();
+	return /* @__PURE__ */ A("div", {
+		...f,
+		ref: p,
+		className: e("fixed inset-0 flex flex-col bg-bg", t(u), d),
+		"data-component": "app-shell",
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: e("flex flex-1 min-h-0", s === "right" && "flex-row-reverse"),
+				style: l > 0 ? { gap: l } : void 0,
+				children: [n !== void 0 && !m && /* @__PURE__ */ k("div", {
+					className: "shrink-0 overflow-hidden",
+					style: { width: o },
+					children: n
+				}), /* @__PURE__ */ k("div", {
+					className: e("flex-1 min-w-0 flex flex-col overflow-hidden", c && "p-1.5 md:p-1.5"),
+					children: r
+				})]
+			}),
+			i !== void 0 && !m && /* @__PURE__ */ k("div", {
+				className: "shrink-0 border-t border-border bg-bg-secondary",
+				"data-component": "app-shell-status-bar",
+				children: i
+			}),
+			a !== void 0 && m && /* @__PURE__ */ k("div", {
+				className: "shrink-0 border-t border-border bg-bg-secondary",
+				"data-component": "app-shell-mobile-nav",
+				children: a
+			})
+		]
+	});
+}), oe = {
 	sm: "gds-gap-sm",
 	default: "gds-gap",
 	lg: "gds-gap-lg"
-}, re = (e) => ({
+}, se = (e) => ({
 	1: "grid-cols-1",
 	2: "grid-cols-2",
 	3: "grid-cols-3",
 	4: "grid-cols-4",
 	5: "grid-cols-5",
 	6: "grid-cols-6"
-})[e] ?? `grid-cols-${e}`, ie = v(function({ children: t, columns: n = 4, gap: r = "default", className: i }, a) {
-	return /* @__PURE__ */ T("div", {
+})[e] ?? `grid-cols-${e}`, ce = x(function({ children: t, columns: n = 4, gap: r = "default", className: i }, a) {
+	return /* @__PURE__ */ k("div", {
 		ref: a,
-		className: e("grid auto-rows-[minmax(120px,auto)]", re(n), ne[r], i),
+		className: e("grid auto-rows-[minmax(120px,auto)]", se(n), oe[r], i),
 		"data-component": "bento-grid",
 		children: t
 	});
-}), ae = [
+}), le = [
 	"Sun",
 	"Mon",
 	"Tue",
@@ -91,7 +196,7 @@ var D = {
 	"Thu",
 	"Fri",
 	"Sat"
-], oe = v(function({ className: t, events: n = [], month: r, onDateClick: i, year: a, ...o }, s) {
+], ue = x(function({ className: t, events: n = [], month: r, onDateClick: i, year: a, ...o }, s) {
 	let c = new Date(a, r - 1, 1).getDay(), l = new Date(a, r, 0).getDate(), u = [];
 	for (let e = 0; e < c; e++) u.push(null);
 	for (let e = 1; e <= l; e++) u.push(e);
@@ -100,26 +205,26 @@ var D = {
 		let t = d.get(e.date) ?? [];
 		d.set(e.date, [...t, e]);
 	}
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ k("div", {
 		className: e("flex flex-col gap-1", t),
 		"data-component": "calendar-view",
 		ref: s,
 		...o,
-		children: /* @__PURE__ */ E("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: "grid grid-cols-7 gap-1",
-			children: [ae.map((e) => /* @__PURE__ */ T("div", {
+			children: [le.map((e) => /* @__PURE__ */ k("div", {
 				className: "py-1 text-center text-xs font-medium text-fg-muted",
 				children: e
 			}, e)), u.map((t, n) => {
 				let r = t === null ? [] : d.get(t) ?? [];
-				return /* @__PURE__ */ E("div", {
+				return /* @__PURE__ */ A("div", {
 					className: e("flex min-h-[36px] flex-col items-center rounded p-1 text-xs", t !== null && "cursor-pointer text-fg hover:bg-accent/10", t === null && "pointer-events-none"),
 					onClick: () => {
 						t !== null && i !== void 0 && i(t);
 					},
-					children: [t !== null && /* @__PURE__ */ T("span", { children: t }), r.length > 0 && /* @__PURE__ */ T("div", {
+					children: [t !== null && /* @__PURE__ */ k("span", { children: t }), r.length > 0 && /* @__PURE__ */ k("div", {
 						className: "mt-0.5 flex gap-0.5",
-						children: r.slice(0, 3).map((e, t) => /* @__PURE__ */ T("span", {
+						children: r.slice(0, 3).map((e, t) => /* @__PURE__ */ k("span", {
 							className: "h-1 w-1 rounded-full",
 							style: { backgroundColor: e.color ?? "var(--color-accent)" },
 							title: e.label
@@ -132,31 +237,31 @@ var D = {
 });
 //#endregion
 //#region src/l7-patterns/comparison-table.tsx
-function se({ features: t, plans: n, highlightColumn: r, glass: i, className: a }) {
-	return /* @__PURE__ */ T("div", {
+function M({ features: t, plans: n, highlightColumn: r, glass: i, className: a }) {
+	return /* @__PURE__ */ k("div", {
 		"data-component": "comparison-table",
 		className: e("overflow-hidden gds-radius-card border border-border", i === !0 && "bg-white/5 backdrop-blur-md", a),
-		children: /* @__PURE__ */ E("table", {
+		children: /* @__PURE__ */ A("table", {
 			className: "w-full text-sm",
-			children: [/* @__PURE__ */ T("thead", { children: /* @__PURE__ */ E("tr", {
+			children: [/* @__PURE__ */ k("thead", { children: /* @__PURE__ */ A("tr", {
 				className: "border-b border-border bg-bg-tertiary/30",
-				children: [/* @__PURE__ */ T("th", {
+				children: [/* @__PURE__ */ k("th", {
 					className: "px-4 py-3 text-left text-xs font-medium text-fg-muted",
 					children: "Feature"
-				}), n.map((t, n) => /* @__PURE__ */ T("th", {
+				}), n.map((t, n) => /* @__PURE__ */ k("th", {
 					className: e("px-4 py-3 text-center text-xs font-semibold text-fg", n === r && "bg-accent/5"),
 					children: t.name
 				}, t.name))]
-			}) }), /* @__PURE__ */ T("tbody", { children: t.map((i, a) => /* @__PURE__ */ E("tr", {
+			}) }), /* @__PURE__ */ k("tbody", { children: t.map((i, a) => /* @__PURE__ */ A("tr", {
 				className: e(a < t.length - 1 && "border-b border-border/50"),
-				children: [/* @__PURE__ */ T("td", {
+				children: [/* @__PURE__ */ k("td", {
 					className: "px-4 py-2.5 text-xs text-fg",
 					children: i
 				}), n.map((t, n) => {
 					let i = t.values[a];
-					return /* @__PURE__ */ T("td", {
+					return /* @__PURE__ */ k("td", {
 						className: e("px-4 py-2.5 text-center", n === r && "bg-accent/5"),
-						children: typeof i == "boolean" ? i === !0 ? /* @__PURE__ */ T("svg", {
+						children: typeof i == "boolean" ? i === !0 ? /* @__PURE__ */ k("svg", {
 							className: "mx-auto text-success",
 							width: "16",
 							height: "16",
@@ -167,8 +272,8 @@ function se({ features: t, plans: n, highlightColumn: r, glass: i, className: a
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							"data-icon": "check",
-							children: /* @__PURE__ */ T("polyline", { points: "20 6 9 17 4 12" })
-						}) : /* @__PURE__ */ T("svg", {
+							children: /* @__PURE__ */ k("polyline", { points: "20 6 9 17 4 12" })
+						}) : /* @__PURE__ */ k("svg", {
 							className: "mx-auto text-fg-muted/40",
 							width: "16",
 							height: "16",
@@ -178,13 +283,13 @@ function se({ features: t, plans: n, highlightColumn: r, glass: i, className: a
 							strokeWidth: "2",
 							strokeLinecap: "round",
 							"data-icon": "dash",
-							children: /* @__PURE__ */ T("line", {
+							children: /* @__PURE__ */ k("line", {
 								x1: "5",
 								y1: "12",
 								x2: "19",
 								y2: "12"
 							})
-						}) : /* @__PURE__ */ T("span", {
+						}) : /* @__PURE__ */ k("span", {
 							className: "text-xs text-fg",
 							children: i
 						})
@@ -196,132 +301,132 @@ function se({ features: t, plans: n, highlightColumn: r, glass: i, className: a
 }
 //#endregion
 //#region src/l7-patterns/composition-pattern.tsx
-var k = v(function({ header: n, sidebar: r, content: i, footer: a, sidebarPosition: o = "left", sidebarWidth: s = 240, glass: c, className: l }, u) {
-	let d = typeof s == "number" ? `${s}px` : s, f = o === "right", p = r === void 0 ? null : /* @__PURE__ */ T("div", {
+var N = x(function({ header: n, sidebar: r, content: i, footer: a, sidebarPosition: o = "left", sidebarWidth: s = 240, glass: c, className: l }, u) {
+	let d = typeof s == "number" ? `${s}px` : s, f = o === "right", p = r === void 0 ? null : /* @__PURE__ */ k("div", {
 		className: e("shrink-0 overflow-auto", f ? "border-l border-border" : "border-r border-border"),
 		style: { width: d },
 		children: r
 	});
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: u,
 		className: e("gds-ctx flex h-full flex-col", t(c), l),
 		"data-component": "composition-pattern",
 		children: [
-			n !== void 0 && /* @__PURE__ */ T("div", {
+			n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "shrink-0 border-b border-border",
 				children: n
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex min-h-0 flex-1",
 				children: [
 					f ? null : p,
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ k("div", {
 						className: "flex-1 overflow-auto",
 						children: i
 					}),
 					f ? p : null
 				]
 			}),
-			a !== void 0 && /* @__PURE__ */ T("div", {
+			a !== void 0 && /* @__PURE__ */ k("div", {
 				className: "shrink-0 border-t border-border",
 				children: a
 			})
 		]
 	});
-}), A = v(function({ title: n, description: r, actions: i, variant: a = "default", glass: o, className: s }, c) {
-	return /* @__PURE__ */ E("div", {
+}), P = x(function({ title: n, description: r, actions: i, variant: a = "default", glass: o, className: s }, c) {
+	return /* @__PURE__ */ A("div", {
 		ref: c,
 		className: e("gds-ctx gds-radius-card gds-pad-x-lg gds-pad-y-lg w-full text-center", a === "accent" ? "bg-accent text-accent-fg" : a === "gradient" ? "bg-gradient-to-r from-accent to-success text-accent-fg" : o === !0 ? e(t(o), "border border-white/10 bg-bg/60") : "border border-border bg-surface", s),
 		"data-component": "cta-banner",
 		"data-variant": a,
 		children: [
-			/* @__PURE__ */ T("h2", {
+			/* @__PURE__ */ k("h2", {
 				className: e("text-xl font-bold", a === "default" && "text-fg"),
 				children: n
 			}),
-			r !== void 0 && /* @__PURE__ */ T("p", {
+			r !== void 0 && /* @__PURE__ */ k("p", {
 				className: e("mt-2 gds-text-body", a === "default" ? "text-fg-muted" : "opacity-80"),
 				children: r
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "mt-4 flex items-center justify-center gap-3",
 				children: i
 			})
 		]
 	});
-}), j = v(function({ sidebar: t, header: n, children: r, sidebarWidth: i = 240, className: a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), F = x(function({ sidebar: t, header: n, children: r, sidebarWidth: i = 240, className: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("flex h-full min-h-0 bg-bg", a),
 		"data-component": "dashboard-layout",
-		children: [/* @__PURE__ */ T("aside", {
+		children: [/* @__PURE__ */ k("aside", {
 			className: "shrink-0 overflow-y-auto border-r border-border bg-surface",
 			style: { width: i },
 			children: t
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "flex flex-1 flex-col min-w-0",
-			children: [n !== void 0 && /* @__PURE__ */ T("header", {
+			children: [n !== void 0 && /* @__PURE__ */ k("header", {
 				className: "sticky top-0 z-10 shrink-0 border-b border-border bg-surface/80 backdrop-blur-sm",
 				children: n
-			}), /* @__PURE__ */ T("main", {
+			}), /* @__PURE__ */ k("main", {
 				className: "flex-1 overflow-auto",
 				children: r
 			})]
 		})]
 	});
-}), M = v(function({ formats: t, onExport: r, title: i = "Export Data", className: a, ...o }, s) {
-	let [c, l] = C(t[0] ?? ""), [u, d] = C(""), [f, p] = C("");
+}), I = x(function({ formats: t, onExport: r, title: i = "Export Data", className: a, ...o }, s) {
+	let [c, l] = D(t[0] ?? ""), [u, d] = D(""), [f, p] = D("");
 	function m() {
 		r(c, u !== "" && f !== "" ? {
 			from: u,
 			to: f
 		} : void 0);
 	}
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: s,
 		className: e("gds-ctx rounded-lg border border-border bg-surface gds-pad gds-shadow", a),
 		"data-component": "data-export-card",
 		...o,
-		children: [/* @__PURE__ */ T("h3", {
+		children: [/* @__PURE__ */ k("h3", {
 			className: "select-none font-medium gds-heading text-fg mb-3",
 			children: i
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "flex flex-col gap-3",
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ A("div", {
 					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ T("label", {
+					children: [/* @__PURE__ */ k("label", {
 						className: "select-none text-xs text-fg-muted",
 						children: "Format"
-					}), /* @__PURE__ */ T("select", {
+					}), /* @__PURE__ */ k("select", {
 						value: c,
 						onChange: (e) => l(e.target.value),
 						className: "rounded border border-border bg-bg px-2 py-1.5 gds-text-body text-fg",
-						children: t.map((e) => /* @__PURE__ */ T("option", {
+						children: t.map((e) => /* @__PURE__ */ k("option", {
 							value: e,
 							children: e
 						}, e))
 					})]
 				}),
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ A("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ E("div", {
+					children: [/* @__PURE__ */ A("div", {
 						className: "flex flex-1 flex-col gap-1",
-						children: [/* @__PURE__ */ T("label", {
+						children: [/* @__PURE__ */ k("label", {
 							className: "select-none text-xs text-fg-muted",
 							children: "From"
-						}), /* @__PURE__ */ T("input", {
+						}), /* @__PURE__ */ k("input", {
 							type: "date",
 							value: u,
 							onChange: (e) => d(e.target.value),
 							className: "rounded border border-border bg-bg px-2 py-1.5 gds-text-body text-fg"
 						})]
-					}), /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ A("div", {
 						className: "flex flex-1 flex-col gap-1",
-						children: [/* @__PURE__ */ T("label", {
+						children: [/* @__PURE__ */ k("label", {
 							className: "select-none text-xs text-fg-muted",
 							children: "To"
-						}), /* @__PURE__ */ T("input", {
+						}), /* @__PURE__ */ k("input", {
 							type: "date",
 							value: f,
 							onChange: (e) => p(e.target.value),
@@ -329,7 +434,7 @@ var k = v(function({ header: n, sidebar: r, content: i, footer: a, sidebarPositi
 						})]
 					})]
 				}),
-				/* @__PURE__ */ T(n, {
+				/* @__PURE__ */ k(n, {
 					type: "button",
 					onClick: m,
 					className: "mt-1",
@@ -338,207 +443,207 @@ var k = v(function({ header: n, sidebar: r, content: i, footer: a, sidebarPositi
 			]
 		})]
 	});
-}), N = v(function({ activeTab: t, children: n, className: r, onTabChange: i, statusBar: a, tabs: o, ...s }, c) {
-	return /* @__PURE__ */ E("div", {
+}), L = x(function({ activeTab: t, children: n, className: r, onTabChange: i, statusBar: a, tabs: o, ...s }, c) {
+	return /* @__PURE__ */ A("div", {
 		className: e("flex h-full flex-col", r),
 		"data-component": "devops-layout",
 		ref: c,
 		...s,
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "flex items-center gap-1 border-b border-border px-2",
-				children: o.map((n) => /* @__PURE__ */ T("button", {
+				children: o.map((n) => /* @__PURE__ */ k("button", {
 					className: e("px-3 py-2 gds-text-label font-medium transition-colors", n.id === t ? "border-b-2 border-accent text-accent" : "text-fg-muted hover:text-fg"),
 					onClick: () => i(n.id),
 					type: "button",
 					children: n.label
 				}, n.id))
 			}),
-			a !== void 0 && /* @__PURE__ */ T("div", {
+			a !== void 0 && /* @__PURE__ */ k("div", {
 				className: "border-b border-border px-3 py-2",
 				children: a
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "flex-1 overflow-auto",
 				children: n
 			})
 		]
 	});
-}), P = v(function({ title: t, description: n, icon: r, action: i, className: a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), R = x(function({ title: t, description: n, icon: r, action: i, className: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("flex flex-col items-center justify-center py-12", a),
 		"data-component": "empty-state",
 		children: [
-			r !== void 0 && /* @__PURE__ */ T("div", {
+			r !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mb-3 flex h-12 w-12 items-center justify-center text-fg-muted/20",
 				children: r
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "gds-text-body font-medium text-fg",
 				children: t
 			}),
-			n !== void 0 && /* @__PURE__ */ T("p", {
+			n !== void 0 && /* @__PURE__ */ k("p", {
 				className: "mt-1 gds-text-body text-fg-muted",
 				children: n
 			}),
-			i !== void 0 && /* @__PURE__ */ T("div", {
+			i !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-4",
 				children: i
 			})
 		]
 	});
-}), F = v(function({ items: n, title: r = "FAQ", glass: i, className: a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), z = x(function({ items: n, title: r = "FAQ", glass: i, className: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("gds-ctx gds-radius-card border gds-pad-x-lg gds-pad-y-lg", i === !0 ? e(t(i), "border-white/10 bg-bg/60") : "border-border bg-surface", a),
 		"data-component": "faq",
-		children: [/* @__PURE__ */ T("h2", {
+		children: [/* @__PURE__ */ k("h2", {
 			className: "gds-heading font-semibold text-fg mb-4",
 			children: r
-		}), /* @__PURE__ */ T(h, {
+		}), /* @__PURE__ */ k(m, {
 			type: "single",
-			children: n.map((e, t) => /* @__PURE__ */ T(p, {
+			children: n.map((e, t) => /* @__PURE__ */ k(p, {
 				id: `faq-${t}`,
 				title: e.question,
 				children: e.answer
 			}, t))
 		})]
 	});
-}), I = v(function({ icon: n, title: r, description: i, action: a, glass: o, className: s }, c) {
-	return /* @__PURE__ */ E("div", {
+}), B = x(function({ icon: n, title: r, description: i, action: a, glass: o, className: s }, c) {
+	return /* @__PURE__ */ A("div", {
 		ref: c,
 		className: e("gds-ctx gds-radius-card border gds-pad-x-lg gds-pad-y-lg flex flex-col", o === !0 ? e(t(o), "border-white/10 bg-bg/60") : "border-border bg-surface", s),
 		"data-component": "feature-card",
 		children: [
-			n !== void 0 && /* @__PURE__ */ T("div", {
+			n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mb-3 text-accent",
 				children: n
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "font-semibold text-fg",
 				children: r
 			}),
-			i !== void 0 && /* @__PURE__ */ T("p", {
+			i !== void 0 && /* @__PURE__ */ k("p", {
 				className: "mt-1 gds-text-body text-fg-muted",
 				children: i
 			}),
-			a !== void 0 && /* @__PURE__ */ T("div", {
+			a !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-auto pt-4",
 				children: a
 			})
 		]
 	});
-}), L = v(function({ columns: n, copyright: r, logo: i, glass: a, className: o }, s) {
-	return /* @__PURE__ */ E("footer", {
+}), V = x(function({ columns: n, copyright: r, logo: i, glass: a, className: o }, s) {
+	return /* @__PURE__ */ A("footer", {
 		ref: s,
 		className: e("w-full py-10", a && t(!0), o),
 		"data-component": "footer",
-		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ T("div", {
+		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ k("div", {
 			className: "grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-4",
-			children: n.map((e) => /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h3", {
+			children: n.map((e) => /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
 				className: "text-sm font-semibold text-fg",
 				children: e.title
-			}), /* @__PURE__ */ T("ul", {
+			}), /* @__PURE__ */ k("ul", {
 				className: "mt-3 space-y-2",
-				children: e.links.map((e) => /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("a", {
+				children: e.links.map((e) => /* @__PURE__ */ k("li", { children: /* @__PURE__ */ k("a", {
 					href: e.href,
 					className: "text-sm text-fg-muted hover:text-fg",
 					children: e.label
 				}) }, e.href))
 			})] }, e.title))
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: e("flex items-center gap-3 border-t border-border pt-6", n !== void 0 && n.length > 0 && "mt-8"),
-			children: [i !== void 0 && /* @__PURE__ */ T("div", { children: i }), r !== void 0 && /* @__PURE__ */ T("p", {
+			children: [i !== void 0 && /* @__PURE__ */ k("div", { children: i }), r !== void 0 && /* @__PURE__ */ k("p", {
 				className: "text-xs text-fg-muted",
 				children: r
 			})]
 		})]
 	});
-}), R = v(function({ title: t, description: n, children: r, actions: i, className: a }, o) {
+}), H = x(function({ title: t, description: n, children: r, actions: i, className: a }, o) {
 	let s = t !== void 0 || n !== void 0;
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("flex flex-col", a),
 		"data-component": "form-layout",
 		children: [
-			s && /* @__PURE__ */ E("div", {
+			s && /* @__PURE__ */ A("div", {
 				className: "mb-4",
-				children: [t !== void 0 && /* @__PURE__ */ T("h2", {
+				children: [t !== void 0 && /* @__PURE__ */ k("h2", {
 					className: "gds-text-body font-semibold text-fg",
 					children: t
-				}), n !== void 0 && /* @__PURE__ */ T("p", {
+				}), n !== void 0 && /* @__PURE__ */ k("p", {
 					className: "mt-0.5 gds-text-body text-fg-muted",
 					children: n
 				})]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "flex flex-col gds-gap-lg",
 				children: r
 			}),
-			i !== void 0 && /* @__PURE__ */ T("div", {
+			i !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-6 flex justify-end gds-gap-sm",
 				children: i
 			})
 		]
 	});
-}), z = v(function({ title: n, description: r, sections: a, actions: o, glass: s, className: c }, l) {
-	return /* @__PURE__ */ E("div", {
+}), U = x(function({ title: n, description: r, sections: a, actions: o, glass: s, className: c }, l) {
+	return /* @__PURE__ */ A("div", {
 		ref: l,
 		className: e("gds-ctx flex flex-col gds-pad gds-radius-card", t(s), c),
 		"data-component": "form-pattern",
 		children: [
-			(n !== void 0 || r !== void 0) && /* @__PURE__ */ E("div", {
+			(n !== void 0 || r !== void 0) && /* @__PURE__ */ A("div", {
 				className: "mb-4",
-				children: [n !== void 0 && /* @__PURE__ */ T("h2", {
+				children: [n !== void 0 && /* @__PURE__ */ k("h2", {
 					className: "gds-heading font-semibold text-fg",
 					children: n
-				}), r !== void 0 && /* @__PURE__ */ T("p", {
+				}), r !== void 0 && /* @__PURE__ */ k("p", {
 					className: "mt-1 gds-text-body text-fg-muted",
 					children: r
 				})]
 			}),
-			a.map((e, t) => /* @__PURE__ */ E("div", { children: [t > 0 && /* @__PURE__ */ T(i, { className: "my-4" }), /* @__PURE__ */ E("div", {
+			a.map((e, t) => /* @__PURE__ */ A("div", { children: [t > 0 && /* @__PURE__ */ k(i, { className: "my-4" }), /* @__PURE__ */ A("div", {
 				className: "flex flex-col gds-gap",
-				children: [/* @__PURE__ */ T("h3", {
+				children: [/* @__PURE__ */ k("h3", {
 					className: "gds-text-body font-medium text-fg",
 					children: e.title
 				}), e.fields]
 			})] }, e.title)),
-			o !== void 0 && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(i, { className: "my-4" }), /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(i, { className: "my-4" }), /* @__PURE__ */ k("div", {
 				className: "flex justify-end gds-gap-sm",
 				children: o
 			})] })
 		]
 	});
-}), B = {
+}), de = {
 	none: "",
 	sm: "gds-pad-x gds-pad-y",
 	default: "gds-pad-x-lg gds-pad-y-lg",
 	lg: "p-6"
-}, V = {
+}, fe = {
 	sm: "sm",
 	default: !0,
 	lg: "lg"
-}, H = v(function({ children: n, blur: r = "default", padding: i = "default", className: a }, o) {
-	return /* @__PURE__ */ T("div", {
+}, pe = x(function({ children: n, blur: r = "default", padding: i = "default", className: a }, o) {
+	return /* @__PURE__ */ k("div", {
 		ref: o,
-		className: e("gds-ctx gds-radius-card border border-white/10", t(V[r]), B[i], a),
+		className: e("gds-ctx gds-radius-card border border-white/10", t(fe[r]), de[i], a),
 		"data-component": "glass-panel",
 		children: n
 	});
-}), U = {
+}), me = {
 	sm: "gds-gap-sm",
 	default: "gds-gap",
 	lg: "gds-gap-lg"
-}, W = (e) => ({
+}, he = (e) => ({
 	1: "grid-cols-1",
 	2: "grid-cols-2",
 	3: "grid-cols-3",
 	4: "grid-cols-4",
 	5: "grid-cols-5",
 	6: "grid-cols-6"
-})[e] ?? `grid-cols-${e}`, G = (e, t) => ({
+})[e] ?? `grid-cols-${e}`, W = (e, t) => ({
 	1: `${e}:grid-cols-1`,
 	2: `${e}:grid-cols-2`,
 	3: `${e}:grid-cols-3`,
@@ -546,108 +651,201 @@ var k = v(function({ header: n, sidebar: r, content: i, footer: a, sidebarPositi
 	5: `${e}:grid-cols-5`,
 	6: `${e}:grid-cols-6`
 })[t] ?? `${e}:grid-cols-${t}`;
-function K(e) {
-	if (typeof e == "number") return W(e);
+function ge(e) {
+	if (typeof e == "number") return he(e);
 	let t = [];
-	return e.sm !== void 0 && t.push(G("sm", e.sm)), e.md !== void 0 && t.push(G("md", e.md)), e.lg !== void 0 && t.push(G("lg", e.lg)), e.xl !== void 0 && t.push(G("xl", e.xl)), t.length > 0 && t.unshift("grid-cols-1"), t.join(" ");
+	return e.sm !== void 0 && t.push(W("sm", e.sm)), e.md !== void 0 && t.push(W("md", e.md)), e.lg !== void 0 && t.push(W("lg", e.lg)), e.xl !== void 0 && t.push(W("xl", e.xl)), t.length > 0 && t.unshift("grid-cols-1"), t.join(" ");
 }
-var ce = v(function({ children: t, columns: n = {
+var _e = x(function({ children: t, columns: n = {
 	sm: 1,
 	md: 2,
 	lg: 3
 }, gap: r = "default", className: i }, a) {
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ k("div", {
 		ref: a,
-		className: e("grid", K(n), U[r], i),
+		className: e("grid", ge(n), me[r], i),
 		"data-component": "grid-layout",
 		children: t
 	});
-}), le = v(function({ title: n, subtitle: r, actions: i, media: a, align: o = "center", glass: s, className: c }, l) {
+}), ve = x(function({ title: n, subtitle: r, actions: i, media: a, align: o = "center", glass: s, className: c }, l) {
 	let u = o === "center";
-	return /* @__PURE__ */ E("section", {
+	return /* @__PURE__ */ A("section", {
 		ref: l,
 		className: e("w-full py-16", u ? "text-center" : "flex items-center gap-12", s && t(!0), c),
 		"data-component": "hero",
 		"data-variant": o,
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: e(u ? "mx-auto max-w-2xl" : "flex-1"),
 			children: [
-				/* @__PURE__ */ T("h1", {
+				/* @__PURE__ */ k("h1", {
 					className: "text-4xl font-bold text-fg",
 					children: n
 				}),
-				r !== void 0 && /* @__PURE__ */ T("p", {
+				r !== void 0 && /* @__PURE__ */ k("p", {
 					className: "mt-3 text-lg text-fg-muted",
 					children: r
 				}),
-				i !== void 0 && /* @__PURE__ */ T("div", {
+				i !== void 0 && /* @__PURE__ */ k("div", {
 					className: "mt-6",
 					children: i
 				}),
-				u && a !== void 0 && /* @__PURE__ */ T("div", {
+				u && a !== void 0 && /* @__PURE__ */ k("div", {
 					className: "mt-8",
 					children: a
 				})
 			]
-		}), !u && a !== void 0 && /* @__PURE__ */ T("div", {
+		}), !u && a !== void 0 && /* @__PURE__ */ k("div", {
 			className: "flex-1",
 			children: a
 		})]
 	});
-}), ue = v(function({ className: t, departments: n, onboarding: r, stats: i, ...a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), ye = x(function({ className: t, departments: n, onboarding: r, stats: i, ...a }, o) {
+	return /* @__PURE__ */ A("div", {
 		className: e("gds-ctx flex flex-col gds-gap", t),
 		"data-component": "hr-dashboard",
 		ref: o,
 		...a,
-		children: [i !== void 0 && /* @__PURE__ */ T("div", {
+		children: [i !== void 0 && /* @__PURE__ */ k("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 			children: i
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
-			children: [r !== void 0 && /* @__PURE__ */ T("div", {
+			children: [r !== void 0 && /* @__PURE__ */ k("div", {
 				className: "gds-radius-card border border-border bg-surface gds-pad",
 				children: r
-			}), n !== void 0 && /* @__PURE__ */ T("div", {
+			}), n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "gds-radius-card border border-border bg-surface gds-pad",
 				children: n
 			})]
 		})]
 	});
-}), de = v(function({ list: t, detail: n, listWidth: r = 360, className: i }, a) {
-	return /* @__PURE__ */ E("div", {
-		ref: a,
-		className: e("flex h-full overflow-hidden", i),
+}), be = x(function({ sidebar: n, list: r, detail: i, listWidth: a = 360, listMinWidth: o = 280, listMaxWidth: s = 500, resizable: c = !0, mobileView: l = "list", onMobileViewChange: u, emptyState: d, batchActions: f, glass: p, className: m, ...h }, g) {
+	let _ = v(), [y, b] = D(a), x = E(!1), C = E({
+		x: 0,
+		width: 0
+	}), T = S((e) => {
+		e.preventDefault(), x.current = !0, C.current = {
+			x: e.clientX,
+			width: y
+		}, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+	}, [y]);
+	w(() => {
+		let e = (e) => {
+			if (!x.current) return;
+			let t = e.clientX - C.current.x;
+			b(Math.max(o, Math.min(s, C.current.width + t)));
+		}, t = () => {
+			x.current && (x.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
+		};
+		return document.addEventListener("mousemove", e), document.addEventListener("mouseup", t), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", t), x.current && (x.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
+		};
+	}, [o, s]);
+	let O = S(() => {
+		b(a);
+	}, [a]), j = S(() => {
+		u !== void 0 && u("list");
+	}, [u]);
+	return _ ? /* @__PURE__ */ A("div", {
+		...h,
+		ref: g,
+		className: e("flex h-full flex-col overflow-hidden", m),
 		"data-component": "inbox-layout",
-		children: [/* @__PURE__ */ T("div", {
-			className: "shrink-0 overflow-y-auto border-r border-border",
-			style: { width: r },
-			children: t
-		}), /* @__PURE__ */ T("div", {
-			className: "min-w-0 flex-1 overflow-y-auto",
-			children: n
+		"data-state": l,
+		"data-mobile-view": l,
+		children: [l === "list" && /* @__PURE__ */ A("div", {
+			className: "flex-1 min-h-0 overflow-y-auto",
+			children: [r, f !== void 0 && /* @__PURE__ */ k("div", {
+				className: "sticky bottom-0 animate-slide-up",
+				children: f
+			})]
+		}), l === "detail" && /* @__PURE__ */ A("div", {
+			className: "flex-1 min-h-0 flex flex-col overflow-hidden",
+			children: [/* @__PURE__ */ A("button", {
+				type: "button",
+				className: "flex items-center gap-1.5 px-3 py-2 text-sm text-accent hover:bg-white/[0.04] border-b border-border",
+				onClick: j,
+				"aria-label": "Back to message list",
+				children: [/* @__PURE__ */ k("svg", {
+					width: "14",
+					height: "14",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					viewBox: "0 0 24 24",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ k("polyline", { points: "15 18 9 12 15 6" })
+				}), "Back"]
+			}), /* @__PURE__ */ k("div", {
+				className: "flex-1 min-h-0 overflow-y-auto",
+				children: i ?? d ?? null
+			})]
 		})]
+	}) : /* @__PURE__ */ A("div", {
+		...h,
+		ref: g,
+		className: e("flex h-full overflow-hidden", t(p), m),
+		"data-component": "inbox-layout",
+		"data-state": i === void 0 ? "list" : "detail",
+		children: [
+			n !== void 0 && /* @__PURE__ */ k("div", {
+				className: "shrink-0",
+				children: n
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "shrink-0 flex flex-col overflow-hidden border-r border-border",
+				style: { width: y },
+				children: [/* @__PURE__ */ k("div", {
+					className: "flex-1 min-h-0 overflow-y-auto",
+					children: r
+				}), f !== void 0 && /* @__PURE__ */ k("div", {
+					className: "shrink-0 border-t border-border animate-slide-up",
+					children: f
+				})]
+			}),
+			c && /* @__PURE__ */ k("div", {
+				className: "shrink-0 w-1 cursor-col-resize bg-transparent hover:bg-accent/20 active:bg-accent/30 transition-colors focus:bg-accent/20 focus:outline-none",
+				onMouseDown: T,
+				onDoubleClick: O,
+				onKeyDown: (e) => {
+					let t = e.shiftKey ? 50 : 10;
+					e.key === "ArrowLeft" ? (e.preventDefault(), b((e) => Math.max(o, e - t))) : e.key === "ArrowRight" ? (e.preventDefault(), b((e) => Math.min(s, e + t))) : e.key === "Home" ? (e.preventDefault(), b(o)) : e.key === "End" && (e.preventDefault(), b(s));
+				},
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": "Resize list pane",
+				"aria-valuenow": y,
+				"aria-valuemin": o,
+				"aria-valuemax": s,
+				tabIndex: 0
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "min-w-0 flex-1 overflow-y-auto",
+				children: i ?? d ?? null
+			})
+		]
 	});
-}), q = v(function({ title: n, value: r, change: i, changeLabel: a, icon: o, glass: s, className: c }, l) {
+}), G = x(function({ title: n, value: r, change: i, changeLabel: a, icon: o, glass: s, className: c }, l) {
 	let u = i !== void 0 && i >= 0;
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: l,
 		className: e("relative gds-radius-card border gds-pad-x-lg gds-pad-y-lg", s === !0 ? e(t(s), "border-white/10 bg-bg/60") : "border-border bg-surface", c),
 		"data-component": "metric-card",
 		children: [
-			o !== void 0 && /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ k("div", {
 				className: "absolute right-4 top-4 text-fg-muted/40",
 				children: o
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "gds-text-body text-fg-muted",
 				children: n
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "mt-1 text-2xl font-bold text-fg",
 				children: r
 			}),
-			i !== void 0 && /* @__PURE__ */ E("p", {
+			i !== void 0 && /* @__PURE__ */ A("p", {
 				className: e("mt-1 gds-text-body", u ? "text-success" : "text-danger"),
 				children: [
 					u ? "+" : "",
@@ -658,30 +856,30 @@ var ce = v(function({ children: t, columns: n = {
 			})
 		]
 	});
-}), fe = v(function({ title: n, metrics: r, chart: i, table: a, glass: o, className: s }, c) {
-	return /* @__PURE__ */ E("div", {
+}), xe = x(function({ title: n, metrics: r, chart: i, table: a, glass: o, className: s }, c) {
+	return /* @__PURE__ */ A("div", {
 		ref: c,
 		className: e("gds-ctx flex flex-col gds-gap", s),
 		"data-component": "kpi-dashboard",
 		children: [
-			n !== void 0 && /* @__PURE__ */ T("h2", {
+			n !== void 0 && /* @__PURE__ */ k("h2", {
 				className: "gds-heading font-semibold text-fg",
 				children: n
 			}),
-			r !== void 0 && r.length > 0 && /* @__PURE__ */ T("div", {
+			r !== void 0 && r.length > 0 && /* @__PURE__ */ k("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-				children: r.map((e) => /* @__PURE__ */ T(q, {
+				children: r.map((e) => /* @__PURE__ */ k(G, {
 					change: e.change,
 					glass: o,
 					title: e.title,
 					value: e.value
 				}, e.title))
 			}),
-			i !== void 0 && /* @__PURE__ */ T("div", {
+			i !== void 0 && /* @__PURE__ */ k("div", {
 				className: e("gds-radius-card border gds-pad", o === !0 ? e(t(o), "border-white/10 bg-bg/60") : "border-border bg-surface"),
 				children: i
 			}),
-			a !== void 0 && /* @__PURE__ */ T("div", {
+			a !== void 0 && /* @__PURE__ */ k("div", {
 				className: e("gds-radius-card border gds-pad", o === !0 ? e(t(o), "border-white/10 bg-bg/60") : "border-border bg-surface"),
 				children: a
 			})
@@ -690,61 +888,61 @@ var ce = v(function({ children: t, columns: n = {
 });
 //#endregion
 //#region src/l7-patterns/loading-states.tsx
-function pe({ message: n, glass: r, className: i }) {
-	return /* @__PURE__ */ E("div", {
+function Se({ message: n, glass: r, className: i }) {
+	return /* @__PURE__ */ A("div", {
 		className: e("flex min-h-[200px] flex-col items-center justify-center gap-3", t(r), i),
-		children: [/* @__PURE__ */ T(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ T("p", {
+		children: [/* @__PURE__ */ k(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ k("p", {
 			className: "gds-text-body text-fg-muted",
 			children: n
 		})]
 	});
 }
-function me({ message: t, className: n }) {
-	return /* @__PURE__ */ E("div", {
+function Ce({ message: t, className: n }) {
+	return /* @__PURE__ */ A("div", {
 		className: e("inline-flex items-center gap-2", n),
-		children: [/* @__PURE__ */ T(s, { size: "sm" }), t !== void 0 && /* @__PURE__ */ T("span", {
+		children: [/* @__PURE__ */ k(s, { size: "sm" }), t !== void 0 && /* @__PURE__ */ k("span", {
 			className: "gds-text-body text-fg-muted",
 			children: t
 		})]
 	});
 }
-function he({ message: e, className: t }) {
-	return /* @__PURE__ */ T("div", {
+function we({ message: e, className: t }) {
+	return /* @__PURE__ */ k("div", {
 		className: t,
-		children: /* @__PURE__ */ T(n, {
+		children: /* @__PURE__ */ k(n, {
 			loading: !0,
 			disabled: !0,
 			children: e ?? "Loading..."
 		})
 	});
 }
-function ge({ message: n, glass: r, className: i }) {
-	return /* @__PURE__ */ E("div", {
+function Te({ message: n, glass: r, className: i }) {
+	return /* @__PURE__ */ A("div", {
 		className: e("absolute inset-0 flex flex-col items-center justify-center gap-3", r === !0 ? t(r) : "bg-bg/80", i),
-		children: [/* @__PURE__ */ T(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ T("p", {
+		children: [/* @__PURE__ */ k(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ k("p", {
 			className: "gds-text-body text-fg-muted",
 			children: n
 		})]
 	});
 }
-var _e = {
-	page: pe,
-	inline: me,
-	button: he,
-	overlay: ge
-}, ve = v(function({ variant: e, message: t, glass: n, className: r }, i) {
-	return /* @__PURE__ */ T("div", {
+var Ee = {
+	page: Se,
+	inline: Ce,
+	button: we,
+	overlay: Te
+}, De = x(function({ variant: e, message: t, glass: n, className: r }, i) {
+	return /* @__PURE__ */ k("div", {
 		ref: i,
 		"data-component": "loading-states",
 		"data-variant": e,
-		children: _e[e]({
+		children: Ee[e]({
 			message: t,
 			glass: n,
 			className: r
 		})
 	});
-}), ye = v(function({ onSubmit: r, title: i = "Sign in", error: s, loading: c = !1, glass: l = !1, className: u, ...f }, p) {
-	let [m, h] = C(""), [g, _] = C(""), [v, y] = C(!1);
+}), Oe = x(function({ onSubmit: r, title: i = "Sign in", error: s, loading: c = !1, glass: l = !1, className: u, ...f }, p) {
+	let [m, h] = D(""), [g, _] = D(""), [v, y] = D(!1);
 	function b(e) {
 		e.preventDefault(), r({
 			email: m,
@@ -752,24 +950,24 @@ var _e = {
 			remember: v
 		});
 	}
-	return /* @__PURE__ */ E("form", {
+	return /* @__PURE__ */ A("form", {
 		ref: p,
 		className: e("flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border p-6", t(l), !l && "bg-bg", u),
 		"data-component": "login-form",
 		onSubmit: b,
 		...f,
 		children: [
-			/* @__PURE__ */ T("h2", {
+			/* @__PURE__ */ k("h2", {
 				className: "text-center font-semibold text-fg gds-heading",
 				children: i
 			}),
-			s !== void 0 && /* @__PURE__ */ T("div", {
+			s !== void 0 && /* @__PURE__ */ k("div", {
 				className: "rounded-md bg-danger/10 px-3 py-2 text-xs text-danger",
 				children: s
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ T(o, { children: "Email" }), /* @__PURE__ */ T(a, {
+				children: [/* @__PURE__ */ k(o, { children: "Email" }), /* @__PURE__ */ k(a, {
 					type: "email",
 					value: m,
 					onChange: (e) => h(e.target.value),
@@ -777,9 +975,9 @@ var _e = {
 					required: !0
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ T(o, { children: "Password" }), /* @__PURE__ */ T(a, {
+				children: [/* @__PURE__ */ k(o, { children: "Password" }), /* @__PURE__ */ k(a, {
 					type: "password",
 					value: g,
 					onChange: (e) => _(e.target.value),
@@ -787,12 +985,12 @@ var _e = {
 					required: !0
 				})]
 			}),
-			/* @__PURE__ */ T(d, {
+			/* @__PURE__ */ k(d, {
 				checked: v,
 				onChange: y,
 				label: "Remember me"
 			}),
-			/* @__PURE__ */ T(n, {
+			/* @__PURE__ */ k(n, {
 				type: "submit",
 				disabled: c,
 				className: "w-full",
@@ -800,42 +998,42 @@ var _e = {
 			})
 		]
 	});
-}), be = v(function({ onSend: t, defaultTo: n, className: r }, i) {
-	let a = S(null), o = S(null), s = S(null), c = y((e) => {
+}), ke = x(function({ onSend: t, defaultTo: n, className: r }, i) {
+	let a = E(null), o = E(null), s = E(null), c = S((e) => {
 		e.preventDefault(), t({
 			to: a.current?.value ?? "",
 			subject: o.current?.value ?? "",
 			body: s.current?.value ?? ""
 		});
 	}, [t]), l = "w-full rounded-md border border-border bg-transparent px-3 py-2 gds-text-body text-fg placeholder:text-fg-muted/40 focus:border-accent focus:outline-none";
-	return /* @__PURE__ */ E("form", {
+	return /* @__PURE__ */ A("form", {
 		ref: i,
 		className: e("flex flex-col gap-3", r),
 		"data-component": "mail-composer",
 		onSubmit: c,
 		children: [
-			/* @__PURE__ */ T("input", {
+			/* @__PURE__ */ k("input", {
 				ref: a,
 				type: "email",
 				placeholder: "To",
 				defaultValue: n ?? "",
 				className: l
 			}),
-			/* @__PURE__ */ T("input", {
+			/* @__PURE__ */ k("input", {
 				ref: o,
 				type: "text",
 				placeholder: "Subject",
 				className: l
 			}),
-			/* @__PURE__ */ T("textarea", {
+			/* @__PURE__ */ k("textarea", {
 				ref: s,
 				placeholder: "Body",
 				rows: 6,
 				className: e(l, "resize-none")
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ T("button", {
+				children: /* @__PURE__ */ k("button", {
 					type: "submit",
 					className: "rounded-md bg-accent px-4 py-2 gds-text-body font-medium text-accent-fg hover:bg-accent/90 transition-colors",
 					children: "Send"
@@ -843,7 +1041,7 @@ var _e = {
 			})
 		]
 	});
-}), xe = v(function({ children: t, columns: n = 3, gap: r = 16, className: i }, a) {
+}), Ae = x(function({ children: t, columns: n = 3, gap: r = 16, className: i }, a) {
 	let o = {
 		columnCount: n,
 		columnGap: `${r}px`
@@ -851,119 +1049,119 @@ var _e = {
 		breakInside: "avoid",
 		marginBottom: `${r}px`
 	};
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ k("div", {
 		ref: a,
 		className: e(i),
 		style: o,
 		"data-component": "masonry",
-		children: _.map(t, (e) => e == null ? null : /* @__PURE__ */ T("div", {
+		children: y.map(t, (e) => e == null ? null : /* @__PURE__ */ k("div", {
 			style: s,
 			children: e
 		}))
 	});
-}), Se = {
+}), je = {
 	default: "gds-gap",
 	lg: "gds-gap-lg",
 	sm: "gds-gap-sm"
 };
-function Ce(e) {
+function Me(e) {
 	if (typeof e == "number") return `grid-cols-${e}`;
 	let t = ["grid-cols-1"];
 	return e.sm !== void 0 && t.push(`sm:grid-cols-${e.sm}`), e.md !== void 0 && t.push(`md:grid-cols-${e.md}`), e.lg !== void 0 && t.push(`lg:grid-cols-${e.lg}`), t.join(" ");
 }
-var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a = {
+var Ne = x(function({ aspectRatio: t = 1, children: n, className: i, columns: a = {
 	sm: 2,
 	md: 3,
 	lg: 4
 }, gap: o = "default" }, s) {
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ k("div", {
 		ref: s,
-		className: e("grid", Ce(a), Se[o], i),
+		className: e("grid", Me(a), je[o], i),
 		"data-component": "media-grid",
-		children: _.map(n, (e) => /* @__PURE__ */ T(r, {
+		children: y.map(n, (e) => /* @__PURE__ */ k(r, {
 			ratio: t,
 			className: "overflow-hidden rounded-lg",
 			children: e
 		}))
 	});
-}), Te = v(function({ title: n, children: r, glass: i, className: a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), Pe = x(function({ title: n, children: r, glass: i, className: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("gds-ctx gds-radius-card border", i === !0 ? e(t(i), "border-white/10 bg-bg/60") : "border-border bg-surface", "gds-pad-x-lg gds-pad-y-lg", a),
 		"data-component": "mini-dashboard",
-		children: [n !== void 0 && /* @__PURE__ */ T("h2", {
+		children: [n !== void 0 && /* @__PURE__ */ k("h2", {
 			className: "mb-3 gds-text-body font-semibold text-fg",
 			children: n
 		}), r]
 	});
-}), Ee = v(function({ children: t, columns: n, className: r }, i) {
-	return /* @__PURE__ */ T("div", {
+}), Fe = x(function({ children: t, columns: n, className: r }, i) {
+	return /* @__PURE__ */ k("div", {
 		ref: i,
 		className: e("grid gds-gap", n === void 0 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" : `grid-cols-${n}`, r),
 		"data-component": "monitor-grid",
 		children: t
 	});
-}), De = v(function({ logo: n, links: r, actions: i, sticky: a = !0, glass: o = !0, className: s }, c) {
-	return /* @__PURE__ */ E("nav", {
+}), Ie = x(function({ logo: n, links: r, actions: i, sticky: a = !0, glass: o = !0, className: s }, c) {
+	return /* @__PURE__ */ A("nav", {
 		ref: c,
 		className: e("flex w-full items-center justify-between px-6 py-3", a && "sticky top-0 z-40", o && t(!0), s),
 		"data-component": "nav-bar",
 		children: [
-			n !== void 0 && /* @__PURE__ */ T("div", {
+			n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "flex-shrink-0",
 				children: n
 			}),
-			r !== void 0 && r.length > 0 && /* @__PURE__ */ T("div", {
+			r !== void 0 && r.length > 0 && /* @__PURE__ */ k("div", {
 				className: "flex items-center gap-6",
-				children: r.map((t) => /* @__PURE__ */ T("a", {
+				children: r.map((t) => /* @__PURE__ */ k("a", {
 					href: t.href,
 					className: e("text-sm transition-colors", t.active ? "text-accent font-medium" : "text-fg-muted hover:text-fg"),
 					children: t.label
 				}, t.href))
 			}),
-			i !== void 0 && /* @__PURE__ */ T("div", {
+			i !== void 0 && /* @__PURE__ */ k("div", {
 				className: "flex items-center gap-3",
 				children: i
 			})
 		]
 	});
-}), Oe = v(function({ className: t, notifications: n, onRead: r, onReadAll: i, ...a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), Le = x(function({ className: t, notifications: n, onRead: r, onReadAll: i, ...a }, o) {
+	return /* @__PURE__ */ A("div", {
 		className: e("gds-ctx gds-radius-card border border-border bg-surface", t),
 		"data-component": "notification-list",
 		ref: o,
 		...a,
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: "flex items-center justify-between border-b border-border px-4 py-2.5",
-			children: [/* @__PURE__ */ T("span", {
+			children: [/* @__PURE__ */ k("span", {
 				className: "text-sm font-semibold text-fg",
 				children: "Notifications"
-			}), i !== void 0 && /* @__PURE__ */ T("button", {
+			}), i !== void 0 && /* @__PURE__ */ k("button", {
 				className: "text-xs text-accent hover:underline",
 				onClick: i,
 				type: "button",
 				children: "Mark all read"
 			})]
-		}), n.length === 0 ? /* @__PURE__ */ T("div", {
+		}), n.length === 0 ? /* @__PURE__ */ k("div", {
 			className: "px-4 py-6 text-center text-xs text-fg-muted",
 			children: "No notifications"
-		}) : /* @__PURE__ */ T("div", {
+		}) : /* @__PURE__ */ k("div", {
 			className: "divide-y divide-border",
-			children: n.map((t) => /* @__PURE__ */ T("div", {
+			children: n.map((t) => /* @__PURE__ */ k("div", {
 				className: e("flex gap-3 px-4 py-2.5", t.read !== !0 && "border-l-2 border-l-accent", r !== void 0 && "cursor-pointer hover:bg-bg-tertiary"),
 				onClick: r === void 0 ? void 0 : () => r(t.id),
-				children: /* @__PURE__ */ E("div", {
+				children: /* @__PURE__ */ A("div", {
 					className: "min-w-0 flex-1",
 					children: [
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ k("div", {
 							className: "text-xs font-medium text-fg",
 							children: t.title
 						}),
-						t.message !== void 0 && /* @__PURE__ */ T("div", {
+						t.message !== void 0 && /* @__PURE__ */ k("div", {
 							className: "mt-0.5 text-xs text-fg-muted",
 							children: t.message
 						}),
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ k("div", {
 							className: "mt-1 text-[10px] text-fg-muted",
 							children: t.timestamp
 						})
@@ -972,20 +1170,20 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 			}, t.id))
 		})]
 	});
-}), ke = v(function({ className: t, steps: n, title: r = "Getting Started", ...i }, a) {
+}), Re = x(function({ className: t, steps: n, title: r = "Getting Started", ...i }, a) {
 	let o = n.filter((e) => e.completed).length, s = n.length > 0 ? Math.round(o / n.length * 100) : 0;
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		className: e("gds-ctx rounded-lg border border-border bg-surface gds-pad", t),
 		"data-component": "onboarding-card",
 		ref: a,
 		...i,
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "mb-3 flex items-center justify-between",
-				children: [/* @__PURE__ */ T("h3", {
+				children: [/* @__PURE__ */ k("h3", {
 					className: "gds-heading font-semibold text-fg",
 					children: r
-				}), /* @__PURE__ */ E("span", {
+				}), /* @__PURE__ */ A("span", {
 					className: "gds-text-label text-fg-muted",
 					children: [
 						o,
@@ -994,23 +1192,23 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 					]
 				})]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "mb-4 h-1.5 w-full overflow-hidden rounded-full bg-border",
-				children: /* @__PURE__ */ T("div", {
+				children: /* @__PURE__ */ k("div", {
 					className: "h-full rounded-full bg-accent transition-all",
 					style: { width: `${s}%` }
 				})
 			}),
-			/* @__PURE__ */ T("ul", {
+			/* @__PURE__ */ k("ul", {
 				className: "flex flex-col gds-gap",
-				children: n.map((t, n) => /* @__PURE__ */ E("li", {
+				children: n.map((t, n) => /* @__PURE__ */ A("li", {
 					className: "flex items-center justify-between gds-gap",
-					children: [/* @__PURE__ */ E("div", {
+					children: [/* @__PURE__ */ A("div", {
 						className: "flex items-center gds-gap-sm",
-						children: [/* @__PURE__ */ T("span", {
+						children: [/* @__PURE__ */ k("span", {
 							className: e("flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs", t.completed ? "bg-success text-white" : "border border-border text-fg-muted"),
 							children: t.completed ? "✓" : n + 1
-						}), /* @__PURE__ */ T("span", {
+						}), /* @__PURE__ */ k("span", {
 							className: e("text-sm", t.completed ? "text-fg-muted line-through" : "text-fg"),
 							children: t.label
 						})]
@@ -1019,7 +1217,7 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 			})
 		]
 	});
-}), Ae = /* @__PURE__ */ T("svg", {
+}), ze = /* @__PURE__ */ k("svg", {
 	width: "12",
 	height: "12",
 	viewBox: "0 0 12 12",
@@ -1027,96 +1225,115 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 	stroke: "currentColor",
 	strokeWidth: "1.5",
 	strokeLinecap: "round",
-	children: /* @__PURE__ */ T("path", { d: "M4.5 3l3 3-3 3" })
-}), je = v(function({ actions: t, breadcrumb: n, className: r, subtitle: i, title: a }, o) {
-	return /* @__PURE__ */ E("div", {
+	children: /* @__PURE__ */ k("path", { d: "M4.5 3l3 3-3 3" })
+}), Be = x(function({ actions: t, breadcrumb: n, className: r, subtitle: i, title: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		ref: o,
 		className: e("flex flex-col gds-gap-sm", r),
 		"data-component": "page-header",
-		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ T("nav", {
+		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ k("nav", {
 			"aria-label": "Breadcrumb",
-			children: /* @__PURE__ */ T("ol", {
+			children: /* @__PURE__ */ k("ol", {
 				className: "flex items-center gds-gap-sm text-[11px] text-fg-muted",
-				children: n.map((e, t) => /* @__PURE__ */ E("li", {
+				children: n.map((e, t) => /* @__PURE__ */ A("li", {
 					className: "flex items-center gds-gap-sm",
-					children: [t > 0 && /* @__PURE__ */ T("span", {
+					children: [t > 0 && /* @__PURE__ */ k("span", {
 						className: "text-fg-muted/50",
 						"aria-hidden": "true",
-						children: Ae
-					}), e.href === void 0 ? /* @__PURE__ */ T("span", { children: e.label }) : /* @__PURE__ */ T("a", {
+						children: ze
+					}), e.href === void 0 ? /* @__PURE__ */ k("span", { children: e.label }) : /* @__PURE__ */ k("a", {
 						href: e.href,
 						className: "transition-colors hover:text-fg",
 						children: e.label
 					})]
 				}, t))
 			})
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "flex items-center justify-between gds-gap",
-			children: [/* @__PURE__ */ E("div", {
+			children: [/* @__PURE__ */ A("div", {
 				className: "min-w-0",
-				children: [/* @__PURE__ */ T("h1", {
+				children: [/* @__PURE__ */ k("h1", {
 					className: "gds-heading font-semibold text-fg",
 					children: a
-				}), i !== void 0 && /* @__PURE__ */ T("p", {
+				}), i !== void 0 && /* @__PURE__ */ k("p", {
 					className: "mt-0.5 gds-text-body text-fg-muted",
 					children: i
 				})]
-			}), t !== void 0 && /* @__PURE__ */ T("div", {
+			}), t !== void 0 && /* @__PURE__ */ k("div", {
 				className: "flex shrink-0 items-center gds-gap-sm",
 				children: t
 			})]
 		})]
 	});
-}), Me = v(function({ chart: t, className: n, metrics: r, transactions: i, ...a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), Ve = x(function({ children: t, width: n, minWidth: r, maxWidth: i, center: a, scrollable: o = !0, className: s, ...c }, l) {
+	let u = v(), d = {};
+	return n !== void 0 && !u && (d.width = n, d.flexShrink = 0), r !== void 0 && !u && (d.minWidth = r), i !== void 0 && !u && (d.maxWidth = i), /* @__PURE__ */ k("div", {
+		...c,
+		ref: l,
+		className: e(n === void 0 && "flex-1", u && "w-full", o && "min-h-0 overflow-y-auto", a === !0 && "flex justify-center", s),
+		"data-component": "panel",
+		style: Object.keys(d).length > 0 ? d : void 0,
+		children: t
+	});
+}), He = x(function({ children: t, direction: n = "horizontal", className: r, ...i }, a) {
+	let o = v(), s = n === "vertical" || o;
+	return /* @__PURE__ */ k("div", {
+		...i,
+		ref: a,
+		className: e("flex min-h-0 flex-1", s ? "flex-col" : "flex-row", r),
+		"data-component": "panel-group",
+		children: t
+	});
+}), Ue = x(function({ chart: t, className: n, metrics: r, transactions: i, ...a }, o) {
+	return /* @__PURE__ */ A("div", {
 		className: e("gds-ctx flex flex-col gds-gap", n),
 		"data-component": "payroll-dashboard",
 		ref: o,
 		...a,
-		children: [r !== void 0 && /* @__PURE__ */ T("div", {
+		children: [r !== void 0 && /* @__PURE__ */ k("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 			children: r
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ A("div", {
 			className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
-			children: [t !== void 0 && /* @__PURE__ */ T("div", {
+			children: [t !== void 0 && /* @__PURE__ */ k("div", {
 				className: "gds-radius-card border border-border bg-surface gds-pad",
 				children: t
-			}), i !== void 0 && /* @__PURE__ */ T("div", {
+			}), i !== void 0 && /* @__PURE__ */ k("div", {
 				className: "gds-radius-card border border-border bg-surface gds-pad",
 				children: i
 			})]
 		})]
 	});
-}), Ne = v(function({ name: n, price: r, period: i = "/month", features: a, action: o, highlighted: s, glass: c, className: l }, u) {
-	return /* @__PURE__ */ E("div", {
+}), We = x(function({ name: n, price: r, period: i = "/month", features: a, action: o, highlighted: s, glass: c, className: l }, u) {
+	return /* @__PURE__ */ A("div", {
 		ref: u,
 		className: e("gds-ctx gds-radius-card border gds-pad-x-lg gds-pad-y-lg flex flex-col", s === !0 && "border-accent ring-1 ring-accent", s !== !0 && (c === !0 ? e(t(c), "border-white/10 bg-bg/60") : "border-border bg-surface"), c === !0 && s === !0 && e(t(c), "bg-bg/60"), l),
 		"data-component": "pricing-card",
 		"data-highlighted": s === !0 ? "true" : void 0,
 		children: [
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "font-semibold text-fg",
 				children: n
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "mt-2 flex items-baseline gap-1",
-				children: [/* @__PURE__ */ T("span", {
+				children: [/* @__PURE__ */ k("span", {
 					className: "text-3xl font-bold text-fg",
 					children: r
-				}), /* @__PURE__ */ T("span", {
+				}), /* @__PURE__ */ k("span", {
 					className: "gds-text-body text-fg-muted",
 					children: i
 				})]
 			}),
-			a.length > 0 && /* @__PURE__ */ T("ul", {
+			a.length > 0 && /* @__PURE__ */ k("ul", {
 				className: "mt-4 flex flex-col gap-2",
-				children: a.map((e) => /* @__PURE__ */ E("li", {
+				children: a.map((e) => /* @__PURE__ */ A("li", {
 					className: "flex items-center gap-2 gds-text-body text-fg-muted",
-					children: [/* @__PURE__ */ T("svg", {
+					children: [/* @__PURE__ */ k("svg", {
 						className: "h-4 w-4 shrink-0 text-success",
 						viewBox: "0 0 16 16",
 						fill: "none",
-						children: /* @__PURE__ */ T("path", {
+						children: /* @__PURE__ */ k("path", {
 							d: "M3 8l3 3 7-7",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -1126,90 +1343,90 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 					}), e]
 				}, e))
 			}),
-			o !== void 0 && /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-auto pt-4",
 				children: o
 			})
 		]
 	});
-}), Pe = v(function({ actions: n, avatar: r, className: i, glass: a, name: o, role: s, stats: c }, l) {
-	return /* @__PURE__ */ E("div", {
+}), Ge = x(function({ actions: n, avatar: r, className: i, glass: a, name: o, role: s, stats: c }, l) {
+	return /* @__PURE__ */ A("div", {
 		ref: l,
 		className: e("gds-ctx flex flex-col items-center gds-pad gds-radius-card border", a === !0 ? e(t(a), "border-white/10 bg-bg/60") : "border-border bg-surface", i),
 		"data-component": "profile-card",
 		children: [
-			/* @__PURE__ */ T(u, {
+			/* @__PURE__ */ k(u, {
 				name: o,
 				src: r,
 				size: "lg"
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "mt-3 text-sm font-semibold text-fg",
 				children: o
 			}),
-			s !== void 0 && /* @__PURE__ */ T("p", {
+			s !== void 0 && /* @__PURE__ */ k("p", {
 				className: "mt-0.5 text-xs text-fg-muted",
 				children: s
 			}),
-			c !== void 0 && c.length > 0 && /* @__PURE__ */ T("div", {
+			c !== void 0 && c.length > 0 && /* @__PURE__ */ k("div", {
 				className: "mt-3 flex w-full justify-center gds-gap",
-				children: c.map((e) => /* @__PURE__ */ E("div", {
+				children: c.map((e) => /* @__PURE__ */ A("div", {
 					className: "flex flex-col items-center",
-					children: [/* @__PURE__ */ T("span", {
+					children: [/* @__PURE__ */ k("span", {
 						className: "text-sm font-bold text-fg",
 						children: e.value
-					}), /* @__PURE__ */ T("span", {
+					}), /* @__PURE__ */ k("span", {
 						className: "text-[10px] text-fg-muted",
 						children: e.label
 					})]
 				}, e.label))
 			}),
-			n !== void 0 && /* @__PURE__ */ T("div", {
+			n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-3 flex w-full justify-center gds-gap",
 				children: n
 			})
 		]
 	});
-}), Fe = v(function({ activity: t, className: n, progress: r, tasks: i, team: a }, o) {
-	return /* @__PURE__ */ E("div", {
+}), Ke = x(function({ activity: t, className: n, progress: r, tasks: i, team: a }, o) {
+	return /* @__PURE__ */ A("div", {
 		className: e("grid grid-cols-2 gds-gap", n),
 		"data-component": "project-dashboard",
 		ref: o,
 		children: [
-			r !== void 0 && /* @__PURE__ */ T("section", {
+			r !== void 0 && /* @__PURE__ */ k("section", {
 				"data-slot": "progress",
 				children: r
 			}),
-			a !== void 0 && /* @__PURE__ */ T("section", {
+			a !== void 0 && /* @__PURE__ */ k("section", {
 				"data-slot": "team",
 				children: a
 			}),
-			t !== void 0 && /* @__PURE__ */ T("section", {
+			t !== void 0 && /* @__PURE__ */ k("section", {
 				"data-slot": "activity",
 				children: t
 			}),
-			i !== void 0 && /* @__PURE__ */ T("section", {
+			i !== void 0 && /* @__PURE__ */ k("section", {
 				"data-slot": "tasks",
 				children: i
 			})
 		]
 	});
-}), Ie = v(function({ mobile: t, tablet: n, desktop: r, className: i }, a) {
+}), qe = x(function({ mobile: t, tablet: n, desktop: r, className: i }, a) {
 	let o = n ?? t;
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: a,
 		className: e(i),
 		"data-component": "responsive-container",
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "block sm:hidden",
 				children: t
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "hidden sm:block lg:hidden",
 				children: o
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "hidden lg:block",
 				children: r
 			})
@@ -1218,68 +1435,68 @@ var we = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a
 });
 //#endregion
 //#region src/l7-patterns/server-overview.tsx
-function Le(e) {
+function Je(e) {
 	return e >= 90 ? "danger" : e >= 70 ? "warning" : "success";
 }
-var Re = "flex items-center gap-2", ze = "w-8 text-[10px] text-fg-muted", Be = "w-8 text-right text-[10px] font-mono text-fg-muted";
-function J({ label: e, value: t }) {
-	return /* @__PURE__ */ E("div", {
-		className: Re,
+var Ye = "flex items-center gap-2", Xe = "w-8 text-[10px] text-fg-muted", Ze = "w-8 text-right text-[10px] font-mono text-fg-muted";
+function K({ label: e, value: t }) {
+	return /* @__PURE__ */ A("div", {
+		className: Ye,
 		children: [
-			/* @__PURE__ */ T("span", {
-				className: ze,
+			/* @__PURE__ */ k("span", {
+				className: Xe,
 				children: e
 			}),
-			/* @__PURE__ */ T(c, {
+			/* @__PURE__ */ k(c, {
 				value: t,
-				variant: Le(t),
+				variant: Je(t),
 				size: "sm"
 			}),
-			/* @__PURE__ */ E("span", {
-				className: Be,
+			/* @__PURE__ */ A("span", {
+				className: Ze,
 				children: [t, "%"]
 			})
 		]
 	});
 }
-var Ve = v(function({ className: t, servers: n, ...r }, i) {
-	return /* @__PURE__ */ T("div", {
+var Qe = x(function({ className: t, servers: n, ...r }, i) {
+	return /* @__PURE__ */ k("div", {
 		className: e("grid gap-3 sm:grid-cols-2 lg:grid-cols-3", t),
 		"data-component": "server-overview",
 		ref: i,
 		...r,
-		children: n.map((t) => /* @__PURE__ */ E("div", {
+		children: n.map((t) => /* @__PURE__ */ A("div", {
 			className: "rounded-lg border border-border bg-surface p-3 gds-ctx",
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ A("div", {
 					className: "flex items-center justify-between mb-2",
-					children: [/* @__PURE__ */ T("span", {
+					children: [/* @__PURE__ */ k("span", {
 						className: "gds-text-label font-medium text-fg",
 						children: t.name
-					}), /* @__PURE__ */ E("span", {
+					}), /* @__PURE__ */ A("span", {
 						className: "inline-flex items-center gap-1.5",
-						children: [/* @__PURE__ */ T("span", { className: e("h-2 w-2 rounded-full", t.status === "online" ? "bg-success" : "bg-danger") }), /* @__PURE__ */ T("span", {
+						children: [/* @__PURE__ */ k("span", { className: e("h-2 w-2 rounded-full", t.status === "online" ? "bg-success" : "bg-danger") }), /* @__PURE__ */ k("span", {
 							className: "text-xs text-fg-muted",
 							children: t.status
 						})]
 					})]
 				}),
-				/* @__PURE__ */ T("div", {
+				/* @__PURE__ */ k("div", {
 					className: "text-xs text-fg-muted mb-2",
 					children: t.location
 				}),
-				t.metrics !== void 0 && /* @__PURE__ */ E("div", {
+				t.metrics !== void 0 && /* @__PURE__ */ A("div", {
 					className: "flex flex-col gap-1.5",
 					children: [
-						/* @__PURE__ */ T(J, {
+						/* @__PURE__ */ k(K, {
 							label: "CPU",
 							value: t.metrics.cpu
 						}),
-						/* @__PURE__ */ T(J, {
+						/* @__PURE__ */ k(K, {
 							label: "MEM",
 							value: t.metrics.mem
 						}),
-						/* @__PURE__ */ T(J, {
+						/* @__PURE__ */ k(K, {
 							label: "DISK",
 							value: t.metrics.disk
 						})
@@ -1291,154 +1508,240 @@ var Ve = v(function({ className: t, servers: n, ...r }, i) {
 });
 //#endregion
 //#region src/l7-patterns/settings-layout.tsx
-function He({ className: t, defaultSection: n, sections: r }) {
-	let [i, a] = C(n ?? r[0]?.id ?? ""), o = r.find((e) => e.id === i);
-	return /* @__PURE__ */ E("div", {
-		className: e("flex gap-6", t),
+function $e({ activeSection: t, animated: n = !0, className: r, defaultSection: i, navWidth: a = 192, onSectionChange: o, sections: s, stickyNav: c = !0 }) {
+	let l = t !== void 0 && o !== void 0, [u, d] = D(i ?? s[0]?.id ?? ""), f = l ? t : u, p = s.find((e) => e.id === f), m = E(/* @__PURE__ */ new Map()), h = E(0), g = S((e) => {
+		l ? o(e) : d(e), o !== void 0 && !l && o(e), h.current += 1;
+	}, [l, o]), _ = S((e) => {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		e.preventDefault();
+		let t = s.findIndex((e) => e.id === f);
+		if (t < 0) return;
+		let n = t;
+		e.key === "ArrowDown" && (n = t < s.length - 1 ? t + 1 : 0), e.key === "ArrowUp" && (n = t > 0 ? t - 1 : s.length - 1);
+		let r = s[n];
+		if (r === void 0) return;
+		g(r.id);
+		let i = m.current.get(r.id);
+		i !== void 0 && i.focus();
+	}, [
+		f,
+		g,
+		s
+	]), v = S((e, t) => {
+		t === null ? m.current.delete(e) : m.current.set(e, t);
+	}, []);
+	return /* @__PURE__ */ A("div", {
+		className: e("flex gap-6", r),
 		"data-component": "settings-layout",
-		children: [/* @__PURE__ */ T("nav", {
-			className: "w-48 shrink-0",
-			children: /* @__PURE__ */ T("ul", {
+		children: [/* @__PURE__ */ k("nav", {
+			className: "shrink-0",
+			style: {
+				width: a,
+				...c ? {
+					position: "sticky",
+					top: 0,
+					alignSelf: "flex-start"
+				} : {}
+			},
+			children: /* @__PURE__ */ k("ul", {
 				className: "flex flex-col gap-0.5",
 				role: "list",
-				children: r.map((t) => /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("button", {
+				onKeyDown: _,
+				children: s.map((t) => /* @__PURE__ */ k("li", { children: /* @__PURE__ */ k("button", {
+					ref: (e) => v(t.id, e),
 					type: "button",
-					className: e("w-full rounded-md px-3 py-2 text-left gds-text-body transition-colors", t.id === i ? "bg-accent/10 font-medium text-accent" : "text-fg-muted hover:bg-bg-tertiary hover:text-fg"),
-					onClick: () => a(t.id),
+					className: e("w-full rounded-md px-3 py-2 text-left gds-text-body transition-colors", t.id === f ? "bg-accent/10 font-medium text-accent" : "text-fg-muted hover:bg-bg-tertiary hover:text-fg"),
+					onClick: () => g(t.id),
 					children: t.label
 				}) }, t.id))
 			})
-		}), /* @__PURE__ */ T("div", {
-			className: "min-w-0 flex-1",
-			children: o === void 0 ? null : o.content
-		})]
+		}), /* @__PURE__ */ k("div", {
+			className: e("min-w-0 flex-1", n && "animate-fade-in"),
+			children: p === void 0 ? null : p.content
+		}, n ? `${f}-${h.current}` : void 0)]
 	});
 }
 //#endregion
 //#region src/l7-patterns/sidebar.tsx
-var Ue = v(function({ children: n, collapsed: r = !1, onCollapse: i, width: a = 240, collapsedWidth: o = 56, position: s = "left", glass: c, className: l }, u) {
-	let d = r ? o : a;
-	return /* @__PURE__ */ E("div", {
-		ref: u,
-		className: e("flex flex-col overflow-hidden transition-[width] duration-200", s === "left" ? "border-r" : "border-l", c === !0 ? e(t(c), "border-white/10 bg-bg/60") : "border-border bg-surface", l),
-		"data-collapsed": r,
-		"data-component": "sidebar",
-		style: { width: d },
-		children: [/* @__PURE__ */ T("div", {
-			className: "flex-1 overflow-hidden",
+var q = b({ collapsed: !1 });
+function J({ icon: t, label: n, badge: r, active: i, onClick: a, href: o, className: s }) {
+	let { collapsed: c } = C(q), [l, u] = D(!1), d = /* @__PURE__ */ A(O, { children: [
+		/* @__PURE__ */ k("span", {
+			className: "flex h-5 w-5 shrink-0 items-center justify-center",
+			children: t
+		}),
+		!c && /* @__PURE__ */ k("span", {
+			className: "flex-1 truncate gds-text-body",
 			children: n
-		}), i !== void 0 && /* @__PURE__ */ T("button", {
-			className: "flex h-10 items-center justify-center border-t border-border/50 text-fg-muted hover:text-fg transition-colors",
-			type: "button",
-			onClick: () => i(!r),
-			children: /* @__PURE__ */ T("svg", {
-				className: e("transition-transform duration-200", r && "rotate-180", s === "right" && "rotate-180", r && s === "right" && "rotate-0"),
-				fill: "none",
-				height: "14",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				viewBox: "0 0 24 24",
-				width: "14",
-				children: /* @__PURE__ */ T("polyline", { points: "15 18 9 12 15 6" })
-			})
+		}),
+		!c && r !== void 0 && /* @__PURE__ */ k("span", {
+			className: "shrink-0 rounded-full bg-accent/15 px-1.5 py-px gds-text-caption font-medium text-accent",
+			children: r
+		}),
+		c && r !== void 0 && /* @__PURE__ */ k("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-danger" })
+	] }), f = e("relative flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors select-none", i === !0 ? "bg-accent/15 text-accent font-medium" : "text-fg-muted hover:bg-white/[0.04] hover:text-fg", c && "justify-center px-0", s), p = c && l ? /* @__PURE__ */ A("div", {
+		className: "absolute left-full top-1/2 -translate-y-1/2 ml-2 z-50 whitespace-nowrap rounded-md bg-bg-secondary border border-border px-2.5 py-1 gds-text-label text-fg shadow-lg pointer-events-none",
+		children: [n, r !== void 0 && /* @__PURE__ */ k("span", {
+			className: "ml-1.5 text-accent font-medium",
+			children: r
 		})]
+	}) : null, m = c ? {
+		onMouseEnter: () => u(!0),
+		onMouseLeave: () => u(!1)
+	} : {};
+	return o === void 0 ? /* @__PURE__ */ A("div", {
+		className: "relative",
+		...m,
+		children: [/* @__PURE__ */ k("button", {
+			type: "button",
+			onClick: a,
+			className: e(f, "w-full"),
+			"data-component": "sidebar-item",
+			"data-state": i === !0 ? "active" : void 0,
+			children: d
+		}), p]
+	}) : /* @__PURE__ */ A("div", {
+		className: "relative",
+		...m,
+		children: [/* @__PURE__ */ k("a", {
+			href: o,
+			className: f,
+			"data-component": "sidebar-item",
+			"data-state": i === !0 ? "active" : void 0,
+			children: d
+		}), p]
+	});
+}
+var et = x(function({ children: n, collapsed: r = !1, onCollapse: i, width: a = 240, collapsedWidth: o = 56, position: s = "left", glass: c, className: l, items: u }, d) {
+	let f = r ? o : a;
+	return /* @__PURE__ */ k(q, {
+		value: { collapsed: r },
+		children: /* @__PURE__ */ A("div", {
+			ref: d,
+			className: e("flex flex-col overflow-hidden transition-[width] duration-200", s === "left" ? "border-r" : "border-l", c === !0 ? e(t(c), "border-white/10 bg-bg/60") : "border-border bg-surface", l),
+			"data-collapsed": r,
+			"data-component": "sidebar",
+			style: { width: f },
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex-1 overflow-y-auto overflow-x-hidden",
+				children: [u !== void 0 && /* @__PURE__ */ k("nav", {
+					className: "flex flex-col gap-0.5 p-2",
+					children: u.map((e) => /* @__PURE__ */ k(J, { ...e }, e.label))
+				}), n]
+			}), i !== void 0 && /* @__PURE__ */ k("button", {
+				className: "flex h-10 items-center justify-center border-t border-border/50 text-fg-muted hover:text-fg transition-colors",
+				type: "button",
+				onClick: () => i(!r),
+				"aria-label": r ? "Expand sidebar" : "Collapse sidebar",
+				children: /* @__PURE__ */ k("svg", {
+					className: e("transition-transform duration-200", r && "rotate-180", s === "right" && "rotate-180", r && s === "right" && "rotate-0"),
+					fill: "none",
+					height: "14",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					viewBox: "0 0 24 24",
+					width: "14",
+					children: /* @__PURE__ */ k("polyline", { points: "15 18 9 12 15 6" })
+				})
+			})]
+		})
 	});
 });
 //#endregion
 //#region src/l7-patterns/skeleton-pattern.tsx
-function We() {
-	return /* @__PURE__ */ E("div", {
+function tt() {
+	return /* @__PURE__ */ A("div", {
 		className: "flex flex-col gds-gap gds-ctx gds-pad gds-radius-card",
 		children: [
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "rect",
 				height: 120
 			}),
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "text",
 				width: "60%"
 			}),
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "text",
 				lines: 2
 			})
 		]
 	});
 }
-function Ge() {
-	return /* @__PURE__ */ E("div", {
+function nt() {
+	return /* @__PURE__ */ A("div", {
 		className: "flex items-center gap-3",
-		children: [/* @__PURE__ */ T(l, { variant: "circle" }), /* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ k(l, { variant: "circle" }), /* @__PURE__ */ A("div", {
 			className: "flex flex-1 flex-col gap-2",
-			children: [/* @__PURE__ */ T(l, {
+			children: [/* @__PURE__ */ k(l, {
 				variant: "text",
 				width: "40%"
-			}), /* @__PURE__ */ T(l, {
+			}), /* @__PURE__ */ k(l, {
 				variant: "text",
 				width: "80%"
 			})]
 		})]
 	});
 }
-function Ke() {
-	return /* @__PURE__ */ E("div", {
+function rt() {
+	return /* @__PURE__ */ A("div", {
 		className: "flex flex-col items-center gds-gap gds-ctx gds-pad",
 		children: [
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "circle",
 				width: 64,
 				height: 64
 			}),
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "text",
 				width: "30%"
 			}),
-			/* @__PURE__ */ T(l, {
+			/* @__PURE__ */ k(l, {
 				variant: "text",
 				lines: 3
 			})
 		]
 	});
 }
-function qe({ rows: e }) {
-	return /* @__PURE__ */ E("div", {
+function it({ rows: e }) {
+	return /* @__PURE__ */ A("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: "flex gap-4",
 			children: [
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				})
 			]
-		}), Array.from({ length: e }, (e, t) => /* @__PURE__ */ E("div", {
+		}), Array.from({ length: e }, (e, t) => /* @__PURE__ */ A("div", {
 			className: "flex gap-4",
 			children: [
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				}),
-				/* @__PURE__ */ T(l, {
+				/* @__PURE__ */ k(l, {
 					variant: "text",
 					width: "25%"
 				})
@@ -1446,80 +1749,80 @@ function qe({ rows: e }) {
 		}, t))]
 	});
 }
-var Je = v(function({ variant: t, count: n = 1, glass: r, className: i }, a) {
+var at = x(function({ variant: t, count: n = 1, glass: r, className: i }, a) {
 	let o = r ? "backdrop-blur-md bg-white/5" : void 0;
-	return t === "card" ? /* @__PURE__ */ T("div", {
+	return t === "card" ? /* @__PURE__ */ k("div", {
 		ref: a,
 		className: e("gds-ctx gds-radius-card", o, i),
 		"data-component": "skeleton-pattern",
 		"data-variant": "card",
-		children: /* @__PURE__ */ T(We, {})
-	}) : t === "list" ? /* @__PURE__ */ T("div", {
+		children: /* @__PURE__ */ k(tt, {})
+	}) : t === "list" ? /* @__PURE__ */ k("div", {
 		ref: a,
 		className: e("flex flex-col gds-gap gds-ctx gds-pad", o, i),
 		"data-component": "skeleton-pattern",
 		"data-variant": "list",
-		children: Array.from({ length: n }, (e, t) => /* @__PURE__ */ T(Ge, {}, t))
-	}) : t === "profile" ? /* @__PURE__ */ T("div", {
+		children: Array.from({ length: n }, (e, t) => /* @__PURE__ */ k(nt, {}, t))
+	}) : t === "profile" ? /* @__PURE__ */ k("div", {
 		ref: a,
 		className: e(o, i),
 		"data-component": "skeleton-pattern",
 		"data-variant": "profile",
-		children: /* @__PURE__ */ T(Ke, {})
-	}) : /* @__PURE__ */ T("div", {
+		children: /* @__PURE__ */ k(rt, {})
+	}) : /* @__PURE__ */ k("div", {
 		ref: a,
 		className: e("gds-ctx gds-pad", o, i),
 		"data-component": "skeleton-pattern",
 		"data-variant": "table",
-		children: /* @__PURE__ */ T(qe, { rows: n })
+		children: /* @__PURE__ */ k(it, { rows: n })
 	});
 });
 //#endregion
 //#region src/l7-patterns/splash-screen.tsx
-function Ye() {
-	return /* @__PURE__ */ E("svg", {
+function ot() {
+	return /* @__PURE__ */ A("svg", {
 		className: "h-5 w-5 animate-spin text-accent",
 		fill: "none",
 		viewBox: "0 0 24 24",
-		children: [/* @__PURE__ */ T("circle", {
+		children: [/* @__PURE__ */ k("circle", {
 			className: "opacity-25",
 			cx: "12",
 			cy: "12",
 			r: "10",
 			stroke: "currentColor",
 			strokeWidth: "4"
-		}), /* @__PURE__ */ T("path", {
+		}), /* @__PURE__ */ k("path", {
 			className: "opacity-75",
 			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
 			fill: "currentColor"
 		})]
 	});
 }
-var Xe = v(function({ className: t, logo: n, message: r, title: i, visible: a, ...o }, s) {
-	return /* @__PURE__ */ E("div", {
+var st = x(function({ className: t, logo: n, message: r, title: i, visible: a, ...o }, s) {
+	return /* @__PURE__ */ A("div", {
 		ref: s,
 		className: e("fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-bg transition-opacity duration-300", a === !0 ? "opacity-100" : "pointer-events-none opacity-0", t),
 		"data-component": "splash-screen",
 		"data-visible": a,
 		...o,
 		children: [
-			n !== void 0 && /* @__PURE__ */ T("div", {
+			n !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mb-6",
 				children: n
 			}),
-			i !== void 0 && /* @__PURE__ */ T("h1", {
+			i !== void 0 && /* @__PURE__ */ k("h1", {
 				className: "mb-2 text-lg font-semibold text-fg",
 				children: i
 			}),
-			r !== void 0 && /* @__PURE__ */ T("p", {
+			r !== void 0 && /* @__PURE__ */ k("p", {
 				className: "mb-8 text-sm text-fg-muted",
 				children: r
 			}),
-			/* @__PURE__ */ T(Ye, {})
+			/* @__PURE__ */ k(ot, {})
 		]
 	});
-}), Ze = v(function({ className: t, defaultSplit: n = 50, left: r, minLeft: i = 20, minRight: a = 20, right: o, ...s }, c) {
-	let [l, u] = C(n), d = S(null), p = y((e) => {
+}), ct = x(function({ className: t, defaultSplit: n = 50, left: r, minLeft: i = 20, minRight: a = 20, right: o, ...s }, c) {
+	let [l, u] = D(n), d = E(null), p = S((e) => {
 		let t = d.current;
 		if (t === null) return;
 		let n = t.offsetWidth;
@@ -1530,7 +1833,7 @@ var Xe = v(function({ className: t, logo: n, message: r, title: i, visible: a, .
 			return t < i ? i : t > 100 - a ? 100 - a : t;
 		});
 	}, [i, a]);
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		className: e("flex h-full w-full", t),
 		"data-component": "split-view",
 		ref: (e) => {
@@ -1538,23 +1841,23 @@ var Xe = v(function({ className: t, logo: n, message: r, title: i, visible: a, .
 		},
 		...s,
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "overflow-auto",
 				style: { width: `${l}%` },
 				children: r
 			}),
-			/* @__PURE__ */ T(f, {
+			/* @__PURE__ */ k(f, {
 				orientation: "vertical",
 				onResize: p
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "overflow-auto",
 				style: { width: `${100 - l}%` },
 				children: o
 			})
 		]
 	});
-}), Qe = {
+}), lt = {
 	default: "text-2xl",
 	lg: "text-3xl",
 	sm: "text-lg"
@@ -1564,13 +1867,13 @@ var Xe = v(function({ className: t, logo: n, message: r, title: i, visible: a, .
 	up: "text-success"
 };
 function X() {
-	return /* @__PURE__ */ T("svg", {
+	return /* @__PURE__ */ k("svg", {
 		className: "h-3 w-3",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "2.5",
 		viewBox: "0 0 24 24",
-		children: /* @__PURE__ */ T("path", {
+		children: /* @__PURE__ */ k("path", {
 			d: "M12 19V5M5 12l7-7 7 7",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
@@ -1578,13 +1881,13 @@ function X() {
 	});
 }
 function Z() {
-	return /* @__PURE__ */ T("svg", {
+	return /* @__PURE__ */ k("svg", {
 		className: "h-3 w-3",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "2.5",
 		viewBox: "0 0 24 24",
-		children: /* @__PURE__ */ T("path", {
+		children: /* @__PURE__ */ k("path", {
 			d: "M12 5v14M19 12l-7 7-7-7",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
@@ -1592,31 +1895,31 @@ function Z() {
 	});
 }
 function Q() {
-	return /* @__PURE__ */ T("svg", {
+	return /* @__PURE__ */ k("svg", {
 		className: "h-3 w-3",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "2.5",
 		viewBox: "0 0 24 24",
-		children: /* @__PURE__ */ T("path", {
+		children: /* @__PURE__ */ k("path", {
 			d: "M5 12h14",
 			strokeLinecap: "round"
 		})
 	});
 }
-var $e = {
+var ut = {
 	down: Z,
 	neutral: Q,
 	up: X
 };
-function et(e, t, n) {
+function dt(e, t, n) {
 	if (e.length < 2) return "";
 	let r = Math.min(...e), i = Math.max(...e) - r || 1, a = t / (e.length - 1);
 	return e.map((e, t) => `${t === 0 ? "M" : "L"}${(t * a).toFixed(1)},${(n - (e - r) / i * n).toFixed(1)}`).join(" ");
 }
-function tt(e, t, n = 500) {
-	let [r, i] = C(e), a = S(e), o = S(0);
-	return b(() => {
+function ft(e, t, n = 500) {
+	let [r, i] = D(e), a = E(e), o = E(0);
+	return w(() => {
 		if (!t) {
 			i(e);
 			return;
@@ -1634,92 +1937,92 @@ function tt(e, t, n = 500) {
 		n
 	]), r;
 }
-var nt = v(function({ animated: t = !1, change: n, changeType: r = "neutral", className: i, description: a, footer: o, glass: s = !1, icon: c, label: l, motion: u, pulse: d = !1, size: f = "default", sparkData: p, trend: m, unit: h, value: g }, _) {
-	let v = $e[r], y = m === void 0 ? null : m > 0 ? "up" : m < 0 ? "down" : "neutral", b = y === null ? null : Y[y], S = y === "up" ? "var(--gds-success)" : y === "down" ? "var(--gds-danger)" : "var(--gds-fg-muted)", C = x(() => p !== void 0 && p.length >= 2 ? et(p, 80, 24) : null, [p]), w = typeof g == "number" ? g : null, D = tt(w ?? 0, t && w !== null), O = t && w !== null ? Number.isInteger(D) ? D.toLocaleString() : D.toLocaleString(void 0, { maximumFractionDigits: 2 }) : g;
-	return /* @__PURE__ */ E("div", {
+var $ = x(function({ animated: t = !1, change: n, changeType: r = "neutral", className: i, description: a, footer: o, glass: s = !1, icon: c, label: l, motion: u, pulse: d = !1, size: f = "default", sparkData: p, trend: m, unit: h, value: g }, _) {
+	let v = ut[r], y = m === void 0 ? null : m > 0 ? "up" : m < 0 ? "down" : "neutral", b = y === null ? null : Y[y], x = y === "up" ? "var(--gds-success)" : y === "down" ? "var(--gds-danger)" : "var(--gds-fg-muted)", S = T(() => p !== void 0 && p.length >= 2 ? dt(p, 80, 24) : null, [p]), C = typeof g == "number" ? g : null, w = ft(C ?? 0, t && C !== null), E = t && C !== null ? Number.isInteger(w) ? w.toLocaleString() : w.toLocaleString(void 0, { maximumFractionDigits: 2 }) : g;
+	return /* @__PURE__ */ A("div", {
 		className: e("select-none", s ? "rounded-lg border border-white/10 bg-white/5 p-4 shadow-lg backdrop-blur-xl" : "space-y-1", d && "animate-pulse", u === "fade" ? "animate-fade-in" : u === "slide-up" ? "animate-slide-up" : "", i),
 		"data-component": "stat",
 		ref: _,
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex items-start justify-between",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ k("div", {
 					className: "text-xs text-fg-muted",
 					children: l
-				}), c !== void 0 && /* @__PURE__ */ T("span", {
+				}), c !== void 0 && /* @__PURE__ */ k("span", {
 					className: "h-4 w-4 text-fg-muted/30",
 					children: c
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex items-end gap-3",
-				children: [/* @__PURE__ */ E("div", {
-					className: e("font-bold text-fg tabular-nums", Qe[f]),
-					children: [O, h !== void 0 && /* @__PURE__ */ T("span", {
+				children: [/* @__PURE__ */ A("div", {
+					className: e("font-bold text-fg tabular-nums", lt[f]),
+					children: [E, h !== void 0 && /* @__PURE__ */ k("span", {
 						className: "ml-1 text-xs font-normal text-fg-muted",
 						children: h
 					})]
-				}), m !== void 0 && y !== null && /* @__PURE__ */ E("div", {
+				}), m !== void 0 && y !== null && /* @__PURE__ */ A("div", {
 					className: e("mb-0.5 flex items-center gap-0.5 text-xs font-medium", b),
 					children: [
-						y === "up" && /* @__PURE__ */ T(X, {}),
-						y === "down" && /* @__PURE__ */ T(Z, {}),
-						y === "neutral" && /* @__PURE__ */ T(Q, {}),
-						/* @__PURE__ */ T("span", { children: y === "neutral" ? "0%" : `${m > 0 ? "+" : ""}${m}%` })
+						y === "up" && /* @__PURE__ */ k(X, {}),
+						y === "down" && /* @__PURE__ */ k(Z, {}),
+						y === "neutral" && /* @__PURE__ */ k(Q, {}),
+						/* @__PURE__ */ k("span", { children: y === "neutral" ? "0%" : `${m > 0 ? "+" : ""}${m}%` })
 					]
 				})]
 			}),
-			n !== void 0 && m === void 0 && /* @__PURE__ */ E("div", {
+			n !== void 0 && m === void 0 && /* @__PURE__ */ A("div", {
 				className: e("inline-flex items-center gap-0.5 text-xs font-medium", Y[r]),
-				children: [/* @__PURE__ */ T(v, {}), n]
+				children: [/* @__PURE__ */ k(v, {}), n]
 			}),
-			C !== null && /* @__PURE__ */ T("svg", {
+			S !== null && /* @__PURE__ */ k("svg", {
 				className: "mt-1",
 				height: 24,
 				viewBox: "0 0 80 24",
 				width: 80,
-				children: /* @__PURE__ */ T("path", {
-					d: C,
+				children: /* @__PURE__ */ k("path", {
+					d: S,
 					fill: "none",
-					stroke: S,
+					stroke: x,
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5
 				})
 			}),
-			a !== void 0 && /* @__PURE__ */ T("div", {
+			a !== void 0 && /* @__PURE__ */ k("div", {
 				className: "text-[11px] text-fg-muted",
 				children: a
 			}),
-			o !== void 0 && /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-3 border-t border-border/20 pt-2 text-[10px] text-fg-muted/50",
 				children: o
 			})
 		]
 	});
-}), rt = {
+}), pt = {
 	2: "grid-cols-2",
 	3: "grid-cols-3",
 	4: "grid-cols-4"
-}, it = v(function({ children: t, columns: n = 3, className: r }, i) {
-	return /* @__PURE__ */ T("div", {
+}, mt = x(function({ children: t, columns: n = 3, className: r }, i) {
+	return /* @__PURE__ */ k("div", {
 		ref: i,
-		className: e("grid gds-gap-lg", rt[n], r),
+		className: e("grid gds-gap-lg", pt[n], r),
 		"data-component": "stat-grid",
 		children: t
 	});
 });
 //#endregion
 //#region src/l7-patterns/stats-card.tsx
-function $({ data: e }) {
+function ht({ data: e }) {
 	if (e.length < 2) return null;
 	let t = Math.max(...e), n = Math.min(...e), r = t - n;
-	return /* @__PURE__ */ T("svg", {
+	return /* @__PURE__ */ k("svg", {
 		className: "mt-2",
 		height: 24,
 		viewBox: "0 0 64 24",
 		width: 64,
-		children: /* @__PURE__ */ T("polyline", {
+		children: /* @__PURE__ */ k("polyline", {
 			fill: "none",
 			points: e.map((t, i) => `${i / (e.length - 1) * 64},${r > 0 ? 24 - (t - n) / r * 24 : 24 / 2}`).join(" "),
 			stroke: "var(--gds-accent)",
@@ -1727,25 +2030,25 @@ function $({ data: e }) {
 		})
 	});
 }
-var at = v(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass: s, className: c }, l) {
+var gt = x(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass: s, className: c }, l) {
 	let u = a !== void 0 && a >= 0;
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: l,
 		className: e("relative gds-ctx gds-radius-card border gds-pad-x-lg gds-pad-y-lg", s === !0 ? e(t(s), "border-white/10 bg-bg/60") : "border-border bg-surface", c),
 		"data-component": "stats-card",
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex items-start justify-between",
-				children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ A("div", {
 					className: "flex items-center gap-2",
-					children: [n !== void 0 && /* @__PURE__ */ T("div", {
+					children: [n !== void 0 && /* @__PURE__ */ k("div", {
 						className: "text-fg-muted/50",
 						children: n
-					}), /* @__PURE__ */ T("p", {
+					}), /* @__PURE__ */ k("p", {
 						className: "gds-text-body text-fg-muted",
 						children: r
 					})]
-				}), a !== void 0 && /* @__PURE__ */ E("span", {
+				}), a !== void 0 && /* @__PURE__ */ A("span", {
 					className: e("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium", u ? "bg-success/10 text-success" : "bg-danger/10 text-danger"),
 					children: [
 						u ? "↑" : "↓",
@@ -1755,74 +2058,74 @@ var at = v(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass
 					]
 				})]
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "mt-1 text-2xl font-bold text-fg",
 				children: i
 			}),
-			o !== void 0 && o.length >= 2 && /* @__PURE__ */ T($, { data: o })
+			o !== void 0 && o.length >= 2 && /* @__PURE__ */ k(ht, { data: o })
 		]
 	});
-}), ot = v(function({ code: t, title: n, description: r, action: i, secondaryAction: a, illustration: o, className: s }, c) {
-	return /* @__PURE__ */ E("div", {
+}), _t = x(function({ code: t, title: n, description: r, action: i, secondaryAction: a, illustration: o, className: s }, c) {
+	return /* @__PURE__ */ A("div", {
 		ref: c,
 		className: e("flex min-h-[60vh] flex-col items-center justify-center gap-4 text-center", s),
 		"data-component": "status-page",
 		children: [
-			o !== void 0 && /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mb-2",
 				children: o
 			}),
-			t !== void 0 && /* @__PURE__ */ T("p", {
+			t !== void 0 && /* @__PURE__ */ k("p", {
 				className: "text-6xl font-bold text-fg-muted/10",
 				children: t
 			}),
-			/* @__PURE__ */ T("h1", {
+			/* @__PURE__ */ k("h1", {
 				className: "text-xl font-semibold text-fg",
 				children: n
 			}),
-			r !== void 0 && /* @__PURE__ */ T("p", {
+			r !== void 0 && /* @__PURE__ */ k("p", {
 				className: "max-w-md text-fg-muted",
 				children: r
 			}),
-			(i !== void 0 || a !== void 0) && /* @__PURE__ */ E("div", {
+			(i !== void 0 || a !== void 0) && /* @__PURE__ */ A("div", {
 				className: "mt-2 flex items-center gap-3",
 				children: [i, a]
 			})
 		]
 	});
-}), st = v(function({ steps: t, onComplete: r, completeLabel: i = "Complete", glass: a = !1, className: o, ...s }, c) {
-	let [l, u] = C(0), d = l === 0, f = l === t.length - 1, p = t.map((e) => ({
+}), vt = x(function({ steps: t, onComplete: r, completeLabel: i = "Complete", glass: a = !1, className: o, ...s }, c) {
+	let [l, u] = D(0), d = l === 0, f = l === t.length - 1, p = t.map((e) => ({
 		label: e.title,
 		description: e.description
 	}));
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ A("div", {
 		ref: c,
 		className: e("flex flex-col rounded-lg border border-border p-6", a ? "bg-bg/80 backdrop-blur-xl" : "bg-bg-secondary", o),
 		"data-component": "stepper-form",
 		...s,
 		children: [
-			/* @__PURE__ */ T(g, {
+			/* @__PURE__ */ k(_, {
 				steps: p,
 				current: l,
 				className: "mb-6"
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "min-h-[120px] flex-1",
 				children: t[l]?.content
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "mt-6 flex items-center justify-between",
-				children: [/* @__PURE__ */ T(n, {
+				children: [/* @__PURE__ */ k(n, {
 					variant: "secondary",
 					size: "sm",
 					disabled: d,
 					onClick: () => u((e) => e - 1),
 					children: "Previous"
-				}), f ? /* @__PURE__ */ T(n, {
+				}), f ? /* @__PURE__ */ k(n, {
 					size: "sm",
 					onClick: r,
 					children: i
-				}) : /* @__PURE__ */ T(n, {
+				}) : /* @__PURE__ */ k(n, {
 					size: "sm",
 					onClick: () => u((e) => e + 1),
 					children: "Next"
@@ -1830,14 +2133,14 @@ var at = v(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass
 			})
 		]
 	});
-}), ct = v(function({ children: n, className: r, glass: i = !0, threshold: a = 0, ...o }, s) {
-	let [c, l] = C(!1);
-	return b(() => {
+}), yt = x(function({ children: n, className: r, glass: i = !0, threshold: a = 0, ...o }, s) {
+	let [c, l] = D(!1);
+	return w(() => {
 		function e() {
 			l(window.scrollY > a);
 		}
 		return window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
-	}, [a]), /* @__PURE__ */ T("div", {
+	}, [a]), /* @__PURE__ */ k("div", {
 		className: e("sticky top-0 z-40 transition-[background-color,box-shadow] duration-200", c && "shadow-md bg-bg/80", c && i && t(!0), r),
 		"data-component": "sticky-header",
 		"data-sticky": c,
@@ -1845,41 +2148,41 @@ var at = v(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass
 		...o,
 		children: n
 	});
-}), lt = v(function({ quote: n, author: r, role: i, avatar: a, rating: o, glass: s, className: c }, l) {
-	return /* @__PURE__ */ E("div", {
+}), bt = x(function({ quote: n, author: r, role: i, avatar: a, rating: o, glass: s, className: c }, l) {
+	return /* @__PURE__ */ A("div", {
 		ref: l,
 		className: e("gds-ctx gds-radius-card border gds-pad-x-lg gds-pad-y-lg", s === !0 ? e(t(s), "border-white/10 bg-bg/60") : "border-border bg-surface", c),
 		"data-component": "testimonial",
 		children: [
-			/* @__PURE__ */ T("svg", {
+			/* @__PURE__ */ k("svg", {
 				className: "mb-3 h-6 w-6 text-fg-muted opacity-30",
 				viewBox: "0 0 24 24",
 				fill: "currentColor",
-				children: /* @__PURE__ */ T("path", { d: "M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378C7.06 7.752 6.14 9.87 5.94 11.501c.26-.058.527-.088.8-.088 1.656 0 2.96 1.283 2.96 2.87 0 1.586-1.304 2.87-2.96 2.87-.83 0-1.572-.358-2.157-.832zM14.583 17.321C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-2.863 1.551-3.783 3.669-3.983 5.3.26-.058.527-.088.8-.088 1.656 0 2.96 1.283 2.96 2.87 0 1.586-1.304 2.87-2.96 2.87-.83 0-1.572-.358-2.157-.832z" })
+				children: /* @__PURE__ */ k("path", { d: "M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378C7.06 7.752 6.14 9.87 5.94 11.501c.26-.058.527-.088.8-.088 1.656 0 2.96 1.283 2.96 2.87 0 1.586-1.304 2.87-2.96 2.87-.83 0-1.572-.358-2.157-.832zM14.583 17.321C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-2.863 1.551-3.783 3.669-3.983 5.3.26-.058.527-.088.8-.088 1.656 0 2.96 1.283 2.96 2.87 0 1.586-1.304 2.87-2.96 2.87-.83 0-1.572-.358-2.157-.832z" })
 			}),
-			/* @__PURE__ */ T("p", {
+			/* @__PURE__ */ k("p", {
 				className: "gds-text-body italic text-fg",
 				children: n
 			}),
-			o !== void 0 && /* @__PURE__ */ T("div", {
+			o !== void 0 && /* @__PURE__ */ k("div", {
 				className: "mt-3 flex gap-0.5",
-				children: Array.from({ length: 5 }, (t, n) => /* @__PURE__ */ T("svg", {
+				children: Array.from({ length: 5 }, (t, n) => /* @__PURE__ */ k("svg", {
 					className: e("h-4 w-4", n < o ? "text-warning" : "text-fg-muted/30"),
 					viewBox: "0 0 20 20",
 					fill: "currentColor",
-					children: /* @__PURE__ */ T("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+					children: /* @__PURE__ */ k("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
 				}, n))
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ A("div", {
 				className: "mt-4 flex items-center gap-3",
-				children: [a !== void 0 && /* @__PURE__ */ T("img", {
+				children: [a !== void 0 && /* @__PURE__ */ k("img", {
 					src: a,
 					alt: r,
 					className: "h-10 w-10 rounded-full object-cover"
-				}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+				}), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 					className: "text-sm font-medium text-fg",
 					children: r
-				}), i !== void 0 && /* @__PURE__ */ T("p", {
+				}), i !== void 0 && /* @__PURE__ */ k("p", {
 					className: "text-xs text-fg-muted",
 					children: i
 				})] })]
@@ -1889,18 +2192,18 @@ var at = v(function({ icon: n, label: r, value: i, trend: a, sparkData: o, glass
 });
 //#endregion
 //#region src/l7-patterns/timeline-steps.tsx
-function ut({ steps: t, className: n }) {
-	return /* @__PURE__ */ T("div", {
+function xt({ steps: t, className: n }) {
+	return /* @__PURE__ */ k("div", {
 		"data-component": "timeline-steps",
 		className: e("flex items-start", n),
-		children: t.map((n, r) => /* @__PURE__ */ E("div", {
+		children: t.map((n, r) => /* @__PURE__ */ A("div", {
 			className: "flex flex-1 items-start",
-			children: [/* @__PURE__ */ E("div", {
+			children: [/* @__PURE__ */ A("div", {
 				className: "flex flex-col items-center",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ k("div", {
 					"data-status": n.status,
 					className: e("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold", n.status === "completed" && "bg-success text-white", n.status === "current" && "bg-accent text-accent-fg animate-pulse", n.status === "upcoming" && "bg-bg-tertiary text-fg-muted"),
-					children: n.status === "completed" ? /* @__PURE__ */ T("svg", {
+					children: n.status === "completed" ? /* @__PURE__ */ k("svg", {
 						width: "14",
 						height: "14",
 						viewBox: "0 0 24 24",
@@ -1909,27 +2212,27 @@ function ut({ steps: t, className: n }) {
 						strokeWidth: "3",
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
-						children: /* @__PURE__ */ T("polyline", { points: "20 6 9 17 4 12" })
+						children: /* @__PURE__ */ k("polyline", { points: "20 6 9 17 4 12" })
 					}) : r + 1
-				}), /* @__PURE__ */ E("div", {
+				}), /* @__PURE__ */ A("div", {
 					className: "mt-2 text-center",
-					children: [/* @__PURE__ */ T("div", {
+					children: [/* @__PURE__ */ k("div", {
 						className: "text-xs font-medium text-fg",
 						children: n.label
-					}), n.description !== void 0 && /* @__PURE__ */ T("div", {
+					}), n.description !== void 0 && /* @__PURE__ */ k("div", {
 						className: "mt-0.5 text-[10px] text-fg-muted",
 						children: n.description
 					})]
 				})]
-			}), r < t.length - 1 && /* @__PURE__ */ T("div", { className: e("mt-4 h-0.5 flex-1 mx-2", n.status === "completed" ? "bg-success" : "bg-border") })]
+			}), r < t.length - 1 && /* @__PURE__ */ k("div", { className: e("mt-4 h-0.5 flex-1 mx-2", n.status === "completed" ? "bg-success" : "bg-border") })]
 		}, n.label))
 	});
 }
 //#endregion
 //#region src/l7-patterns/toolbar.tsx
-var dt = v(function({ children: n, className: r, glass: i, position: a = "top", ...o }, s) {
+var St = x(function({ children: n, className: r, glass: i, position: a = "top", ...o }, s) {
 	let c = a === "floating", l = i ?? c;
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ k("div", {
 		ref: s,
 		className: e("flex items-center gds-gap-sm gds-pad-x gds-pad-y-sm", a === "top" && "border-b border-border", a === "bottom" && "border-t border-border", c && "rounded-full gds-shadow-lg", l === !0 ? e(t(l), "border-white/10 bg-bg/60") : !c && "bg-surface", c && l !== !0 && "border border-border bg-surface", r),
 		"data-component": "toolbar",
@@ -1938,25 +2241,25 @@ var dt = v(function({ children: n, className: r, glass: i, position: a = "top",
 		...o,
 		children: n
 	});
-}), ft = v(function({ steps: t, currentStep: n, children: r, actions: i, className: a, ...o }, s) {
-	return /* @__PURE__ */ E("div", {
+}), Ct = x(function({ steps: t, currentStep: n, children: r, actions: i, className: a, ...o }, s) {
+	return /* @__PURE__ */ A("div", {
 		ref: s,
 		className: e("flex min-h-0 flex-1 flex-col gds-gap", a),
 		"data-component": "wizard-layout",
 		...o,
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "shrink-0 gds-pad-x",
-				children: /* @__PURE__ */ T(m, {
+				children: /* @__PURE__ */ k(g, {
 					steps: t,
 					current: n
 				})
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ k("div", {
 				className: "min-h-0 flex-1 overflow-auto gds-pad-x",
 				children: r
 			}),
-			i !== void 0 && /* @__PURE__ */ T("div", {
+			i !== void 0 && /* @__PURE__ */ k("div", {
 				className: "flex shrink-0 items-center justify-end gds-gap gds-pad-x gds-pad-y border-t border-border",
 				children: i
 			})
@@ -1964,6 +2267,6 @@ var dt = v(function({ children: n, className: r, glass: i, position: a = "top",
 	});
 });
 //#endregion
-export { ie as $, be as A, z as B, ke as C, Te as D, Ee as E, de as F, P as G, L as H, ue as I, j as J, N as K, le as L, ve as M, fe as N, we as O, q as P, oe as Q, ce as R, je as S, De as T, I as U, R as V, F as W, k as X, A as Y, se as Z, Ie as _, ct as a, Ne as b, at as c, Ze as d, te as et, Xe as f, Ve as g, He as h, lt as i, ye as j, xe as k, it as l, Ue as m, dt as n, O as nt, st as o, Je as p, M as q, ut as r, ot as s, ft as t, ee as tt, nt as u, Fe as v, Oe as w, Me as x, Pe as y, H as z };
+export { N as $, Pe as A, ve as B, Ve as C, Le as D, Re as E, De as F, V as G, pe as H, xe as I, R as J, B as K, G as L, Ae as M, ke as N, Ie as O, Oe as P, P as Q, be as R, Ue as S, Be as T, U, _e as V, H as W, I as X, L as Y, F as Z, Qe as _, yt as a, re as at, Ge as b, gt as c, ct as d, M as et, st as f, $e as g, J as h, bt as i, ie as it, Ne as j, Fe as k, mt as l, et as m, St as n, ce as nt, vt as o, ee as ot, at as p, z as q, xt as r, ae as rt, _t as s, Ct as t, ue as tt, $ as u, qe as v, He as w, We as x, Ke as y, ye as z };
 
-//# sourceMappingURL=l7-patterns-8fc4b3eE.js.map
+//# sourceMappingURL=l7-patterns-Dn7X2pQC.js.map