@juwel-development/design-system 3.7.0 → 3.9.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, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+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 './index.css';//#region node_modules/clsx/dist/clsx.mjs
-function d(e) {
+function m(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 = d(e[t])) && (r && (r += " "), r += n);
+			for (t = 0; t < i; t++) e[t] && (n = m(e[t])) && (r && (r += " "), r += n);
 		} else for (n in e) e[n] && (r && (r += " "), r += n);
 	}
 	return r;
 }
-function f() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = d(e)) && (r && (r += " "), r += t);
+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);
 	return r;
 }
 //#endregion
 //#region node_modules/class-variance-authority/dist/index.mjs
-var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e, t) => (n) => {
-	if (t?.variants == null) return m(e, n?.class, n?.className);
+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);
 	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 = p(t) || p(a);
+		let o = g(t) || g(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 m(e, a, t?.compoundVariants?.reduce((e, t) => {
+	return _(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 p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			r
 		] : e;
 	}, []), n?.class, n?.className);
-}, g = h("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
+}, y = v("flex flex-wrap items-baseline gap-y-[var(--space-stack)]", {
 	variants: {
 		gap: {
 			stack: "gap-x-[var(--space-stack)]",
@@ -61,14 +61,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		gap: "region",
 		justify: "start"
 	}
-}), _ = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
-	className: g({
+}), b = ({ gap: t, justify: n, children: r, testId: i }) => /* @__PURE__ */ e("div", {
+	className: y({
 		gap: t,
 		justify: n
 	}),
 	"data-testid": i,
 	children: r
-}), v = h("flex", {
+}), x = v("flex", {
 	variants: {
 		gap: {
 			stack: "gap-[var(--space-stack)]",
@@ -93,8 +93,8 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		measure: !1,
 		direction: "column"
 	}
-}), y = ({ gap: t, measure: n, direction: r, align: i, children: a, testId: o }) => /* @__PURE__ */ e("div", {
-	className: v({
+}), S = ({ gap: t, measure: n, direction: r, align: i, children: a, testId: o }) => /* @__PURE__ */ e("div", {
+	className: x({
 		gap: t,
 		measure: n,
 		direction: r,
@@ -102,55 +102,55 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	}),
 	"data-testid": o,
 	children: a
-}), b = h("inline-flex", { variants: { cut: {
+}), C = v("inline-flex", { variants: { cut: {
 	full: "",
 	compact: ""
-} } }), x = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
+} } }), w = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
 	"aria-hidden": "true",
 	"data-cut": n,
-	className: b({ cut: n }),
+	className: C({ cut: n }),
 	"data-testid": i,
 	children: r
 }) : /* @__PURE__ */ e("span", {
 	role: "img",
 	"aria-label": t,
 	"data-cut": n,
-	className: b({ cut: n }),
+	className: C({ cut: n }),
 	"data-testid": i,
 	children: r
-}), S = h("m-0 list-none p-0"), C = h([
+}), T = v("m-0 list-none p-0"), ee = v([
 	"flex items-start gap-3 font-primary text-body leading-body text-foreground",
 	"before:mt-[0.35em] before:size-[calc(var(--tick-length)*0.7)] before:shrink-0 before:rotate-45 before:[border-top:var(--tick-thickness)_solid_var(--color-rule)] before:[border-right:var(--tick-thickness)_solid_var(--color-rule)] before:content-['']",
 	"[&:not(:first-child)]:mt-[var(--space-stack)] [&:not(:first-child)]:border-border [&:not(:first-child)]:border-t [&:not(:first-child)]:border-solid [&:not(:first-child)]:pt-[var(--space-stack)]"
-].join(" ")), w = {
+].join(" ")), E = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
-		className: S(),
+		className: T(),
 		role: "list",
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t }) => /* @__PURE__ */ e("li", {
-		className: C(),
+		className: ee(),
 		children: t
 	})
-}, T = h("m-0 list-none p-0"), ee = h("py-[var(--space-collection-item)] [&+li]:border-t [&+li]:border-solid [&+li]:border-border"), te = {
+}, 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: T(),
+		className: te(),
 		role: "list",
 		"data-testid": n,
 		children: t
 	}),
 	Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("li", {
-		className: ee(),
+		className: D(),
 		"data-testid": n,
 		children: t
 	})
-}, ne = h([
+}, 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 = h("font-primary text-subtitle leading-subtitle text-foreground"), ie = h("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), ae = {
+].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
@@ -168,7 +168,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		className: ie(),
 		children: t
 	})
-}, oe = h("block w-full object-cover bg-backing", {
+}, k = v("block w-full object-cover bg-backing", {
 	variants: {
 		ratio: {
 			portrait: "aspect-portrait",
@@ -185,13 +185,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		}
 	},
 	defaultVariants: { focus: "center" }
-}), se = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, overlay: u, priority: d, testId: f }) => {
+}), 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,
 		alt: r,
 		width: i,
 		height: a,
-		className: oe({
+		className: k({
 			ratio: o,
 			focus: s
 		}),
@@ -214,20 +214,20 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			children: l
 		})]
 	});
-}, E = class extends Error {
+}, j = class extends Error {
 	constructor(e) {
 		super(`Meter configuration is invalid: ${e}`), this.name = "MeterConfigurationError";
 	}
-}, ce = h("w-full h-[var(--meter-track-thickness)] bg-meter-track border border-solid border-rule"), le = h("h-full w-[calc(var(--meter-level)*100%)]", {
+}, 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%)]", {
 	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" }
-}), ue = ({ 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 E(`value, min and max must be finite numbers (got value=${t}, min=${n}, max=${r})`);
-	if (n >= r) throw new E(`min must be less than max (got min=${n}, max=${r})`);
-	if (t < n || t > r) throw new E(`value must lie within [min, max] (got value=${t}, min=${n}, max=${r})`);
+}), 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", {
 		role: "meter",
@@ -237,28 +237,28 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		"aria-label": a,
 		"aria-valuetext": o,
 		"data-testid": s,
-		className: ce(),
+		className: M(),
 		style: c,
 		children: /* @__PURE__ */ e("div", {
 			"aria-hidden": "true",
-			className: le({ treatment: i })
+			className: N({ treatment: i })
 		})
 	});
-}, de = h(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), fe = h("lg:sticky lg:top-6"), pe = h("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), me = h("block pt-1 font-secondary text-label tracking-label text-foreground"), he = {
+}, 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: de(),
+		className: F(),
 		"data-testid": n,
 		children: t
 	}),
 	Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
-		className: fe(),
+		className: I(),
 		"data-testid": i,
 		"aria-hidden": "true",
 		children: [n !== void 0 && /* @__PURE__ */ e("span", {
-			className: pe(),
+			className: L(),
 			children: n
 		}), /* @__PURE__ */ e("span", {
-			className: me(),
+			className: R(),
 			children: r
 		})]
 	}),
@@ -266,7 +266,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		"data-testid": n,
 		children: t
 	})
-}, D = h([
+}, B = v([
 	"[&:not([data-notes])]:overflow-x-auto",
 	"[&>table]:w-full [&>table]:border-collapse [&>table]:text-left",
 	"[&_caption]:pb-3 [&_caption]:text-left [&_caption]:font-secondary [&_caption]:text-label [&_caption]:tracking-label [&_caption]:text-muted",
@@ -275,7 +275,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"[&[data-notes=content]>table]:max-md:block",
 	"[&[data-notes=content]_thead]:max-md:block [&[data-notes=content]_tbody]:max-md:block [&[data-notes=content]_tfoot]:max-md:block",
 	"[&[data-notes=content]_tr]:max-md:block [&[data-notes=content]_td]:max-md:block [&[data-notes=content]_th]:max-md:block"
-].join(" ")), ge = h("border-t border-solid border-border"), O = h("px-4 py-2 text-small first:pl-0 last:pr-0", {
+].join(" ")), V = v("border-t border-solid border-border"), H = v("px-4 py-2 text-small first:pl-0 last:pr-0", {
 	variants: {
 		variant: {
 			value: "font-primary text-foreground tabular-nums",
@@ -291,24 +291,24 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		variant: "value",
 		align: "left"
 	}
-}), k = h("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
+}), oe = v("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
 	variants: { align: {
 		left: "text-left",
 		right: "text-right",
 		center: "text-center"
 	} },
 	defaultVariants: { align: "left" }
-}), A = {
+}), 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: D(),
+			className: B(),
 			"data-testid": a,
 			"aria-label": n,
 			tabIndex: 0,
 			children: o
 		}) : /* @__PURE__ */ e("div", {
-			className: D(),
+			className: B(),
 			"data-notes": r,
 			"data-testid": a,
 			children: o
@@ -318,24 +318,24 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	Body: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
 	Footer: ({ children: t }) => /* @__PURE__ */ e("tfoot", { children: t }),
 	Row: ({ children: t, testId: n }) => /* @__PURE__ */ e("tr", {
-		className: ge(),
+		className: V(),
 		"data-testid": n,
 		children: t
 	}),
 	HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
 		scope: t,
-		className: k({ align: n }),
+		className: oe({ align: n }),
 		children: r
 	}),
 	Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
-		className: O({
+		className: H({
 			variant: t,
 			align: n
 		}),
 		"data-variant": t ?? "value",
 		children: r
 	})
-}, j = h("font-secondary text-label tracking-label font-medium", {
+}, ce = v("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -345,11 +345,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "muted" }
-}), M = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: j({ color: n }),
+}), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: ce({ color: n }),
 	"data-testid": r,
 	children: t
-}), N = h("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
+}), le = v("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -359,11 +359,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), P = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
-	className: N({ color: n }),
+}), ue = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
+	className: le({ color: n }),
 	"data-testid": r,
 	children: t
-}), F = h("font-primary text-title leading-title tracking-optical", {
+}), W = v("font-primary text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -373,11 +373,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
-	className: F({ color: n }),
+}), de = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
+	className: W({ color: n }),
 	"data-testid": r,
 	children: t
-}), L = h("font-primary text-subtitle leading-subtitle", {
+}), fe = v("font-primary text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -387,11 +387,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
-	className: L({ color: n }),
+}), pe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
+	className: fe({ color: n }),
 	"data-testid": r,
 	children: t
-}), ve = h("font-primary text-body leading-body font-bold", {
+}), me = v("font-primary text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -401,11 +401,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
-	className: ve({ color: n }),
+}), he = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
+	className: me({ color: n }),
 	"data-testid": r,
 	children: t
-}), be = h("font-primary text-body leading-body font-semibold", {
+}), ge = v("font-primary text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -415,11 +415,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), xe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
-	className: be({ color: n }),
+}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
+	className: ge({ color: n }),
 	"data-testid": r,
 	children: t
-}), Se = h("font-primary text-body leading-body font-medium", {
+}), ve = v("font-primary text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -429,11 +429,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Ce = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
-	className: Se({ color: n }),
+}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
+	className: ve({ color: n }),
 	"data-testid": r,
 	children: t
-}), we = h("font-secondary text-small", {
+}), be = v("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -443,11 +443,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), Te = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: we({ color: n }),
+}), xe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: be({ color: n }),
 	"data-testid": r,
 	children: t
-}), Ee = h("font-primary text-body leading-body", {
+}), Se = v("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -457,11 +457,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), De = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
-	className: Ee({ color: n }),
+}), Ce = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
+	className: Se({ color: n }),
 	"data-testid": r,
 	children: t
-}), Oe = h("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), ke = h("font-primary text-lede leading-lede text-foreground"), Ae = h("font-primary text-body leading-body", {
+}), 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", {
 	variants: { color: {
 		foreground: "text-foreground",
 		muted: "text-muted",
@@ -471,66 +471,66 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
-}), je = h("font-primary text-small text-muted"), Me = {
+}), De = v("font-primary text-small text-muted"), Oe = {
 	Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
-		className: Oe(),
+		className: we(),
 		"data-testid": n,
 		children: t
 	}),
 	Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: ke(),
+		className: Te(),
 		children: t
 	}),
 	Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
-		className: Ae({ color: t }),
+		className: Ee({ color: t }),
 		children: n
 	}),
 	Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
-		className: je(),
+		className: De(),
 		children: t
 	})
-}, Ne = h("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)]", {
+}, 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)]", {
 	variants: { variant: {
 		primary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-primary text-primary-foreground hover:bg-primary-hover",
 		secondary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-secondary text-secondary-foreground hover:bg-secondary-hover",
 		ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)]"
 	} },
 	defaultVariants: { variant: "primary" }
-}), Pe = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
+}), Ae = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
 	type: s,
 	"data-testid": r,
-	className: Ne({ variant: i }),
+	className: ke({ variant: i }),
 	onClick: () => a?.next(),
 	disabled: n,
 	"aria-label": o,
 	children: t
-}), Fe = class extends Error {
+}), je = class extends Error {
 	constructor(e) {
 		super(`Choices.${e} must be composed inside Choices.Root`), this.name = "ChoicesCompositionError";
 	}
-}, Ie = h("flex flex-col gap-[var(--space-stack)]"), Le = h([
+}, Me = v("flex flex-col gap-[var(--space-stack)]"), Ne = v([
 	"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(" ")), R = r(void 0), Re = (e) => {
-	let t = o(R);
-	if (t === void 0) throw new Fe(e);
+].join(" ")), Pe = i(void 0), Fe = (e) => {
+	let t = s(Pe);
+	if (t === void 0) throw new je(e);
 	return t;
-}, ze = (e, t) => {
+}, Ie = (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];
-}, Be = {
+}, Le = {
 	ArrowDown: 1,
 	ArrowRight: 1,
 	ArrowUp: -1,
 	ArrowLeft: -1
-}, Ve = {
-	Root: ({ selected: t, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ e(R.Provider, {
+}, Re = {
+	Root: ({ selected: t, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ e(Pe.Provider, {
 		value: {
 			selected: t,
 			onSelect$: n,
@@ -540,32 +540,32 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			role: "radiogroup",
 			"aria-label": r,
 			"aria-disabled": i === !0 ? "true" : void 0,
-			className: Ie(),
+			className: Me(),
 			"data-testid": o,
 			children: a
 		})
 	}),
 	Choice: ({ value: n, children: r, description: i, testId: a }) => {
-		let { selected: o, onSelect$: s, inert: l } = Re("Choice"), u = o === n, d = c(), f = `${d}-name`, p = `${d}-description`;
+		let { selected: o, onSelect$: s, inert: c } = Fe("Choice"), u = o === n, d = l(), f = `${d}-name`, p = `${d}-description`;
 		return /* @__PURE__ */ t("button", {
 			type: "button",
 			role: "radio",
 			"aria-checked": u,
 			"aria-labelledby": f,
 			"aria-describedby": p,
-			tabIndex: u && !l ? 0 : -1,
-			disabled: l,
+			tabIndex: u && !c ? 0 : -1,
+			disabled: c,
 			"data-value": n,
 			"data-testid": a,
-			className: Le(),
+			className: Ne(),
 			onClick: () => {
 				u || s.next(n);
 			},
 			onKeyDown: (e) => {
-				let t = Be[e.key];
-				if (t === void 0 || l) return;
+				let t = Le[e.key];
+				if (t === void 0 || c) return;
 				e.preventDefault();
-				let n = ze(e.currentTarget, t);
+				let n = Ie(e.currentTarget, t);
 				if (n === void 0) return;
 				n.focus();
 				let r = n.dataset.value;
@@ -591,16 +591,16 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})]
 		});
 	}
-}, He = h("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", {
+}, 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", {
 	variants: { variant: {
 		text: "",
 		email: "",
 		url: ""
 	} },
 	defaultVariants: { variant: "text" }
-}), Ue = ({ label: n, name: r, variant: i, required: a, optionalLabel: o, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
-	let b = c(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = l(null);
-	return s(() => {
+}), 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(() => {
 		let e = v?.subscribe(() => {
 			T.current && (T.current.value = "");
 		});
@@ -618,13 +618,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				id: x,
 				name: r,
 				type: i ?? "text",
-				className: He({ variant: i }),
+				className: ze({ variant: i }),
 				required: a,
-				disabled: d,
-				defaultValue: f,
+				disabled: u,
+				defaultValue: d,
 				placeholder: p,
 				autoComplete: m,
-				"aria-invalid": u || void 0,
+				"aria-invalid": s || void 0,
 				"aria-describedby": w,
 				"data-testid": y,
 				onInput: (e) => _?.next(e.currentTarget.value)
@@ -638,14 +638,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				className: "font-secondary text-muted text-small",
 				children: h
 			}),
-			u && /* @__PURE__ */ e("p", {
+			s && /* @__PURE__ */ e("p", {
 				id: C,
 				className: "font-secondary text-error text-small",
 				children: g
 			})
 		]
 	});
-}, We = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
+}, Ve = v("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,19 +653,457 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		graphic: "text-inherit no-underline"
 	} },
 	defaultVariants: { treatment: "prose" }
-}), Ge = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
+}), He = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
 	href: t,
-	className: We({ treatment: r }),
+	className: Ve({ treatment: r }),
 	target: i ? "_blank" : void 0,
 	rel: i ? "noopener noreferrer" : void 0,
 	"aria-current": a ? "page" : void 0,
 	"data-testid": o,
 	children: n
-}), z = class extends Error {
+}), Ue = (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;
+	for (let t of e) {
+		if (o + t + r > n) break;
+		o += t + r, a += 1;
+	}
+	return a;
+}, We = 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("", {
+	variants: { part: {
+		root: [
+			"relative flex flex-col gap-[var(--space-stack)]",
+			"[&>label]:font-secondary [&>label]:font-medium [&>label]:text-body [&>label]:text-foreground",
+			"[&>p]:font-secondary [&>p]:text-small [&>p]:text-muted"
+		].join(" "),
+		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)]",
+			"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}`,
+		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: [
+			"relative inline-flex max-w-[12rem] shrink-0 items-center gap-1 pointer-events-auto",
+			"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}`,
+		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)]",
+			"max-h-[var(--multiselect-surface-max-height,50vh)]",
+			"data-[placement=below]:top-full data-[placement=below]:mt-1 data-[placement=above]:bottom-full data-[placement=above]:mb-1"
+		].join(" ")
+	} },
+	defaultVariants: { part: "root" }
+}), Ke = v([
+	"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);
+	return t;
+}, J = (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) {
+		let { value: t, children: n } = e.props;
+		return [{
+			value: t,
+			label: n
+		}];
+	}
+	return [];
+}), Xe = (e) => Array.from(e.querySelectorAll("[data-multiselect-chip]:not([data-overflow]) button")), Ze = (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) => {
+	switch (e.kind) {
+		case "firstOption": return r === void 0 ? void 0 : Qe(r);
+		case "afterRemoval": {
+			let r = Xe(t);
+			return r[e.index] ?? r[e.index - 1] ?? n;
+		}
+		case "afterClear": return n;
+	}
+}, nt = () => /* @__PURE__ */ e("svg", {
+	"aria-hidden": !0,
+	focusable: !1,
+	viewBox: "0 0 16 16",
+	className: "size-3",
+	children: /* @__PURE__ */ e("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));
+		return () => e.unsubscribe();
+	}, [r]), c(() => {
+		T && D(!1);
+	}, [T]), u(() => {
+		let e = M.current;
+		if (e === void 0 || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => ae());
+		return t.observe(e), () => t.disconnect();
+	}, []), u(() => {
+		let e = M.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 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));
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [I]), u(() => {
+		let e = k.current, t = j.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 H = (e) => {
+		i.next($e(L, 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 = {
+			kind: "afterRemoval",
+			index: t,
+			control: n.currentTarget
+		});
+		let r = new Set(R);
+		r.delete(e), H(r);
+	}, ce = (e) => {
+		T || (document.activeElement === e.currentTarget && (P.current = {
+			kind: "afterClear",
+			control: e.currentTarget
+		}), i.next([]));
+	}, U = (e) => {
+		T || (e.detail === 0 && (P.current = { kind: "firstOption" }), D(!0));
+	}, le = (e) => {
+		I ? D(!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));
+	}, W = (e) => {
+		e.key !== "Escape" || !I || (e.preventDefault(), e.stopPropagation(), D(!1), j.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);
+	}, 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));
+	}, 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(),
+		onKeyDown: W,
+		onFocus: de,
+		onBlur: fe,
+		children: [
+			/* @__PURE__ */ e("label", {
+				id: b,
+				htmlFor: x,
+				children: n
+			}),
+			/* @__PURE__ */ t("div", {
+				ref: J(A),
+				"data-multiselect-field": !0,
+				"data-disabled": T || void 0,
+				className: K({ part: "field" }),
+				children: [
+					/* @__PURE__ */ e("button", {
+						ref: J(j),
+						id: x,
+						type: "button",
+						"aria-labelledby": b,
+						"aria-expanded": I,
+						"aria-controls": I ? S : void 0,
+						"aria-describedby": me,
+						disabled: T,
+						"data-testid": _,
+						className: K({ part: "trigger" }),
+						onClick: le,
+						onKeyDown: ue,
+						children: /* @__PURE__ */ e("svg", {
+							"aria-hidden": !0,
+							focusable: !1,
+							viewBox: "0 0 16 16",
+							className: "size-4",
+							children: /* @__PURE__ */ e("path", {
+								d: "M3 6l5 5 5-5",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: 1.5,
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					}),
+					/* @__PURE__ */ e("div", {
+						className: K({ part: "clip" }),
+						children: /* @__PURE__ */ t("div", {
+							ref: J(M),
+							"data-multiselect-track": !0,
+							className: K({ part: "track" }),
+							children: [
+								z.length === 0 && /* @__PURE__ */ e("span", {
+									id: w,
+									className: "truncate text-muted",
+									children: a
+								}),
+								z.map(({ value: n, label: r }, i) => {
+									let a = i >= B;
+									return /* @__PURE__ */ t("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: "truncate",
+											children: r
+										}), /* @__PURE__ */ e("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, {})
+										})]
+									}, n);
+								}),
+								V > 0 && /* @__PURE__ */ e("button", {
+									type: "button",
+									disabled: T,
+									className: K({ part: "count" }),
+									onClick: U,
+									children: m.replaceAll("{count}", String(V))
+								}),
+								z.length > 0 && /* @__PURE__ */ e("span", {
+									"aria-hidden": !0,
+									"data-multiselect-count": !0,
+									className: K({ part: "countMeasure" }),
+									children: m.replaceAll("{count}", String(z.length))
+								})
+							]
+						})
+					}),
+					z.length > 0 ? /* @__PURE__ */ e("button", {
+						type: "button",
+						"aria-label": s,
+						disabled: T,
+						className: K({ part: "iconButton" }),
+						onClick: ce,
+						children: /* @__PURE__ */ e(nt, {})
+					}) : /* @__PURE__ */ e("span", {
+						"aria-hidden": !0,
+						className: "size-6 shrink-0"
+					}),
+					/* @__PURE__ */ e("span", {
+						"aria-hidden": !0,
+						className: "size-6 shrink-0"
+					}),
+					I && /* @__PURE__ */ e("div", {
+						ref: J(N),
+						id: S,
+						role: "group",
+						"aria-labelledby": b,
+						"data-placement": re,
+						className: K({ part: "surface" }),
+						onMouseDown: pe,
+						children: /* @__PURE__ */ e(qe, {
+							value: {
+								selected: R,
+								disabled: T,
+								toggle: oe
+							},
+							children: v
+						})
+					})
+				]
+			}),
+			h && /* @__PURE__ */ e("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", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": c,
+		disabled: o,
+		"data-testid": i,
+		className: Ke(),
+		onClick: () => s(n),
+		children: [/* @__PURE__ */ e("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", {
+				"aria-hidden": !0,
+				focusable: !1,
+				viewBox: "0 0 16 16",
+				className: "size-3 text-foreground",
+				children: /* @__PURE__ */ e("path", {
+					d: "M3 8.5l3 3 7-7",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		}), /* @__PURE__ */ e("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(() => {
+		let e = g?.subscribe(() => {
+			C.current && (C.current.value = "");
+		});
+		return () => e?.unsubscribe();
+	}, [g]), /* @__PURE__ */ t("div", {
+		className: "flex flex-col gap-[var(--space-stack)]",
+		children: [
+			/* @__PURE__ */ e("label", {
+				htmlFor: y,
+				className: "font-secondary font-medium text-body text-foreground",
+				children: n
+			}),
+			/* @__PURE__ */ e("input", {
+				ref: C,
+				id: y,
+				name: r,
+				type: "text",
+				inputMode: "decimal",
+				className: ot(),
+				required: i,
+				disabled: d,
+				defaultValue: m,
+				placeholder: p,
+				"aria-invalid": s || void 0,
+				"aria-describedby": S,
+				"data-testid": _,
+				onInput: (e) => !d && h?.next(e.currentTarget.value)
+			}),
+			!i && a && /* @__PURE__ */ e("span", {
+				className: "font-secondary text-muted text-small",
+				children: a
+			}),
+			o && /* @__PURE__ */ e("p", {
+				id: b,
+				className: "font-secondary text-muted text-small",
+				children: o
+			}),
+			s && /* @__PURE__ */ e("p", {
+				id: x,
+				className: "font-secondary text-error text-small",
+				children: u
+			})
+		]
+	});
+}, ct = v([
+	"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]: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(),
+			children: [
+				/* @__PURE__ */ e("label", {
+					htmlFor: _,
+					children: n
+				}),
+				/* @__PURE__ */ t("select", {
+					id: _,
+					name: r,
+					required: i,
+					disabled: o,
+					defaultValue: f ?? "",
+					"aria-invalid": s || void 0,
+					"aria-describedby": b,
+					"data-testid": d,
+					onChange: (e) => !o && p?.next(e.currentTarget.value),
+					children: [/* @__PURE__ */ e("option", {
+						value: "",
+						children: m
+					}), h]
+				}),
+				!i && a && /* @__PURE__ */ e("span", { children: a }),
+				c && /* @__PURE__ */ e("p", {
+					id: v,
+					children: c
+				}),
+				s && u && /* @__PURE__ */ e("p", {
+					id: y,
+					"data-error": !0,
+					children: u
+				})
+			]
+		});
+	},
+	Option: ({ value: t, children: n, testId: r }) => /* @__PURE__ */ e("option", {
+		value: t,
+		"data-testid": r,
+		children: n
+	})
+}, X = class extends Error {
 	constructor(e) {
 		super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
 	}
-}, Ke = h([
+}, ut = v([
 	"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)]",
@@ -676,19 +1114,19 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (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(" ")), qe = (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}]`);
-}, Je = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (qe({
+].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: Ke(),
+	className: ut(),
 	min: t,
 	max: n,
 	step: r,
@@ -698,40 +1136,40 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"aria-valuetext": s,
 	"data-testid": l,
 	onChange: (e) => a.next(e.currentTarget.valueAsNumber)
-})), Ye = class extends Error {
+})), pt = class extends Error {
 	constructor(e) {
 		super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
 	}
-}, Xe = h([
+}, mt = v([
 	"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(" ")), Ze = h([
+].join(" ")), ht = v([
 	"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)]",
 	"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(" ")), Qe = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), B = r(void 0), V = (e) => {
-	let t = o(B);
-	if (t === void 0) throw new Ye(e);
+].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);
 	return t;
-}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), $e = (e) => {
+}, vt = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), yt = (e) => {
 	e.currentTarget.scrollIntoView({
 		block: "nearest",
 		inline: "nearest"
 	});
-}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`, et = (e, t) => {
+}, bt = (e, t) => `${e}tab-${vt(t)}`, xt = (e, t) => `${e}panel-${vt(t)}`, St = (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];
-}, tt = {
+}, Ct = {
 	Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
-		let o = c();
-		return /* @__PURE__ */ e(B.Provider, {
+		let o = l();
+		return /* @__PURE__ */ e(_t.Provider, {
 			value: {
 				active: t,
 				onSelect$: n,
@@ -745,57 +1183,57 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		});
 	},
 	List: ({ children: t, testId: n }) => {
-		let { label: r } = V("List");
+		let { label: r } = Z("List");
 		return /* @__PURE__ */ e("div", {
 			role: "tablist",
 			"aria-label": r,
-			className: Xe(),
+			className: mt(),
 			"data-testid": n,
 			children: t
 		});
 	},
 	Tab: ({ value: t, children: n, testId: r }) => {
-		let { active: i, onSelect$: a, baseId: o } = V("Tab"), s = i === t;
+		let { active: i, onSelect$: a, baseId: o } = Z("Tab"), s = i === t;
 		return /* @__PURE__ */ e("button", {
 			type: "button",
 			role: "tab",
-			id: U(o, t),
+			id: bt(o, t),
 			"aria-selected": s,
-			"aria-controls": W(o, t),
+			"aria-controls": xt(o, t),
 			tabIndex: s ? 0 : -1,
 			"data-value": t,
 			"data-testid": r,
-			className: Ze(),
+			className: ht(),
 			onClick: () => a.next(t),
 			onKeyDown: (e) => {
 				if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 				e.preventDefault();
-				let t = et(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
+				let t = St(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: $e,
+			onFocus: yt,
 			children: n
 		});
 	},
 	Panel: ({ value: t, children: n, testId: r }) => {
-		let { active: i, baseId: a } = V("Panel"), o = i === t;
+		let { active: i, baseId: a } = Z("Panel"), o = i === t;
 		return /* @__PURE__ */ e("div", {
 			role: "tabpanel",
-			id: W(a, t),
-			"aria-labelledby": U(a, t),
+			id: xt(a, t),
+			"aria-labelledby": bt(a, t),
 			hidden: !o,
 			tabIndex: o ? 0 : void 0,
-			className: Qe(),
+			className: gt(),
 			"data-testid": r,
 			children: o ? n : void 0
 		});
 	}
-}, nt = h("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"), rt = ({ label: n, name: r, required: i, optionalLabel: a, invalid: o, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
-	let y = c(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, o ? S : void 0].filter(Boolean).join(" ") || void 0, w = l(null);
-	return s(() => {
+}, 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(() => {
 		let e = _?.subscribe(() => {
 			w.current && (w.current.value = "");
 		});
@@ -812,11 +1250,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				ref: w,
 				id: b,
 				name: r,
-				className: nt(),
+				className: wt(),
 				required: i,
-				disabled: u,
-				defaultValue: d,
-				placeholder: f,
+				disabled: s,
+				defaultValue: u,
+				placeholder: d,
 				autoComplete: p,
 				"aria-invalid": o || void 0,
 				"aria-describedby": C,
@@ -839,29 +1277,29 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})
 		]
 	});
-}, it = h([
+}, Et = v([
 	"flex flex-col items-center",
 	"min-h-[var(--cover-height)]",
 	"px-[var(--gutter)] py-[var(--space-region)]"
-].join(" ")), at = "my-auto max-w-full", ot = ({ children: n, foot: r, testId: i }) => {
+].join(" ")), Dt = "my-auto max-w-full", Ot = ({ children: n, foot: r, testId: i }) => {
 	let a = r != null && typeof r != "boolean";
 	return /* @__PURE__ */ t("div", {
-		className: it(),
+		className: Et(),
 		"data-testid": i,
 		children: [/* @__PURE__ */ e("div", {
-			className: at,
+			className: Dt,
 			children: n
 		}), a && /* @__PURE__ */ e("div", { children: r })]
 	});
-}, st = class extends Error {
+}, kt = class extends Error {
 	constructor(e) {
 		super(`Dialog.${e} must be composed inside Dialog.Root`), this.name = "DialogCompositionError";
 	}
-}, ct = class extends Error {
+}, At = 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";
 	}
-}, lt = h([
+}, jt = v([
 	"open:flex open:flex-col m-auto p-0 overflow-hidden",
 	"bg-surface text-foreground",
 	"rounded-[var(--radius-dialog)] shadow-[var(--elevation-floating)]",
@@ -872,89 +1310,89 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		content: ["w-[32rem] max-w-[calc(100vw-2*var(--gutter))]", "max-h-[calc(100dvh-2*var(--space-region))]"].join(" ")
 	} },
 	defaultVariants: { extent: "screen" }
-}), ut = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), dt = h(["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(" ")), ft = h([
+}), 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([
 	"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(" ")), pt = h([
+].join(" ")), Ft = v([
 	"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(" ")), G = r(void 0), K = (e) => {
-	let t = o(G);
-	if (t === void 0) throw new st(e);
+].join(" ")), It = i(void 0), Q = (e) => {
+	let t = s(It);
+	if (t === void 0) throw new kt(e);
 	return t;
-}, q = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", J = (e, { presented: t, opener: n }) => {
+}, 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 }) => {
 	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(q)?.focus();
-}, Y = (e, { presented: t }) => {
+	n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(Lt)?.focus();
+}, $ = (e, { presented: t }) => {
 	t.current = !1, e?.open && e.close();
-}, mt = {
-	Root: ({ children: t, onDismiss$: n, showDialog$: r, extent: i, ariaLabel: o, testId: d }) => {
-		let f = c(), p = l(void 0), m = l(!1), h = l(void 0), [g] = u(() => ({
+}, 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,
 			opener: h
-		})), [_, v] = u({
+		})), [_, v] = p({
 			title: !1,
 			description: !1
-		}), y = a((e) => (v((t) => ({
+		}), y = o((e) => (v((t) => ({
 			...t,
 			[e]: !0
 		})), () => v((t) => ({
 			...t,
 			[e]: !1
 		}))), []), b = {
-			titleId: `${f}title`,
-			descriptionId: `${f}description`,
-			isLabelled: o !== void 0,
+			titleId: `${u}title`,
+			descriptionId: `${u}description`,
+			isLabelled: a !== void 0,
 			registerNamePart: y
 		}, x = () => {
-			n.next(), r === void 0 ? Y(p.current, g) : r.next(!1);
+			n.next(), r === void 0 ? $(d.current, g) : r.next(!1);
 		};
-		return s(() => {
-			if (r === void 0) return J(p.current, g), () => Y(p.current, g);
+		return c(() => {
+			if (r === void 0) return Rt(d.current, g), () => $(d.current, g);
 			let e = r.subscribe((e) => {
-				e ? J(p.current, g) : Y(p.current, g);
+				e ? Rt(d.current, g) : $(d.current, g);
 			});
 			return () => {
-				e.unsubscribe(), Y(p.current, g);
+				e.unsubscribe(), $(d.current, g);
 			};
-		}, [r, g]), /* @__PURE__ */ e(G.Provider, {
+		}, [r, g]), /* @__PURE__ */ e(It.Provider, {
 			value: b,
 			children: /* @__PURE__ */ e("dialog", {
 				ref: (e) => {
-					p.current = e ?? void 0, e?.setAttribute("headingreset", "");
+					d.current = e ?? void 0, e?.setAttribute("headingreset", "");
 				},
-				className: lt({ extent: i }),
-				"aria-label": o,
-				"aria-labelledby": o === void 0 && _.title ? b.titleId : void 0,
+				className: jt({ extent: i }),
+				"aria-label": a,
+				"aria-labelledby": a === void 0 && _.title ? b.titleId : void 0,
 				"aria-describedby": _.description ? b.descriptionId : void 0,
 				onCancel: x,
 				onClick: (e) => {
-					let t = p.current;
+					let t = d.current;
 					if (t === void 0 || e.target !== t || !t.open) return;
 					let n = t.getBoundingClientRect();
 					e.clientX >= n.left && e.clientX <= n.right && e.clientY >= n.top && e.clientY <= n.bottom || x();
 				},
 				onClose: () => {
-					if (p.current?.open) return;
+					if (d.current?.open) return;
 					let e = m.current;
 					m.current = !1;
 					let t = h.current;
-					h.current = void 0, t?.isConnected && (t.matches(q) || t.hasAttribute("tabindex")) && t.focus(), e && r?.next(!1);
+					h.current = void 0, t?.isConnected && (t.matches(Lt) || t.hasAttribute("tabindex")) && t.focus(), e && r?.next(!1);
 				},
-				"data-testid": d,
+				"data-testid": s,
 				children: t
 			})
 		});
 	},
 	Title: ({ children: t, testId: n }) => {
-		let { titleId: r, isLabelled: i, registerNamePart: a } = K("Title");
-		if (s(() => a("title"), [a]), i) throw new ct();
+		let { titleId: r, isLabelled: i, registerNamePart: a } = Q("Title");
+		if (c(() => a("title"), [a]), i) throw new At();
 		return /* @__PURE__ */ e("div", {
 			"data-dialog-member": "title",
-			className: ut(),
+			className: Mt(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("h1", {
 				id: r,
@@ -964,10 +1402,10 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		});
 	},
 	Description: ({ children: t, testId: n }) => {
-		let { descriptionId: r, registerNamePart: i } = K("Description");
-		return s(() => i("description"), [i]), /* @__PURE__ */ e("div", {
+		let { descriptionId: r, registerNamePart: i } = Q("Description");
+		return c(() => i("description"), [i]), /* @__PURE__ */ e("div", {
 			"data-dialog-member": "description",
-			className: dt(),
+			className: Nt(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("p", {
 				id: r,
@@ -976,29 +1414,29 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})
 		});
 	},
-	Content: ({ children: t, testId: n }) => (K("Content"), /* @__PURE__ */ e("div", {
+	Content: ({ children: t, testId: n }) => (Q("Content"), /* @__PURE__ */ e("div", {
 		"data-dialog-member": "content",
-		className: ft(),
+		className: Pt(),
 		"data-testid": n,
 		children: t
 	})),
-	Actions: ({ children: t, testId: n }) => (K("Actions"), /* @__PURE__ */ e("div", {
+	Actions: ({ children: t, testId: n }) => (Q("Actions"), /* @__PURE__ */ e("div", {
 		"data-dialog-member": "actions",
-		className: pt(),
+		className: Ft(),
 		"data-testid": n,
 		children: t
 	}))
-}, ht = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, Bt = v("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" }
-}), gt = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
-	className: ht({ edge: t }),
+}), Vt = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
+	className: Bt({ edge: t }),
 	"data-testid": r,
 	children: n
-}), _t = h("font-secondary text-small", {
+}), Ht = v("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -1006,13 +1444,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), vt = {
+}), Ut = {
 	sent: "status",
 	failed: "alert"
-}, yt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+}, Wt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
 	let l = s != null && typeof s != "boolean";
 	if (i === "sent" && !l) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
-	let u = i !== "sent", d = vt[i];
+	let u = i !== "sent", d = Ut[i];
 	return /* @__PURE__ */ t("form", {
 		action: n,
 		method: r,
@@ -1030,12 +1468,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			}),
 			l && /* @__PURE__ */ e("p", {
 				role: d,
-				className: _t({ state: i }),
+				className: Ht({ state: i }),
 				children: s
 			})
 		]
 	});
-}, bt = h([
+}, Gt = v([
 	"flex items-baseline justify-between",
 	"font-secondary text-label leading-label tracking-label text-muted",
 	"py-[var(--space-region)] px-[var(--gutter)]",
@@ -1046,50 +1484,50 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		rule: "border-b border-solid border-rule"
 	} },
 	defaultVariants: { edge: "rule" }
-}), xt = [
+}), Kt = [
 	"inline-flex shrink-0 items-center",
 	"min-h-[calc(var(--text-label)*var(--leading-label))]",
 	"min-w-[var(--standing-min-width)]"
-].join(" "), St = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
-	className: bt({ edge: n }),
+].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: xt,
+		className: Kt,
 		children: r
 	}), /* @__PURE__ */ e("nav", {
 		"aria-label": i,
 		className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
 		children: a
 	})]
-}), Ct = h("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
+}), Jt = v("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" }
-}), wt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
-	className: Ct({ place: t }),
+}), Yt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: Jt({ place: t }),
 	"data-testid": r,
 	children: n
-}), Tt = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Et = h("font-primary text-title leading-title tracking-optical text-foreground"), Dt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), Ot = h("font-primary text-small text-muted max-w-[var(--measure)]"), kt = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
-	className: Tt(),
+}), 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(),
 	"data-testid": a,
 	children: [
 		/* @__PURE__ */ e("h1", {
-			className: Et(),
+			className: Zt(),
 			children: n
 		}),
 		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: Dt(),
+			className: Qt(),
 			children: r
 		}),
 		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: Ot(),
+			className: $t(),
 			children: i
 		})
 	]
-}), X = h([
+}), tn = v([
 	"relative",
 	"py-[var(--space-band)]",
 	"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -1099,20 +1537,20 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		full: ""
 	} },
 	defaultVariants: { bleed: "inset" }
-}), At = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
+}), nn = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
 	"data-section": "",
-	className: X({ bleed: t }),
+	className: tn({ bleed: t }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), jt = h([
+}), rn = v([
 	"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(" ")), Mt = (e) => {
+].join(" ")), an = (e) => {
 	if (!e) return;
 	let t = [];
 	for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
@@ -1126,7 +1564,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	return window.addEventListener("resize", n), () => {
 		r?.disconnect(), window.removeEventListener("resize", n), e.style.removeProperty("--sidebar-scrollport-height");
 	};
-}, Nt = h([
+}, on = v([
 	"w-full text-left font-secondary text-label tracking-label",
 	"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)]"
@@ -1137,44 +1575,44 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		inert: "text-muted cursor-not-allowed"
 	} },
 	defaultVariants: { state: "usable" }
-}), Z = r(void 0), Q = ({ entryKey: t, children: n, inert: r, testId: i }) => {
-	let a = o(Z), s = a !== void 0 && a.active === t;
+}), 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", {
 		type: "button",
-		className: Nt({ state: r ? "inert" : s ? "active" : "usable" }),
+		className: on({ state: r ? "inert" : o ? "active" : "usable" }),
 		disabled: r,
-		"aria-current": s ? "true" : void 0,
+		"aria-current": o ? "true" : void 0,
 		"data-testid": i,
 		onClick: () => {
-			s || a?.onSelect$.next(t);
+			o || a?.onSelect$.next(t);
 		},
 		children: n
 	}) });
-}, $ = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
+}, ln = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
 	"data-testid": n,
 	children: t
-}), Pt = {
-	Root: ({ active: r, label: a, onSelect$: o, children: s, testId: c }) => {
-		let l = n.toArray(s).filter(i);
+}), un = {
+	Root: ({ active: r, label: i, onSelect$: o, children: s, testId: c }) => {
+		let l = n.toArray(s).filter(a);
 		return /* @__PURE__ */ t("div", {
-			className: jt(),
+			className: rn(),
 			"data-testid": c,
 			children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
-				ref: Mt,
-				"aria-label": a,
-				children: /* @__PURE__ */ e(Z, {
+				ref: an,
+				"aria-label": i,
+				children: /* @__PURE__ */ e(sn, {
 					value: {
 						active: r,
 						onSelect$: o
 					},
-					children: /* @__PURE__ */ e("ul", { children: l.filter((e) => e.type === Q) })
+					children: /* @__PURE__ */ e("ul", { children: l.filter((e) => e.type === cn) })
 				})
-			}) }), l.filter((e) => e.type === $)]
+			}) }), l.filter((e) => e.type === ln)]
 		});
 	},
-	Item: Q,
-	Content: $
-}, Ft = {
+	Item: cn,
+	Content: ln
+}, dn = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -1199,7 +1637,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	warning: "#b45309",
 	error: "#d63384",
 	info: "#0e7490"
-}, It = {
+}, fn = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -1226,4 +1664,4 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	info: "#22d3ee"
 };
 //#endregion
-export { x as Brandmark, Pe as Button, w as Checklist, Ve as Choices, _ as Cluster, te as Collection, ot as Cover, ae as DefinitionList, mt as Dialog, M as Eyebrow, se as Figure, gt as Footer, yt as Form, P as H1, I as H2, _e as H3, ye as H4, xe as H5, Ce as H6, St as Header, wt as Hero, Ue as Input, Ge as Link, ue as Meter, Te as Note, De as P, kt as PageHead, Me as Prose, he as Rail, At as Section, Pt as Sidebar, Je as Slider, y as Stack, A as Table, tt as Tabs, rt as TextArea, It as dark, Ft as light };
+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 };