@juwel-development/design-system 3.9.0 → 3.10.0

package/dist/design-system.js

@@ -1,35 +1,35 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Children as n, Fragment as r, createContext as i, isValidElement as a, useCallback as o, useContext as s, useEffect as c, useId as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Children as r, Fragment as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useReducer as f, useRef as p, useState as m } from "react";
 import './index.css';//#region node_modules/clsx/dist/clsx.mjs
-function m(e) {
+function h(e) {
 	var t, n, r = "";
 	if (typeof e == "string" || typeof e == "number") r += e;
 	else if (typeof e == "object") {
 		if (Array.isArray(e)) {
 			var i = e.length;
-			for (t = 0; t < i; t++) e[t] && (n = m(e[t])) && (r && (r += " "), r += n);
+			for (t = 0; t < i; t++) e[t] && (n = h(e[t])) && (r && (r += " "), r += n);
 		} else for (n in e) e[n] && (r && (r += " "), r += n);
 	}
 	return r;
 }
-function h() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = m(e)) && (r && (r += " "), r += t);
+function g() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = h(e)) && (r && (r += " "), r += t);
 	return r;
 }
 //#endregion
 //#region node_modules/class-variance-authority/dist/index.mjs
-var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e, t) => (n) => {
-	if (t?.variants == null) return _(e, n?.class, n?.className);
+var _ = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, v = g, y = (e, t) => (n) => {
+	if (t?.variants == null) return v(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 o = g(t) || g(a);
+		let o = _(t) || _(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 _(e, a, t?.compoundVariants?.reduce((e, t) => {
+	return v(e, a, t?.compoundVariants?.reduce((e, t) => {
 		let { class: n, className: r, ...a } = t;
 		return Object.entries(a).every((e) => {
 			let [t, n] = e;
@@ -46,7 +46,7 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-}, y = v("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
+}, b = y("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
 	variants: {
 		gap: {
 			stack: "gap-x-[var(--space-stack)]",
@@ -61,14 +61,179 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		gap: "region",
 		justify: "start"
 	}
-}), b = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
-	className: y({
-		gap: t,
+}), x = ({ gap: e, justify: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
+	className: b({
+		gap: e,
 		justify: n
 	}),
 	"data-testid": i,
 	children: r
-}), x = v("flex", {
+}), S = class extends Error {
+	constructor() {
+		super("ColumnLayout.Column must be a direct child of ColumnLayout.Root (arrays and fragments are fine; a wrapping component or a nested Column is not)"), this.name = "ColumnLayoutCompositionError";
+	}
+}, C = class extends Error {
+	constructor(e) {
+		super(`ColumnLayout configuration is invalid: ${e}`), this.name = "ColumnLayoutConfigurationError";
+	}
+}, w = y("flex flex-wrap items-start", {
+	variants: { gap: {
+		stack: "gap-[var(--space-stack)] [--column-layout-gap:var(--space-stack)]",
+		region: "gap-[var(--space-region)] [--column-layout-gap:var(--space-region)]"
+	} },
+	defaultVariants: { gap: "region" }
+}), T = y("min-w-0 grow-[var(--column-layout-weight)] basis-[clamp(0px,(var(--column-layout-threshold)-100%)*1000000,100%)]"), E = a(!1), D = /^--[A-Za-z0-9_-]+$/, ee = (e, t) => {
+	let { weight: n, minWidth: r } = e.props;
+	if (!Number.isFinite(n) || n <= 0) throw new C(`column ${t + 1} needs a positive finite weight (got ${n})`);
+	if (!D.test(r)) throw new C(`column ${t + 1} needs a custom-property name such as --main-column-min-width for minWidth (got ${JSON.stringify(r)})`);
+	return {
+		weight: n,
+		minWidth: r
+	};
+}, O = (e) => {
+	let t = e.reduce((e, t) => e + t.weight, 0), n = e.map((e) => `var(${e.minWidth}) * ${t / e.weight}`);
+	return `calc(${e.length - 1} * var(--column-layout-gap) + max(${n.join(", ")}))`;
+}, k = (e) => o(e) && e.type === i, te = (e) => o(e) && e.type === j, ne = (e) => r.toArray(e).flatMap((e) => k(e) ? ne(e.props.children) : te(e) ? [e] : []), A = (e) => r.map(e, (e) => k(e) ? /* @__PURE__ */ t(i, { children: A(e.props.children) }) : te(e) ? /* @__PURE__ */ t(E.Provider, {
+	value: !0,
+	children: e
+}) : e), re = ({ gap: e, children: n, testId: r }) => {
+	let i = ne(n).map(ee), a = i.length === 0 ? void 0 : { "--column-layout-threshold": O(i) };
+	return /* @__PURE__ */ t("div", {
+		className: w({ gap: e }),
+		style: a,
+		"data-testid": r,
+		children: A(n)
+	});
+}, j = ({ weight: e, children: n, testId: r }) => {
+	if (!c(E)) throw new S();
+	let i = { "--column-layout-weight": e };
+	return /* @__PURE__ */ t("div", {
+		className: T(),
+		style: i,
+		"data-testid": r,
+		children: /* @__PURE__ */ t(E.Provider, {
+			value: !1,
+			children: n
+		})
+	});
+}, ie = {
+	Root: re,
+	Column: j
+}, M = .5, N = (e, t) => Math.abs(e - t) <= M, P = (e) => {
+	let t = [];
+	for (let { top: n } of e) t.some((e) => N(e, n)) || t.push(n);
+	let n = t.map((t) => Math.max(...e.filter((e) => N(t, e.top)).map((e) => e.controlEdge)));
+	return e.map(({ top: e, controlEdge: r }) => {
+		let i = t.findIndex((t) => N(t, e));
+		return (n[i] ?? r) - r;
+	});
+}, F = class extends Error {
+	constructor(e) {
+		super(`FieldRow.${e} must be composed inside FieldRow.Root`), this.name = "FieldRowCompositionError";
+	}
+}, I = class extends Error {
+	constructor(e) {
+		super(`FieldRow configuration: ${e}`), this.name = "FieldRowConfigurationError";
+	}
+}, L = y("flex flex-wrap items-start gap-y-[var(--space-stack)]", {
+	variants: { gap: {
+		stack: "gap-x-[var(--space-stack)]",
+		region: "gap-x-[var(--space-region)]"
+	} },
+	defaultVariants: { gap: "stack" }
+}), ae = y("shrink basis-0"), R = y("", {
+	variants: { part: {
+		item: "min-w-0 max-w-full flex-none",
+		group: "flex flex-wrap items-end gap-[var(--space-stack)]"
+	} },
+	defaultVariants: { part: "item" }
+}), z = /^--[A-Za-z0-9_-]+$/, B = ":scope > [data-field-row-item]", V = a(void 0), H = (e) => {
+	let t = c(V);
+	if (t === void 0) throw new F(e);
+	return t;
+}, oe = (e) => {
+	if (!(Number.isFinite(e) && e > 0)) throw new I(`weight must be a positive finite number, got ${e}`);
+}, se = (e) => {
+	if (!z.test(e)) throw new I(`minWidth must name a CSS custom property such as --search-field-min-width, got ${JSON.stringify(e)}`);
+}, ce = (e) => {
+	let t = e.querySelector("label[for]")?.getAttribute("for");
+	if (!t) return;
+	let n = e.ownerDocument.getElementById(t);
+	return n !== null && e.contains(n) ? n : void 0;
+}, U = (e) => getComputedStyle(e).position !== "static", le = (e, t) => {
+	if (getComputedStyle(e).position !== "absolute") return e;
+	let n = e.parentElement;
+	for (; n !== null && n !== t && !U(n);) n = n.parentElement;
+	return n ?? e;
+}, ue = (e) => {
+	let t = e.getBoundingClientRect().top, n = e.firstElementChild;
+	if (n === null) return {
+		top: t,
+		controlEdge: 0
+	};
+	let r = n.getBoundingClientRect(), i = ce(n);
+	return {
+		top: t,
+		controlEdge: (i === void 0 ? r.bottom : le(i, n).getBoundingClientRect().bottom) - r.top
+	};
+}, W = (e) => {
+	let t = Array.from(e.querySelectorAll(B)), n = P(t.map(ue));
+	t.forEach((e, t) => {
+		let r = n[t] ?? 0, i = Number.parseFloat(e.style.paddingTop) || 0;
+		Math.abs(i - r) > .01 && (e.style.paddingTop = r === 0 ? "" : `${r}px`);
+	});
+}, de = {
+	Root: ({ gap: e, children: n, testId: r }) => {
+		let i = p(null), a = p(void 0), o = p(/* @__PURE__ */ new WeakSet()), s = () => {
+			i.current && W(i.current);
+		}, c = (e) => {
+			e && a.current && !o.current.has(e) && (o.current.add(e), a.current.observe(e));
+		};
+		return d(() => {
+			let e = i.current;
+			if (e !== null && (W(e), !(typeof ResizeObserver > "u"))) {
+				a.current ??= new ResizeObserver(() => W(e));
+				for (let t of e.querySelectorAll(B)) {
+					let e = t.firstElementChild ?? void 0;
+					c(e), c(e?.querySelector("label[for]") ?? void 0);
+				}
+			}
+		}), d(() => () => a.current?.disconnect(), []), /* @__PURE__ */ t("div", {
+			ref: i,
+			className: L({ gap: e }),
+			"data-testid": r,
+			children: /* @__PURE__ */ t(V, {
+				value: { align: s },
+				children: n
+			})
+		});
+	},
+	Field: ({ children: e, weight: n = 1, minWidth: r, testId: i }) => {
+		let { align: a } = H("Field");
+		return oe(n), se(r), d(() => a()), /* @__PURE__ */ t("div", {
+			"data-field-row-item": !0,
+			className: ae(),
+			"data-testid": i,
+			style: {
+				flexGrow: n,
+				minWidth: `min(var(${r}), 100%)`
+			},
+			children: /* @__PURE__ */ t("div", { children: e })
+		});
+	},
+	Actions: ({ children: e, testId: n }) => {
+		let { align: r } = H("Actions");
+		return d(() => r()), /* @__PURE__ */ t("div", {
+			"data-field-row-item": !0,
+			className: R(),
+			"data-testid": n,
+			children: /* @__PURE__ */ t("div", {
+				className: R({ part: "group" }),
+				children: e
+			})
+		});
+	}
+}, fe = y("flex", {
 	variants: {
 		gap: {
 			stack: "gap-[var(--space-stack)]",
@@ -93,82 +258,126 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		measure: !1,
 		direction: "column"
 	}
-}), S = ({ gap: t, measure: n, direction: r, align: i, children: a, testId: o }) => /* @__PURE__ */ e("div", {
-	className: x({
-		gap: t,
+}), pe = ({ gap: e, measure: n, direction: r, align: i, children: a, testId: o }) => /* @__PURE__ */ t("div", {
+	className: fe({
+		gap: e,
 		measure: n,
 		direction: r,
 		align: i
 	}),
 	"data-testid": o,
 	children: a
-}), C = v("inline-flex", { variants: { cut: {
+}), G = y(["min-w-0 border border-solid border-border bg-surface text-foreground", "p-[var(--space-box-inset)] [overflow-wrap:anywhere]"].join(" ")), me = ({ children: e, name: n, testId: r }) => n === void 0 || n === "" ? /* @__PURE__ */ t("div", {
+	className: G(),
+	"data-testid": r,
+	children: e
+}) : /* @__PURE__ */ t("div", {
+	className: G(),
+	role: "group",
+	"aria-label": n,
+	"data-testid": r,
+	children: e
+}), he = y("inline-flex", { variants: { cut: {
 	full: "",
 	compact: ""
-} } }), w = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+} } }), ge = ({ name: e, cut: n, children: r, testId: i }) => e === "" ? /* @__PURE__ */ t("span", {
 	"aria-hidden": "true",
 	"data-cut": n,
-	className: C({ cut: n }),
+	className: he({ cut: n }),
 	"data-testid": i,
 	children: r
-}) : /* @__PURE__ */ e("span", {
+}) : /* @__PURE__ */ t("span", {
 	role: "img",
-	"aria-label": t,
+	"aria-label": e,
 	"data-cut": n,
-	className: C({ cut: n }),
+	className: he({ cut: n }),
 	"data-testid": i,
 	children: r
-}), T = v("m-0 list-none p-0"), ee = v([
-	"flex items-start gap-3 font-primary text-body leading-body text-foreground",
+}), _e = y("m-0 list-none p-0"), ve = y([
+	"flex items-start gap-3 font-body 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(" ")), E = {
-	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
-		className: T(),
+].join(" ")), ye = {
+	Root: ({ children: e, testId: n }) => /* @__PURE__ */ t("ul", {
+		className: _e(),
 		role: "list",
 		"data-testid": n,
-		children: t
+		children: e
 	}),
-	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
-		className: ee(),
-		children: t
+	Item: ({ children: e }) => /* @__PURE__ */ t("li", {
+		className: ve(),
+		children: e
 	})
-}, te = v("m-0 list-none p-0"), D = v("py-[var(--space-collection-item)] [&+li]:border-t [&+li]:border-solid [&+li]:border-border"), O = {
-	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
-		className: te(),
+}, be = y("m-0 list-none p-0"), xe = y("py-[var(--space-collection-item)] [&+li]:border-t [&+li]:border-solid [&+li]:border-border"), Se = {
+	Root: ({ children: e, testId: n }) => /* @__PURE__ */ t("ul", {
+		className: be(),
 		role: "list",
 		"data-testid": n,
-		children: t
+		children: e
 	}),
-	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("li", {
-		className: D(),
+	Item: ({ children: e, testId: n }) => /* @__PURE__ */ t("li", {
+		className: xe(),
 		"data-testid": n,
-		children: t
+		children: e
 	})
-}, ne = v([
-	"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(" ")), re = v("font-primary text-subtitle leading-subtitle text-foreground"), ie = v("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), ae = {
-	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
-		"data-testid": n,
-		children: t
-	}),
-	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: ne(),
+}, Ce = class extends Error {
+	constructor(e) {
+		super(`DefinitionList configuration is invalid: ${e}`), this.name = "DefinitionListConfigurationError";
+	}
+}, we = y("@container", {
+	variants: { density: {
+		comfortable: "[&>div]:py-[var(--space-definition-item)]",
+		compact: "[&>div]:py-[var(--space-definition-item-compact)]"
+	} },
+	defaultVariants: { density: "comfortable" }
+}), Te = y([
+	"grid grid-flow-row-dense gap-[var(--space-stack)] border-b border-solid border-border first:border-t",
+	"[--definition-stack:clamp(0px,(var(--definition-threshold)-100%)*1000000,100%)]",
+	"[--definition-shortfall:clamp(0px,(var(--definition-threshold)-100cqi)*1000000,1px)]",
+	"grid-cols-[max(calc((100%-var(--space-definition-column))*var(--definition-term-share)),var(--definition-stack))_minmax(0,1fr)]",
+	"gap-x-[max(0px,var(--space-definition-column)-var(--definition-stack))]",
+	"[&>dt]:col-start-1 [&>dt]:self-baseline [&>dd]:col-span-full [&>dd]:self-baseline",
+	"[&>dd]:col-start-[calc(2-tan(atan2(var(--definition-shortfall),1px)))]"
+].join(" ")), Ee = y("font-body text-subtitle leading-subtitle text-foreground wrap-break-word"), De = y("font-body text-body leading-body text-muted max-w-[var(--measure)] wrap-break-word"), Oe = {
+	weight: 1,
+	minWidth: "--definition-term-min-width"
+}, ke = {
+	weight: 2,
+	minWidth: "--definition-description-min-width"
+}, Ae = /^--[A-Za-z0-9_-]+$/, je = (e, t) => {
+	if (!Number.isFinite(t.weight) || t.weight <= 0) throw new Ce(`${e} needs a positive finite weight (got ${t.weight})`);
+	if (!Ae.test(t.minWidth)) throw new Ce(`${e} needs a custom-property name such as --summary-term-min-width for minWidth (got ${JSON.stringify(t.minWidth)})`);
+	return t;
+}, Me = (e, t) => {
+	let n = e.weight + t.weight;
+	return `calc(var(--space-definition-column) + max(var(${e.minWidth}) * ${n / e.weight}, var(${t.minWidth}) * ${n / t.weight}))`;
+}, Ne = {
+	Root: ({ density: e, termColumn: n = Oe, descriptionColumn: r = ke, children: i, testId: a }) => {
+		let o = je("termColumn", n), s = je("descriptionColumn", r), c = {
+			"--definition-threshold": Me(o, s),
+			"--definition-term-share": `calc(${o.weight} / ${o.weight + s.weight})`
+		};
+		return /* @__PURE__ */ t("dl", {
+			className: we({ density: e }),
+			style: c,
+			"data-testid": a,
+			children: i
+		});
+	},
+	Item: ({ children: e, testId: n }) => /* @__PURE__ */ t("div", {
+		className: Te(),
 		"data-testid": n,
-		children: t
+		children: e
 	}),
-	Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
-		className: re(),
-		children: t
+	Term: ({ children: e }) => /* @__PURE__ */ t("dt", {
+		className: Ee(),
+		children: e
 	}),
-	Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
-		className: ie(),
-		children: t
+	Description: ({ children: e }) => /* @__PURE__ */ t("dd", {
+		className: De(),
+		children: e
 	})
-}, k = v("block w-full object-cover bg-backing", {
+}, Pe = y("block w-full object-cover bg-backing", {
 	variants: {
 		ratio: {
 			portrait: "aspect-portrait",
@@ -185,13 +394,13 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		}
 	},
 	defaultVariants: { focus: "center" }
-}), A = ({ 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,
+}), Fe = ({ src: e, 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__ */ t("img", {
+		src: e,
 		alt: r,
 		width: i,
 		height: a,
-		className: k({
+		className: Pe({
 			ratio: o,
 			focus: s
 		}),
@@ -201,84 +410,170 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		fetchPriority: d ? "high" : void 0,
 		decoding: "async",
 		"data-testid": l === void 0 && !p ? f : void 0
-	}), h = p ? /* @__PURE__ */ t("div", {
+	}), h = p ? /* @__PURE__ */ n("div", {
 		className: "relative",
 		"data-testid": l === void 0 ? f : void 0,
 		children: [m, u]
 	}) : m;
-	return l === void 0 ? h : /* @__PURE__ */ t("figure", {
+	return l === void 0 ? h : /* @__PURE__ */ n("figure", {
 		className: "flex flex-col gap-[var(--space-stack)]",
 		"data-testid": f,
-		children: [h, /* @__PURE__ */ e("figcaption", {
+		children: [h, /* @__PURE__ */ t("figcaption", {
 			className: "font-secondary text-label tracking-label text-muted",
 			children: l
 		})]
 	});
-}, j = class extends Error {
+}, Ie = y("inline-block shrink-0 align-[-0.125em]"), Le = {
+	sort: [
+		"M5.5 13V3",
+		"M3 5.5l2.5-2.5L8 5.5",
+		"M10.5 3v10",
+		"M8 10.5l2.5 2.5 2.5-2.5"
+	],
+	"sort-ascending": ["M8 13V3", "M4 7l4-4 4 4"],
+	"sort-descending": ["M8 3v10", "M4 9l4 4 4-4"]
+}, Re = ({ name: e, testId: n }) => /* @__PURE__ */ t("svg", {
+	"aria-hidden": !0,
+	focusable: !1,
+	viewBox: "0 0 16 16",
+	width: "1em",
+	height: "1em",
+	className: Ie(),
+	"data-testid": n,
+	children: Le[e].map((e) => /* @__PURE__ */ t("path", {
+		d: e,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, e))
+}), K = class extends Error {
 	constructor(e) {
 		super(`Meter configuration is invalid: ${e}`), this.name = "MeterConfigurationError";
 	}
-}, M = v("w-full h-[var(--meter-track-thickness)] bg-meter-track border border-solid border-rule"), N = v("h-full w-[calc(var(--meter-level)*100%)]", {
+}, ze = y("w-full h-[var(--meter-track-thickness)] bg-meter-track border border-solid border-rule"), Be = y("h-full w-[calc(var(--meter-level)*100%)]", {
 	variants: { treatment: {
 		neutral: "bg-meter-fill",
 		depleting: "bg-[color-mix(in_oklab,var(--color-meter-fill)_calc(var(--meter-level)*100%),var(--color-error))]"
 	} },
 	defaultVariants: { treatment: "neutral" }
-}), P = ({ value: t, min: n = 0, max: r, treatment: i, label: a, valueText: o, testId: s }) => {
-	if (!Number.isFinite(t) || !Number.isFinite(n) || !Number.isFinite(r)) throw new j(`value, min and max must be finite numbers (got value=${t}, min=${n}, max=${r})`);
-	if (n >= r) throw new j(`min must be less than max (got min=${n}, max=${r})`);
-	if (t < n || t > r) throw new j(`value must lie within [min, max] (got value=${t}, min=${n}, max=${r})`);
-	let c = { "--meter-level": (t - n) / (r - n) };
-	return /* @__PURE__ */ e("div", {
+}), Ve = ({ value: e, min: n = 0, max: r, treatment: i, label: a, valueText: o, testId: s }) => {
+	if (!Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(r)) throw new K(`value, min and max must be finite numbers (got value=${e}, min=${n}, max=${r})`);
+	if (n >= r) throw new K(`min must be less than max (got min=${n}, max=${r})`);
+	if (e < n || e > r) throw new K(`value must lie within [min, max] (got value=${e}, min=${n}, max=${r})`);
+	let c = { "--meter-level": (e - n) / (r - n) };
+	return /* @__PURE__ */ t("div", {
 		role: "meter",
-		"aria-valuenow": t,
+		"aria-valuenow": e,
 		"aria-valuemin": n,
 		"aria-valuemax": r,
 		"aria-label": a,
 		"aria-valuetext": o,
 		"data-testid": s,
-		className: M(),
+		className: ze(),
 		style: c,
-		children: /* @__PURE__ */ e("div", {
+		children: /* @__PURE__ */ t("div", {
 			"aria-hidden": "true",
-			className: N({ treatment: i })
+			className: Be({ treatment: i })
 		})
 	});
-}, F = v(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), I = v("lg:sticky lg:top-6"), L = v("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), R = v("block pt-1 font-secondary text-label tracking-label text-foreground"), z = {
-	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: F(),
+}, He = y(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), Ue = y("lg:sticky lg:top-6"), We = y("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), Ge = y("block pt-1 font-secondary text-label tracking-label text-foreground"), Ke = {
+	Root: ({ children: e, testId: n }) => /* @__PURE__ */ t("div", {
+		className: He(),
 		"data-testid": n,
-		children: t
+		children: e
 	}),
-	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
-		className: I(),
+	Index: ({ number: e, children: r, testId: i }) => /* @__PURE__ */ n("div", {
+		className: Ue(),
 		"data-testid": i,
 		"aria-hidden": "true",
-		children: [n !== void 0 && /* @__PURE__ */ e("span", {
-			className: L(),
-			children: n
-		}), /* @__PURE__ */ e("span", {
-			className: R(),
+		children: [e !== void 0 && /* @__PURE__ */ t("span", {
+			className: We(),
+			children: e
+		}), /* @__PURE__ */ t("span", {
+			className: Ge(),
 			children: r
 		})]
 	}),
-	Content: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+	Content: ({ children: e, testId: n }) => /* @__PURE__ */ t("div", {
 		"data-testid": n,
-		children: t
+		children: e
 	})
-}, B = v([
-	"[&:not([data-notes])]:overflow-x-auto",
+}, qe = class extends Error {
+	constructor(e) {
+		super(`Table configuration is invalid: ${e}`), this.name = "TableConfigurationError";
+	}
+}, q = "comfortable", Je = y([
+	"overflow-x-auto",
+	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]",
 	"[&>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(" ")), V = v("border-t border-solid border-border"), H = v("px-4 py-2 text-small first:pl-0 last:pr-0", {
+	"[&[data-notes=supplementary]:not([data-columns])_[data-variant=note]]:max-md:hidden",
+	"[&[data-notes=content]:not([data-columns])>table]:max-md:block",
+	"[&[data-notes=content]:not([data-columns])_thead]:max-md:block [&[data-notes=content]:not([data-columns])_tbody]:max-md:block [&[data-notes=content]:not([data-columns])_tfoot]:max-md:block",
+	"[&[data-notes=content]:not([data-columns])_tr]:max-md:block [&[data-notes=content]:not([data-columns])_td]:max-md:block [&[data-notes=content]:not([data-columns])_th]:max-md:block",
+	"[&[data-columns]>table]:grid [&[data-columns]>table]:grid-cols-[var(--table-columns)]",
+	"[&[data-columns]>table>caption]:col-span-full",
+	"[&[data-columns]>table>*:not(caption)]:col-span-full [&[data-columns]>table>*:not(caption)]:grid [&[data-columns]>table>*:not(caption)]:grid-cols-subgrid",
+	"[&[data-columns]>table>*>tr]:col-span-full [&[data-columns]>table>*>tr]:grid [&[data-columns]>table>*>tr]:grid-cols-subgrid",
+	"[&[data-columns]>table>*>tr>td]:wrap-anywhere [&[data-columns]>table>*>tr>th]:wrap-anywhere",
+	"[&:has([aria-selected])_tr>*:first-child]:pl-[var(--table-cell-padding-inline)]",
+	"[&:has(tr[tabindex])]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
+	"[&:has(tr[tabindex])]:m-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]",
+	"[&:has(tr[tabindex])]:scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]"
+].join(" "), {
+	variants: { density: {
+		comfortable: "[--table-cell-padding-inline:var(--table-cell-inset-inline)] [--table-cell-padding-block:var(--table-cell-inset-block)]",
+		compact: "[--table-cell-padding-inline:var(--table-cell-inset-inline-compact)] [--table-cell-padding-block:var(--table-cell-inset-block-compact)]"
+	} },
+	defaultVariants: { density: q }
+}), Ye = y([
+	"border-t border-solid border-border",
+	"[&[aria-selected=true]>*:first-child]:relative",
+	"[&[aria-selected=true]>*:first-child]:before:absolute [&[aria-selected=true]>*:first-child]:before:inset-y-0 [&[aria-selected=true]>*:first-child]:before:left-0",
+	"[&[aria-selected=true]>*:first-child]:before:border-l-[length:var(--table-selection-marker-thickness)] [&[aria-selected=true]>*:first-child]:before:border-solid [&[aria-selected=true]>*:first-child]:before:border-foreground"
+].join(" "), {
+	variants: { interactive: {
+		true: "cursor-pointer outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]",
+		false: ""
+	} },
+	defaultVariants: { interactive: !1 }
+}), Xe = [
+	"a[href]",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"summary",
+	"label",
+	"[contenteditable]",
+	"[tabindex]",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"radio\"]",
+	"[role=\"switch\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"menuitemcheckbox\"]",
+	"[role=\"menuitemradio\"]",
+	"[role=\"tab\"]",
+	"[role=\"option\"]",
+	"[role=\"treeitem\"]",
+	"[role=\"combobox\"]",
+	"[role=\"textbox\"]",
+	"[role=\"searchbox\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]"
+].join(", "), Ze = (e, t) => {
+	if (!(t instanceof Element)) return !1;
+	let n = t.closest(Xe);
+	return n !== null && n !== e && e.contains(n);
+}, Qe = /* @__PURE__ */ new Set(["Enter", " "]), $e = y("px-[var(--table-cell-padding-inline)] py-[var(--table-cell-padding-block)] text-small first:pl-0 last:pr-0", {
 	variants: {
 		variant: {
-			value: "font-primary text-foreground tabular-nums",
+			value: "font-body text-foreground tabular-nums",
 			note: "font-secondary text-muted"
 		},
 		align: {
@@ -291,51 +586,124 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		variant: "value",
 		align: "left"
 	}
-}), oe = v("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+}), et = y("px-[var(--table-cell-padding-inline)] py-[var(--table-cell-padding-block)] 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" }
-}), se = {
-	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: B(),
-			"data-testid": a,
-			"aria-label": n,
+}), tt = (e) => `var(--table-column-${e})`, nt = (e, t) => {
+	let n = e.minWidth === void 0 ? void 0 : tt(e.minWidth);
+	if (e.width !== void 0) {
+		let t = tt(e.width);
+		return n === void 0 ? t : `max(${n}, ${t})`;
+	}
+	if (!Number.isFinite(e.weight) || e.weight <= 0) throw new qe(`column ${t + 1} needs a positive finite weight (got ${e.weight})`);
+	return `minmax(${n ?? "0"}, ${e.weight}fr)`;
+}, rt = (e) => e === void 0 || e.length === 0 ? void 0 : e.map(nt).join(" "), it = (e, t, n) => {
+	let [r, i] = m(!0);
+	return d(() => {
+		let r = e.current;
+		if (r === null) return;
+		let a = () => i(r.scrollWidth > r.clientWidth || r === document.activeElement);
+		a();
+		let o = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(a);
+		o?.observe(r);
+		for (let e of [t.current, n.current]) e !== null && o?.observe(e);
+		return window.addEventListener("resize", a), r.addEventListener("blur", a), () => {
+			o?.disconnect(), window.removeEventListener("resize", a), r.removeEventListener("blur", a);
+		};
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}, at = {
+	Root: ({ caption: e, notes: r, columns: i, density: a, children: o, testId: s }) => {
+		let c = p(null), l = p(null), u = p(null), d = rt(i), f = it(c, l, u), m = d === void 0 ? void 0 : { "--table-columns": d }, h = d === void 0 ? void 0 : i?.length, g = /* @__PURE__ */ n("table", {
+			ref: l,
+			role: "table",
+			children: [/* @__PURE__ */ t("caption", {
+				ref: u,
+				children: e
+			}), o]
+		});
+		return r === void 0 ? /* @__PURE__ */ t("section", {
+			className: Je({ density: a }),
+			style: m,
+			"data-columns": h,
+			"data-density": a ?? q,
+			"data-testid": s,
+			"aria-label": e,
 			tabIndex: 0,
-			children: o
-		}) : /* @__PURE__ */ e("div", {
-			className: B(),
+			children: g
+		}) : /* @__PURE__ */ t("div", {
+			ref: c,
+			className: Je({ density: a }),
+			style: m,
 			"data-notes": r,
-			"data-testid": a,
-			children: o
+			"data-columns": h,
+			"data-density": a ?? q,
+			"data-testid": s,
+			role: f ? "group" : void 0,
+			"aria-label": f ? e : void 0,
+			tabIndex: f ? 0 : void 0,
+			children: g
 		});
 	},
-	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: V(),
-		"data-testid": n,
-		children: t
+	Head: ({ children: e }) => /* @__PURE__ */ t("thead", {
+		role: "rowgroup",
+		children: e
 	}),
-	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
-		scope: t,
-		className: oe({ align: n }),
-		children: r
+	Body: ({ children: e }) => /* @__PURE__ */ t("tbody", {
+		role: "rowgroup",
+		children: e
+	}),
+	Footer: ({ children: e }) => /* @__PURE__ */ t("tfoot", {
+		role: "rowgroup",
+		children: e
+	}),
+	Row: ({ children: e, testId: n, onClick$: r, isSelected$: i }) => {
+		let [a, o] = m(!1);
+		d(() => {
+			o(!1);
+			let e = i?.subscribe((e) => o(e));
+			return () => e?.unsubscribe();
+		}, [i]);
+		let s = (e) => {
+			Ze(e.currentTarget, e.target) || r?.next();
+		}, c = (e) => {
+			e.target !== e.currentTarget || !Qe.has(e.key) || (e.key === " " && e.preventDefault(), e.repeat || r?.next());
+		}, l = r !== void 0;
+		return /* @__PURE__ */ t("tr", {
+			role: "row",
+			className: Ye({ interactive: l }),
+			"data-testid": n,
+			tabIndex: l ? 0 : void 0,
+			"aria-selected": i === void 0 ? void 0 : a,
+			onClick: l ? s : void 0,
+			onKeyDown: l ? c : void 0,
+			children: e
+		});
+	},
+	HeaderCell: ({ scope: e, align: n, ariaSort: r, children: i }) => /* @__PURE__ */ t("th", {
+		role: e === "row" ? "rowheader" : "columnheader",
+		scope: e,
+		"aria-sort": r,
+		className: et({ align: n }),
+		children: i
 	}),
-	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
-		className: H({
-			variant: t,
+	Cell: ({ variant: e, align: n, children: r }) => /* @__PURE__ */ t("td", {
+		role: "cell",
+		className: $e({
+			variant: e,
 			align: n
 		}),
-		"data-variant": t ?? "value",
+		"data-variant": e ?? "value",
 		children: r
 	})
-}, ce = v("font-secondary text-label tracking-label font-medium", {
+}, ot = y("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -345,11 +713,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "muted" }
-}), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: ce({ color: n }),
+}), st = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("p", {
+	className: ot({ color: n }),
 	"data-testid": r,
-	children: t
-}), le = v("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
+	children: e
+}), ct = y("font-heading text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -359,11 +727,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), ue = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
-	className: le({ color: n }),
+}), lt = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h1", {
+	className: ct({ color: n }),
 	"data-testid": r,
-	children: t
-}), W = v("font-primary text-title leading-title tracking-optical", {
+	children: e
+}), ut = y("font-heading text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -373,11 +741,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), de = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
-	className: W({ color: n }),
+}), dt = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h2", {
+	className: ut({ color: n }),
 	"data-testid": r,
-	children: t
-}), fe = v("font-primary text-subtitle leading-subtitle", {
+	children: e
+}), ft = y("font-heading text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -387,11 +755,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), pe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
-	className: fe({ color: n }),
+}), pt = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h3", {
+	className: ft({ color: n }),
 	"data-testid": r,
-	children: t
-}), me = v("font-primary text-body leading-body font-bold", {
+	children: e
+}), mt = y("font-heading text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -401,11 +769,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), he = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
-	className: me({ color: n }),
+}), ht = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h4", {
+	className: mt({ color: n }),
 	"data-testid": r,
-	children: t
-}), ge = v("font-primary text-body leading-body font-semibold", {
+	children: e
+}), gt = y("font-heading text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -415,11 +783,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
-	className: ge({ color: n }),
+}), _t = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h5", {
+	className: gt({ color: n }),
 	"data-testid": r,
-	children: t
-}), ve = v("font-primary text-body leading-body font-medium", {
+	children: e
+}), vt = y("font-heading text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -429,11 +797,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
-	className: ve({ color: n }),
+}), yt = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("h6", {
+	className: vt({ color: n }),
 	"data-testid": r,
-	children: t
-}), be = v("font-secondary text-small", {
+	children: e
+}), bt = y("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -443,11 +811,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), xe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: be({ color: n }),
+}), xt = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("p", {
+	className: bt({ color: n }),
 	"data-testid": r,
-	children: t
-}), Se = v("font-primary text-body leading-body", {
+	children: e
+}), St = y("font-body text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -457,11 +825,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Ce = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: Se({ color: n }),
+}), Ct = ({ children: e, color: n, testId: r }) => /* @__PURE__ */ t("p", {
+	className: St({ color: n }),
 	"data-testid": r,
-	children: t
-}), we = v("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Te = v("font-primary text-lede leading-lede text-foreground"), Ee = v("font-primary text-body leading-body", {
+	children: e
+}), wt = y("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Tt = y("font-body text-lede leading-lede text-foreground"), Et = y("font-body text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -471,119 +839,122 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), De = v("font-primary text-small text-muted"), Oe = {
-	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: we(),
+}), Dt = y("font-body text-small text-muted"), Ot = {
+	Root: ({ children: e, testId: n }) => /* @__PURE__ */ t("div", {
+		className: wt(),
 		"data-testid": n,
-		children: t
+		children: e
 	}),
-	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: Te(),
-		children: t
+	Lede: ({ children: e }) => /* @__PURE__ */ t("p", {
+		className: Tt(),
+		children: e
 	}),
-	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
-		className: Ee({ color: t }),
+	Body: ({ color: e, children: n }) => /* @__PURE__ */ t("p", {
+		className: Et({ color: e }),
 		children: n
 	}),
-	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: De(),
-		children: t
+	Tail: ({ children: e }) => /* @__PURE__ */ t("p", {
+		className: Dt(),
+		children: e
 	})
-}, ke = v("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)]", {
+}, J = "font-control text-body text-balance wrap-anywhere rounded-[var(--radius-control)] select-none inline-flex flex-row items-center justify-center gap-2", kt = y("transition-colors duration-[var(--motion-duration-color)] cursor-pointer disabled:cursor-not-allowed 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)]"
+		primary: `${J} px-4 sm:px-6 py-2 min-w-[min(var(--control-min-width),100%)] bg-primary text-primary-foreground hover:bg-primary-hover disabled:bg-disabled disabled:hover:bg-disabled-hover forced-colors:border`,
+		secondary: `${J} px-4 sm:px-6 py-2 min-w-[min(var(--control-min-width),100%)] bg-secondary text-secondary-foreground hover:bg-secondary-hover disabled:bg-disabled disabled:hover:bg-disabled-hover forced-colors:border`,
+		ghost: `${J} px-2 py-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)] disabled:bg-disabled disabled:hover:bg-disabled-hover`,
+		outlined: `${J} px-[calc(1rem_-_1px)] sm:px-[calc(1.5rem_-_1px)] py-[calc(0.5rem_-_1px)] min-w-[min(var(--control-min-width),100%)] border border-solid border-secondary bg-transparent text-secondary hover:bg-backing disabled:border-disabled disabled:text-muted disabled:hover:bg-transparent`,
+		destructive: `${J} px-4 sm:px-6 py-2 min-w-[min(var(--control-min-width),100%)] bg-error text-error-foreground hover:bg-error-hover disabled:bg-disabled disabled:hover:bg-disabled-hover forced-colors:border`,
+		plain: "inline p-0 min-w-0 max-w-full whitespace-normal wrap-anywhere bg-transparent [font:inherit] [letter-spacing:inherit] [color:inherit] [text-align:inherit] disabled:text-disabled"
 	} },
 	defaultVariants: { variant: "primary" }
-}), Ae = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+}), At = ({ children: e, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ t("button", {
 	type: s,
 	"data-testid": r,
-	className: ke({ variant: i }),
+	className: kt({ variant: i }),
 	onClick: () => a?.next(),
 	disabled: n,
 	"aria-label": o,
-	children: t
-}), je = class extends Error {
+	children: e
+}), jt = class extends Error {
 	constructor(e) {
 		super(`Choices.${e} must be composed inside Choices.Root`), this.name = "ChoicesCompositionError";
 	}
-}, Me = v("flex flex-col gap-[var(--space-stack)]"), Ne = v([
+}, Mt = y("flex flex-col gap-[var(--space-stack)]"), Nt = y([
 	"group/choice flex w-full flex-row items-start gap-3 text-left",
 	"rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent aria-checked:border-foreground",
 	"px-3 py-2",
 	"cursor-pointer disabled:cursor-not-allowed",
 	"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)]"
-].join(" ")), Pe = i(void 0), Fe = (e) => {
-	let t = s(Pe);
-	if (t === void 0) throw new je(e);
+].join(" ")), Pt = a(void 0), Ft = (e) => {
+	let t = c(Pt);
+	if (t === void 0) throw new jt(e);
 	return t;
-}, Ie = (e, t) => {
+}, It = (e, t) => {
 	let n = e.closest("[role=\"radiogroup\"]");
 	if (n === null) return;
 	let r = Array.from(n.querySelectorAll(":scope > [role=\"radio\"]"));
 	return r[(r.indexOf(e) + t + r.length) % r.length];
-}, Le = {
+}, Lt = {
 	ArrowDown: 1,
 	ArrowRight: 1,
 	ArrowUp: -1,
 	ArrowLeft: -1
-}, Re = {
-	Root: ({ selected: t, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ e(Pe.Provider, {
+}, Rt = {
+	Root: ({ selected: e, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ t(Pt.Provider, {
 		value: {
-			selected: t,
+			selected: e,
 			onSelect$: n,
 			inert: i === !0
 		},
-		children: /* @__PURE__ */ e("div", {
+		children: /* @__PURE__ */ t("div", {
 			role: "radiogroup",
 			"aria-label": r,
 			"aria-disabled": i === !0 ? "true" : void 0,
-			className: Me(),
+			className: Mt(),
 			"data-testid": o,
 			children: a
 		})
 	}),
-	Choice: ({ value: n, children: r, description: i, testId: a }) => {
-		let { selected: o, onSelect$: s, inert: c } = Fe("Choice"), u = o === n, d = l(), f = `${d}-name`, p = `${d}-description`;
-		return /* @__PURE__ */ t("button", {
+	Choice: ({ value: e, children: r, description: i, testId: a }) => {
+		let { selected: o, onSelect$: s, inert: c } = Ft("Choice"), l = o === e, d = u(), f = `${d}-name`, p = `${d}-description`;
+		return /* @__PURE__ */ n("button", {
 			type: "button",
 			role: "radio",
-			"aria-checked": u,
+			"aria-checked": l,
 			"aria-labelledby": f,
 			"aria-describedby": p,
-			tabIndex: u && !c ? 0 : -1,
+			tabIndex: l && !c ? 0 : -1,
 			disabled: c,
-			"data-value": n,
+			"data-value": e,
 			"data-testid": a,
-			className: Ne(),
+			className: Nt(),
 			onClick: () => {
-				u || s.next(n);
+				l || s.next(e);
 			},
 			onKeyDown: (e) => {
-				let t = Le[e.key];
+				let t = Lt[e.key];
 				if (t === void 0 || c) return;
 				e.preventDefault();
-				let n = Ie(e.currentTarget, t);
+				let n = It(e.currentTarget, t);
 				if (n === void 0) return;
 				n.focus();
 				let r = n.dataset.value;
 				r !== void 0 && r !== o && s.next(r);
 			},
-			children: [/* @__PURE__ */ e("span", {
+			children: [/* @__PURE__ */ t("span", {
 				className: "mt-[0.3rem] flex size-[var(--choice-marker-size)] shrink-0 items-center justify-center rounded-[var(--radius-control)] border border-solid border-control-border",
-				children: u && /* @__PURE__ */ e("span", {
+				children: l && /* @__PURE__ */ t("span", {
 					"data-choice-marker-dot": !0,
 					className: "size-[var(--choice-marker-dot-size)] rounded-[var(--radius-control)] bg-foreground"
 				})
-			}), /* @__PURE__ */ t("span", {
+			}), /* @__PURE__ */ n("span", {
 				className: "flex min-w-0 flex-col",
-				children: [/* @__PURE__ */ e("span", {
+				children: [/* @__PURE__ */ t("span", {
 					id: f,
 					className: "font-secondary font-medium text-body text-foreground group-disabled/choice:text-muted",
 					children: r
-				}), /* @__PURE__ */ e("span", {
+				}), /* @__PURE__ */ t("span", {
 					id: p,
 					className: "font-secondary text-muted text-small",
 					children: i
@@ -591,61 +962,61 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 			})]
 		});
 	}
-}, ze = v("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", {
+}, zt = y("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-control 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" }
-}), Be = ({ label: n, name: r, variant: i, required: a, optionalLabel: o, invalid: s, disabled: u, defaultValue: d, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
-	let b = l(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, s ? C : void 0].filter(Boolean).join(" ") || void 0, T = f(null);
-	return c(() => {
+}), Bt = ({ label: e, name: r, variant: i, required: a, optionalLabel: o, invalid: s, disabled: c, defaultValue: d, placeholder: f, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
+	let b = u(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, s ? C : void 0].filter(Boolean).join(" ") || void 0, T = p(null);
+	return l(() => {
 		let e = v?.subscribe(() => {
 			T.current && (T.current.value = "");
 		});
 		return () => e?.unsubscribe();
-	}, [v]), /* @__PURE__ */ t("div", {
+	}, [v]), /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-[var(--space-stack)]",
 		children: [
-			/* @__PURE__ */ e("label", {
+			/* @__PURE__ */ t("label", {
 				htmlFor: x,
 				className: "font-secondary font-medium text-body text-foreground",
-				children: n
+				children: e
 			}),
-			/* @__PURE__ */ e("input", {
+			/* @__PURE__ */ t("input", {
 				ref: T,
 				id: x,
 				name: r,
 				type: i ?? "text",
-				className: ze({ variant: i }),
+				className: zt({ variant: i }),
 				required: a,
-				disabled: u,
+				disabled: c,
 				defaultValue: d,
-				placeholder: p,
+				placeholder: f,
 				autoComplete: m,
 				"aria-invalid": s || void 0,
 				"aria-describedby": w,
 				"data-testid": y,
 				onInput: (e) => _?.next(e.currentTarget.value)
 			}),
-			!a && o && /* @__PURE__ */ e("span", {
+			!a && o && /* @__PURE__ */ t("span", {
 				className: "font-secondary text-muted text-small",
 				children: o
 			}),
-			h && /* @__PURE__ */ e("p", {
+			h && /* @__PURE__ */ t("p", {
 				id: S,
 				className: "font-secondary text-muted text-small",
 				children: h
 			}),
-			s && /* @__PURE__ */ e("p", {
+			s && /* @__PURE__ */ t("p", {
 				id: C,
 				className: "font-secondary text-error text-small",
 				children: g
 			})
 		]
 	});
-}, Ve = v("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, Vt = y("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: "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",
@@ -653,15 +1024,15 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		graphic: "text-inherit no-underline"
 	} },
 	defaultVariants: { treatment: "prose" }
-}), He = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
-	href: t,
-	className: Ve({ treatment: r }),
+}), Ht = ({ href: e, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ t("a", {
+	href: e,
+	className: Vt({ treatment: r }),
 	target: i ? "_blank" : void 0,
 	rel: i ? "noopener noreferrer" : void 0,
 	"aria-current": a ? "page" : void 0,
 	"data-testid": o,
 	children: n
-}), Ue = (e, t, n, r) => {
+}), Ut = (e, t, n, r) => {
 	let i = Math.max(e.length - 1, 0) * r;
 	if (e.reduce((e, t) => e + t, 0) + i <= n) return e.length;
 	let a = 0, o = t;
@@ -670,11 +1041,11 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		o += t + r, a += 1;
 	}
 	return a;
-}, We = class extends Error {
+}, Wt = class extends Error {
 	constructor(e) {
 		super(`MultiSelect.${e} must be composed inside MultiSelect.Root`), this.name = "MultiSelectCompositionError";
 	}
-}, G = "outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", Ge = `relative inline-flex shrink-0 cursor-pointer items-center rounded-[var(--radius-control)] bg-backing px-2 py-0.5 font-secondary text-small text-foreground disabled:cursor-not-allowed disabled:text-muted pointer-events-auto ${G}`, K = v("", {
+}, Gt = "outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", Kt = `relative inline-flex shrink-0 cursor-pointer items-center rounded-[var(--radius-control)] bg-backing px-2 py-0.5 font-secondary text-small text-foreground disabled:cursor-not-allowed disabled:text-muted pointer-events-auto ${Gt}`, Y = y("", {
 	variants: { part: {
 		root: [
 			"relative flex flex-col gap-[var(--space-stack)]",
@@ -684,10 +1055,10 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		field: [
 			"group/field relative flex items-center gap-1",
 			"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)]",
+			"font-control text-body text-foreground transition-colors duration-[var(--motion-duration-color)]",
 			"data-[disabled]:border-disabled data-[disabled]:text-muted"
 		].join(" "),
-		trigger: `absolute inset-0 flex cursor-pointer items-center justify-end rounded-[var(--radius-control)] bg-transparent px-3 text-muted disabled:cursor-not-allowed ${G}`,
+		trigger: `absolute inset-0 flex cursor-pointer items-center justify-end rounded-[var(--radius-control)] bg-transparent px-3 text-muted disabled:cursor-not-allowed ${Gt}`,
 		clip: "relative min-w-0 flex-1 overflow-hidden p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] -m-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] pointer-events-none",
 		track: "relative flex min-h-[calc(var(--text-body)*var(--leading-body))] items-center gap-1",
 		chip: [
@@ -695,9 +1066,9 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 			"rounded-[var(--radius-control)] bg-backing py-0.5 pr-0.5 pl-2 font-secondary text-small text-foreground",
 			"group-data-[disabled]/field:text-muted data-[overflow]:invisible data-[overflow]:absolute"
 		].join(" "),
-		count: Ge,
-		countMeasure: `${Ge} invisible absolute`,
-		iconButton: `relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-control)] text-muted transition-colors duration-[var(--motion-duration-color)] hover:text-foreground disabled:cursor-not-allowed disabled:hover:text-muted ${G}`,
+		count: Kt,
+		countMeasure: `${Kt} invisible absolute`,
+		iconButton: `relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-control)] text-muted transition-colors duration-[var(--motion-duration-color)] hover:text-foreground disabled:cursor-not-allowed disabled:hover:text-muted ${Gt}`,
 		surface: [
 			"absolute left-0 right-0 z-10 flex flex-col gap-1 overflow-y-auto p-1",
 			"rounded-[var(--radius-control)] border border-solid border-border bg-surface shadow-[var(--elevation-floating)]",
@@ -706,22 +1077,22 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		].join(" ")
 	} },
 	defaultVariants: { part: "root" }
-}), Ke = v([
+}), qt = y([
 	"group/option flex w-full flex-row items-center gap-3 text-left",
 	"rounded-[var(--radius-control)] bg-transparent px-3 py-2 hover:bg-backing",
 	"cursor-pointer disabled:cursor-not-allowed",
 	"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)]"
-].join(" ")), q = 8, qe = i(void 0), Je = (e) => {
-	let t = s(qe);
-	if (t === void 0) throw new We(e);
+].join(" ")), Jt = 8, Yt = a(void 0), Xt = (e) => {
+	let t = c(Yt);
+	if (t === void 0) throw new Wt(e);
 	return t;
-}, J = (e) => (t) => {
+}, X = (e) => (t) => {
 	e.current = t ?? void 0;
-}, Y = (e) => e.getBoundingClientRect().width, Ye = (e) => n.toArray(e).flatMap((e) => {
-	if (!a(e)) return [];
-	if (e.type === r) return Ye(e.props.children);
-	if (e.type === it) {
+}, Zt = (e) => e.getBoundingClientRect().width, Qt = (e) => r.toArray(e).flatMap((e) => {
+	if (!o(e)) return [];
+	if (e.type === i) return Qt(e.props.children);
+	if (e.type === cn) {
 		let { value: t, children: n } = e.props;
 		return [{
 			value: t,
@@ -729,75 +1100,75 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		}];
 	}
 	return [];
-}), Xe = (e) => Array.from(e.querySelectorAll("[data-multiselect-chip]:not([data-overflow]) button")), Ze = (e) => {
+}), $t = (e) => Array.from(e.querySelectorAll("[data-multiselect-chip]:not([data-overflow]) button")), en = (e) => {
 	let t = document.activeElement;
 	return !e.contains(t) || t instanceof Element && t.closest("[data-overflow]") !== null;
-}, Qe = (e) => e.querySelector("[role=\"checkbox\"][aria-checked=\"true\"]") ?? e.querySelector("[role=\"checkbox\"]") ?? void 0, $e = (e, t) => [...new Set(e.map(({ value: e }) => e).filter((e) => t.has(e)))], et = (e) => e.kind === "firstOption" || !e.control.isConnected, tt = (e, t, n, r) => {
+}, tn = (e) => e.querySelector("[role=\"checkbox\"][aria-checked=\"true\"]") ?? e.querySelector("[role=\"checkbox\"]") ?? void 0, nn = (e, t) => [...new Set(e.map(({ value: e }) => e).filter((e) => t.has(e)))], rn = (e) => e.kind === "firstOption" || !e.control.isConnected, an = (e, t, n, r) => {
 	switch (e.kind) {
-		case "firstOption": return r === void 0 ? void 0 : Qe(r);
+		case "firstOption": return r === void 0 ? void 0 : tn(r);
 		case "afterRemoval": {
-			let r = Xe(t);
+			let r = $t(t);
 			return r[e.index] ?? r[e.index - 1] ?? n;
 		}
 		case "afterClear": return n;
 	}
-}, nt = () => /* @__PURE__ */ e("svg", {
+}, on = () => /* @__PURE__ */ t("svg", {
 	"aria-hidden": !0,
 	focusable: !1,
 	viewBox: "0 0 16 16",
 	className: "size-3",
-	children: /* @__PURE__ */ e("path", {
+	children: /* @__PURE__ */ t("path", {
 		d: "M4 4l8 8M12 4l-8 8",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: 1.5,
 		strokeLinecap: "round"
 	})
-}), rt = ({ label: n, selected$: r, onChange$: i, emptyLabel: a, removeLabel: o, clearLabel: s, overflowLabel: m, hint: h, disabled: g, testId: _, children: v }) => {
-	let y = l(), b = `${y}-label`, x = `${y}-trigger`, S = `${y}-options`, C = `${y}-hint`, w = `${y}-empty`, T = g === !0, [ee, E] = p([]), [te, D] = p(!1), [O, ne] = p(void 0), [re, ie] = p("below"), [, ae] = d((e) => e + 1, 0), k = f(void 0), A = f(void 0), j = f(void 0), M = f(void 0), N = f(void 0), P = f(void 0), F = f(!1), I = te && !T, L = Ye(v), R = new Set(ee), z = L.filter((e) => R.has(e.value)), B = O === void 0 ? z.length : Math.min(O, z.length), V = z.length - B;
-	u(() => {
-		E([]);
-		let e = r.subscribe((e) => E(e));
+}), sn = ({ label: e, selected$: r, onChange$: i, emptyLabel: a, removeLabel: o, clearLabel: s, overflowLabel: c, hint: h, disabled: g, testId: _, children: v }) => {
+	let y = u(), b = `${y}-label`, x = `${y}-trigger`, S = `${y}-options`, C = `${y}-hint`, w = `${y}-empty`, T = g === !0, [E, D] = m([]), [ee, O] = m(!1), [k, te] = m(void 0), [ne, A] = m("below"), [, re] = f((e) => e + 1, 0), j = p(void 0), ie = p(void 0), M = p(void 0), N = p(void 0), P = p(void 0), F = p(void 0), I = p(!1), L = ee && !T, ae = Qt(v), R = new Set(E), z = ae.filter((e) => R.has(e.value)), B = k === void 0 ? z.length : Math.min(k, z.length), V = z.length - B;
+	d(() => {
+		D([]);
+		let e = r.subscribe((e) => D(e));
 		return () => e.unsubscribe();
-	}, [r]), c(() => {
-		T && D(!1);
-	}, [T]), u(() => {
-		let e = M.current;
+	}, [r]), l(() => {
+		T && O(!1);
+	}, [T]), d(() => {
+		let e = N.current;
 		if (e === void 0 || typeof ResizeObserver > "u") return;
-		let t = new ResizeObserver(() => ae());
+		let t = new ResizeObserver(() => re());
 		return t.observe(e), () => t.disconnect();
-	}, []), u(() => {
-		let e = M.current;
+	}, []), d(() => {
+		let e = N.current;
 		if (e === void 0) return;
-		let t = Array.from(e.querySelectorAll("[data-multiselect-chip]")), n = e.querySelector("[data-multiselect-count]"), r = Number.parseFloat(getComputedStyle(e).columnGap) || 0, i = Ue(t.map(Y), n === null ? 0 : Y(n), Y(e), r);
-		ne((e) => e === i ? e : i);
-	}), u(() => {
-		let e = A.current, t = N.current;
-		if (!I || e === void 0 || t === void 0) return;
-		let n = e.getBoundingClientRect(), r = window.innerHeight - n.bottom - q, i = n.top - q, a = t.scrollHeight > r && i > r;
-		t.style.setProperty("--multiselect-surface-max-height", `${Math.max(a ? i : r, 0)}px`), ie(a ? "above" : "below");
-	}), c(() => {
-		if (!I) return;
+		let t = Array.from(e.querySelectorAll("[data-multiselect-chip]")), n = e.querySelector("[data-multiselect-count]"), r = Number.parseFloat(getComputedStyle(e).columnGap) || 0, i = Ut(t.map(Zt), n === null ? 0 : Zt(n), Zt(e), r);
+		te((e) => e === i ? e : i);
+	}), d(() => {
+		let e = ie.current, t = P.current;
+		if (!L || e === void 0 || t === void 0) return;
+		let n = e.getBoundingClientRect(), r = window.innerHeight - n.bottom - Jt, i = n.top - Jt, a = t.scrollHeight > r && i > r;
+		t.style.setProperty("--multiselect-surface-max-height", `${Math.max(a ? i : r, 0)}px`), A(a ? "above" : "below");
+	}), l(() => {
+		if (!L) return;
 		let e = (e) => {
-			let t = k.current;
-			t !== void 0 && e.target instanceof Node && !t.contains(e.target) && (F.current = !1, P.current = void 0, D(!1));
+			let t = j.current;
+			t !== void 0 && e.target instanceof Node && !t.contains(e.target) && (I.current = !1, F.current = void 0, O(!1));
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [I]), u(() => {
-		let e = k.current, t = j.current;
+	}, [L]), d(() => {
+		let e = j.current, t = M.current;
 		if (e === void 0 || t === void 0) return;
-		let n = P.current;
-		n !== void 0 && et(n) ? (P.current = void 0, tt(n, e, t, I ? N.current : void 0)?.focus()) : n === void 0 && F.current && Ze(e) && t.focus(), F.current = e.contains(document.activeElement);
+		let n = F.current;
+		n !== void 0 && rn(n) ? (F.current = void 0, an(n, e, t, L ? P.current : void 0)?.focus()) : n === void 0 && I.current && en(e) && t.focus(), I.current = e.contains(document.activeElement);
 	});
 	let H = (e) => {
-		i.next($e(L, e));
+		i.next(nn(ae, e));
 	}, oe = (e) => {
 		if (T) return;
 		let t = new Set(R);
 		t.delete(e) || t.add(e), H(t);
 	}, se = (e, t) => (n) => {
 		if (T) return;
-		document.activeElement === n.currentTarget && (P.current = {
+		document.activeElement === n.currentTarget && (F.current = {
 			kind: "afterRemoval",
 			index: t,
 			control: n.currentTarget
@@ -805,68 +1176,68 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		let r = new Set(R);
 		r.delete(e), H(r);
 	}, ce = (e) => {
-		T || (document.activeElement === e.currentTarget && (P.current = {
+		T || (document.activeElement === e.currentTarget && (F.current = {
 			kind: "afterClear",
 			control: e.currentTarget
 		}), i.next([]));
 	}, U = (e) => {
-		T || (e.detail === 0 && (P.current = { kind: "firstOption" }), D(!0));
+		T || (e.detail === 0 && (F.current = { kind: "firstOption" }), O(!0));
 	}, le = (e) => {
-		I ? D(!1) : U(e);
+		L ? O(!1) : U(e);
 	}, ue = (e) => {
 		if (e.key !== "ArrowDown" || T) return;
 		e.preventDefault();
-		let t = N.current;
-		I && t !== void 0 ? Qe(t)?.focus() : (P.current = { kind: "firstOption" }, D(!0));
+		let t = P.current;
+		L && t !== void 0 ? tn(t)?.focus() : (F.current = { kind: "firstOption" }, O(!0));
 	}, W = (e) => {
-		e.key !== "Escape" || !I || (e.preventDefault(), e.stopPropagation(), D(!1), j.current?.focus());
+		e.key !== "Escape" || !L || (e.preventDefault(), e.stopPropagation(), O(!1), M.current?.focus());
 	}, de = (e) => {
-		F.current = !0;
-		let t = P.current;
-		t !== void 0 && t.kind !== "firstOption" && e.target !== t.control && (P.current = void 0);
+		I.current = !0;
+		let t = F.current;
+		t !== void 0 && t.kind !== "firstOption" && e.target !== t.control && (F.current = void 0);
 	}, fe = (e) => {
-		let t = k.current, n = e.relatedTarget;
-		t !== void 0 && n instanceof Node && t.contains(n) || e.target.isConnected && (F.current = !1, P.current = void 0, D(!1));
+		let t = j.current, n = e.relatedTarget;
+		t !== void 0 && n instanceof Node && t.contains(n) || e.target.isConnected && (I.current = !1, F.current = void 0, O(!1));
 	}, pe = (e) => {
 		(!(e.target instanceof Element) || e.target.closest("button") === null) && e.preventDefault();
-	}, me = [z.length === 0 ? w : void 0, h ? C : void 0].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ t("div", {
-		ref: J(k),
-		className: K(),
+	}, G = [z.length === 0 ? w : void 0, h ? C : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ n("div", {
+		ref: X(j),
+		className: Y(),
 		onKeyDown: W,
 		onFocus: de,
 		onBlur: fe,
 		children: [
-			/* @__PURE__ */ e("label", {
+			/* @__PURE__ */ t("label", {
 				id: b,
 				htmlFor: x,
-				children: n
+				children: e
 			}),
-			/* @__PURE__ */ t("div", {
-				ref: J(A),
+			/* @__PURE__ */ n("div", {
+				ref: X(ie),
 				"data-multiselect-field": !0,
 				"data-disabled": T || void 0,
-				className: K({ part: "field" }),
+				className: Y({ part: "field" }),
 				children: [
-					/* @__PURE__ */ e("button", {
-						ref: J(j),
+					/* @__PURE__ */ t("button", {
+						ref: X(M),
 						id: x,
 						type: "button",
 						"aria-labelledby": b,
-						"aria-expanded": I,
-						"aria-controls": I ? S : void 0,
-						"aria-describedby": me,
+						"aria-expanded": L,
+						"aria-controls": L ? S : void 0,
+						"aria-describedby": G,
 						disabled: T,
 						"data-testid": _,
-						className: K({ part: "trigger" }),
+						className: Y({ part: "trigger" }),
 						onClick: le,
 						onKeyDown: ue,
-						children: /* @__PURE__ */ e("svg", {
+						children: /* @__PURE__ */ t("svg", {
 							"aria-hidden": !0,
 							focusable: !1,
 							viewBox: "0 0 16 16",
 							className: "size-4",
-							children: /* @__PURE__ */ e("path", {
+							children: /* @__PURE__ */ t("path", {
 								d: "M3 6l5 5 5-5",
 								fill: "none",
 								stroke: "currentColor",
@@ -876,80 +1247,80 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 							})
 						})
 					}),
-					/* @__PURE__ */ e("div", {
-						className: K({ part: "clip" }),
-						children: /* @__PURE__ */ t("div", {
-							ref: J(M),
+					/* @__PURE__ */ t("div", {
+						className: Y({ part: "clip" }),
+						children: /* @__PURE__ */ n("div", {
+							ref: X(N),
 							"data-multiselect-track": !0,
-							className: K({ part: "track" }),
+							className: Y({ part: "track" }),
 							children: [
-								z.length === 0 && /* @__PURE__ */ e("span", {
+								z.length === 0 && /* @__PURE__ */ t("span", {
 									id: w,
 									className: "truncate text-muted",
 									children: a
 								}),
-								z.map(({ value: n, label: r }, i) => {
+								z.map(({ value: e, label: r }, i) => {
 									let a = i >= B;
-									return /* @__PURE__ */ t("span", {
+									return /* @__PURE__ */ n("span", {
 										"data-multiselect-chip": !0,
 										"data-overflow": a || void 0,
 										"aria-hidden": a || void 0,
 										inert: a || void 0,
-										className: K({ part: "chip" }),
-										children: [/* @__PURE__ */ e("span", {
+										className: Y({ part: "chip" }),
+										children: [/* @__PURE__ */ t("span", {
 											className: "truncate",
 											children: r
-										}), /* @__PURE__ */ e("button", {
+										}), /* @__PURE__ */ t("button", {
 											type: "button",
 											"aria-label": o.replaceAll("{label}", r),
 											disabled: T,
 											tabIndex: a ? -1 : void 0,
-											className: K({ part: "iconButton" }),
-											onClick: se(n, i),
-											children: /* @__PURE__ */ e(nt, {})
+											className: Y({ part: "iconButton" }),
+											onClick: se(e, i),
+											children: /* @__PURE__ */ t(on, {})
 										})]
-									}, n);
+									}, e);
 								}),
-								V > 0 && /* @__PURE__ */ e("button", {
+								V > 0 && /* @__PURE__ */ t("button", {
 									type: "button",
 									disabled: T,
-									className: K({ part: "count" }),
+									className: Y({ part: "count" }),
 									onClick: U,
-									children: m.replaceAll("{count}", String(V))
+									children: c.replaceAll("{count}", String(V))
 								}),
-								z.length > 0 && /* @__PURE__ */ e("span", {
+								z.length > 0 && /* @__PURE__ */ t("span", {
 									"aria-hidden": !0,
 									"data-multiselect-count": !0,
-									className: K({ part: "countMeasure" }),
-									children: m.replaceAll("{count}", String(z.length))
+									className: Y({ part: "countMeasure" }),
+									children: c.replaceAll("{count}", String(z.length))
 								})
 							]
 						})
 					}),
-					z.length > 0 ? /* @__PURE__ */ e("button", {
+					z.length > 0 ? /* @__PURE__ */ t("button", {
 						type: "button",
 						"aria-label": s,
 						disabled: T,
-						className: K({ part: "iconButton" }),
+						className: Y({ part: "iconButton" }),
 						onClick: ce,
-						children: /* @__PURE__ */ e(nt, {})
-					}) : /* @__PURE__ */ e("span", {
+						children: /* @__PURE__ */ t(on, {})
+					}) : /* @__PURE__ */ t("span", {
 						"aria-hidden": !0,
 						className: "size-6 shrink-0"
 					}),
-					/* @__PURE__ */ e("span", {
+					/* @__PURE__ */ t("span", {
 						"aria-hidden": !0,
 						className: "size-6 shrink-0"
 					}),
-					I && /* @__PURE__ */ e("div", {
-						ref: J(N),
+					L && /* @__PURE__ */ t("div", {
+						ref: X(P),
 						id: S,
 						role: "group",
 						"aria-labelledby": b,
-						"data-placement": re,
-						className: K({ part: "surface" }),
+						"data-placement": ne,
+						className: Y({ part: "surface" }),
 						onMouseDown: pe,
-						children: /* @__PURE__ */ e(qe, {
+						children: /* @__PURE__ */ t(Yt, {
 							value: {
 								selected: R,
 								disabled: T,
@@ -960,30 +1331,30 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 					})
 				]
 			}),
-			h && /* @__PURE__ */ e("p", {
+			h && /* @__PURE__ */ t("p", {
 				id: C,
 				children: h
 			})
 		]
 	});
-}, it = ({ value: n, children: r, testId: i }) => {
-	let { selected: a, disabled: o, toggle: s } = Je("Option"), c = a.has(n);
-	return /* @__PURE__ */ t("button", {
+}, cn = ({ value: e, children: r, testId: i }) => {
+	let { selected: a, disabled: o, toggle: s } = Xt("Option"), c = a.has(e);
+	return /* @__PURE__ */ n("button", {
 		type: "button",
 		role: "checkbox",
 		"aria-checked": c,
 		disabled: o,
 		"data-testid": i,
-		className: Ke(),
-		onClick: () => s(n),
-		children: [/* @__PURE__ */ e("span", {
+		className: qt(),
+		onClick: () => s(e),
+		children: [/* @__PURE__ */ t("span", {
 			className: "flex size-[var(--choice-marker-size)] shrink-0 items-center justify-center border border-solid border-control-border group-aria-checked/option:border-foreground",
-			children: c && /* @__PURE__ */ e("svg", {
+			children: c && /* @__PURE__ */ t("svg", {
 				"aria-hidden": !0,
 				focusable: !1,
 				viewBox: "0 0 16 16",
 				className: "size-3 text-foreground",
-				children: /* @__PURE__ */ e("path", {
+				children: /* @__PURE__ */ t("path", {
 					d: "M3 8.5l3 3 7-7",
 					fill: "none",
 					stroke: "currentColor",
@@ -992,81 +1363,81 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 					strokeLinejoin: "round"
 				})
 			})
-		}), /* @__PURE__ */ e("span", {
+		}), /* @__PURE__ */ t("span", {
 			className: "min-w-0 flex-1 font-secondary text-body text-foreground [overflow-wrap:anywhere]",
 			children: r
 		})]
 	});
-}, at = {
-	Root: rt,
-	Option: it
-}, ot = v("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"), st = ({ label: n, name: r, required: i, optionalLabel: a, hint: o, invalid: s, errorMessage: u, disabled: d, placeholder: p, defaultValue: m, onInput$: h, reset$: g, testId: _ }) => {
-	let v = l(), y = `${v}-control`, b = `${v}-hint`, x = `${v}-error`, S = [o ? b : void 0, s ? x : void 0].filter(Boolean).join(" ") || void 0, C = f(null);
-	return c(() => {
+}, ln = {
+	Root: sn,
+	Option: cn
+}, un = y("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-control 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"), dn = ({ label: e, name: r, required: i, optionalLabel: a, hint: o, invalid: s, errorMessage: c, disabled: d, placeholder: f, defaultValue: m, onInput$: h, reset$: g, testId: _ }) => {
+	let v = u(), y = `${v}-control`, b = `${v}-hint`, x = `${v}-error`, S = [o ? b : void 0, s ? x : void 0].filter(Boolean).join(" ") || void 0, C = p(null);
+	return l(() => {
 		let e = g?.subscribe(() => {
 			C.current && (C.current.value = "");
 		});
 		return () => e?.unsubscribe();
-	}, [g]), /* @__PURE__ */ t("div", {
+	}, [g]), /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-[var(--space-stack)]",
 		children: [
-			/* @__PURE__ */ e("label", {
+			/* @__PURE__ */ t("label", {
 				htmlFor: y,
 				className: "font-secondary font-medium text-body text-foreground",
-				children: n
+				children: e
 			}),
-			/* @__PURE__ */ e("input", {
+			/* @__PURE__ */ t("input", {
 				ref: C,
 				id: y,
 				name: r,
 				type: "text",
 				inputMode: "decimal",
-				className: ot(),
+				className: un(),
 				required: i,
 				disabled: d,
 				defaultValue: m,
-				placeholder: p,
+				placeholder: f,
 				"aria-invalid": s || void 0,
 				"aria-describedby": S,
 				"data-testid": _,
 				onInput: (e) => !d && h?.next(e.currentTarget.value)
 			}),
-			!i && a && /* @__PURE__ */ e("span", {
+			!i && a && /* @__PURE__ */ t("span", {
 				className: "font-secondary text-muted text-small",
 				children: a
 			}),
-			o && /* @__PURE__ */ e("p", {
+			o && /* @__PURE__ */ t("p", {
 				id: b,
 				className: "font-secondary text-muted text-small",
 				children: o
 			}),
-			s && /* @__PURE__ */ e("p", {
+			s && /* @__PURE__ */ t("p", {
 				id: x,
 				className: "font-secondary text-error text-small",
-				children: u
+				children: c
 			})
 		]
 	});
-}, ct = v([
+}, fn = y([
 	"flex flex-col gap-[var(--space-stack)]",
 	"[&>label]:font-secondary [&>label]:font-medium [&>label]:text-body [&>label]:text-foreground",
 	"[&>span]:font-secondary [&>span]:text-muted [&>span]:text-small",
 	"[&>p]:font-secondary [&>p]:text-small [&>p]:text-muted [&>p[data-error]]:text-error",
 	"[&>select]:block [&>select]:w-full [&>select]:rounded-[var(--radius-control)] [&>select]:border [&>select]:border-solid [&>select]:border-control-border [&>select]:bg-transparent [&>select]:px-3 [&>select]:py-2",
-	"[&>select]:font-primary [&>select]:text-body [&>select]:text-foreground [&>select]:transition-colors [&>select]:duration-[var(--motion-duration-color)]",
+	"[&>select]:font-control [&>select]:text-body [&>select]:text-foreground [&>select]:transition-colors [&>select]:duration-[var(--motion-duration-color)]",
 	"[&>select]:outline-focus-ring [&>select]:outline-offset-[var(--focus-ring-offset)] [&>select]:focus-visible:outline [&>select]:focus-visible:outline-[length:var(--focus-ring-width)]",
 	"[&>select:user-invalid]:border-error [&>select]:aria-[invalid=true]:border-error [&>select]:disabled:cursor-not-allowed [&>select]:disabled:border-disabled [&>select]:disabled:text-muted"
-].join(" ")), lt = {
-	Root: ({ label: n, name: r, required: i, optionalLabel: a, disabled: o, invalid: s, hint: c, errorMessage: u, testId: d, defaultValue: f, onChange$: p, placeholder: m, children: h }) => {
-		let g = l(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [c ? v : void 0, s && u ? y : void 0].filter(Boolean).join(" ") || void 0;
-		return /* @__PURE__ */ t("div", {
-			className: ct(),
+].join(" ")), pn = {
+	Root: ({ label: e, name: r, required: i, optionalLabel: a, disabled: o, invalid: s, hint: c, errorMessage: l, testId: d, defaultValue: f, onChange$: p, placeholder: m, children: h }) => {
+		let g = u(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [c ? v : void 0, s && l ? y : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ n("div", {
+			className: fn(),
 			children: [
-				/* @__PURE__ */ e("label", {
+				/* @__PURE__ */ t("label", {
 					htmlFor: _,
-					children: n
+					children: e
 				}),
-				/* @__PURE__ */ t("select", {
+				/* @__PURE__ */ n("select", {
 					id: _,
 					name: r,
 					required: i,
@@ -1076,34 +1447,34 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 					"aria-describedby": b,
 					"data-testid": d,
 					onChange: (e) => !o && p?.next(e.currentTarget.value),
-					children: [/* @__PURE__ */ e("option", {
+					children: [/* @__PURE__ */ t("option", {
 						value: "",
 						children: m
 					}), h]
 				}),
-				!i && a && /* @__PURE__ */ e("span", { children: a }),
-				c && /* @__PURE__ */ e("p", {
+				!i && a && /* @__PURE__ */ t("span", { children: a }),
+				c && /* @__PURE__ */ t("p", {
 					id: v,
 					children: c
 				}),
-				s && u && /* @__PURE__ */ e("p", {
+				s && l && /* @__PURE__ */ t("p", {
 					id: y,
 					"data-error": !0,
-					children: u
+					children: l
 				})
 			]
 		});
 	},
-	Option: ({ value: t, children: n, testId: r }) => /* @__PURE__ */ e("option", {
-		value: t,
+	Option: ({ value: e, children: n, testId: r }) => /* @__PURE__ */ t("option", {
+		value: e,
 		"data-testid": r,
 		children: n
 	})
-}, X = class extends Error {
+}, Z = class extends Error {
 	constructor(e) {
 		super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
 	}
-}, ut = v([
+}, mn = y([
 	"block h-[var(--slider-thumb-size)] w-full cursor-pointer appearance-none bg-transparent",
 	"disabled:cursor-not-allowed",
 	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]",
@@ -1114,192 +1485,202 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 	"[&::-moz-range-track]:h-[var(--slider-track-thickness)] [&::-moz-range-track]:rounded-[var(--radius-control)] [&::-moz-range-track]:bg-control-border",
 	"[&::-moz-range-thumb]:size-[var(--slider-thumb-size)] [&::-moz-range-thumb]:rounded-[var(--radius-control)] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-foreground",
 	"[&:disabled::-moz-range-track]:bg-disabled [&:disabled::-moz-range-thumb]:bg-disabled"
-].join(" ")), dt = (e) => {
-	for (let [t, n] of Object.entries(e)) if (!Number.isFinite(n)) throw new X(`\`${t}\` must be a finite number, got ${n}`);
-	if (e.min >= e.max) throw new X(`\`min\` (${e.min}) must be below \`max\` (${e.max})`);
-	if (e.step <= 0) throw new X(`\`step\` (${e.step}) must be positive`);
-	if (e.value < e.min || e.value > e.max) throw new X(`\`value\` (${e.value}) must lie within [${e.min}, ${e.max}]`);
-}, ft = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (dt({
-	min: t,
-	max: n,
-	step: r,
-	value: i
-}), /* @__PURE__ */ e("input", {
-	type: "range",
-	className: ut(),
-	min: t,
-	max: n,
-	step: r,
-	value: i,
-	disabled: c,
-	"aria-label": o,
-	"aria-valuetext": s,
-	"data-testid": l,
-	onChange: (e) => a.next(e.currentTarget.valueAsNumber)
-})), pt = class extends Error {
+].join(" ")), hn = (e) => {
+	for (let [t, n] of Object.entries(e)) if (!Number.isFinite(n)) throw new Z(`\`${t}\` must be a finite number, got ${n}`);
+	if (e.min >= e.max) throw new Z(`\`min\` (${e.min}) must be below \`max\` (${e.max})`);
+	if (e.step <= 0) throw new Z(`\`step\` (${e.step}) must be positive`);
+	if (e.value < e.min || e.value > e.max) throw new Z(`\`value\` (${e.value}) must lie within [${e.min}, ${e.max}]`);
+}, gn = ({ min: e, max: r, step: i = 1, value: a, onInput$: o, label: s, valueText: c, disabled: l, testId: d }) => {
+	let f = `${u()}-control`;
+	return hn({
+		min: e,
+		max: r,
+		step: i,
+		value: a
+	}), /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: f,
+			className: "font-secondary font-medium text-body text-foreground",
+			children: s
+		}), /* @__PURE__ */ t("input", {
+			id: f,
+			type: "range",
+			className: mn(),
+			min: e,
+			max: r,
+			step: i,
+			value: a,
+			disabled: l,
+			"aria-valuetext": c,
+			"data-testid": d,
+			onChange: (e) => o.next(e.currentTarget.valueAsNumber)
+		})]
+	});
+}, _n = class extends Error {
 	constructor(e) {
 		super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
 	}
-}, mt = v([
+}, vn = y([
 	"flex flex-row overflow-x-auto",
 	"p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
 	"m-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]",
 	"scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]"
-].join(" ")), ht = v([
+].join(" ")), yn = y([
 	"font-secondary text-label tracking-label",
 	"text-muted hover:text-foreground aria-selected:text-foreground",
 	"border-b-[length:var(--tab-marker-thickness)] border-solid border-transparent aria-selected:border-foreground",
-	"shrink-0 cursor-pointer select-none text-nowrap px-[var(--tab-inset-inline)] py-[var(--tab-inset-block)]",
+	"cursor-pointer select-none px-[var(--tab-inset-inline)] py-[var(--tab-inset-block)]",
 	"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)]"
-].join(" ")), gt = v("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), _t = i(void 0), Z = (e) => {
-	let t = s(_t);
-	if (t === void 0) throw new pt(e);
+].join(" ")), bn = y("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), xn = a(void 0), Sn = (e) => {
+	let t = c(xn);
+	if (t === void 0) throw new _n(e);
 	return t;
-}, vt = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), yt = (e) => {
+}, Cn = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), wn = (e) => {
 	e.currentTarget.scrollIntoView({
 		block: "nearest",
 		inline: "nearest"
 	});
-}, bt = (e, t) => `${e}tab-${vt(t)}`, xt = (e, t) => `${e}panel-${vt(t)}`, St = (e, t) => {
+}, Tn = (e, t) => `${e}tab-${Cn(t)}`, En = (e, t) => `${e}panel-${Cn(t)}`, Dn = (e, t) => {
 	let n = e.closest("[role=\"tablist\"]");
 	if (n === null) return;
 	let r = Array.from(n.querySelectorAll(":scope > [role=\"tab\"]"));
 	return r[(r.indexOf(e) + t + r.length) % r.length];
-}, Ct = {
-	Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
-		let o = l();
-		return /* @__PURE__ */ e(_t.Provider, {
+}, On = {
+	Root: ({ active: e, onSelect$: n, label: r, children: i, testId: a }) => {
+		let o = u();
+		return /* @__PURE__ */ t(xn.Provider, {
 			value: {
-				active: t,
+				active: e,
 				onSelect$: n,
 				label: r,
 				baseId: o
 			},
-			children: /* @__PURE__ */ e("div", {
+			children: /* @__PURE__ */ t("div", {
 				"data-testid": a,
 				children: i
 			})
 		});
 	},
-	List: ({ children: t, testId: n }) => {
-		let { label: r } = Z("List");
-		return /* @__PURE__ */ e("div", {
+	List: ({ children: e, testId: n }) => {
+		let { label: r } = Sn("List");
+		return /* @__PURE__ */ t("div", {
 			role: "tablist",
 			"aria-label": r,
-			className: mt(),
+			className: vn(),
 			"data-testid": n,
-			children: t
+			children: e
 		});
 	},
-	Tab: ({ value: t, children: n, testId: r }) => {
-		let { active: i, onSelect$: a, baseId: o } = Z("Tab"), s = i === t;
-		return /* @__PURE__ */ e("button", {
+	Tab: ({ value: e, children: n, testId: r }) => {
+		let { active: i, onSelect$: a, baseId: o } = Sn("Tab"), s = i === e;
+		return /* @__PURE__ */ t("button", {
 			type: "button",
 			role: "tab",
-			id: bt(o, t),
+			id: Tn(o, e),
 			"aria-selected": s,
-			"aria-controls": xt(o, t),
+			"aria-controls": En(o, e),
 			tabIndex: s ? 0 : -1,
-			"data-value": t,
+			"data-value": e,
 			"data-testid": r,
-			className: ht(),
-			onClick: () => a.next(t),
+			className: yn(),
+			onClick: () => a.next(e),
 			onKeyDown: (e) => {
 				if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 				e.preventDefault();
-				let t = St(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
+				let t = Dn(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
 				if (t === void 0) return;
 				t.focus();
 				let n = t.dataset.value;
 				n !== void 0 && a.next(n);
 			},
-			onFocus: yt,
+			onFocus: wn,
 			children: n
 		});
 	},
-	Panel: ({ value: t, children: n, testId: r }) => {
-		let { active: i, baseId: a } = Z("Panel"), o = i === t;
-		return /* @__PURE__ */ e("div", {
+	Panel: ({ value: e, children: n, testId: r }) => {
+		let { active: i, baseId: a } = Sn("Panel"), o = i === e;
+		return /* @__PURE__ */ t("div", {
 			role: "tabpanel",
-			id: xt(a, t),
-			"aria-labelledby": bt(a, t),
+			id: En(a, e),
+			"aria-labelledby": Tn(a, e),
 			hidden: !o,
 			tabIndex: o ? 0 : void 0,
-			className: gt(),
+			className: bn(),
 			"data-testid": r,
 			children: o ? n : void 0
 		});
 	}
-}, wt = v("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"), Tt = ({ label: n, name: r, required: i, optionalLabel: a, invalid: o, disabled: s, defaultValue: u, placeholder: d, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
-	let y = l(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, o ? S : void 0].filter(Boolean).join(" ") || void 0, w = f(null);
-	return c(() => {
+}, kn = y("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-control 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"), An = ({ label: e, name: r, required: i, optionalLabel: a, invalid: o, disabled: s, defaultValue: c, placeholder: d, autocomplete: f, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
+	let y = u(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, o ? S : void 0].filter(Boolean).join(" ") || void 0, w = p(null);
+	return l(() => {
 		let e = _?.subscribe(() => {
 			w.current && (w.current.value = "");
 		});
 		return () => e?.unsubscribe();
-	}, [_]), /* @__PURE__ */ t("div", {
+	}, [_]), /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-[var(--space-stack)]",
 		children: [
-			/* @__PURE__ */ e("label", {
+			/* @__PURE__ */ t("label", {
 				htmlFor: b,
 				className: "font-secondary font-medium text-body text-foreground",
-				children: n
+				children: e
 			}),
-			/* @__PURE__ */ e("textarea", {
+			/* @__PURE__ */ t("textarea", {
 				ref: w,
 				id: b,
 				name: r,
-				className: wt(),
+				className: kn(),
 				required: i,
 				disabled: s,
-				defaultValue: u,
+				defaultValue: c,
 				placeholder: d,
-				autoComplete: p,
+				autoComplete: f,
 				"aria-invalid": o || void 0,
 				"aria-describedby": C,
 				"data-testid": v,
 				onInput: (e) => g?.next(e.currentTarget.value)
 			}),
-			!i && a && /* @__PURE__ */ e("span", {
+			!i && a && /* @__PURE__ */ t("span", {
 				className: "font-secondary text-muted text-small",
 				children: a
 			}),
-			m && /* @__PURE__ */ e("p", {
+			m && /* @__PURE__ */ t("p", {
 				id: x,
 				className: "font-secondary text-muted text-small",
 				children: m
 			}),
-			o && /* @__PURE__ */ e("p", {
+			o && /* @__PURE__ */ t("p", {
 				id: S,
 				className: "font-secondary text-error text-small",
 				children: h
 			})
 		]
 	});
-}, Et = v([
+}, jn = y([
 	"flex flex-col items-center",
 	"min-h-[var(--cover-height)]",
 	"px-[var(--gutter)] py-[var(--space-region)]"
-].join(" ")), Dt = "my-auto max-w-full", Ot = ({ children: n, foot: r, testId: i }) => {
+].join(" ")), Mn = "my-auto max-w-full", Nn = ({ children: e, foot: r, testId: i }) => {
 	let a = r != null && typeof r != "boolean";
-	return /* @__PURE__ */ t("div", {
-		className: Et(),
+	return /* @__PURE__ */ n("div", {
+		className: jn(),
 		"data-testid": i,
-		children: [/* @__PURE__ */ e("div", {
-			className: Dt,
-			children: n
-		}), a && /* @__PURE__ */ e("div", { children: r })]
+		children: [/* @__PURE__ */ t("div", {
+			className: Mn,
+			children: e
+		}), a && /* @__PURE__ */ t("div", { children: r })]
 	});
-}, kt = class extends Error {
+}, Pn = class extends Error {
 	constructor(e) {
 		super(`Dialog.${e} must be composed inside Dialog.Root`), this.name = "DialogCompositionError";
 	}
-}, At = class extends Error {
+}, Fn = class extends Error {
 	constructor() {
 		super("A Dialog takes exactly one accessible naming source: a visible Dialog.Title or ariaLabel on Dialog.Root, never both"), this.name = "DialogNamingError";
 	}
-}, jt = v([
+}, In = y([
 	"open:flex open:flex-col m-auto p-0 overflow-hidden",
 	"bg-surface text-foreground",
 	"rounded-[var(--radius-dialog)] shadow-[var(--elevation-floating)]",
@@ -1310,61 +1691,61 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		content: ["w-[32rem] max-w-[calc(100vw-2*var(--gutter))]", "max-h-[calc(100dvh-2*var(--space-region))]"].join(" ")
 	} },
 	defaultVariants: { extent: "screen" }
-}), Mt = v(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), Nt = v(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[[data-dialog-member=title]+&]:mt-[var(--space-stack)] [[data-dialog-member=title]+&]:pt-0"].join(" ")), Pt = v([
+}), Ln = y(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), Rn = y(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[[data-dialog-member=title]+&]:mt-[var(--space-stack)] [[data-dialog-member=title]+&]:pt-0"].join(" ")), zn = y([
 	"grow shrink min-h-0 overflow-y-auto",
 	"px-[var(--space-region)] py-[var(--space-region)]",
 	"[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border"
-].join(" ")), Ft = v([
+].join(" ")), Bn = y([
 	"flex flex-row flex-wrap items-center justify-end gap-[var(--space-stack)] shrink-0",
 	"px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]",
 	"[[data-dialog-member=content]+&]:border-t [[data-dialog-member=content]+&]:border-border"
-].join(" ")), It = i(void 0), Q = (e) => {
-	let t = s(It);
-	if (t === void 0) throw new kt(e);
+].join(" ")), Vn = a(void 0), Q = (e) => {
+	let t = c(Vn);
+	if (t === void 0) throw new Pn(e);
 	return t;
-}, Lt = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", Rt = (e, { presented: t, opener: n }) => {
+}, Hn = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", Un = (e, { presented: t, opener: n }) => {
 	if (e === void 0 || e.open) return;
 	let r = document.activeElement;
-	n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(Lt)?.focus();
+	n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(Hn)?.focus();
 }, $ = (e, { presented: t }) => {
 	t.current = !1, e?.open && e.close();
-}, zt = {
-	Root: ({ children: t, onDismiss$: n, showDialog$: r, extent: i, ariaLabel: a, testId: s }) => {
-		let u = l(), d = f(void 0), m = f(!1), h = f(void 0), [g] = p(() => ({
-			presented: m,
+}, Wn = {
+	Root: ({ children: e, onDismiss$: n, showDialog$: r, extent: i, ariaLabel: a, testId: o }) => {
+		let c = u(), d = p(void 0), f = p(!1), h = p(void 0), [g] = m(() => ({
+			presented: f,
 			opener: h
-		})), [_, v] = p({
+		})), [_, v] = m({
 			title: !1,
 			description: !1
-		}), y = o((e) => (v((t) => ({
+		}), y = s((e) => (v((t) => ({
 			...t,
 			[e]: !0
 		})), () => v((t) => ({
 			...t,
 			[e]: !1
 		}))), []), b = {
-			titleId: `${u}title`,
-			descriptionId: `${u}description`,
+			titleId: `${c}title`,
+			descriptionId: `${c}description`,
 			isLabelled: a !== void 0,
 			registerNamePart: y
 		}, x = () => {
 			n.next(), r === void 0 ? $(d.current, g) : r.next(!1);
 		};
-		return c(() => {
-			if (r === void 0) return Rt(d.current, g), () => $(d.current, g);
+		return l(() => {
+			if (r === void 0) return Un(d.current, g), () => $(d.current, g);
 			let e = r.subscribe((e) => {
-				e ? Rt(d.current, g) : $(d.current, g);
+				e ? Un(d.current, g) : $(d.current, g);
 			});
 			return () => {
 				e.unsubscribe(), $(d.current, g);
 			};
-		}, [r, g]), /* @__PURE__ */ e(It.Provider, {
+		}, [r, g]), /* @__PURE__ */ t(Vn.Provider, {
 			value: b,
-			children: /* @__PURE__ */ e("dialog", {
+			children: /* @__PURE__ */ t("dialog", {
 				ref: (e) => {
 					d.current = e ?? void 0, e?.setAttribute("headingreset", "");
 				},
-				className: jt({ extent: i }),
+				className: In({ extent: i }),
 				"aria-label": a,
 				"aria-labelledby": a === void 0 && _.title ? b.titleId : void 0,
 				"aria-describedby": _.description ? b.descriptionId : void 0,
@@ -1377,66 +1758,66 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 				},
 				onClose: () => {
 					if (d.current?.open) return;
-					let e = m.current;
-					m.current = !1;
+					let e = f.current;
+					f.current = !1;
 					let t = h.current;
-					h.current = void 0, t?.isConnected && (t.matches(Lt) || t.hasAttribute("tabindex")) && t.focus(), e && r?.next(!1);
+					h.current = void 0, t?.isConnected && (t.matches(Hn) || t.hasAttribute("tabindex")) && t.focus(), e && r?.next(!1);
 				},
-				"data-testid": s,
-				children: t
+				"data-testid": o,
+				children: e
 			})
 		});
 	},
-	Title: ({ children: t, testId: n }) => {
+	Title: ({ children: e, testId: n }) => {
 		let { titleId: r, isLabelled: i, registerNamePart: a } = Q("Title");
-		if (c(() => a("title"), [a]), i) throw new At();
-		return /* @__PURE__ */ e("div", {
+		if (l(() => a("title"), [a]), i) throw new Fn();
+		return /* @__PURE__ */ t("div", {
 			"data-dialog-member": "title",
-			className: Mt(),
+			className: Ln(),
 			"data-testid": n,
-			children: /* @__PURE__ */ e("h1", {
+			children: /* @__PURE__ */ t("h1", {
 				id: r,
-				className: "font-primary text-dialog-title leading-dialog-title text-foreground",
-				children: t
+				className: "font-heading text-dialog-title leading-dialog-title text-foreground",
+				children: e
 			})
 		});
 	},
-	Description: ({ children: t, testId: n }) => {
+	Description: ({ children: e, testId: n }) => {
 		let { descriptionId: r, registerNamePart: i } = Q("Description");
-		return c(() => i("description"), [i]), /* @__PURE__ */ e("div", {
+		return l(() => i("description"), [i]), /* @__PURE__ */ t("div", {
 			"data-dialog-member": "description",
-			className: Nt(),
+			className: Rn(),
 			"data-testid": n,
-			children: /* @__PURE__ */ e("p", {
+			children: /* @__PURE__ */ t("p", {
 				id: r,
-				className: "font-primary text-body leading-body text-foreground",
-				children: t
+				className: "font-body text-body leading-body text-foreground",
+				children: e
 			})
 		});
 	},
-	Content: ({ children: t, testId: n }) => (Q("Content"), /* @__PURE__ */ e("div", {
+	Content: ({ children: e, testId: n }) => (Q("Content"), /* @__PURE__ */ t("div", {
 		"data-dialog-member": "content",
-		className: Pt(),
+		className: zn(),
 		"data-testid": n,
-		children: t
+		children: e
 	})),
-	Actions: ({ children: t, testId: n }) => (Q("Actions"), /* @__PURE__ */ e("div", {
+	Actions: ({ children: e, testId: n }) => (Q("Actions"), /* @__PURE__ */ t("div", {
 		"data-dialog-member": "actions",
-		className: Ft(),
+		className: Bn(),
 		"data-testid": n,
-		children: t
+		children: e
 	}))
-}, Bt = v("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, Gn = y("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" }
-}), Vt = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
-	className: Bt({ edge: t }),
+}), Kn = ({ edge: e, children: n, testId: r }) => /* @__PURE__ */ t("footer", {
+	className: Gn({ edge: e }),
 	"data-testid": r,
 	children: n
-}), Ht = v("font-secondary text-small", {
+}), qn = y("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -1444,90 +1825,159 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), Ut = {
+}), Jn = {
 	sent: "status",
 	failed: "alert"
-}, Wt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+}, Yn = ({ action: e, 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 = Ut[i];
-	return /* @__PURE__ */ t("form", {
-		action: n,
+	let u = i !== "sent", d = Jn[i];
+	return /* @__PURE__ */ n("form", {
+		action: e,
 		method: r,
 		"aria-busy": i === "sending" || void 0,
 		"data-testid": c,
 		className: "flex max-w-[var(--measure)] flex-col gap-[var(--space-region)]",
 		children: [
-			u && /* @__PURE__ */ e("div", {
+			u && /* @__PURE__ */ t("div", {
 				className: "flex flex-col gap-[var(--space-stack)]",
 				children: a
 			}),
-			u && o && /* @__PURE__ */ e("div", {
+			u && o && /* @__PURE__ */ t("div", {
 				className: "flex flex-row gap-[var(--space-stack)]",
 				children: o
 			}),
-			l && /* @__PURE__ */ e("p", {
+			l && /* @__PURE__ */ t("p", {
 				role: d,
-				className: Ht({ state: i }),
+				className: qn({ state: i }),
 				children: s
 			})
 		]
 	});
-}, Gt = v([
-	"flex items-baseline justify-between",
+}, Xn = y([
+	"flex items-baseline",
 	"font-secondary text-label leading-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" }
-}), Kt = [
+	variants: {
+		edge: {
+			none: "",
+			rule: "border-b border-solid border-rule"
+		},
+		mode: {
+			navigation: "justify-between",
+			statusAction: "flex-wrap gap-x-[var(--space-region)] gap-y-[var(--space-stack)]"
+		}
+	},
+	defaultVariants: {
+		edge: "rule",
+		mode: "navigation"
+	}
+}), Zn = [
 	"inline-flex shrink-0 items-center",
 	"min-h-[calc(var(--text-label)*var(--leading-label))]",
 	"min-w-[var(--standing-min-width)]"
-].join(" "), qt = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
-	className: Gt({ edge: n }),
-	"data-testid": o,
-	children: [/* @__PURE__ */ e("div", {
-		className: Kt,
-		children: r
-	}), /* @__PURE__ */ e("nav", {
-		"aria-label": i,
-		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
-		children: a
-	})]
-}), Jt = v("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+].join(" "), Qn = "flex flex-wrap items-baseline gap-[var(--space-region)]", $n = "min-w-0 wrap-anywhere", er = "ms-auto", tr = (e) => e != null && typeof e != "boolean" && e !== "", nr = ({ edge: r, testId: i, standing: a, navName: o, children: s, status: c, action: l }) => {
+	let u = c !== void 0 || l !== void 0;
+	return /* @__PURE__ */ t("header", {
+		className: Xn({
+			edge: r,
+			mode: u ? "statusAction" : "navigation"
+		}),
+		"data-testid": i,
+		children: u ? /* @__PURE__ */ n(e, { children: [tr(c) && /* @__PURE__ */ t("div", {
+			className: $n,
+			children: c
+		}), tr(l) && /* @__PURE__ */ t("div", {
+			className: er,
+			children: l
+		})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
+			className: Zn,
+			children: a
+		}), /* @__PURE__ */ t("nav", {
+			"aria-label": o,
+			className: Qn,
+			children: s
+		})] })
+	});
+}, rr = y("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" }
-}), Yt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
-	className: Jt({ place: t }),
+}), ir = ({ place: e, children: n, testId: r }) => /* @__PURE__ */ t("div", {
+	className: rr({ place: e }),
 	"data-testid": r,
 	children: n
-}), Xt = v("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Zt = v("font-primary text-title leading-title tracking-optical text-foreground"), Qt = v("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), $t = v("font-primary text-small text-muted max-w-[var(--measure)]"), en = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
-	className: Xt(),
+}), ar = y("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), or = y("font-heading text-title leading-title tracking-optical text-foreground"), sr = y("font-body text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), cr = y("font-body text-small text-muted max-w-[var(--measure)]"), lr = ({ title: e, lede: r, intro: i, testId: a }) => /* @__PURE__ */ n("header", {
+	className: ar(),
 	"data-testid": a,
 	children: [
-		/* @__PURE__ */ e("h1", {
-			className: Zt(),
-			children: n
+		/* @__PURE__ */ t("h1", {
+			className: or(),
+			children: e
 		}),
-		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: Qt(),
+		r !== void 0 && /* @__PURE__ */ t("p", {
+			className: sr(),
 			children: r
 		}),
-		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: $t(),
+		i !== void 0 && /* @__PURE__ */ t("p", {
+			className: cr(),
 			children: i
 		})
 	]
-}), tn = v([
+}), ur = y("max-h-full max-w-full min-h-0 min-w-0 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+	variants: { axis: {
+		both: "overflow-auto",
+		horizontal: "overflow-x-auto overflow-y-hidden",
+		vertical: "overflow-y-auto overflow-x-hidden"
+	} },
+	defaultVariants: { axis: "both" }
+}), dr = y("p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]", {
+	variants: { axis: {
+		both: "w-fit min-w-full",
+		horizontal: "w-fit min-w-full",
+		vertical: "w-full"
+	} },
+	defaultVariants: { axis: "both" }
+}), fr = (e, t) => {
+	let n = e.scrollWidth > e.clientWidth, r = e.scrollHeight > e.clientHeight;
+	return t !== "vertical" && n || t !== "horizontal" && r;
+}, pr = (e, t, n) => {
+	let [r, i] = m(!0);
+	return d(() => {
+		let r = e.current;
+		if (r === null) return;
+		let a = () => i(fr(r, n) || r === document.activeElement);
+		a();
+		let o = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(a);
+		return o?.observe(r), t.current !== null && o?.observe(t.current), window.addEventListener("resize", a), r.addEventListener("blur", a), () => {
+			o?.disconnect(), window.removeEventListener("resize", a), r.removeEventListener("blur", a);
+		};
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}, mr = ({ axis: e, ariaLabel: n, children: r, testId: i }) => {
+	let a = p(null), o = p(null), s = pr(a, o, e ?? "both");
+	return /* @__PURE__ */ t("div", {
+		ref: a,
+		className: ur({ axis: e }),
+		"data-testid": i,
+		role: s ? "group" : void 0,
+		"aria-label": s ? n : void 0,
+		tabIndex: s ? 0 : void 0,
+		children: /* @__PURE__ */ t("div", {
+			ref: o,
+			className: dr({ axis: e }),
+			children: r
+		})
+	});
+}, hr = y([
 	"relative",
 	"py-[var(--space-band)]",
 	"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -1537,20 +1987,20 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		full: ""
 	} },
 	defaultVariants: { bleed: "inset" }
-}), nn = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+}), gr = ({ bleed: e, name: n, children: r, testId: i }) => /* @__PURE__ */ t("section", {
 	"data-section": "",
-	className: tn({ bleed: t }),
+	className: hr({ bleed: e }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), rn = v([
+}), _r = y([
 	"grid gap-[var(--space-region)] lg:grid-cols-[12rem_minmax(0,1fr)]",
 	"[&>div:first-child]:border-solid [&>div:first-child]:border-border [&>div:first-child]:border-b [&>div:first-child]:pb-[var(--space-stack)]",
 	"lg:[&>div:first-child]:border-b-0 lg:[&>div:first-child]:border-r lg:[&>div:first-child]:pb-0 lg:[&>div:first-child]:pr-[var(--space-stack)]",
 	"lg:[&>div:first-child>nav]:sticky lg:[&>div:first-child>nav]:top-0 lg:[&>div:first-child>nav]:max-h-[min(100dvh,var(--sidebar-scrollport-height,100dvh))] lg:[&>div:first-child>nav]:overflow-y-auto",
 	"[&>div:first-child>nav]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] lg:[&>div:first-child>nav]:scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
 	"[&>div:first-child>nav>ul]:flex [&>div:first-child>nav>ul]:flex-col [&>div:first-child>nav>ul]:gap-[var(--space-stack)]"
-].join(" ")), an = (e) => {
+].join(" ")), vr = (e) => {
 	if (!e) return;
 	let t = [];
 	for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
@@ -1564,8 +2014,8 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 	return window.addEventListener("resize", n), () => {
 		r?.disconnect(), window.removeEventListener("resize", n), e.style.removeProperty("--sidebar-scrollport-height");
 	};
-}, on = v([
-	"w-full text-left font-secondary text-label tracking-label",
+}, yr = y([
+	"w-full text-left font-secondary text-label tracking-label wrap-anywhere",
 	"underline-offset-[var(--underline-offset)]",
 	"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
 ].join(" "), {
@@ -1575,44 +2025,44 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 		inert: "text-muted cursor-not-allowed"
 	} },
 	defaultVariants: { state: "usable" }
-}), sn = i(void 0), cn = ({ entryKey: t, children: n, inert: r, testId: i }) => {
-	let a = s(sn), o = a !== void 0 && a.active === t;
-	return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("button", {
+}), br = a(void 0), xr = ({ entryKey: e, children: n, inert: r, testId: i }) => {
+	let a = c(br), o = a !== void 0 && a.active === e;
+	return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t("button", {
 		type: "button",
-		className: on({ state: r ? "inert" : o ? "active" : "usable" }),
+		className: yr({ state: r ? "inert" : o ? "active" : "usable" }),
 		disabled: r,
 		"aria-current": o ? "true" : void 0,
 		"data-testid": i,
 		onClick: () => {
-			o || a?.onSelect$.next(t);
+			o || a?.onSelect$.next(e);
 		},
 		children: n
 	}) });
-}, ln = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+}, Sr = ({ children: e, testId: n }) => /* @__PURE__ */ t("div", {
 	"data-testid": n,
-	children: t
-}), un = {
-	Root: ({ active: r, label: i, onSelect$: o, children: s, testId: c }) => {
-		let l = n.toArray(s).filter(a);
-		return /* @__PURE__ */ t("div", {
-			className: rn(),
+	children: e
+}), Cr = {
+	Root: ({ active: e, label: i, onSelect$: a, children: s, testId: c }) => {
+		let l = r.toArray(s).filter(o);
+		return /* @__PURE__ */ n("div", {
+			className: _r(),
 			"data-testid": c,
-			children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
-				ref: an,
+			children: [/* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("nav", {
+				ref: vr,
 				"aria-label": i,
-				children: /* @__PURE__ */ e(sn, {
+				children: /* @__PURE__ */ t(br, {
 					value: {
-						active: r,
-						onSelect$: o
+						active: e,
+						onSelect$: a
 					},
-					children: /* @__PURE__ */ e("ul", { children: l.filter((e) => e.type === cn) })
+					children: /* @__PURE__ */ t("ul", { children: l.filter((e) => e.type === xr) })
 				})
-			}) }), l.filter((e) => e.type === ln)]
+			}) }), l.filter((e) => e.type === Sr)]
 		});
 	},
-	Item: cn,
-	Content: ln
-}, dn = {
+	Item: xr,
+	Content: Sr
+}, wr = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -1636,8 +2086,10 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 	success: "#047857",
 	warning: "#b45309",
 	error: "#d63384",
+	errorHover: "#be185d",
+	errorForeground: "#ffffff",
 	info: "#0e7490"
-}, fn = {
+}, Tr = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -1651,8 +2103,8 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 	primary: "#8b5cf6",
 	primaryHover: "#a78bfa",
 	primaryForeground: "#020617",
-	secondary: "#0284c7",
-	secondaryHover: "#0ea5e9",
+	secondary: "#0ea5e9",
+	secondaryHover: "#38bdf8",
 	secondaryForeground: "#020617",
 	disabled: "#475569",
 	disabledHover: "#334155",
@@ -1661,7 +2113,9 @@ var g = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, _ = h, v = (e
 	success: "#34d399",
 	warning: "#fbbf24",
 	error: "#f48fb1",
+	errorHover: "#f8bbd0",
+	errorForeground: "#020617",
 	info: "#22d3ee"
 };
 //#endregion
-export { w as Brandmark, Ae as Button, E as Checklist, Re as Choices, b as Cluster, O as Collection, Ot as Cover, ae as DefinitionList, zt as Dialog, U as Eyebrow, A as Figure, Vt as Footer, Wt as Form, ue as H1, de as H2, pe as H3, he as H4, _e as H5, ye as H6, qt as Header, Yt as Hero, Be as Input, He as Link, P as Meter, at as MultiSelect, xe as Note, st as NumberInput, Ce as P, en as PageHead, Oe as Prose, z as Rail, nn as Section, lt as Select, un as Sidebar, ft as Slider, S as Stack, se as Table, Ct as Tabs, Tt as TextArea, fn as dark, dn as light };
+export { me as Box, ge as Brandmark, At as Button, ye as Checklist, Rt as Choices, x as Cluster, Se as Collection, ie as ColumnLayout, Nn as Cover, Ne as DefinitionList, Wn as Dialog, st as Eyebrow, de as FieldRow, Fe as Figure, Kn as Footer, Yn as Form, lt as H1, dt as H2, pt as H3, ht as H4, _t as H5, yt as H6, nr as Header, ir as Hero, Re as Icon, Bt as Input, Ht as Link, Ve as Meter, ln as MultiSelect, xt as Note, dn as NumberInput, Ct as P, lr as PageHead, Ot as Prose, Ke as Rail, mr as ScrollContainer, gr as Section, pn as Select, Cr as Sidebar, gn as Slider, pe as Stack, at as Table, On as Tabs, An as TextArea, Tr as dark, wr as light };