@juwel-development/design-system 3.0.0 → 3.2.0

package/dist/design-system.js

@@ -46,61 +46,112 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-}, u = l("inline-flex", { variants: { cut: {
+}, u = l("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
+	variants: {
+		gap: {
+			stack: "gap-x-[var(--space-stack)]",
+			region: "gap-x-[var(--space-region)]"
+		},
+		justify: {
+			start: "",
+			between: "justify-between"
+		}
+	},
+	defaultVariants: {
+		gap: "region",
+		justify: "start"
+	}
+}), d = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
+	className: u({
+		gap: t,
+		justify: n
+	}),
+	"data-testid": i,
+	children: r
+}), f = l("flex", {
+	variants: {
+		gap: {
+			stack: "gap-[var(--space-stack)]",
+			region: "gap-[var(--space-region)]"
+		},
+		measure: {
+			true: "max-w-[var(--measure)]",
+			false: "",
+			action: "w-full max-w-[var(--measure-action)]"
+		},
+		direction: {
+			column: "flex-col",
+			split: "flex-col lg:flex-row lg:items-start"
+		}
+	},
+	defaultVariants: {
+		gap: "stack",
+		measure: !1,
+		direction: "column"
+	}
+}), p = ({ gap: t, measure: n, direction: r, children: i, testId: a }) => /* @__PURE__ */ e("div", {
+	className: f({
+		gap: t,
+		measure: n,
+		direction: r
+	}),
+	"data-testid": a,
+	children: i
+}), m = l("inline-flex", { variants: { cut: {
 	full: "",
 	compact: ""
-} } }), d = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+} } }), h = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
 	"aria-hidden": "true",
 	"data-cut": n,
-	className: u({ cut: n }),
+	className: m({ cut: n }),
 	"data-testid": i,
 	children: r
 }) : /* @__PURE__ */ e("span", {
 	role: "img",
 	"aria-label": t,
 	"data-cut": n,
-	className: u({ cut: n }),
+	className: m({ cut: n }),
 	"data-testid": i,
 	children: r
-}), f = l("m-0 list-none p-0"), p = l([
+}), g = l("m-0 list-none p-0"), _ = l([
 	"flex items-start gap-3 font-primary text-body leading-body text-foreground",
 	"before:mt-[0.35em] before:size-[calc(var(--tick-length)*0.7)] before:shrink-0 before:rotate-45 before:[border-top:var(--tick-thickness)_solid_var(--color-rule)] before:[border-right:var(--tick-thickness)_solid_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(" ")), m = {
+].join(" ")), v = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
-		className: f(),
+		className: g(),
 		role: "list",
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
-		className: p(),
+		className: _(),
 		children: t
 	})
-}, h = l([
+}, y = l([
 	"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(" ")), g = l("font-primary text-subtitle leading-subtitle text-foreground"), _ = l("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), v = {
+].join(" ")), b = l("font-primary text-subtitle leading-subtitle text-foreground"), x = l("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), S = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: h(),
+		className: y(),
 		"data-testid": n,
 		children: t
 	}),
 	Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
-		className: g(),
+		className: b(),
 		children: t
 	}),
 	Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
-		className: _(),
+		className: x(),
 		children: t
 	})
-}, y = l("block w-full object-cover bg-backing", {
+}, C = l("block w-full object-cover bg-backing", {
 	variants: {
 		ratio: {
 			portrait: "aspect-portrait",
@@ -117,46 +168,50 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		}
 	},
 	defaultVariants: { focus: "center" }
-}), b = ({ 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", {
+}), w = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, overlay: u, priority: d, testId: f }) => {
+	let p = u != null && typeof u != "boolean", m = /* @__PURE__ */ e("img", {
 		src: n,
 		alt: r,
 		width: i,
 		height: a,
-		className: y({
+		className: C({
 			ratio: o,
 			focus: s
 		}),
 		srcSet: c?.srcSet,
 		sizes: c?.sizes,
-		loading: u ? "eager" : "lazy",
-		fetchPriority: u ? "high" : void 0,
+		loading: d ? "eager" : "lazy",
+		fetchPriority: d ? "high" : void 0,
 		decoding: "async",
-		"data-testid": l === void 0 ? d : void 0
-	});
-	return l === void 0 ? f : /* @__PURE__ */ t("figure", {
+		"data-testid": l === void 0 && !p ? f : void 0
+	}), h = p ? /* @__PURE__ */ t("div", {
+		className: "relative",
+		"data-testid": l === void 0 ? f : void 0,
+		children: [m, u]
+	}) : m;
+	return l === void 0 ? h : /* @__PURE__ */ t("figure", {
 		className: "flex flex-col gap-[var(--space-stack)]",
-		"data-testid": d,
-		children: [f, /* @__PURE__ */ e("figcaption", {
+		"data-testid": f,
+		children: [h, /* @__PURE__ */ e("figcaption", {
 			className: "font-secondary text-label tracking-label text-muted",
 			children: l
 		})]
 	});
-}, x = l(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), S = l("lg:sticky lg:top-6"), C = l("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), w = l("block pt-1 font-secondary text-label tracking-label text-foreground"), T = {
+}, T = l(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), E = l("lg:sticky lg:top-6"), ee = l("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), te = l("block pt-1 font-secondary text-label tracking-label text-foreground"), D = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: x(),
+		className: T(),
 		"data-testid": n,
 		children: t
 	}),
 	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
-		className: S(),
+		className: E(),
 		"data-testid": i,
 		"aria-hidden": "true",
 		children: [n !== void 0 && /* @__PURE__ */ e("span", {
-			className: C(),
+			className: ee(),
 			children: n
 		}), /* @__PURE__ */ e("span", {
-			className: w(),
+			className: te(),
 			children: r
 		})]
 	}),
@@ -164,7 +219,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		"data-testid": n,
 		children: t
 	})
-}, E = l([
+}, O = l([
 	"[&: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",
@@ -173,7 +228,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	"[&[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(" ")), ee = l("border-t border-solid border-border"), D = l("px-4 py-2 text-small first:pl-0 last:pr-0", {
+].join(" ")), k = l("border-t border-solid border-border"), A = l("px-4 py-2 text-small first:pl-0 last:pr-0", {
 	variants: {
 		variant: {
 			value: "font-primary text-foreground tabular-nums",
@@ -189,24 +244,24 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		variant: "value",
 		align: "left"
 	}
-}), O = l("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+}), j = l("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" }
-}), k = {
+}), M = {
 	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: E(),
+			className: O(),
 			"data-testid": a,
 			"aria-label": n,
 			tabIndex: 0,
 			children: o
 		}) : /* @__PURE__ */ e("div", {
-			className: E(),
+			className: O(),
 			"data-notes": r,
 			"data-testid": a,
 			children: o
@@ -216,150 +271,160 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	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: ee(),
+		className: k(),
 		"data-testid": n,
 		children: t
 	}),
 	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
 		scope: t,
-		className: O({ align: n }),
+		className: j({ align: n }),
 		children: r
 	}),
 	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
-		className: D({
+		className: A({
 			variant: t,
 			align: n
 		}),
 		"data-variant": t ?? "value",
 		children: r
 	})
-}, A = l("font-secondary text-label tracking-label font-medium", {
+}, N = l("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "muted" }
-}), j = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: A({ color: n }),
+}), P = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: N({ color: n }),
 	"data-testid": r,
 	children: t
-}), M = l("font-primary text-display leading-display tracking-optical", {
+}), F = l("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
-	className: M({ color: n }),
+}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
+	className: F({ color: n }),
 	"data-testid": r,
 	children: t
-}), P = l("font-primary text-title leading-title tracking-optical", {
+}), L = l("font-primary text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
-	className: P({ color: n }),
+}), R = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
+	className: L({ color: n }),
 	"data-testid": r,
 	children: t
-}), I = l("font-primary text-subtitle leading-subtitle", {
+}), z = l("font-primary text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
-	className: I({ color: n }),
+}), B = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
+	className: z({ color: n }),
 	"data-testid": r,
 	children: t
-}), R = l("font-primary text-body leading-body font-bold", {
+}), V = l("font-primary text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), z = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
-	className: R({ color: n }),
+}), H = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
+	className: V({ color: n }),
 	"data-testid": r,
 	children: t
-}), B = l("font-primary text-body leading-body font-semibold", {
+}), U = l("font-primary text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), V = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
-	className: B({ color: n }),
+}), W = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
+	className: U({ color: n }),
 	"data-testid": r,
 	children: t
-}), H = l("font-primary text-body leading-body font-medium", {
+}), G = l("font-primary text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
-	className: H({ color: n }),
+}), K = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
+	className: G({ color: n }),
 	"data-testid": r,
 	children: t
-}), W = l("font-primary text-body leading-body", {
+}), q = l("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), G = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: W({ color: n }),
+}), J = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: q({ color: n }),
 	"data-testid": r,
 	children: t
-}), K = l("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), q = l("font-primary text-lede leading-lede text-foreground"), J = l("font-primary text-body leading-body", {
+}), Y = l("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Y = l("font-primary text-small text-muted"), X = {
+}), X = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: Y({ color: n }),
+	"data-testid": r,
+	children: t
+}), Z = l("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Q = l("font-primary text-lede leading-lede text-foreground"), ne = l("font-primary text-body leading-body", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), re = l("font-primary text-small text-muted"), ie = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: K(),
+		className: Z(),
 		"data-testid": n,
 		children: t
 	}),
 	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: q(),
+		className: Q(),
 		children: t
 	}),
 	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
-		className: J({ color: t }),
+		className: ne({ color: t }),
 		children: n
 	}),
 	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: Y(),
+		className: re(),
 		children: t
 	})
-}, te = l("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)]", {
+}, ae = l("font-primary text-body 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-[var(--control-min-width)] bg-primary text-primary-foreground hover:bg-primary-hover",
 		secondary: "px-4 sm:px-6 min-w-[var(--control-min-width)] 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" }
-}), Z = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+}), oe = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
 	type: s,
 	"data-testid": r,
-	className: te({ variant: i }),
+	className: ae({ variant: i }),
 	onClick: () => a?.next(),
 	disabled: n,
 	"aria-label": o,
 	children: t
-}), Q = l("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", {
+}), se = l("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body 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" }
-}), ne = ({ label: a, name: o, variant: s, required: c, optionalLabel: l, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
+}), ce = ({ label: a, name: o, variant: s, required: c, optionalLabel: l, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
 	let b = r(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = i(null);
 	return n(() => {
 		let e = v?.subscribe(() => {
@@ -371,7 +436,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		children: [
 			/* @__PURE__ */ e("label", {
 				htmlFor: x,
-				className: "font-medium text-foreground",
+				className: "font-secondary font-medium text-body text-foreground",
 				children: a
 			}),
 			/* @__PURE__ */ e("input", {
@@ -379,7 +444,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 				id: x,
 				name: o,
 				type: s ?? "text",
-				className: Q({ variant: s }),
+				className: se({ variant: s }),
 				required: c,
 				disabled: d,
 				defaultValue: f,
@@ -391,38 +456,38 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 				onInput: (e) => _?.next(e.currentTarget.value)
 			}),
 			!c && l && /* @__PURE__ */ e("span", {
-				className: "text-muted text-sm",
+				className: "font-secondary text-muted text-small",
 				children: l
 			}),
 			h && /* @__PURE__ */ e("p", {
 				id: S,
-				className: "text-muted text-sm",
+				className: "font-secondary text-muted text-small",
 				children: h
 			}),
 			u && /* @__PURE__ */ e("p", {
 				id: C,
-				className: "text-error text-sm",
+				className: "font-secondary text-error text-small",
 				children: g
 			})
 		]
 	});
-}, re = l("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, le = l("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",
+		quiet: "font-secondary 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" }
-}), ie = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
+}), ue = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
 	href: t,
-	className: re({ treatment: r }),
+	className: le({ treatment: r }),
 	target: i ? "_blank" : void 0,
 	rel: i ? "noopener noreferrer" : void 0,
 	"aria-current": a ? "page" : void 0,
 	"data-testid": o,
 	children: n
-}), ae = l("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"), oe = ({ label: a, name: o, required: s, optionalLabel: c, invalid: l, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
+}), de = l("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body 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"), fe = ({ label: a, name: o, required: s, optionalLabel: c, invalid: l, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
 	let y = r(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, l ? S : void 0].filter(Boolean).join(" ") || void 0, w = i(null);
 	return n(() => {
 		let e = _?.subscribe(() => {
@@ -434,14 +499,14 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		children: [
 			/* @__PURE__ */ e("label", {
 				htmlFor: b,
-				className: "font-medium text-foreground",
+				className: "font-secondary font-medium text-body text-foreground",
 				children: a
 			}),
 			/* @__PURE__ */ e("textarea", {
 				ref: w,
 				id: b,
 				name: o,
-				className: ae(),
+				className: de(),
 				required: s,
 				disabled: u,
 				defaultValue: d,
@@ -453,32 +518,46 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 				onInput: (e) => g?.next(e.currentTarget.value)
 			}),
 			!s && c && /* @__PURE__ */ e("span", {
-				className: "text-muted text-sm",
+				className: "font-secondary text-muted text-small",
 				children: c
 			}),
 			m && /* @__PURE__ */ e("p", {
 				id: x,
-				className: "text-muted text-sm",
+				className: "font-secondary text-muted text-small",
 				children: m
 			}),
 			l && /* @__PURE__ */ e("p", {
 				id: S,
-				className: "text-error text-sm",
+				className: "font-secondary text-error text-small",
 				children: h
 			})
 		]
 	});
-}, se = l("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, pe = l([
+	"flex flex-col items-center",
+	"min-h-[var(--cover-height)]",
+	"px-[var(--gutter)] py-[var(--space-region)]"
+].join(" ")), me = "my-auto", he = ({ children: n, foot: r, testId: i }) => {
+	let a = r != null && typeof r != "boolean";
+	return /* @__PURE__ */ t("div", {
+		className: pe(),
+		"data-testid": i,
+		children: [/* @__PURE__ */ e("div", {
+			className: me,
+			children: n
+		}), a && /* @__PURE__ */ e("div", { children: r })]
+	});
+}, ge = l("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" }
-}), ce = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
-	className: se({ edge: t }),
+}), _e = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
+	className: ge({ edge: t }),
 	"data-testid": r,
 	children: n
-}), le = l("text-sm", {
+}), ve = l("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -486,12 +565,13 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), ue = {
+}), ye = {
 	sent: "status",
 	failed: "alert"
-}, de = ({ 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 = ue[i];
+}, be = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+	let l = s != null && typeof s != "boolean";
+	if (i === "sent" && !l) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
+	let u = i !== "sent", d = ye[i];
 	return /* @__PURE__ */ t("form", {
 		action: n,
 		method: r,
@@ -499,24 +579,24 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		"data-testid": c,
 		className: "flex max-w-[var(--measure)] flex-col gap-[var(--space-region)]",
 		children: [
-			l && /* @__PURE__ */ e("div", {
+			u && /* @__PURE__ */ e("div", {
 				className: "flex flex-col gap-[var(--space-stack)]",
 				children: a
 			}),
-			l && o && /* @__PURE__ */ e("div", {
+			u && o && /* @__PURE__ */ e("div", {
 				className: "flex flex-row gap-[var(--space-stack)]",
 				children: o
 			}),
-			s && /* @__PURE__ */ e("p", {
-				role: u,
-				className: le({ state: i }),
+			l && /* @__PURE__ */ e("p", {
+				role: d,
+				className: ve({ state: i }),
 				children: s
 			})
 		]
 	});
-}, fe = l([
+}, xe = l([
 	"flex items-baseline justify-between",
-	"font-secondary text-label tracking-label text-muted",
+	"font-secondary text-label leading-label tracking-label text-muted",
 	"py-[var(--space-region)] px-[var(--gutter)]",
 	"[&_[aria-current=page]]:text-foreground"
 ].join(" "), {
@@ -525,55 +605,66 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 		rule: "border-b border-solid border-rule"
 	} },
 	defaultVariants: { edge: "rule" }
-}), pe = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
-	className: fe({ edge: n }),
+}), Se = [
+	"inline-flex shrink-0 items-center",
+	"min-h-[calc(var(--text-label)*var(--leading-label))]",
+	"min-w-[var(--standing-min-width)]"
+].join(" "), Ce = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: xe({ edge: n }),
 	"data-testid": o,
-	children: [/* @__PURE__ */ e("div", { children: r }), /* @__PURE__ */ e("nav", {
+	children: [/* @__PURE__ */ e("div", {
+		className: Se,
+		children: r
+	}), /* @__PURE__ */ e("nav", {
 		"aria-label": i,
 		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
 		children: a
 	})]
-}), $ = l("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+}), we = l("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" }
-}), me = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
-	className: $({ place: t }),
+}), Te = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: we({ place: t }),
 	"data-testid": r,
 	children: n
-}), he = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), ge = l("font-primary text-title leading-title tracking-optical text-foreground"), _e = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), ve = l("font-primary text-small text-muted max-w-[var(--measure)]"), ye = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
-	className: he(),
+}), Ee = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), De = l("font-primary text-title leading-title tracking-optical text-foreground"), $ = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Oe = l("font-primary text-small text-muted max-w-[var(--measure)]"), ke = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
+	className: Ee(),
 	"data-testid": a,
 	children: [
 		/* @__PURE__ */ e("h1", {
-			className: ge(),
+			className: De(),
 			children: n
 		}),
 		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: _e(),
+			className: $(),
 			children: r
 		}),
 		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: ve(),
+			className: Oe(),
 			children: i
 		})
 	]
-}), be = l(["py-[var(--space-band)]", "[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"].join(" "), {
+}), Ae = l([
+	"relative",
+	"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" }
-}), xe = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+}), je = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
 	"data-section": "",
-	className: be({ bleed: t }),
+	className: Ae({ bleed: t }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), Se = {
+}), Me = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -581,11 +672,11 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	controlBorder: "#64748b",
 	rule: "#808fa3",
 	backing: "#f1f5f9",
-	primary: "#8b5cf6",
-	primaryHover: "#7c3aed",
+	primary: "#7c3aed",
+	primaryHover: "#6d28d9",
 	primaryForeground: "#f8fafc",
-	secondary: "#0ea5e9",
-	secondaryHover: "#0284c7",
+	secondary: "#0369a1",
+	secondaryHover: "#075985",
 	secondaryForeground: "#f8fafc",
 	disabled: "#94a3b8",
 	disabledHover: "#64748b",
@@ -595,7 +686,7 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	warning: "#f59e0b",
 	error: "#d63384",
 	info: "#06b6d4"
-}, Ce = {
+}, Ne = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -603,12 +694,12 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	controlBorder: "#94a3b8",
 	rule: "#5b6a80",
 	backing: "#1e293b",
-	primary: "#7c3aed",
-	primaryHover: "#8b5cf6",
-	primaryForeground: "#f8fafc",
+	primary: "#8b5cf6",
+	primaryHover: "#a78bfa",
+	primaryForeground: "#020617",
 	secondary: "#0284c7",
 	secondaryHover: "#0ea5e9",
-	secondaryForeground: "#f8fafc",
+	secondaryForeground: "#020617",
 	disabled: "#475569",
 	disabledHover: "#334155",
 	focusRing: "#cbd5e1",
@@ -619,4 +710,4 @@ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e
 	info: "#22d3ee"
 };
 //#endregion
-export { d as Brandmark, Z as Button, m as Checklist, v as DefinitionList, j as Eyebrow, b as Figure, ce as Footer, de as Form, N as H1, F as H2, L as H3, z as H4, V as H5, U as H6, pe as Header, me as Hero, ne as Input, ie as Link, G as P, ye as PageHead, X as Prose, T as Rail, xe as Section, k as Table, oe as TextArea, Ce as dark, Se as light };
+export { h as Brandmark, oe as Button, v as Checklist, d as Cluster, he as Cover, S as DefinitionList, P as Eyebrow, w as Figure, _e as Footer, be as Form, I as H1, R as H2, B as H3, H as H4, W as H5, K as H6, Ce as Header, Te as Hero, ce as Input, ue as Link, J as Note, X as P, ke as PageHead, ie as Prose, D as Rail, je as Section, p as Stack, M as Table, fe as TextArea, Ne as dark, Me as light };