@juwel-development/design-system 1.0.0 → 2.0.0

package/dist/design-system.js

@@ -1,42 +1,43 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useId as n } from "react";
 import './index.css';//#region node_modules/clsx/dist/clsx.mjs
-function t(e) {
-	var n, r, i = "";
+function r(e) {
+	var t, n, i = "";
 	if (typeof e == "string" || typeof e == "number") i += e;
 	else if (typeof e == "object") {
 		if (Array.isArray(e)) {
 			var a = e.length;
-			for (n = 0; n < a; n++) e[n] && (r = t(e[n])) && (i && (i += " "), i += r);
-		} else for (r in e) e[r] && (i && (i += " "), i += r);
+			for (t = 0; t < a; t++) e[t] && (n = r(e[t])) && (i && (i += " "), i += n);
+		} else for (n in e) e[n] && (i && (i += " "), i += n);
 	}
 	return i;
 }
-function n() {
-	for (var e, n, r = 0, i = "", a = arguments.length; r < a; r++) (e = arguments[r]) && (n = t(e)) && (i && (i += " "), i += n);
+function i() {
+	for (var e, t, n = 0, i = "", a = arguments.length; n < a; n++) (e = arguments[n]) && (t = r(e)) && (i && (i += " "), i += t);
 	return i;
 }
 //#endregion
 //#region node_modules/class-variance-authority/dist/index.mjs
-var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((e, t) => (n) => {
-	if (t?.variants == null) return i(e, n?.class, n?.className);
-	let { variants: a, defaultVariants: o } = t, s = Object.keys(a).map((e) => {
-		let t = n?.[e], i = o?.[e];
+var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e, t) => (n) => {
+	if (t?.variants == null) return o(e, n?.class, n?.className);
+	let { variants: r, defaultVariants: i } = t, s = Object.keys(r).map((e) => {
+		let t = n?.[e], o = i?.[e];
 		if (t === null) return null;
-		let s = r(t) || r(i);
-		return a[e][s];
+		let s = a(t) || a(o);
+		return r[e][s];
 	}), c = n && Object.entries(n).reduce((e, t) => {
 		let [n, r] = t;
 		return r === void 0 || (e[n] = r), e;
 	}, {});
-	return i(e, s, t?.compoundVariants?.reduce((e, t) => {
-		let { class: n, className: r, ...i } = t;
-		return Object.entries(i).every((e) => {
+	return o(e, s, t?.compoundVariants?.reduce((e, t) => {
+		let { class: n, className: r, ...a } = t;
+		return Object.entries(a).every((e) => {
 			let [t, n] = e;
 			return Array.isArray(n) ? n.includes({
-				...o,
+				...i,
 				...c
 			}[t]) : {
-				...o,
+				...i,
 				...c
 			}[t] === n;
 		}) ? [
@@ -45,61 +46,565 @@ var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-})("py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface", {
+}, c = s("inline-flex", { variants: { cut: {
+	full: "",
+	compact: ""
+} } }), l = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+	"aria-hidden": "true",
+	"data-cut": n,
+	className: c({ cut: n }),
+	"data-testid": i,
+	children: r
+}) : /* @__PURE__ */ e("span", {
+	role: "img",
+	"aria-label": t,
+	"data-cut": n,
+	className: c({ cut: n }),
+	"data-testid": i,
+	children: r
+}), u = s("m-0 list-none p-0"), d = s([
+	"flex items-start gap-3 font-primary text-body leading-body text-foreground",
+	"before:mt-[0.7em] before:h-[var(--tick-thickness)] before:w-[var(--tick-length)] before:shrink-0 before:bg-[var(--color-rule)] before:content-['']",
+	"[&:not(:first-child)]:mt-[var(--space-stack)] [&:not(:first-child)]:border-border [&:not(:first-child)]:border-t [&:not(:first-child)]:border-solid [&:not(:first-child)]:pt-[var(--space-stack)]"
+].join(" ")), f = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
+		className: u(),
+		role: "list",
+		"data-testid": n,
+		children: t
+	}),
+	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
+		className: d(),
+		children: t
+	})
+}, p = s([
+	"grid gap-[var(--space-stack)] py-6",
+	"border-b border-solid border-border first:border-t",
+	"lg:grid-cols-[16rem_minmax(0,1fr)] lg:items-baseline lg:gap-x-12",
+	"lg:[&>dt]:col-start-1 lg:[&>dd]:col-start-2 lg:[&>dd]:row-start-1"
+].join(" ")), m = s("font-primary text-subtitle leading-subtitle text-foreground"), h = s("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), g = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
+		"data-testid": n,
+		children: t
+	}),
+	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: p(),
+		"data-testid": n,
+		children: t
+	}),
+	Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
+		className: m(),
+		children: t
+	}),
+	Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
+		className: h(),
+		children: t
+	})
+}, _ = s("block w-full object-cover bg-backing", {
+	variants: {
+		ratio: {
+			portrait: "aspect-portrait",
+			square: "aspect-square",
+			landscape: "aspect-landscape",
+			wide: "aspect-wide"
+		},
+		focus: {
+			center: "object-center",
+			top: "object-top",
+			bottom: "object-bottom",
+			left: "object-left",
+			right: "object-right"
+		}
+	},
+	defaultVariants: { focus: "center" }
+}), v = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, priority: u, testId: d }) => {
+	let f = /* @__PURE__ */ e("img", {
+		src: n,
+		alt: r,
+		width: i,
+		height: a,
+		className: _({
+			ratio: o,
+			focus: s
+		}),
+		srcSet: c?.srcSet,
+		sizes: c?.sizes,
+		loading: u ? "eager" : "lazy",
+		fetchPriority: u ? "high" : void 0,
+		decoding: "async",
+		"data-testid": l === void 0 ? d : void 0
+	});
+	return l === void 0 ? f : /* @__PURE__ */ t("figure", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		"data-testid": d,
+		children: [f, /* @__PURE__ */ e("figcaption", {
+			className: "font-secondary text-label tracking-label text-muted",
+			children: l
+		})]
+	});
+}, y = s(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), b = s("lg:sticky lg:top-6"), x = s("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), ee = s("block pt-1 font-secondary text-label tracking-label text-foreground"), S = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: y(),
+		"data-testid": n,
+		children: t
+	}),
+	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
+		className: b(),
+		"data-testid": i,
+		"aria-hidden": "true",
+		children: [n !== void 0 && /* @__PURE__ */ e("span", {
+			className: x(),
+			children: n
+		}), /* @__PURE__ */ e("span", {
+			className: ee(),
+			children: r
+		})]
+	}),
+	Content: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		"data-testid": n,
+		children: t
+	})
+}, C = s([
+	"[&:not([data-notes])]:overflow-x-auto",
+	"[&>table]:w-full [&>table]:border-collapse [&>table]:text-left",
+	"[&_caption]:pb-3 [&_caption]:text-left [&_caption]:font-secondary [&_caption]:text-label [&_caption]:tracking-label [&_caption]:text-muted",
+	"[&>table>*:nth-child(2)>tr:first-child]:border-rule",
+	"[&[data-notes=supplementary]_[data-variant=note]]:max-md:hidden",
+	"[&[data-notes=content]>table]:max-md:block",
+	"[&[data-notes=content]_thead]:max-md:block [&[data-notes=content]_tbody]:max-md:block [&[data-notes=content]_tfoot]:max-md:block",
+	"[&[data-notes=content]_tr]:max-md:block [&[data-notes=content]_td]:max-md:block [&[data-notes=content]_th]:max-md:block"
+].join(" ")), w = s("border-t border-solid border-border"), T = s("px-4 py-2 text-small first:pl-0 last:pr-0", {
+	variants: {
+		variant: {
+			value: "font-primary text-foreground tabular-nums",
+			note: "font-secondary text-muted"
+		},
+		align: {
+			left: "text-left",
+			right: "text-right",
+			center: "text-center"
+		}
+	},
+	defaultVariants: {
+		variant: "value",
+		align: "left"
+	}
+}), E = s("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+	variants: { align: {
+		left: "text-left",
+		right: "text-right",
+		center: "text-center"
+	} },
+	defaultVariants: { align: "left" }
+}), D = {
+	Root: ({ caption: n, notes: r, children: i, testId: a }) => {
+		let o = /* @__PURE__ */ t("table", { children: [/* @__PURE__ */ e("caption", { children: n }), i] });
+		return r === void 0 ? /* @__PURE__ */ e("section", {
+			className: C(),
+			"data-testid": a,
+			"aria-label": n,
+			tabIndex: 0,
+			children: o
+		}) : /* @__PURE__ */ e("div", {
+			className: C(),
+			"data-notes": r,
+			"data-testid": a,
+			children: o
+		});
+	},
+	Head: ({ children: t }) => /* @__PURE__ */ e("thead", { children: t }),
+	Body: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
+	Footer: ({ children: t }) => /* @__PURE__ */ e("tfoot", { children: t }),
+	Row: ({ children: t, testId: n }) => /* @__PURE__ */ e("tr", {
+		className: w(),
+		"data-testid": n,
+		children: t
+	}),
+	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
+		scope: t,
+		className: E({ align: n }),
+		children: r
+	}),
+	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
+		className: T({
+			variant: t,
+			align: n
+		}),
+		"data-variant": t ?? "value",
+		children: r
+	})
+}, O = s("font-secondary text-label tracking-label font-medium", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "muted" }
+}), k = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: O({ color: n }),
+	"data-testid": r,
+	children: t
+}), A = s("font-primary text-display leading-display tracking-optical", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), j = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
+	className: A({ color: n }),
+	"data-testid": r,
+	children: t
+}), M = s("font-primary text-title leading-title tracking-optical", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
+	className: M({ color: n }),
+	"data-testid": r,
+	children: t
+}), P = s("font-primary text-subtitle leading-subtitle", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
+	className: P({ color: n }),
+	"data-testid": r,
+	children: t
+}), I = s("font-primary text-body leading-body font-bold", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
+	className: I({ color: n }),
+	"data-testid": r,
+	children: t
+}), R = s("font-primary text-body leading-body font-semibold", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), z = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
+	className: R({ color: n }),
+	"data-testid": r,
+	children: t
+}), B = s("font-primary text-body leading-body font-medium", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), V = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
+	className: B({ color: n }),
+	"data-testid": r,
+	children: t
+}), H = s("font-primary text-body leading-body", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: H({ color: n }),
+	"data-testid": r,
+	children: t
+}), W = s("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), G = s("font-primary text-lede leading-lede text-foreground"), te = s("font-primary text-body leading-body", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), K = s("font-primary text-small text-muted"), q = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: W(),
+		"data-testid": n,
+		children: t
+	}),
+	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
+		className: G(),
+		children: t
+	}),
+	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
+		className: te({ color: t }),
+		children: n
+	}),
+	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
+		className: K(),
+		children: t
+	})
+}, J = s("transition-colors duration-[var(--motion-duration-color)] rounded-[var(--radius-control)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
 	variants: { variant: {
-		primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg transition-all duration-200 hover:bg-primary-hover focus-visible:ring-primary-ring",
-		secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg transition-all duration-200 hover:bg-secondary-hover focus-visible:ring-secondary-ring",
-		ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline transition-all duration-200 focus-visible:ring-ring"
+		primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground hover:bg-primary-hover",
+		secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+		ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)]"
 	} },
 	defaultVariants: { variant: "primary" }
-}), o = ({ children: t, disabled: n, testId: r, variant: i, onClick$: o, ariaLabel: s, type: c = "button" }) => /* @__PURE__ */ e("button", {
-	type: c,
+}), Y = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+	type: s,
 	"data-testid": r,
-	className: a({ variant: i }),
-	onClick: () => o?.next(),
+	className: J({ variant: i }),
+	onClick: () => a?.next(),
 	disabled: n,
-	"aria-label": s,
+	"aria-label": o,
 	children: t
-}), s = {
+}), X = s("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted", {
+	variants: { variant: {
+		text: "",
+		email: "",
+		url: ""
+	} },
+	defaultVariants: { variant: "text" }
+}), Z = ({ label: r, name: i, variant: a, required: o, invalid: s, disabled: c, defaultValue: l, placeholder: u, autocomplete: d, hint: f, errorMessage: p, onInput$: m, testId: h }) => {
+	let g = n(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [f ? v : void 0, s ? y : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ t("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [
+			/* @__PURE__ */ e("label", {
+				htmlFor: _,
+				className: "font-medium text-foreground",
+				children: r
+			}),
+			/* @__PURE__ */ e("input", {
+				id: _,
+				name: i,
+				type: a ?? "text",
+				className: X({ variant: a }),
+				required: o,
+				disabled: c,
+				defaultValue: l,
+				placeholder: u,
+				autoComplete: d,
+				"aria-invalid": s || void 0,
+				"aria-describedby": b,
+				"data-testid": h,
+				onInput: (e) => m?.next(e.currentTarget.value)
+			}),
+			!o && /* @__PURE__ */ e("span", {
+				className: "text-muted text-sm",
+				children: "optional"
+			}),
+			f && /* @__PURE__ */ e("p", {
+				id: v,
+				className: "text-muted text-sm",
+				children: f
+			}),
+			s && /* @__PURE__ */ e("p", {
+				id: y,
+				className: "text-error text-sm",
+				children: p
+			})
+		]
+	});
+}, Q = s("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+	variants: { treatment: {
+		prose: "text-link underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] hover:decoration-[length:var(--underline-thickness-hover)]",
+		quiet: "text-muted no-underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] transition-colors duration-[var(--motion-duration-color)] hover:text-foreground hover:underline",
+		"label-link": "text-inherit no-underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] hover:underline",
+		graphic: "text-inherit no-underline"
+	} },
+	defaultVariants: { treatment: "prose" }
+}), ne = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
+	href: t,
+	className: Q({ treatment: r }),
+	target: i ? "_blank" : void 0,
+	rel: i ? "noopener noreferrer" : void 0,
+	"aria-current": a ? "page" : void 0,
+	"data-testid": o,
+	children: n
+}), re = s("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted"), ie = ({ label: r, name: i, required: a, invalid: o, disabled: s, defaultValue: c, placeholder: l, autocomplete: u, hint: d, errorMessage: f, onInput$: p, testId: m }) => {
+	let h = n(), g = `${h}-control`, _ = `${h}-hint`, v = `${h}-error`, y = [d ? _ : void 0, o ? v : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ t("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [
+			/* @__PURE__ */ e("label", {
+				htmlFor: g,
+				className: "font-medium text-foreground",
+				children: r
+			}),
+			/* @__PURE__ */ e("textarea", {
+				id: g,
+				name: i,
+				className: re(),
+				required: a,
+				disabled: s,
+				defaultValue: c,
+				placeholder: l,
+				autoComplete: u,
+				"aria-invalid": o || void 0,
+				"aria-describedby": y,
+				"data-testid": m,
+				onInput: (e) => p?.next(e.currentTarget.value)
+			}),
+			!a && /* @__PURE__ */ e("span", {
+				className: "text-muted text-sm",
+				children: "optional"
+			}),
+			d && /* @__PURE__ */ e("p", {
+				id: _,
+				className: "text-muted text-sm",
+				children: d
+			}),
+			o && /* @__PURE__ */ e("p", {
+				id: v,
+				className: "text-error text-sm",
+				children: f
+			})
+		]
+	});
+}, ae = s("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+	variants: { edge: {
+		none: "",
+		rule: "border-t border-solid border-rule"
+	} },
+	defaultVariants: { edge: "rule" }
+}), oe = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
+	className: ae({ edge: t }),
+	"data-testid": r,
+	children: n
+}), se = s("text-sm", {
+	variants: { state: {
+		idle: "text-muted",
+		sending: "text-muted",
+		sent: "text-success",
+		failed: "text-error"
+	} },
+	defaultVariants: { state: "idle" }
+}), ce = {
+	sent: "status",
+	failed: "alert"
+}, le = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+	if (i === "sent" && !s) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
+	let l = i !== "sent", u = ce[i];
+	return /* @__PURE__ */ t("form", {
+		action: n,
+		method: r,
+		"aria-busy": i === "sending" || void 0,
+		"data-testid": c,
+		className: "flex max-w-[var(--measure)] flex-col gap-[var(--space-region)]",
+		children: [
+			l && /* @__PURE__ */ e("div", {
+				className: "flex flex-col gap-[var(--space-stack)]",
+				children: a
+			}),
+			l && o && /* @__PURE__ */ e("div", {
+				className: "flex flex-row gap-[var(--space-stack)]",
+				children: o
+			}),
+			s && /* @__PURE__ */ e("p", {
+				role: u,
+				className: se({ state: i }),
+				children: s
+			})
+		]
+	});
+}, ue = s([
+	"flex items-baseline justify-between",
+	"font-secondary text-label tracking-label text-muted",
+	"py-[var(--space-region)] px-[var(--gutter)]",
+	"[&_[aria-current=page]]:text-foreground"
+].join(" "), {
+	variants: { edge: {
+		none: "",
+		rule: "border-b border-solid border-rule"
+	} },
+	defaultVariants: { edge: "rule" }
+}), de = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: ue({ edge: n }),
+	"data-testid": o,
+	children: [/* @__PURE__ */ e("div", { children: r }), /* @__PURE__ */ e("nav", {
+		"aria-label": i,
+		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
+		children: a
+	})]
+}), fe = s("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+	variants: { place: {
+		start: "justify-start",
+		center: "justify-center",
+		between: "justify-between"
+	} },
+	defaultVariants: { place: "center" }
+}), pe = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: fe({ place: t }),
+	"data-testid": r,
+	children: n
+}), $ = s("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), me = s("font-primary text-title leading-title tracking-optical text-foreground"), he = s("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), ge = s("font-primary text-small text-muted max-w-[var(--measure)]"), _e = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
+	className: $(),
+	"data-testid": a,
+	children: [
+		/* @__PURE__ */ e("h1", {
+			className: me(),
+			children: n
+		}),
+		r !== void 0 && /* @__PURE__ */ e("p", {
+			className: he(),
+			children: r
+		}),
+		i !== void 0 && /* @__PURE__ */ e("p", {
+			className: ge(),
+			children: i
+		})
+	]
+}), ve = s(["py-[var(--space-band)]", "[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"].join(" "), {
+	variants: { bleed: {
+		inset: "px-[var(--gutter)]",
+		full: ""
+	} },
+	defaultVariants: { bleed: "inset" }
+}), ye = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+	"data-section": "",
+	className: ve({ bleed: t }),
+	"aria-label": n,
+	"data-testid": i,
+	children: r
+}), be = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
 	border: "#e2e8f0",
+	controlBorder: "#64748b",
+	rule: "#808fa3",
+	backing: "#f1f5f9",
 	primary: "#8b5cf6",
 	primaryHover: "#7c3aed",
 	primaryForeground: "#f8fafc",
-	primaryRing: "#a78bfa",
 	secondary: "#0ea5e9",
 	secondaryHover: "#0284c7",
 	secondaryForeground: "#f8fafc",
-	secondaryRing: "#38bdf8",
 	disabled: "#94a3b8",
 	disabledHover: "#64748b",
-	ring: "#94a3b8",
+	focusRing: "#475569",
+	link: "#2563eb",
 	success: "#10b981",
 	warning: "#f59e0b",
 	error: "#d63384",
 	info: "#06b6d4"
-}, c = {
+}, xe = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
 	border: "#334155",
+	controlBorder: "#94a3b8",
+	rule: "#5b6a80",
+	backing: "#1e293b",
 	primary: "#7c3aed",
 	primaryHover: "#8b5cf6",
 	primaryForeground: "#f8fafc",
-	primaryRing: "#a78bfa",
 	secondary: "#0284c7",
 	secondaryHover: "#0ea5e9",
 	secondaryForeground: "#f8fafc",
-	secondaryRing: "#38bdf8",
 	disabled: "#475569",
 	disabledHover: "#334155",
-	ring: "#64748b",
+	focusRing: "#cbd5e1",
+	link: "#60a5fa",
 	success: "#34d399",
 	warning: "#fbbf24",
 	error: "#f48fb1",
 	info: "#22d3ee"
 };
 //#endregion
-export { o as Button, c as dark, s as light };
+export { l as Brandmark, Y as Button, f as Checklist, g as DefinitionList, k as Eyebrow, v as Figure, oe as Footer, le as Form, j as H1, N as H2, F as H3, L as H4, z as H5, V as H6, de as Header, pe as Hero, Z as Input, ne as Link, U as P, _e as PageHead, q as Prose, S as Rail, ye as Section, D as Table, ie as TextArea, xe as dark, be as light };