@goliapkg/gds 0.9.3 → 0.9.5

package/dist/l7-patterns-DZXveS4Y.js

@@ -0,0 +1,1826 @@
+import { r as e, t } from "./glass-CQTlX7IO.js";
+import { t as n } from "./button-avu-rQU4.js";
+import { r, t as i } from "./separator-Dqs23A9D.js";
+import { i as a, r as o, t as s } from "./spinner-D8Ti-TFe.js";
+import { t as c } from "./progress-wAKN3Czz.js";
+import { t as l } from "./skeleton-C9FFZSYN.js";
+import { t as u } from "./avatar-By0U5Vts.js";
+import { n as d, t as f } from "./resize-handle-CktEYqwi.js";
+import { i as p, n as m, r as h, t as g } from "./stepper-DhpGORX8.js";
+import { Children as _, forwardRef as v, useCallback as y, useEffect as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/l7-patterns/action-bar.tsx
+var ee = {
+	between: "justify-between",
+	center: "justify-center",
+	end: "justify-end",
+	start: "justify-start"
+}, te = v(function({ children: n, className: r, glass: i = !0, justify: a = "end", position: o = "bottom" }, s) {
+	return /* @__PURE__ */ w("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", ee[a], i === !0 ? e(t(i), "border-white/10 bg-bg/60") : "border-border bg-surface", r),
+		"data-component": "action-bar",
+		children: n
+	});
+}), ne = v(function({ sidebar: t, topbar: n, children: r, sidebarWidth: i = 240, className: a }, o) {
+	return /* @__PURE__ */ T("div", {
+		ref: o,
+		className: e("flex h-screen min-h-0 bg-bg", a),
+		"data-component": "admin-layout",
+		children: [/* @__PURE__ */ w("aside", {
+			className: "shrink-0 overflow-y-auto border-r border-border bg-surface",
+			style: { width: i },
+			children: t
+		}), /* @__PURE__ */ T("div", {
+			className: "flex flex-1 flex-col min-w-0",
+			children: [n !== void 0 && /* @__PURE__ */ w("header", {
+				className: "sticky top-0 z-10 shrink-0 border-b border-border bg-surface/80 backdrop-blur-sm",
+				children: n
+			}), /* @__PURE__ */ w("main", {
+				className: "flex-1 overflow-auto",
+				children: r
+			})]
+		})]
+	});
+}), re = v(function({ charts: t, className: n, data: r, metrics: i }, a) {
+	return /* @__PURE__ */ T("div", {
+		className: e("flex flex-col gds-gap", n),
+		"data-component": "analytics-dashboard",
+		ref: a,
+		children: [
+			i !== void 0 && /* @__PURE__ */ w("section", {
+				className: "flex flex-wrap gds-gap",
+				"data-slot": "metrics",
+				children: i
+			}),
+			t !== void 0 && /* @__PURE__ */ w("section", {
+				className: "flex flex-col gds-gap",
+				"data-slot": "charts",
+				children: t
+			}),
+			r !== void 0 && /* @__PURE__ */ w("section", {
+				className: "flex flex-col gds-gap",
+				"data-slot": "data",
+				children: r
+			})
+		]
+	});
+}), E = {
+	sm: "gds-gap-sm",
+	default: "gds-gap",
+	lg: "gds-gap-lg"
+}, D = (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}`, O = v(function({ children: t, columns: n = 4, gap: r = "default", className: i }, a) {
+	return /* @__PURE__ */ w("div", {
+		ref: a,
+		className: e("grid auto-rows-[minmax(120px,auto)]", D(n), E[r], i),
+		"data-component": "bento-grid",
+		children: t
+	});
+}), k = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+], A = v(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);
+	let d = /* @__PURE__ */ new Map();
+	for (let e of n) {
+		let t = d.get(e.date) ?? [];
+		d.set(e.date, [...t, e]);
+	}
+	return /* @__PURE__ */ w("div", {
+		className: e("flex flex-col gap-1", t),
+		"data-component": "calendar-view",
+		ref: s,
+		...o,
+		children: /* @__PURE__ */ T("div", {
+			className: "grid grid-cols-7 gap-1",
+			children: [k.map((e) => /* @__PURE__ */ w("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__ */ T("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__ */ w("span", { children: t }), r.length > 0 && /* @__PURE__ */ w("div", {
+						className: "mt-0.5 flex gap-0.5",
+						children: r.slice(0, 3).map((e, t) => /* @__PURE__ */ w("span", {
+							className: "h-1 w-1 rounded-full",
+							style: { backgroundColor: e.color ?? "var(--color-accent)" },
+							title: e.label
+						}, t))
+					})]
+				}, n);
+			})]
+		})
+	});
+});
+//#endregion
+//#region src/l7-patterns/comparison-table.tsx
+function j({ features: t, plans: n, highlightColumn: r, glass: i, className: a }) {
+	return /* @__PURE__ */ w("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__ */ T("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
+				className: "border-b border-border bg-bg-tertiary/30",
+				children: [/* @__PURE__ */ w("th", {
+					className: "px-4 py-3 text-left text-xs font-medium text-fg-muted",
+					children: "Feature"
+				}), n.map((t, n) => /* @__PURE__ */ w("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__ */ w("tbody", { children: t.map((i, a) => /* @__PURE__ */ T("tr", {
+				className: e(a < t.length - 1 && "border-b border-border/50"),
+				children: [/* @__PURE__ */ w("td", {
+					className: "px-4 py-2.5 text-xs text-fg",
+					children: i
+				}), n.map((t, n) => {
+					let i = t.values[a];
+					return /* @__PURE__ */ w("td", {
+						className: e("px-4 py-2.5 text-center", n === r && "bg-accent/5"),
+						children: typeof i == "boolean" ? i === !0 ? /* @__PURE__ */ w("svg", {
+							className: "mx-auto text-success",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"data-icon": "check",
+							children: /* @__PURE__ */ w("polyline", { points: "20 6 9 17 4 12" })
+						}) : /* @__PURE__ */ w("svg", {
+							className: "mx-auto text-fg-muted/40",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							"data-icon": "dash",
+							children: /* @__PURE__ */ w("line", {
+								x1: "5",
+								y1: "12",
+								x2: "19",
+								y2: "12"
+							})
+						}) : /* @__PURE__ */ w("span", {
+							className: "text-xs text-fg",
+							children: i
+						})
+					}, t.name);
+				})]
+			}, i)) })]
+		})
+	});
+}
+//#endregion
+//#region src/l7-patterns/composition-pattern.tsx
+var M = 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__ */ w("div", {
+		className: e("shrink-0 overflow-auto", f ? "border-l border-border" : "border-r border-border"),
+		style: { width: d },
+		children: r
+	});
+	return /* @__PURE__ */ T("div", {
+		ref: u,
+		className: e("gds-ctx flex h-full flex-col", t(c), l),
+		"data-component": "composition-pattern",
+		children: [
+			n !== void 0 && /* @__PURE__ */ w("div", {
+				className: "shrink-0 border-b border-border",
+				children: n
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex min-h-0 flex-1",
+				children: [
+					f ? null : p,
+					/* @__PURE__ */ w("div", {
+						className: "flex-1 overflow-auto",
+						children: i
+					}),
+					f ? p : null
+				]
+			}),
+			a !== void 0 && /* @__PURE__ */ w("div", {
+				className: "shrink-0 border-t border-border",
+				children: a
+			})
+		]
+	});
+}), N = v(function({ title: n, description: r, actions: i, variant: a = "default", glass: o, className: s }, c) {
+	return /* @__PURE__ */ T("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__ */ w("h2", {
+				className: e("text-xl font-bold", a === "default" && "text-fg"),
+				children: n
+			}),
+			r !== void 0 && /* @__PURE__ */ w("p", {
+				className: e("mt-2 gds-text-body", a === "default" ? "text-fg-muted" : "opacity-80"),
+				children: r
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "mt-4 flex items-center justify-center gap-3",
+				children: i
+			})
+		]
+	});
+}), P = v(function({ sidebar: t, header: n, children: r, sidebarWidth: i = 240, className: a }, o) {
+	return /* @__PURE__ */ T("div", {
+		ref: o,
+		className: e("flex h-full min-h-0 bg-bg", a),
+		"data-component": "dashboard-layout",
+		children: [/* @__PURE__ */ w("aside", {
+			className: "shrink-0 overflow-y-auto border-r border-border bg-surface",
+			style: { width: i },
+			children: t
+		}), /* @__PURE__ */ T("div", {
+			className: "flex flex-1 flex-col min-w-0",
+			children: [n !== void 0 && /* @__PURE__ */ w("header", {
+				className: "sticky top-0 z-10 shrink-0 border-b border-border bg-surface/80 backdrop-blur-sm",
+				children: n
+			}), /* @__PURE__ */ w("main", {
+				className: "flex-1 overflow-auto",
+				children: r
+			})]
+		})]
+	});
+}), F = v(function({ formats: t, onExport: r, title: i = "Export Data", className: a, ...o }, s) {
+	let [c, l] = S(t[0] ?? ""), [u, d] = S(""), [f, p] = S("");
+	function m() {
+		r(c, u !== "" && f !== "" ? {
+			from: u,
+			to: f
+		} : void 0);
+	}
+	return /* @__PURE__ */ T("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__ */ w("h3", {
+			className: "select-none font-medium gds-heading text-fg mb-3",
+			children: i
+		}), /* @__PURE__ */ T("div", {
+			className: "flex flex-col gap-3",
+			children: [
+				/* @__PURE__ */ T("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ w("label", {
+						className: "select-none text-xs text-fg-muted",
+						children: "Format"
+					}), /* @__PURE__ */ w("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__ */ w("option", {
+							value: e,
+							children: e
+						}, e))
+					})]
+				}),
+				/* @__PURE__ */ T("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ w("label", {
+							className: "select-none text-xs text-fg-muted",
+							children: "From"
+						}), /* @__PURE__ */ w("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__ */ T("div", {
+						className: "flex flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ w("label", {
+							className: "select-none text-xs text-fg-muted",
+							children: "To"
+						}), /* @__PURE__ */ w("input", {
+							type: "date",
+							value: f,
+							onChange: (e) => p(e.target.value),
+							className: "rounded border border-border bg-bg px-2 py-1.5 gds-text-body text-fg"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ w(n, {
+					type: "button",
+					onClick: m,
+					className: "mt-1",
+					children: "Export"
+				})
+			]
+		})]
+	});
+}), I = v(function({ activeTab: t, children: n, className: r, onTabChange: i, statusBar: a, tabs: o, ...s }, c) {
+	return /* @__PURE__ */ T("div", {
+		className: e("flex h-full flex-col", r),
+		"data-component": "devops-layout",
+		ref: c,
+		...s,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: "flex items-center gap-1 border-b border-border px-2",
+				children: o.map((n) => /* @__PURE__ */ w("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__ */ w("div", {
+				className: "border-b border-border px-3 py-2",
+				children: a
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "flex-1 overflow-auto",
+				children: n
+			})
+		]
+	});
+}), L = v(function({ title: t, description: n, icon: r, action: i, className: a }, o) {
+	return /* @__PURE__ */ T("div", {
+		ref: o,
+		className: e("flex flex-col items-center justify-center py-12", a),
+		"data-component": "empty-state",
+		children: [
+			r !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mb-3 flex h-12 w-12 items-center justify-center text-fg-muted/20",
+				children: r
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "gds-text-body font-medium text-fg",
+				children: t
+			}),
+			n !== void 0 && /* @__PURE__ */ w("p", {
+				className: "mt-1 gds-text-body text-fg-muted",
+				children: n
+			}),
+			i !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-4",
+				children: i
+			})
+		]
+	});
+}), R = v(function({ items: n, title: r = "FAQ", glass: i, className: a }, o) {
+	return /* @__PURE__ */ T("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__ */ w("h2", {
+			className: "gds-heading font-semibold text-fg mb-4",
+			children: r
+		}), /* @__PURE__ */ w(h, {
+			type: "single",
+			children: n.map((e, t) => /* @__PURE__ */ w(p, {
+				id: `faq-${t}`,
+				title: e.question,
+				children: e.answer
+			}, t))
+		})]
+	});
+}), z = v(function({ icon: n, title: r, description: i, action: a, glass: o, className: s }, c) {
+	return /* @__PURE__ */ T("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__ */ w("div", {
+				className: "mb-3 text-accent",
+				children: n
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "font-semibold text-fg",
+				children: r
+			}),
+			i !== void 0 && /* @__PURE__ */ w("p", {
+				className: "mt-1 gds-text-body text-fg-muted",
+				children: i
+			}),
+			a !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-auto pt-4",
+				children: a
+			})
+		]
+	});
+}), B = v(function({ columns: n, copyright: r, logo: i, glass: a, className: o }, s) {
+	return /* @__PURE__ */ T("footer", {
+		ref: s,
+		className: e("w-full py-10", a && t(!0), o),
+		"data-component": "footer",
+		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ w("div", {
+			className: "grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-4",
+			children: n.map((e) => /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h3", {
+				className: "text-sm font-semibold text-fg",
+				children: e.title
+			}), /* @__PURE__ */ w("ul", {
+				className: "mt-3 space-y-2",
+				children: e.links.map((e) => /* @__PURE__ */ w("li", { children: /* @__PURE__ */ w("a", {
+					href: e.href,
+					className: "text-sm text-fg-muted hover:text-fg",
+					children: e.label
+				}) }, e.href))
+			})] }, e.title))
+		}), /* @__PURE__ */ T("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__ */ w("div", { children: i }), r !== void 0 && /* @__PURE__ */ w("p", {
+				className: "text-xs text-fg-muted",
+				children: r
+			})]
+		})]
+	});
+}), V = v(function({ title: t, description: n, children: r, actions: i, className: a }, o) {
+	let s = t !== void 0 || n !== void 0;
+	return /* @__PURE__ */ T("div", {
+		ref: o,
+		className: e("flex flex-col", a),
+		"data-component": "form-layout",
+		children: [
+			s && /* @__PURE__ */ T("div", {
+				className: "mb-4",
+				children: [t !== void 0 && /* @__PURE__ */ w("h2", {
+					className: "gds-text-body font-semibold text-fg",
+					children: t
+				}), n !== void 0 && /* @__PURE__ */ w("p", {
+					className: "mt-0.5 gds-text-body text-fg-muted",
+					children: n
+				})]
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "flex flex-col gds-gap-lg",
+				children: r
+			}),
+			i !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-6 flex justify-end gds-gap-sm",
+				children: i
+			})
+		]
+	});
+}), H = v(function({ title: n, description: r, sections: a, actions: o, glass: s, className: c }, l) {
+	return /* @__PURE__ */ T("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__ */ T("div", {
+				className: "mb-4",
+				children: [n !== void 0 && /* @__PURE__ */ w("h2", {
+					className: "gds-heading font-semibold text-fg",
+					children: n
+				}), r !== void 0 && /* @__PURE__ */ w("p", {
+					className: "mt-1 gds-text-body text-fg-muted",
+					children: r
+				})]
+			}),
+			a.map((e, t) => /* @__PURE__ */ T("div", { children: [t > 0 && /* @__PURE__ */ w(i, { className: "my-4" }), /* @__PURE__ */ T("div", {
+				className: "flex flex-col gds-gap",
+				children: [/* @__PURE__ */ w("h3", {
+					className: "gds-text-body font-medium text-fg",
+					children: e.title
+				}), e.fields]
+			})] }, e.title)),
+			o !== void 0 && /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(i, { className: "my-4" }), /* @__PURE__ */ w("div", {
+				className: "flex justify-end gds-gap-sm",
+				children: o
+			})] })
+		]
+	});
+}), U = {
+	none: "",
+	sm: "gds-pad-x gds-pad-y",
+	default: "gds-pad-x-lg gds-pad-y-lg",
+	lg: "p-6"
+}, W = {
+	sm: "sm",
+	default: !0,
+	lg: "lg"
+}, G = v(function({ children: n, blur: r = "default", padding: i = "default", className: a }, o) {
+	return /* @__PURE__ */ w("div", {
+		ref: o,
+		className: e("gds-ctx gds-radius-card border border-white/10", t(W[r]), U[i], a),
+		"data-component": "glass-panel",
+		children: n
+	});
+}), K = {
+	sm: "gds-gap-sm",
+	default: "gds-gap",
+	lg: "gds-gap-lg"
+}, q = (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}`, J = (e, t) => ({
+	1: `${e}:grid-cols-1`,
+	2: `${e}:grid-cols-2`,
+	3: `${e}:grid-cols-3`,
+	4: `${e}:grid-cols-4`,
+	5: `${e}:grid-cols-5`,
+	6: `${e}:grid-cols-6`
+})[t] ?? `${e}:grid-cols-${t}`;
+function Y(e) {
+	if (typeof e == "number") return q(e);
+	let t = [];
+	return e.sm !== void 0 && t.push(J("sm", e.sm)), e.md !== void 0 && t.push(J("md", e.md)), e.lg !== void 0 && t.push(J("lg", e.lg)), e.xl !== void 0 && t.push(J("xl", e.xl)), t.length > 0 && t.unshift("grid-cols-1"), t.join(" ");
+}
+var X = v(function({ children: t, columns: n = {
+	sm: 1,
+	md: 2,
+	lg: 3
+}, gap: r = "default", className: i }, a) {
+	return /* @__PURE__ */ w("div", {
+		ref: a,
+		className: e("grid", Y(n), K[r], i),
+		"data-component": "grid-layout",
+		children: t
+	});
+}), ie = v(function({ title: n, subtitle: r, actions: i, media: a, align: o = "center", glass: s, className: c }, l) {
+	let u = o === "center";
+	return /* @__PURE__ */ T("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__ */ T("div", {
+			className: e(u ? "mx-auto max-w-2xl" : "flex-1"),
+			children: [
+				/* @__PURE__ */ w("h1", {
+					className: "text-4xl font-bold text-fg",
+					children: n
+				}),
+				r !== void 0 && /* @__PURE__ */ w("p", {
+					className: "mt-3 text-lg text-fg-muted",
+					children: r
+				}),
+				i !== void 0 && /* @__PURE__ */ w("div", {
+					className: "mt-6",
+					children: i
+				}),
+				u && a !== void 0 && /* @__PURE__ */ w("div", {
+					className: "mt-8",
+					children: a
+				})
+			]
+		}), !u && a !== void 0 && /* @__PURE__ */ w("div", {
+			className: "flex-1",
+			children: a
+		})]
+	});
+}), ae = v(function({ className: t, departments: n, onboarding: r, stats: i, ...a }, o) {
+	return /* @__PURE__ */ T("div", {
+		className: e("gds-ctx flex flex-col gds-gap", t),
+		"data-component": "hr-dashboard",
+		ref: o,
+		...a,
+		children: [i !== void 0 && /* @__PURE__ */ w("div", {
+			className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+			children: i
+		}), /* @__PURE__ */ T("div", {
+			className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+			children: [r !== void 0 && /* @__PURE__ */ w("div", {
+				className: "gds-radius-card border border-border bg-surface gds-pad",
+				children: r
+			}), n !== void 0 && /* @__PURE__ */ w("div", {
+				className: "gds-radius-card border border-border bg-surface gds-pad",
+				children: n
+			})]
+		})]
+	});
+}), oe = v(function({ list: t, detail: n, listWidth: r = 360, className: i }, a) {
+	return /* @__PURE__ */ T("div", {
+		ref: a,
+		className: e("flex h-full overflow-hidden", i),
+		"data-component": "inbox-layout",
+		children: [/* @__PURE__ */ w("div", {
+			className: "shrink-0 overflow-y-auto border-r border-border",
+			style: { width: r },
+			children: t
+		}), /* @__PURE__ */ w("div", {
+			className: "min-w-0 flex-1 overflow-y-auto",
+			children: n
+		})]
+	});
+}), Z = v(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__ */ T("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__ */ w("div", {
+				className: "absolute right-4 top-4 text-fg-muted/40",
+				children: o
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "gds-text-body text-fg-muted",
+				children: n
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "mt-1 text-2xl font-bold text-fg",
+				children: r
+			}),
+			i !== void 0 && /* @__PURE__ */ T("p", {
+				className: e("mt-1 gds-text-body", u ? "text-success" : "text-danger"),
+				children: [
+					u ? "+" : "",
+					i,
+					"%",
+					a === void 0 ? "" : ` ${a}`
+				]
+			})
+		]
+	});
+}), se = v(function({ title: n, metrics: r, chart: i, table: a, glass: o, className: s }, c) {
+	return /* @__PURE__ */ T("div", {
+		ref: c,
+		className: e("gds-ctx flex flex-col gds-gap", s),
+		"data-component": "kpi-dashboard",
+		children: [
+			n !== void 0 && /* @__PURE__ */ w("h2", {
+				className: "gds-heading font-semibold text-fg",
+				children: n
+			}),
+			r !== void 0 && r.length > 0 && /* @__PURE__ */ w("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__ */ w(Z, {
+					change: e.change,
+					glass: o,
+					title: e.title,
+					value: e.value
+				}, e.title))
+			}),
+			i !== void 0 && /* @__PURE__ */ w("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__ */ w("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
+			})
+		]
+	});
+});
+//#endregion
+//#region src/l7-patterns/loading-states.tsx
+function ce({ message: n, glass: r, className: i }) {
+	return /* @__PURE__ */ T("div", {
+		className: e("flex min-h-[200px] flex-col items-center justify-center gap-3", t(r), i),
+		children: [/* @__PURE__ */ w(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ w("p", {
+			className: "gds-text-body text-fg-muted",
+			children: n
+		})]
+	});
+}
+function le({ message: t, className: n }) {
+	return /* @__PURE__ */ T("div", {
+		className: e("inline-flex items-center gap-2", n),
+		children: [/* @__PURE__ */ w(s, { size: "sm" }), t !== void 0 && /* @__PURE__ */ w("span", {
+			className: "gds-text-body text-fg-muted",
+			children: t
+		})]
+	});
+}
+function ue({ message: e, className: t }) {
+	return /* @__PURE__ */ w("div", {
+		className: t,
+		children: /* @__PURE__ */ w(n, {
+			loading: !0,
+			disabled: !0,
+			children: e ?? "Loading..."
+		})
+	});
+}
+function de({ message: n, glass: r, className: i }) {
+	return /* @__PURE__ */ T("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__ */ w(s, { size: "lg" }), n !== void 0 && /* @__PURE__ */ w("p", {
+			className: "gds-text-body text-fg-muted",
+			children: n
+		})]
+	});
+}
+var fe = {
+	page: ce,
+	inline: le,
+	button: ue,
+	overlay: de
+}, pe = v(function({ variant: e, message: t, glass: n, className: r }, i) {
+	return /* @__PURE__ */ w("div", {
+		ref: i,
+		"data-component": "loading-states",
+		"data-variant": e,
+		children: fe[e]({
+			message: t,
+			glass: n,
+			className: r
+		})
+	});
+}), me = v(function({ onSubmit: r, title: i = "Sign in", error: s, loading: c = !1, glass: l = !1, className: u, ...f }, p) {
+	let [m, h] = S(""), [g, _] = S(""), [v, y] = S(!1);
+	function b(e) {
+		e.preventDefault(), r({
+			email: m,
+			password: g,
+			remember: v
+		});
+	}
+	return /* @__PURE__ */ T("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__ */ w("h2", {
+				className: "text-center font-semibold text-fg gds-heading",
+				children: i
+			}),
+			s !== void 0 && /* @__PURE__ */ w("div", {
+				className: "rounded-md bg-danger/10 px-3 py-2 text-xs text-danger",
+				children: s
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ w(o, { children: "Email" }), /* @__PURE__ */ w(a, {
+					type: "email",
+					value: m,
+					onChange: (e) => h(e.target.value),
+					placeholder: "you@example.com",
+					required: !0
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ w(o, { children: "Password" }), /* @__PURE__ */ w(a, {
+					type: "password",
+					value: g,
+					onChange: (e) => _(e.target.value),
+					placeholder: "••••••••",
+					required: !0
+				})]
+			}),
+			/* @__PURE__ */ w(d, {
+				checked: v,
+				onChange: y,
+				label: "Remember me"
+			}),
+			/* @__PURE__ */ w(n, {
+				type: "submit",
+				disabled: c,
+				className: "w-full",
+				children: c ? "Signing in..." : "Sign in"
+			})
+		]
+	});
+}), he = v(function({ onSend: t, defaultTo: n, className: r }, i) {
+	let a = x(null), o = x(null), s = x(null), c = y((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__ */ T("form", {
+		ref: i,
+		className: e("flex flex-col gap-3", r),
+		"data-component": "mail-composer",
+		onSubmit: c,
+		children: [
+			/* @__PURE__ */ w("input", {
+				ref: a,
+				type: "email",
+				placeholder: "To",
+				defaultValue: n ?? "",
+				className: l
+			}),
+			/* @__PURE__ */ w("input", {
+				ref: o,
+				type: "text",
+				placeholder: "Subject",
+				className: l
+			}),
+			/* @__PURE__ */ w("textarea", {
+				ref: s,
+				placeholder: "Body",
+				rows: 6,
+				className: e(l, "resize-none")
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ w("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"
+				})
+			})
+		]
+	});
+}), ge = v(function({ children: t, columns: n = 3, gap: r = 16, className: i }, a) {
+	let o = {
+		columnCount: n,
+		columnGap: `${r}px`
+	}, s = {
+		breakInside: "avoid",
+		marginBottom: `${r}px`
+	};
+	return /* @__PURE__ */ w("div", {
+		ref: a,
+		className: e(i),
+		style: o,
+		"data-component": "masonry",
+		children: _.map(t, (e) => e == null ? null : /* @__PURE__ */ w("div", {
+			style: s,
+			children: e
+		}))
+	});
+}), _e = {
+	default: "gds-gap",
+	lg: "gds-gap-lg",
+	sm: "gds-gap-sm"
+};
+function ve(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 ye = v(function({ aspectRatio: t = 1, children: n, className: i, columns: a = {
+	sm: 2,
+	md: 3,
+	lg: 4
+}, gap: o = "default" }, s) {
+	return /* @__PURE__ */ w("div", {
+		ref: s,
+		className: e("grid", ve(a), _e[o], i),
+		"data-component": "media-grid",
+		children: _.map(n, (e) => /* @__PURE__ */ w(r, {
+			ratio: t,
+			className: "overflow-hidden rounded-lg",
+			children: e
+		}))
+	});
+}), be = v(function({ title: n, children: r, glass: i, className: a }, o) {
+	return /* @__PURE__ */ T("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__ */ w("h2", {
+			className: "mb-3 gds-text-body font-semibold text-fg",
+			children: n
+		}), r]
+	});
+}), xe = v(function({ children: t, columns: n, className: r }, i) {
+	return /* @__PURE__ */ w("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
+	});
+}), Se = v(function({ logo: n, links: r, actions: i, sticky: a = !0, glass: o = !0, className: s }, c) {
+	return /* @__PURE__ */ T("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__ */ w("div", {
+				className: "flex-shrink-0",
+				children: n
+			}),
+			r !== void 0 && r.length > 0 && /* @__PURE__ */ w("div", {
+				className: "flex items-center gap-6",
+				children: r.map((t) => /* @__PURE__ */ w("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__ */ w("div", {
+				className: "flex items-center gap-3",
+				children: i
+			})
+		]
+	});
+}), Ce = v(function({ className: t, notifications: n, onRead: r, onReadAll: i, ...a }, o) {
+	return /* @__PURE__ */ T("div", {
+		className: e("gds-ctx gds-radius-card border border-border bg-surface", t),
+		"data-component": "notification-list",
+		ref: o,
+		...a,
+		children: [/* @__PURE__ */ T("div", {
+			className: "flex items-center justify-between border-b border-border px-4 py-2.5",
+			children: [/* @__PURE__ */ w("span", {
+				className: "text-sm font-semibold text-fg",
+				children: "Notifications"
+			}), i !== void 0 && /* @__PURE__ */ w("button", {
+				className: "text-xs text-accent hover:underline",
+				onClick: i,
+				type: "button",
+				children: "Mark all read"
+			})]
+		}), n.length === 0 ? /* @__PURE__ */ w("div", {
+			className: "px-4 py-6 text-center text-xs text-fg-muted",
+			children: "No notifications"
+		}) : /* @__PURE__ */ w("div", {
+			className: "divide-y divide-border",
+			children: n.map((t) => /* @__PURE__ */ w("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__ */ T("div", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ w("div", {
+							className: "text-xs font-medium text-fg",
+							children: t.title
+						}),
+						t.message !== void 0 && /* @__PURE__ */ w("div", {
+							className: "mt-0.5 text-xs text-fg-muted",
+							children: t.message
+						}),
+						/* @__PURE__ */ w("div", {
+							className: "mt-1 text-[10px] text-fg-muted",
+							children: t.timestamp
+						})
+					]
+				})
+			}, t.id))
+		})]
+	});
+}), we = v(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__ */ T("div", {
+		className: e("gds-ctx rounded-lg border border-border bg-surface gds-pad", t),
+		"data-component": "onboarding-card",
+		ref: a,
+		...i,
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "mb-3 flex items-center justify-between",
+				children: [/* @__PURE__ */ w("h3", {
+					className: "gds-heading font-semibold text-fg",
+					children: r
+				}), /* @__PURE__ */ T("span", {
+					className: "gds-text-label text-fg-muted",
+					children: [
+						o,
+						"/",
+						n.length
+					]
+				})]
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "mb-4 h-1.5 w-full overflow-hidden rounded-full bg-border",
+				children: /* @__PURE__ */ w("div", {
+					className: "h-full rounded-full bg-accent transition-all",
+					style: { width: `${s}%` }
+				})
+			}),
+			/* @__PURE__ */ w("ul", {
+				className: "flex flex-col gds-gap",
+				children: n.map((t, n) => /* @__PURE__ */ T("li", {
+					className: "flex items-center justify-between gds-gap",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center gds-gap-sm",
+						children: [/* @__PURE__ */ w("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__ */ w("span", {
+							className: e("text-sm", t.completed ? "text-fg-muted line-through" : "text-fg"),
+							children: t.label
+						})]
+					}), t.action !== void 0 && !t.completed && t.action]
+				}, n))
+			})
+		]
+	});
+}), Te = /* @__PURE__ */ w("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ w("path", { d: "M4.5 3l3 3-3 3" })
+}), Ee = v(function({ actions: t, breadcrumb: n, className: r, subtitle: i, title: a }, o) {
+	return /* @__PURE__ */ T("div", {
+		ref: o,
+		className: e("flex flex-col gds-gap-sm", r),
+		"data-component": "page-header",
+		children: [n !== void 0 && n.length > 0 && /* @__PURE__ */ w("nav", {
+			"aria-label": "Breadcrumb",
+			children: /* @__PURE__ */ w("ol", {
+				className: "flex items-center gds-gap-sm text-[11px] text-fg-muted",
+				children: n.map((e, t) => /* @__PURE__ */ T("li", {
+					className: "flex items-center gds-gap-sm",
+					children: [t > 0 && /* @__PURE__ */ w("span", {
+						className: "text-fg-muted/50",
+						"aria-hidden": "true",
+						children: Te
+					}), e.href === void 0 ? /* @__PURE__ */ w("span", { children: e.label }) : /* @__PURE__ */ w("a", {
+						href: e.href,
+						className: "transition-colors hover:text-fg",
+						children: e.label
+					})]
+				}, t))
+			})
+		}), /* @__PURE__ */ T("div", {
+			className: "flex items-center justify-between gds-gap",
+			children: [/* @__PURE__ */ T("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ w("h1", {
+					className: "gds-heading font-semibold text-fg",
+					children: a
+				}), i !== void 0 && /* @__PURE__ */ w("p", {
+					className: "mt-0.5 gds-text-body text-fg-muted",
+					children: i
+				})]
+			}), t !== void 0 && /* @__PURE__ */ w("div", {
+				className: "flex shrink-0 items-center gds-gap-sm",
+				children: t
+			})]
+		})]
+	});
+}), De = v(function({ chart: t, className: n, metrics: r, transactions: i, ...a }, o) {
+	return /* @__PURE__ */ T("div", {
+		className: e("gds-ctx flex flex-col gds-gap", n),
+		"data-component": "payroll-dashboard",
+		ref: o,
+		...a,
+		children: [r !== void 0 && /* @__PURE__ */ w("div", {
+			className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+			children: r
+		}), /* @__PURE__ */ T("div", {
+			className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+			children: [t !== void 0 && /* @__PURE__ */ w("div", {
+				className: "gds-radius-card border border-border bg-surface gds-pad",
+				children: t
+			}), i !== void 0 && /* @__PURE__ */ w("div", {
+				className: "gds-radius-card border border-border bg-surface gds-pad",
+				children: i
+			})]
+		})]
+	});
+}), Oe = v(function({ name: n, price: r, period: i = "/month", features: a, action: o, highlighted: s, glass: c, className: l }, u) {
+	return /* @__PURE__ */ T("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__ */ w("p", {
+				className: "font-semibold text-fg",
+				children: n
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "mt-2 flex items-baseline gap-1",
+				children: [/* @__PURE__ */ w("span", {
+					className: "text-3xl font-bold text-fg",
+					children: r
+				}), /* @__PURE__ */ w("span", {
+					className: "gds-text-body text-fg-muted",
+					children: i
+				})]
+			}),
+			a.length > 0 && /* @__PURE__ */ w("ul", {
+				className: "mt-4 flex flex-col gap-2",
+				children: a.map((e) => /* @__PURE__ */ T("li", {
+					className: "flex items-center gap-2 gds-text-body text-fg-muted",
+					children: [/* @__PURE__ */ w("svg", {
+						className: "h-4 w-4 shrink-0 text-success",
+						viewBox: "0 0 16 16",
+						fill: "none",
+						children: /* @__PURE__ */ w("path", {
+							d: "M3 8l3 3 7-7",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}), e]
+				}, e))
+			}),
+			o !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-auto pt-4",
+				children: o
+			})
+		]
+	});
+}), ke = v(function({ actions: n, avatar: r, className: i, glass: a, name: o, role: s, stats: c }, l) {
+	return /* @__PURE__ */ T("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__ */ w(u, {
+				name: o,
+				src: r,
+				size: "lg"
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "mt-3 text-sm font-semibold text-fg",
+				children: o
+			}),
+			s !== void 0 && /* @__PURE__ */ w("p", {
+				className: "mt-0.5 text-xs text-fg-muted",
+				children: s
+			}),
+			c !== void 0 && c.length > 0 && /* @__PURE__ */ w("div", {
+				className: "mt-3 flex w-full justify-center gds-gap",
+				children: c.map((e) => /* @__PURE__ */ T("div", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ w("span", {
+						className: "text-sm font-bold text-fg",
+						children: e.value
+					}), /* @__PURE__ */ w("span", {
+						className: "text-[10px] text-fg-muted",
+						children: e.label
+					})]
+				}, e.label))
+			}),
+			n !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-3 flex w-full justify-center gds-gap",
+				children: n
+			})
+		]
+	});
+}), Ae = v(function({ activity: t, className: n, progress: r, tasks: i, team: a }, o) {
+	return /* @__PURE__ */ T("div", {
+		className: e("grid grid-cols-2 gds-gap", n),
+		"data-component": "project-dashboard",
+		ref: o,
+		children: [
+			r !== void 0 && /* @__PURE__ */ w("section", {
+				"data-slot": "progress",
+				children: r
+			}),
+			a !== void 0 && /* @__PURE__ */ w("section", {
+				"data-slot": "team",
+				children: a
+			}),
+			t !== void 0 && /* @__PURE__ */ w("section", {
+				"data-slot": "activity",
+				children: t
+			}),
+			i !== void 0 && /* @__PURE__ */ w("section", {
+				"data-slot": "tasks",
+				children: i
+			})
+		]
+	});
+}), je = v(function({ mobile: t, tablet: n, desktop: r, className: i }, a) {
+	let o = n ?? t;
+	return /* @__PURE__ */ T("div", {
+		ref: a,
+		className: e(i),
+		"data-component": "responsive-container",
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: "block sm:hidden",
+				children: t
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "hidden sm:block lg:hidden",
+				children: o
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "hidden lg:block",
+				children: r
+			})
+		]
+	});
+});
+//#endregion
+//#region src/l7-patterns/server-overview.tsx
+function Me(e) {
+	return e >= 90 ? "danger" : e >= 70 ? "warning" : "success";
+}
+var Ne = "flex items-center gap-2", Pe = "w-8 text-[10px] text-fg-muted", Fe = "w-8 text-right text-[10px] font-mono text-fg-muted";
+function Q({ label: e, value: t }) {
+	return /* @__PURE__ */ T("div", {
+		className: Ne,
+		children: [
+			/* @__PURE__ */ w("span", {
+				className: Pe,
+				children: e
+			}),
+			/* @__PURE__ */ w(c, {
+				value: t,
+				variant: Me(t),
+				size: "sm"
+			}),
+			/* @__PURE__ */ T("span", {
+				className: Fe,
+				children: [t, "%"]
+			})
+		]
+	});
+}
+var Ie = v(function({ className: t, servers: n, ...r }, i) {
+	return /* @__PURE__ */ w("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__ */ T("div", {
+			className: "rounded-lg border border-border bg-surface p-3 gds-ctx",
+			children: [
+				/* @__PURE__ */ T("div", {
+					className: "flex items-center justify-between mb-2",
+					children: [/* @__PURE__ */ w("span", {
+						className: "gds-text-label font-medium text-fg",
+						children: t.name
+					}), /* @__PURE__ */ T("span", {
+						className: "inline-flex items-center gap-1.5",
+						children: [/* @__PURE__ */ w("span", { className: e("h-2 w-2 rounded-full", t.status === "online" ? "bg-success" : "bg-danger") }), /* @__PURE__ */ w("span", {
+							className: "text-xs text-fg-muted",
+							children: t.status
+						})]
+					})]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "text-xs text-fg-muted mb-2",
+					children: t.location
+				}),
+				t.metrics !== void 0 && /* @__PURE__ */ T("div", {
+					className: "flex flex-col gap-1.5",
+					children: [
+						/* @__PURE__ */ w(Q, {
+							label: "CPU",
+							value: t.metrics.cpu
+						}),
+						/* @__PURE__ */ w(Q, {
+							label: "MEM",
+							value: t.metrics.mem
+						}),
+						/* @__PURE__ */ w(Q, {
+							label: "DISK",
+							value: t.metrics.disk
+						})
+					]
+				})
+			]
+		}, t.name))
+	});
+});
+//#endregion
+//#region src/l7-patterns/settings-layout.tsx
+function Le({ className: t, defaultSection: n, sections: r }) {
+	let [i, a] = S(n ?? r[0]?.id ?? ""), o = r.find((e) => e.id === i);
+	return /* @__PURE__ */ T("div", {
+		className: e("flex gap-6", t),
+		"data-component": "settings-layout",
+		children: [/* @__PURE__ */ w("nav", {
+			className: "w-48 shrink-0",
+			children: /* @__PURE__ */ w("ul", {
+				className: "flex flex-col gap-0.5",
+				role: "list",
+				children: r.map((t) => /* @__PURE__ */ w("li", { children: /* @__PURE__ */ w("button", {
+					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),
+					children: t.label
+				}) }, t.id))
+			})
+		}), /* @__PURE__ */ w("div", {
+			className: "min-w-0 flex-1",
+			children: o === void 0 ? null : o.content
+		})]
+	});
+}
+//#endregion
+//#region src/l7-patterns/sidebar.tsx
+var Re = 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__ */ T("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__ */ w("div", {
+			className: "flex-1 overflow-hidden",
+			children: n
+		}), i !== void 0 && /* @__PURE__ */ w("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__ */ w("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__ */ w("polyline", { points: "15 18 9 12 15 6" })
+			})
+		})]
+	});
+});
+//#endregion
+//#region src/l7-patterns/skeleton-pattern.tsx
+function ze() {
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col gds-gap gds-ctx gds-pad gds-radius-card",
+		children: [
+			/* @__PURE__ */ w(l, {
+				variant: "rect",
+				height: 120
+			}),
+			/* @__PURE__ */ w(l, {
+				variant: "text",
+				width: "60%"
+			}),
+			/* @__PURE__ */ w(l, {
+				variant: "text",
+				lines: 2
+			})
+		]
+	});
+}
+function Be() {
+	return /* @__PURE__ */ T("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ w(l, { variant: "circle" }), /* @__PURE__ */ T("div", {
+			className: "flex flex-1 flex-col gap-2",
+			children: [/* @__PURE__ */ w(l, {
+				variant: "text",
+				width: "40%"
+			}), /* @__PURE__ */ w(l, {
+				variant: "text",
+				width: "80%"
+			})]
+		})]
+	});
+}
+function Ve() {
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col items-center gds-gap gds-ctx gds-pad",
+		children: [
+			/* @__PURE__ */ w(l, {
+				variant: "circle",
+				width: 64,
+				height: 64
+			}),
+			/* @__PURE__ */ w(l, {
+				variant: "text",
+				width: "30%"
+			}),
+			/* @__PURE__ */ w(l, {
+				variant: "text",
+				lines: 3
+			})
+		]
+	});
+}
+function $({ rows: e }) {
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ T("div", {
+			className: "flex gap-4",
+			children: [
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				})
+			]
+		}), Array.from({ length: e }, (e, t) => /* @__PURE__ */ T("div", {
+			className: "flex gap-4",
+			children: [
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				}),
+				/* @__PURE__ */ w(l, {
+					variant: "text",
+					width: "25%"
+				})
+			]
+		}, t))]
+	});
+}
+var He = v(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__ */ w("div", {
+		ref: a,
+		className: e("gds-ctx gds-radius-card", o, i),
+		"data-component": "skeleton-pattern",
+		"data-variant": "card",
+		children: /* @__PURE__ */ w(ze, {})
+	}) : t === "list" ? /* @__PURE__ */ w("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__ */ w(Be, {}, t))
+	}) : t === "profile" ? /* @__PURE__ */ w("div", {
+		ref: a,
+		className: e(o, i),
+		"data-component": "skeleton-pattern",
+		"data-variant": "profile",
+		children: /* @__PURE__ */ w(Ve, {})
+	}) : /* @__PURE__ */ w("div", {
+		ref: a,
+		className: e("gds-ctx gds-pad", o, i),
+		"data-component": "skeleton-pattern",
+		"data-variant": "table",
+		children: /* @__PURE__ */ w($, { rows: n })
+	});
+});
+//#endregion
+//#region src/l7-patterns/splash-screen.tsx
+function Ue() {
+	return /* @__PURE__ */ T("svg", {
+		className: "h-5 w-5 animate-spin text-accent",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ w("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ w("path", {
+			className: "opacity-75",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
+			fill: "currentColor"
+		})]
+	});
+}
+var We = v(function({ className: t, logo: n, message: r, title: i, visible: a, ...o }, s) {
+	return /* @__PURE__ */ T("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__ */ w("div", {
+				className: "mb-6",
+				children: n
+			}),
+			i !== void 0 && /* @__PURE__ */ w("h1", {
+				className: "mb-2 text-lg font-semibold text-fg",
+				children: i
+			}),
+			r !== void 0 && /* @__PURE__ */ w("p", {
+				className: "mb-8 text-sm text-fg-muted",
+				children: r
+			}),
+			/* @__PURE__ */ w(Ue, {})
+		]
+	});
+}), Ge = v(function({ className: t, defaultSplit: n = 50, left: r, minLeft: i = 20, minRight: a = 20, right: o, ...s }, c) {
+	let [l, u] = S(n), d = x(null), p = y((e) => {
+		let t = d.current;
+		if (t === null) return;
+		let n = t.offsetWidth;
+		if (n === 0) return;
+		let r = e / n * 100;
+		u((e) => {
+			let t = e + r;
+			return t < i ? i : t > 100 - a ? 100 - a : t;
+		});
+	}, [i, a]);
+	return /* @__PURE__ */ T("div", {
+		className: e("flex h-full w-full", t),
+		"data-component": "split-view",
+		ref: (e) => {
+			d.current = e, typeof c == "function" ? c(e) : c != null && (c.current = e);
+		},
+		...s,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: "overflow-auto",
+				style: { width: `${l}%` },
+				children: r
+			}),
+			/* @__PURE__ */ w(f, {
+				orientation: "vertical",
+				onResize: p
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "overflow-auto",
+				style: { width: `${100 - l}%` },
+				children: o
+			})
+		]
+	});
+}), Ke = {
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4"
+}, qe = v(function({ children: t, columns: n = 3, className: r }, i) {
+	return /* @__PURE__ */ w("div", {
+		ref: i,
+		className: e("grid gds-gap-lg", Ke[n], r),
+		"data-component": "stat-grid",
+		children: t
+	});
+});
+//#endregion
+//#region src/l7-patterns/stats-card.tsx
+function Je({ data: e }) {
+	if (e.length < 2) return null;
+	let t = Math.max(...e), n = Math.min(...e), r = t - n;
+	return /* @__PURE__ */ w("svg", {
+		className: "mt-2",
+		height: 24,
+		viewBox: "0 0 64 24",
+		width: 64,
+		children: /* @__PURE__ */ w("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)",
+			strokeWidth: 1.5
+		})
+	});
+}
+var Ye = v(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__ */ T("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__ */ T("div", {
+				className: "flex items-start justify-between",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2",
+					children: [n !== void 0 && /* @__PURE__ */ w("div", {
+						className: "text-fg-muted/50",
+						children: n
+					}), /* @__PURE__ */ w("p", {
+						className: "gds-text-body text-fg-muted",
+						children: r
+					})]
+				}), a !== void 0 && /* @__PURE__ */ T("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 ? "↑" : "↓",
+						u ? "+" : "",
+						a,
+						"%"
+					]
+				})]
+			}),
+			/* @__PURE__ */ w("p", {
+				className: "mt-1 text-2xl font-bold text-fg",
+				children: i
+			}),
+			o !== void 0 && o.length >= 2 && /* @__PURE__ */ w(Je, { data: o })
+		]
+	});
+}), Xe = v(function({ code: t, title: n, description: r, action: i, secondaryAction: a, illustration: o, className: s }, c) {
+	return /* @__PURE__ */ T("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__ */ w("div", {
+				className: "mb-2",
+				children: o
+			}),
+			t !== void 0 && /* @__PURE__ */ w("p", {
+				className: "text-6xl font-bold text-fg-muted/10",
+				children: t
+			}),
+			/* @__PURE__ */ w("h1", {
+				className: "text-xl font-semibold text-fg",
+				children: n
+			}),
+			r !== void 0 && /* @__PURE__ */ w("p", {
+				className: "max-w-md text-fg-muted",
+				children: r
+			}),
+			(i !== void 0 || a !== void 0) && /* @__PURE__ */ T("div", {
+				className: "mt-2 flex items-center gap-3",
+				children: [i, a]
+			})
+		]
+	});
+}), Ze = v(function({ steps: t, onComplete: r, completeLabel: i = "Complete", glass: a = !1, className: o, ...s }, c) {
+	let [l, u] = S(0), d = l === 0, f = l === t.length - 1, p = t.map((e) => ({
+		label: e.title,
+		description: e.description
+	}));
+	return /* @__PURE__ */ T("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__ */ w(g, {
+				steps: p,
+				current: l,
+				className: "mb-6"
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "min-h-[120px] flex-1",
+				children: t[l]?.content
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "mt-6 flex items-center justify-between",
+				children: [/* @__PURE__ */ w(n, {
+					variant: "secondary",
+					size: "sm",
+					disabled: d,
+					onClick: () => u((e) => e - 1),
+					children: "Previous"
+				}), f ? /* @__PURE__ */ w(n, {
+					size: "sm",
+					onClick: r,
+					children: i
+				}) : /* @__PURE__ */ w(n, {
+					size: "sm",
+					onClick: () => u((e) => e + 1),
+					children: "Next"
+				})]
+			})
+		]
+	});
+}), Qe = v(function({ children: n, className: r, glass: i = !0, threshold: a = 0, ...o }, s) {
+	let [c, l] = S(!1);
+	return b(() => {
+		function e() {
+			l(window.scrollY > a);
+		}
+		return window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
+	}, [a]), /* @__PURE__ */ w("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,
+		ref: s,
+		...o,
+		children: n
+	});
+}), $e = v(function({ quote: n, author: r, role: i, avatar: a, rating: o, glass: s, className: c }, l) {
+	return /* @__PURE__ */ T("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__ */ w("svg", {
+				className: "mb-3 h-6 w-6 text-fg-muted opacity-30",
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				children: /* @__PURE__ */ w("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__ */ w("p", {
+				className: "gds-text-body italic text-fg",
+				children: n
+			}),
+			o !== void 0 && /* @__PURE__ */ w("div", {
+				className: "mt-3 flex gap-0.5",
+				children: Array.from({ length: 5 }, (t, n) => /* @__PURE__ */ w("svg", {
+					className: e("h-4 w-4", n < o ? "text-warning" : "text-fg-muted/30"),
+					viewBox: "0 0 20 20",
+					fill: "currentColor",
+					children: /* @__PURE__ */ w("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__ */ T("div", {
+				className: "mt-4 flex items-center gap-3",
+				children: [a !== void 0 && /* @__PURE__ */ w("img", {
+					src: a,
+					alt: r,
+					className: "h-10 w-10 rounded-full object-cover"
+				}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+					className: "text-sm font-medium text-fg",
+					children: r
+				}), i !== void 0 && /* @__PURE__ */ w("p", {
+					className: "text-xs text-fg-muted",
+					children: i
+				})] })]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/l7-patterns/timeline-steps.tsx
+function et({ steps: t, className: n }) {
+	return /* @__PURE__ */ w("div", {
+		"data-component": "timeline-steps",
+		className: e("flex items-start", n),
+		children: t.map((n, r) => /* @__PURE__ */ T("div", {
+			className: "flex flex-1 items-start",
+			children: [/* @__PURE__ */ T("div", {
+				className: "flex flex-col items-center",
+				children: [/* @__PURE__ */ w("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__ */ w("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ w("polyline", { points: "20 6 9 17 4 12" })
+					}) : r + 1
+				}), /* @__PURE__ */ T("div", {
+					className: "mt-2 text-center",
+					children: [/* @__PURE__ */ w("div", {
+						className: "text-xs font-medium text-fg",
+						children: n.label
+					}), n.description !== void 0 && /* @__PURE__ */ w("div", {
+						className: "mt-0.5 text-[10px] text-fg-muted",
+						children: n.description
+					})]
+				})]
+			}), r < t.length - 1 && /* @__PURE__ */ w("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 tt = v(function({ children: n, className: r, glass: i, position: a = "top", ...o }, s) {
+	let c = a === "floating", l = i ?? c;
+	return /* @__PURE__ */ w("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",
+		"data-position": a,
+		role: "toolbar",
+		...o,
+		children: n
+	});
+}), nt = v(function({ steps: t, currentStep: n, children: r, actions: i, className: a, ...o }, s) {
+	return /* @__PURE__ */ T("div", {
+		ref: s,
+		className: e("flex min-h-0 flex-1 flex-col gds-gap", a),
+		"data-component": "wizard-layout",
+		...o,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: "shrink-0 gds-pad-x",
+				children: /* @__PURE__ */ w(m, {
+					steps: t,
+					current: n
+				})
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "min-h-0 flex-1 overflow-auto gds-pad-x",
+				children: r
+			}),
+			i !== void 0 && /* @__PURE__ */ w("div", {
+				className: "flex shrink-0 items-center justify-end gds-gap gds-pad-x gds-pad-y border-t border-border",
+				children: i
+			})
+		]
+	});
+});
+//#endregion
+export { re as $, me as A, V as B, Ce as C, ye as D, be as E, ae as F, I as G, z as H, ie as I, N as J, F as K, X as L, se as M, Z as N, ge as O, oe as P, O as Q, G as R, we as S, xe as T, R as U, B as V, L as W, j as X, M as Y, A as Z, Ae as _, Qe as a, De as b, Ye as c, We as d, ne as et, He as f, je as g, Ie as h, $e as i, pe as j, he as k, qe as l, Le as m, tt as n, Ze as o, Re as p, P as q, et as r, Xe as s, nt as t, te as tt, Ge as u, ke as v, Se as w, Ee as x, Oe as y, H as z };
+
+//# sourceMappingURL=l7-patterns-DZXveS4Y.js.map