@juwel-development/design-system 1.1.0 → 2.1.0

package/dist/design-system.js

@@ -1,43 +1,44 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useEffect as n, useId as r, useRef as i } from "react";
 import './index.css';//#region node_modules/clsx/dist/clsx.mjs
-function t(e) {
-	var n, r, i = "";
-	if (typeof e == "string" || typeof e == "number") i += e;
+function a(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += 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);
+			var i = e.length;
+			for (t = 0; t < i; t++) e[t] && (n = a(e[t])) && (r && (r += " "), r += n);
+		} else for (n in e) e[n] && (r && (r += " "), r += n);
 	}
-	return i;
+	return r;
 }
-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);
-	return i;
+function o() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = a(e)) && (r && (r += " "), r += t);
+	return r;
 }
 //#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 s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e, t) => (n) => {
+	if (t?.variants == null) return c(e, n?.class, n?.className);
+	let { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((e) => {
+		let t = n?.[e], a = i?.[e];
 		if (t === null) return null;
-		let s = r(t) || r(i);
-		return a[e][s];
-	}), c = n && Object.entries(n).reduce((e, t) => {
+		let o = s(t) || s(a);
+		return r[e][o];
+	}), o = 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 c(e, a, 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,
-				...c
+				...i,
+				...o
 			}[t]) : {
-				...o,
-				...c
+				...i,
+				...o
 			}[t] === n;
 		}) ? [
 			...e,
@@ -45,61 +46,577 @@ var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-})("transition-colors duration-[var(--motion-duration-color)] 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", {
+}, u = l("inline-flex", { variants: { cut: {
+	full: "",
+	compact: ""
+} } }), d = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+	"aria-hidden": "true",
+	"data-cut": n,
+	className: u({ cut: n }),
+	"data-testid": i,
+	children: r
+}) : /* @__PURE__ */ e("span", {
+	role: "img",
+	"aria-label": t,
+	"data-cut": n,
+	className: u({ cut: n }),
+	"data-testid": i,
+	children: r
+}), f = l("m-0 list-none p-0"), p = l([
+	"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(" ")), m = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
+		className: f(),
+		role: "list",
+		"data-testid": n,
+		children: t
+	}),
+	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
+		className: p(),
+		children: t
+	})
+}, h = 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 = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
+		"data-testid": n,
+		children: t
+	}),
+	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: h(),
+		"data-testid": n,
+		children: t
+	}),
+	Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
+		className: g(),
+		children: t
+	}),
+	Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
+		className: _(),
+		children: t
+	})
+}, y = l("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" }
+}), 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", {
+		src: n,
+		alt: r,
+		width: i,
+		height: a,
+		className: y({
+			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
+		})]
+	});
+}, 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"), ee = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: x(),
+		"data-testid": n,
+		children: t
+	}),
+	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
+		className: S(),
+		"data-testid": i,
+		"aria-hidden": "true",
+		children: [n !== void 0 && /* @__PURE__ */ e("span", {
+			className: C(),
+			children: n
+		}), /* @__PURE__ */ e("span", {
+			className: w(),
+			children: r
+		})]
+	}),
+	Content: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		"data-testid": n,
+		children: t
+	})
+}, T = 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",
+	"[&>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(" ")), E = l("border-t border-solid border-border"), D = l("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"
+	}
+}), O = 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 = {
+	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: T(),
+			"data-testid": a,
+			"aria-label": n,
+			tabIndex: 0,
+			children: o
+		}) : /* @__PURE__ */ e("div", {
+			className: T(),
+			"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: E(),
+		"data-testid": n,
+		children: t
+	}),
+	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
+		scope: t,
+		className: O({ align: n }),
+		children: r
+	}),
+	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
+		className: D({
+			variant: t,
+			align: n
+		}),
+		"data-variant": t ?? "value",
+		children: r
+	})
+}, A = 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 }),
+	"data-testid": r,
+	children: t
+}), M = l("font-primary text-display leading-display tracking-optical", {
+	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 }),
+	"data-testid": r,
+	children: t
+}), P = 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 }),
+	"data-testid": r,
+	children: t
+}), I = 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 }),
+	"data-testid": r,
+	children: t
+}), R = 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 }),
+	"data-testid": r,
+	children: t
+}), B = 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 }),
+	"data-testid": r,
+	children: t
+}), H = 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 }),
+	"data-testid": r,
+	children: t
+}), W = l("font-primary text-body leading-body", {
+	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 }),
+	"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", {
+	variants: { color: {
+		foreground: "text-foreground",
+		muted: "text-muted"
+	} },
+	defaultVariants: { color: "foreground" }
+}), Y = l("font-primary text-small text-muted"), te = {
+	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+		className: K(),
+		"data-testid": n,
+		children: t
+	}),
+	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
+		className: q(),
+		children: t
+	}),
+	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
+		className: J({ color: t }),
+		children: n
+	}),
+	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
+		className: Y(),
+		children: t
+	})
+}, X = 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)]", {
 	variants: { variant: {
-		primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg 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 hover:bg-secondary-hover focus-visible:ring-secondary-ring",
-		ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline focus-visible:ring-ring"
+		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" }
-}), o = ({ children: t, disabled: n, testId: r, variant: i, onClick$: o, ariaLabel: s, type: c = "button" }) => /* @__PURE__ */ e("button", {
-	type: c,
+}), Z = ({ 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: X({ variant: i }),
+	onClick: () => a?.next(),
 	disabled: n,
-	"aria-label": s,
+	"aria-label": o,
 	children: t
-}), s = {
+}), 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", {
+	variants: { variant: {
+		text: "",
+		email: "",
+		url: ""
+	} },
+	defaultVariants: { variant: "text" }
+}), ne = ({ label: a, name: o, variant: s, required: 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(() => {
+			w.current && (w.current.value = "");
+		});
+		return () => e?.unsubscribe();
+	}, [_]), /* @__PURE__ */ t("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [
+			/* @__PURE__ */ e("label", {
+				htmlFor: b,
+				className: "font-medium text-foreground",
+				children: a
+			}),
+			/* @__PURE__ */ e("input", {
+				ref: w,
+				id: b,
+				name: o,
+				type: s ?? "text",
+				className: Q({ variant: s }),
+				required: c,
+				disabled: u,
+				defaultValue: d,
+				placeholder: f,
+				autoComplete: p,
+				"aria-invalid": l || void 0,
+				"aria-describedby": C,
+				"data-testid": v,
+				onInput: (e) => g?.next(e.currentTarget.value)
+			}),
+			!c && /* @__PURE__ */ e("span", {
+				className: "text-muted text-sm",
+				children: "optional"
+			}),
+			m && /* @__PURE__ */ e("p", {
+				id: x,
+				className: "text-muted text-sm",
+				children: m
+			}),
+			l && /* @__PURE__ */ e("p", {
+				id: S,
+				className: "text-error text-sm",
+				children: h
+			})
+		]
+	});
+}, re = 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",
+		"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", {
+	href: t,
+	className: re({ 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, invalid: c, disabled: l, defaultValue: u, placeholder: d, autocomplete: f, hint: p, errorMessage: m, onInput$: h, reset$: g, testId: _ }) => {
+	let v = r(), y = `${v}-control`, b = `${v}-hint`, x = `${v}-error`, S = [p ? b : void 0, c ? x : void 0].filter(Boolean).join(" ") || void 0, C = i(null);
+	return n(() => {
+		let e = g?.subscribe(() => {
+			C.current && (C.current.value = "");
+		});
+		return () => e?.unsubscribe();
+	}, [g]), /* @__PURE__ */ t("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [
+			/* @__PURE__ */ e("label", {
+				htmlFor: y,
+				className: "font-medium text-foreground",
+				children: a
+			}),
+			/* @__PURE__ */ e("textarea", {
+				ref: C,
+				id: y,
+				name: o,
+				className: ae(),
+				required: s,
+				disabled: l,
+				defaultValue: u,
+				placeholder: d,
+				autoComplete: f,
+				"aria-invalid": c || void 0,
+				"aria-describedby": S,
+				"data-testid": _,
+				onInput: (e) => h?.next(e.currentTarget.value)
+			}),
+			!s && /* @__PURE__ */ e("span", {
+				className: "text-muted text-sm",
+				children: "optional"
+			}),
+			p && /* @__PURE__ */ e("p", {
+				id: b,
+				className: "text-muted text-sm",
+				children: p
+			}),
+			c && /* @__PURE__ */ e("p", {
+				id: x,
+				className: "text-error text-sm",
+				children: m
+			})
+		]
+	});
+}, se = 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 }),
+	"data-testid": r,
+	children: n
+}), le = l("text-sm", {
+	variants: { state: {
+		idle: "text-muted",
+		sending: "text-muted",
+		sent: "text-success",
+		failed: "text-error"
+	} },
+	defaultVariants: { state: "idle" }
+}), ue = {
+	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];
+	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: le({ state: i }),
+				children: s
+			})
+		]
+	});
+}, fe = l([
+	"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" }
+}), pe = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: fe({ 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
+	})]
+}), $ = 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 }),
+	"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(),
+	"data-testid": a,
+	children: [
+		/* @__PURE__ */ e("h1", {
+			className: ge(),
+			children: n
+		}),
+		r !== void 0 && /* @__PURE__ */ e("p", {
+			className: _e(),
+			children: r
+		}),
+		i !== void 0 && /* @__PURE__ */ e("p", {
+			className: ve(),
+			children: i
+		})
+	]
+}), be = l(["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", {
+	"data-section": "",
+	className: be({ bleed: t }),
+	"aria-label": n,
+	"data-testid": i,
+	children: r
+}), Se = {
 	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 = {
+}, Ce = {
 	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 { 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, te as Prose, ee as Rail, xe as Section, k as Table, oe as TextArea, Ce as dark, Se as light };