@juwel-development/design-system 3.7.0 → 3.8.0

package/README.md

@@ -32,6 +32,68 @@ If the host already imports Tailwind and only wants the palette, take the tokens
 @import "@juwel-development/design-system/tokens.css";
 ```
 
+## Select
+
+`Select` is a compound namespace: `Select.Root` renders a labelled, uncontrolled native
+single-select field and `Select.Option` renders one text-only native option. Root starts on
+an empty, selectable placeholder; `required` makes that empty value invalid without choosing an
+option for the user.
+
+```tsx
+import { Select } from '@juwel-development/design-system';
+import { Subject } from 'rxjs';
+
+const marketChange$ = new Subject<string>();
+
+<Select.Root
+  label={'Home market'}
+  name={'homeMarket'}
+  required={true}
+  placeholder={'Choose a market'}
+  onChange$={marketChange$}
+>
+  <Select.Option value={'de'}>{'Germany'}</Select.Option>
+  <Select.Option value={'gb'}>{'United Kingdom'}</Select.Option>
+</Select.Root>;
+```
+
+`Root` requires `label`, `name`, and `placeholder`; its `children` compose `Select.Option`
+members, including arrays, fragments, conditional children and consumer components that
+render options. An empty field can omit children. Each `Option` requires a `value` and a
+text-only `children` label, and accepts an optional `testId`. Option values must be
+unique, stable, nonempty strings; every label and message is worded by the consumer.
+The empty string is reserved for the placeholder, which remains selectable so an optional
+field can be cleared. The browser owns keyboard navigation and the native popup.
+
+Optional props are `required`, `disabled`, `defaultValue`, `onChange$`, `optionalLabel`,
+`hint`, `invalid`, `errorMessage`, and `testId`. Labels always name the control; hints and
+visible errors describe it. `invalid` exposes the consumer's validation state through
+`aria-invalid`, and `errorMessage` renders only while invalid. Styling follows Input's
+control, typography, focus-ring, motion, and state tokens.
+
+`defaultValue` initializes a matching option on mount; omitted or unmatched values start
+empty. Later `defaultValue` changes do not overwrite the user's selection. Reordered or
+relabeled options preserve a surviving selected value; removing that option returns the
+control to empty. Options arriving later do not apply an earlier unmatched default.
+
+`onChange$` emits the selected string once per user change, including `''` on clearing.
+Rendering, option replacement, and native form reset do not emit. The consumer owns the
+Subject and must reconcile its own domain state when replacing options or resetting a form.
+Native form reset restores the original default while that option remains mounted; if it
+is removed, reset returns to empty. A newly mounted option does not inherit an earlier
+option's reset default, even when it reuses its value. Keep React keys stable (use the
+option value) across translation and reordering to preserve native selection and reset
+state. No `reset$` prop is needed. A new record can initialize through a remount. Forms can
+also read the current value directly by `name`, without any event subscription.
+
+The previous unpublished `<Select options={...} />` API has been removed. For Home Market
+in `g-label-manager` #125, put the existing field props on `Select.Root` and map market
+records to `<Select.Option key={market.id} value={market.id}>{translatedName}</Select.Option>`
+children. Keep `required` and the localized `placeholder` on Root; the empty option is
+provided by Root, so callers do not compose another empty Option. Derive types with
+`ComponentProps<typeof Select.Root>` or `ComponentProps<typeof Select.Option>` from React.
+The consumer still awaits a published library release before changing its dependency.
+
 ## Collection
 
 `Collection` is a vertical group of freely composed items with internal hairlines and

package/dist/design-system.js

@@ -661,11 +661,63 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	"aria-current": a ? "page" : void 0,
 	"data-testid": o,
 	children: n
-}), z = class extends Error {
+}), Ke = h([
+	"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(" ")), qe = {
+	Root: ({ label: n, name: r, required: i, optionalLabel: a, disabled: o, invalid: s, hint: l, errorMessage: u, testId: d, defaultValue: f, onChange$: p, placeholder: m, children: h }) => {
+		let g = c(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [l ? v : void 0, s && u ? y : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ t("div", {
+			className: Ke(),
+			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 }),
+				l && /* @__PURE__ */ e("p", {
+					id: v,
+					children: l
+				}),
+				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
+	})
+}, z = class extends Error {
 	constructor(e) {
 		super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
 	}
-}, Ke = h([
+}, Je = h([
 	"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 +728,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) => {
+].join(" ")), Ye = (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({
+}, Xe = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (Ye({
 	min: t,
 	max: n,
 	step: r,
 	value: i
 }), /* @__PURE__ */ e("input", {
 	type: "range",
-	className: Ke(),
+	className: Je(),
 	min: t,
 	max: n,
 	step: r,
@@ -698,37 +750,37 @@ 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 {
+})), Ze = class extends Error {
 	constructor(e) {
 		super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
 	}
-}, Xe = h([
+}, Qe = h([
 	"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(" ")), $e = h([
 	"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) => {
+].join(" ")), et = 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);
+	if (t === void 0) throw new Ze(e);
 	return t;
-}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), $e = (e) => {
+}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), tt = (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) => {
+}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`, nt = (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 = {
+}, rt = {
 	Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
 		let o = c();
 		return /* @__PURE__ */ e(B.Provider, {
@@ -749,7 +801,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		return /* @__PURE__ */ e("div", {
 			role: "tablist",
 			"aria-label": r,
-			className: Xe(),
+			className: Qe(),
 			"data-testid": n,
 			children: t
 		});
@@ -765,18 +817,18 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			tabIndex: s ? 0 : -1,
 			"data-value": t,
 			"data-testid": r,
-			className: Ze(),
+			className: $e(),
 			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 = nt(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: tt,
 			children: n
 		});
 	},
@@ -788,12 +840,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			"aria-labelledby": U(a, t),
 			hidden: !o,
 			tabIndex: o ? 0 : void 0,
-			className: Qe(),
+			className: et(),
 			"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 }) => {
+}, it = 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"), at = ({ 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(() => {
 		let e = _?.subscribe(() => {
@@ -812,7 +864,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				ref: w,
 				id: b,
 				name: r,
-				className: nt(),
+				className: it(),
 				required: i,
 				disabled: u,
 				defaultValue: d,
@@ -839,29 +891,29 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 			})
 		]
 	});
-}, it = h([
+}, ot = h([
 	"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(" ")), st = "my-auto max-w-full", ct = ({ children: n, foot: r, testId: i }) => {
 	let a = r != null && typeof r != "boolean";
 	return /* @__PURE__ */ t("div", {
-		className: it(),
+		className: ot(),
 		"data-testid": i,
 		children: [/* @__PURE__ */ e("div", {
-			className: at,
+			className: st,
 			children: n
 		}), a && /* @__PURE__ */ e("div", { children: r })]
 	});
-}, st = class extends Error {
+}, lt = class extends Error {
 	constructor(e) {
 		super(`Dialog.${e} must be composed inside Dialog.Root`), this.name = "DialogCompositionError";
 	}
-}, ct = class extends Error {
+}, ut = 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([
+}, dt = h([
 	"open:flex open:flex-col m-auto p-0 overflow-hidden",
 	"bg-surface text-foreground",
 	"rounded-[var(--radius-dialog)] shadow-[var(--elevation-floating)]",
@@ -872,17 +924,17 @@ 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([
+}), ft = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), pt = 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(" ")), mt = h([
 	"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(" ")), ht = h([
 	"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);
+	if (t === void 0) throw new lt(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 }) => {
 	if (e === void 0 || e.open) return;
@@ -890,7 +942,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(q)?.focus();
 }, Y = (e, { presented: t }) => {
 	t.current = !1, e?.open && e.close();
-}, mt = {
+}, gt = {
 	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(() => ({
 			presented: m,
@@ -926,7 +978,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 				ref: (e) => {
 					p.current = e ?? void 0, e?.setAttribute("headingreset", "");
 				},
-				className: lt({ extent: i }),
+				className: dt({ extent: i }),
 				"aria-label": o,
 				"aria-labelledby": o === void 0 && _.title ? b.titleId : void 0,
 				"aria-describedby": _.description ? b.descriptionId : void 0,
@@ -951,10 +1003,10 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	},
 	Title: ({ children: t, testId: n }) => {
 		let { titleId: r, isLabelled: i, registerNamePart: a } = K("Title");
-		if (s(() => a("title"), [a]), i) throw new ct();
+		if (s(() => a("title"), [a]), i) throw new ut();
 		return /* @__PURE__ */ e("div", {
 			"data-dialog-member": "title",
-			className: ut(),
+			className: ft(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("h1", {
 				id: r,
@@ -967,7 +1019,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		let { descriptionId: r, registerNamePart: i } = K("Description");
 		return s(() => i("description"), [i]), /* @__PURE__ */ e("div", {
 			"data-dialog-member": "description",
-			className: dt(),
+			className: pt(),
 			"data-testid": n,
 			children: /* @__PURE__ */ e("p", {
 				id: r,
@@ -978,27 +1030,27 @@ 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", {
 		"data-dialog-member": "content",
-		className: ft(),
+		className: mt(),
 		"data-testid": n,
 		children: t
 	})),
 	Actions: ({ children: t, testId: n }) => (K("Actions"), /* @__PURE__ */ e("div", {
 		"data-dialog-member": "actions",
-		className: pt(),
+		className: ht(),
 		"data-testid": n,
 		children: t
 	}))
-}, ht = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
+}, _t = h("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: _t({ edge: t }),
 	"data-testid": r,
 	children: n
-}), _t = h("font-secondary text-small", {
+}), yt = h("font-secondary text-small", {
 	variants: { state: {
 		idle: "text-muted",
 		sending: "text-muted",
@@ -1006,13 +1058,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 		failed: "text-error"
 	} },
 	defaultVariants: { state: "idle" }
-}), vt = {
+}), bt = {
 	sent: "status",
 	failed: "alert"
-}, yt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
+}, xt = ({ 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 = bt[i];
 	return /* @__PURE__ */ t("form", {
 		action: n,
 		method: r,
@@ -1030,12 +1082,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: yt({ state: i }),
 				children: s
 			})
 		]
 	});
-}, bt = h([
+}, St = h([
 	"flex items-baseline justify-between",
 	"font-secondary text-label leading-label tracking-label text-muted",
 	"py-[var(--space-region)] px-[var(--gutter)]",
@@ -1046,50 +1098,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 = [
+}), Ct = [
 	"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(" "), wt = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
+	className: St({ edge: n }),
 	"data-testid": o,
 	children: [/* @__PURE__ */ e("div", {
-		className: xt,
+		className: Ct,
 		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)]", {
+}), Tt = h("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 }),
+}), Et = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
+	className: Tt({ 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(),
+}), Dt = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Ot = h("font-primary text-title leading-title tracking-optical text-foreground"), kt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), X = h("font-primary text-small text-muted max-w-[var(--measure)]"), At = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
+	className: Dt(),
 	"data-testid": a,
 	children: [
 		/* @__PURE__ */ e("h1", {
-			className: Et(),
+			className: Ot(),
 			children: n
 		}),
 		r !== void 0 && /* @__PURE__ */ e("p", {
-			className: Dt(),
+			className: kt(),
 			children: r
 		}),
 		i !== void 0 && /* @__PURE__ */ e("p", {
-			className: Ot(),
+			className: X(),
 			children: i
 		})
 	]
-}), X = h([
+}), jt = h([
 	"relative",
 	"py-[var(--space-band)]",
 	"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
@@ -1099,20 +1151,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", {
+}), Mt = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
 	"data-section": "",
-	className: X({ bleed: t }),
+	className: jt({ bleed: t }),
 	"aria-label": n,
 	"data-testid": i,
 	children: r
-}), jt = h([
+}), Nt = h([
 	"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(" ")), Pt = (e) => {
 	if (!e) return;
 	let t = [];
 	for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
@@ -1126,7 +1178,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([
+}, Ft = h([
 	"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)]"
@@ -1141,7 +1193,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	let a = o(Z), s = 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: Ft({ state: r ? "inert" : s ? "active" : "usable" }),
 		disabled: r,
 		"aria-current": s ? "true" : void 0,
 		"data-testid": i,
@@ -1153,14 +1205,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 }, $ = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
 	"data-testid": n,
 	children: t
-}), Pt = {
+}), It = {
 	Root: ({ active: r, label: a, onSelect$: o, children: s, testId: c }) => {
 		let l = n.toArray(s).filter(i);
 		return /* @__PURE__ */ t("div", {
-			className: jt(),
+			className: Nt(),
 			"data-testid": c,
 			children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
-				ref: Mt,
+				ref: Pt,
 				"aria-label": a,
 				children: /* @__PURE__ */ e(Z, {
 					value: {
@@ -1174,7 +1226,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	},
 	Item: Q,
 	Content: $
-}, Ft = {
+}, Lt = {
 	surface: "#ffffff",
 	foreground: "#0f172a",
 	muted: "#64748b",
@@ -1199,7 +1251,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
 	warning: "#b45309",
 	error: "#d63384",
 	info: "#0e7490"
-}, It = {
+}, Rt = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",
 	muted: "#94a3b8",
@@ -1226,4 +1278,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 { x as Brandmark, Pe as Button, w as Checklist, Ve as Choices, _ as Cluster, te as Collection, ct as Cover, ae as DefinitionList, gt as Dialog, M as Eyebrow, se as Figure, vt as Footer, xt as Form, P as H1, I as H2, _e as H3, ye as H4, xe as H5, Ce as H6, wt as Header, Et as Hero, Ue as Input, Ge as Link, ue as Meter, Te as Note, De as P, At as PageHead, Me as Prose, he as Rail, Mt as Section, qe as Select, It as Sidebar, Xe as Slider, y as Stack, A as Table, rt as Tabs, at as TextArea, Rt as dark, Lt as light };

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-scrim:var(--color-scrim);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--text-dialog-title:clamp(1.5rem, 3vw, 2.25rem);--leading-dialog-title:1.2;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.mt-\[0\.3rem\]{margin-top:.3rem}.mt-\[0\.35em\]{margin-top:.35em}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.size-\[var\(--choice-marker-dot-size\)\]{width:var(--choice-marker-dot-size);height:var(--choice-marker-dot-size)}.size-\[var\(--choice-marker-size\)\]{width:var(--choice-marker-size);height:var(--choice-marker-size)}.h-12{height:calc(var(--spacing) * 12)}.h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{height:calc(100dvh - 2 * var(--space-region))}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.max-h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{max-height:calc(100dvh - 2 * var(--space-region))}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[32rem\]{width:32rem}.w-\[360px\]{width:360px}.w-\[calc\(100vw-2\*var\(--gutter\)\)\]{width:calc(100vw - 2 * var(--gutter))}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[calc\(100vw-2\*var\(--gutter\)\)\]{max-width:calc(100vw - 2 * var(--gutter))}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-dialog\)\]{border-radius:var(--radius-dialog)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-foreground{background-color:var(--color-foreground)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--space-region\)\]{padding-inline:var(--space-region)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.pt-1{padding-top:var(--spacing)}.pt-\[var\(--space-region\)\]{padding-top:var(--space-region)}.pb-1{padding-bottom:var(--spacing)}.pb-\[var\(--space-region\)\]{padding-bottom:var(--space-region)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-dialog-title{font-size:var(--text-dialog-title)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-dialog-title{--tw-leading:var(--leading-dialog-title);line-height:var(--leading-dialog-title)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--elevation-floating\)\]{--tw-shadow:var(--elevation-floating);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-disabled\/choice\:text-muted:is(:where(.group\/choice):disabled *){color:var(--color-muted)}.backdrop\:bg-scrim::backdrop{background-color:var(--color-scrim)}.backdrop\:\[backdrop-filter\:blur\(var\(--scrim-blur\)\)\]::backdrop{-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-checked\:border-foreground[aria-checked=true],.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:has\(\+\[data-dialog-member\=description\]\)\]\:pb-0:has(+[data-dialog-member=description]){padding-bottom:0}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-border{border-color:var(--color-border)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:mt-\[var\(--space-stack\)\]{margin-top:var(--space-stack)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:pt-0{padding-top:0}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-scrim:#0f172a80;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-scrim:#0f172a80;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--radius-dialog:.375rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--choice-marker-size:1.125rem;--choice-marker-dot-size:.5rem;--meter-track-thickness:.5rem;--scrim-blur:0;--elevation-floating:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-scrim:var(--color-scrim);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--text-dialog-title:clamp(1.5rem, 3vw, 2.25rem);--leading-dialog-title:1.2;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.mt-\[0\.3rem\]{margin-top:.3rem}.mt-\[0\.35em\]{margin-top:.35em}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.size-\[var\(--choice-marker-dot-size\)\]{width:var(--choice-marker-dot-size);height:var(--choice-marker-dot-size)}.size-\[var\(--choice-marker-size\)\]{width:var(--choice-marker-size);height:var(--choice-marker-size)}.h-12{height:calc(var(--spacing) * 12)}.h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{height:calc(100dvh - 2 * var(--space-region))}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.max-h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{max-height:calc(100dvh - 2 * var(--space-region))}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[32rem\]{width:32rem}.w-\[360px\]{width:360px}.w-\[calc\(100vw-2\*var\(--gutter\)\)\]{width:calc(100vw - 2 * var(--gutter))}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[calc\(100vw-2\*var\(--gutter\)\)\]{max-width:calc(100vw - 2 * var(--gutter))}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-dialog\)\]{border-radius:var(--radius-dialog)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-foreground{background-color:var(--color-foreground)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--space-region\)\]{padding-inline:var(--space-region)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.pt-1{padding-top:var(--spacing)}.pt-\[var\(--space-region\)\]{padding-top:var(--space-region)}.pb-1{padding-bottom:var(--spacing)}.pb-\[var\(--space-region\)\]{padding-bottom:var(--space-region)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-dialog-title{font-size:var(--text-dialog-title)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-dialog-title{--tw-leading:var(--leading-dialog-title);line-height:var(--leading-dialog-title)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--elevation-floating\)\]{--tw-shadow:var(--elevation-floating);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-disabled\/choice\:text-muted:is(:where(.group\/choice):disabled *){color:var(--color-muted)}.backdrop\:bg-scrim::backdrop{background-color:var(--color-scrim)}.backdrop\:\[backdrop-filter\:blur\(var\(--scrim-blur\)\)\]::backdrop{-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-checked\:border-foreground[aria-checked=true],.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:has\(\+\[data-dialog-member\=description\]\)\]\:pb-0:has(+[data-dialog-member=description]){padding-bottom:0}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>label\]\:font-secondary>label{font-family:var(--font-secondary)}.\[\&\>label\]\:text-body>label{font-size:var(--text-body)}.\[\&\>label\]\:font-medium>label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&\>label\]\:text-foreground>label{color:var(--color-foreground)}.\[\&\>p\]\:font-secondary>p{font-family:var(--font-secondary)}.\[\&\>p\]\:text-small>p{font-size:var(--text-small)}.\[\&\>p\]\:text-muted>p{color:var(--color-muted)}.\[\&\>p\[data-error\]\]\:text-error>p[data-error]{color:var(--color-error)}.\[\&\>select\]\:block>select{display:block}.\[\&\>select\]\:w-full>select{width:100%}.\[\&\>select\]\:rounded-\[var\(--radius-control\)\]>select{border-radius:var(--radius-control)}.\[\&\>select\]\:border>select{border-style:var(--tw-border-style);border-width:1px}.\[\&\>select\]\:border-solid>select{--tw-border-style:solid;border-style:solid}.\[\&\>select\]\:border-control-border>select{border-color:var(--color-control-border)}.\[\&\>select\]\:bg-transparent>select{background-color:#0000}.\[\&\>select\]\:px-3>select{padding-inline:calc(var(--spacing) * 3)}.\[\&\>select\]\:py-2>select{padding-block:calc(var(--spacing) * 2)}.\[\&\>select\]\:font-primary>select{font-family:var(--font-primary)}.\[\&\>select\]\:text-body>select{font-size:var(--text-body)}.\[\&\>select\]\:text-foreground>select{color:var(--color-foreground)}.\[\&\>select\]\:outline-offset-\[var\(--focus-ring-offset\)\]>select{outline-offset:var(--focus-ring-offset)}.\[\&\>select\]\:outline-focus-ring>select{outline-color:var(--color-focus-ring)}.\[\&\>select\]\:transition-colors>select{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>select\]\:duration-\[var\(--motion-duration-color\)\]>select{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.\[\&\>select\]\:focus-visible\:outline>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.\[\&\>select\]\:focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.\[\&\>select\]\:disabled\:cursor-not-allowed>select:disabled{cursor:not-allowed}.\[\&\>select\]\:disabled\:border-disabled>select:disabled{border-color:var(--color-disabled)}.\[\&\>select\]\:disabled\:text-muted>select:disabled{color:var(--color-muted)}.\[\&\>select\]\:aria-\[invalid\=true\]\:border-error>select[aria-invalid=true]{border-color:var(--color-error)}.\[\&\>select\:user-invalid\]\:border-error>select:user-invalid{border-color:var(--color-error)}.\[\&\>span\]\:font-secondary>span{font-family:var(--font-secondary)}.\[\&\>span\]\:text-small>span{font-size:var(--text-small)}.\[\&\>span\]\:text-muted>span{color:var(--color-muted)}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-border{border-color:var(--color-border)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:mt-\[var\(--space-stack\)\]{margin-top:var(--space-stack)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:pt-0{padding-top:0}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-scrim:#0f172a80;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-scrim:#0f172a80;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--radius-dialog:.375rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--choice-marker-size:1.125rem;--choice-marker-dot-size:.5rem;--meter-track-thickness:.5rem;--scrim-blur:0;--elevation-floating:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

package/dist/types/Interaction/Select/Select.d.ts

@@ -0,0 +1,53 @@
+import { type FunctionComponent, type ReactNode } from 'react';
+import type { Subject } from 'rxjs';
+export interface ISelectRootProps {
+    /** Always rendered and associated with the control. */
+    label: string;
+    /** How the surrounding form reads the value on submit. */
+    name: string;
+    required?: boolean;
+    /** Caller-localized marker, rendered only when the field is optional. */
+    optionalLabel?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    hint?: string;
+    errorMessage?: string;
+    testId?: string;
+    /** Initial selection only; omitted or unmatched values start empty. */
+    defaultValue?: string;
+    /** Emits the selected value only on user changes; never on render or native form reset. */
+    onChange$?: Subject<string>;
+    /** Caller-localized wording for the first, empty option, which remains selectable. */
+    placeholder: string;
+    /** Compose Select.Option children; arrays, fragments and consumer components are supported. */
+    children?: ReactNode;
+}
+export interface ISelectOptionProps {
+    /** Unique, stable, nonempty identity; the empty string belongs to Root's placeholder. */
+    value: string;
+    /** Caller-localized text; native options do not accept rich content. */
+    children: string;
+    testId?: string;
+}
+/**
+ * An uncontrolled native single-select field composed from Root and Option.
+ * Root owns the label, selectable empty placeholder and field messages; Option renders text.
+ *
+ * @Guarantees
+ * - Required rejects empty; forms read the current stable value by name.
+ * - onChange$ emits user changes (including clearing), never rendering, option updates or reset.
+ * - Omitted/unmatched defaults start empty; later defaultValue changes do not select a value.
+ * - Removing the selected option falls back to empty without emitting.
+ *
+ * @CallerMustEnsure
+ * - Compose Option members under Root; arrays, fragments and consumer components are supported.
+ * - Option values are unique, stable and nonempty, with stable React keys when mapping children.
+ * - The consumer owns all wording, stream lifetime and domain reconciliation on updates/reset.
+ * - Native reset restores the original default while its option stays mounted, otherwise empty.
+ *   A newly mounted option does not inherit a removed option's reset default; remount Root to
+ *   initialize another record. Translation/reordering with stable keys preserves native state.
+ */
+export declare const Select: {
+    readonly Root: FunctionComponent<ISelectRootProps>;
+    readonly Option: FunctionComponent<ISelectOptionProps>;
+};

package/dist/types/index.d.ts

@@ -23,6 +23,7 @@ export { Button } from 'Interaction/Button/Button';
 export { Choices } from 'Interaction/Choices/Choices';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
+export { Select } from 'Interaction/Select/Select';
 export { Slider } from 'Interaction/Slider/Slider';
 export { Tabs } from 'Interaction/Tabs/Tabs';
 export { TextArea } from 'Interaction/TextArea/TextArea';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@juwel-development/design-system",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"type": "module",
 	"description": "Shared design system: tokens and components.",
 	"license": "MIT",

package/src/Interaction/Select/Select.tsx

@@ -0,0 +1,140 @@
+import { cva } from 'class-variance-authority';
+import { type FunctionComponent, type ReactNode, useId } from 'react';
+import type { Subject } from 'rxjs';
+
+// Field styling follows Input and ADRs 0001–0004; native appearance retains the platform picker.
+const selectRoot = cva(
+  [
+    '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(' '),
+);
+
+export interface ISelectRootProps {
+  /** Always rendered and associated with the control. */
+  label: string;
+  /** How the surrounding form reads the value on submit. */
+  name: string;
+  required?: boolean;
+  /** Caller-localized marker, rendered only when the field is optional. */
+  optionalLabel?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  hint?: string;
+  errorMessage?: string;
+  testId?: string;
+  /** Initial selection only; omitted or unmatched values start empty. */
+  defaultValue?: string;
+  /** Emits the selected value only on user changes; never on render or native form reset. */
+  onChange$?: Subject<string>;
+  /** Caller-localized wording for the first, empty option, which remains selectable. */
+  placeholder: string;
+  /** Compose Select.Option children; arrays, fragments and consumer components are supported. */
+  children?: ReactNode;
+}
+
+/**
+ * An uncontrolled native single-select field. The first option is always empty and selectable;
+ * `required` makes that empty value invalid. Option updates preserve a surviving selected value
+ * and fall back to empty when it disappears, without emitting. The form reads the value by name.
+ */
+const SelectRoot: FunctionComponent<ISelectRootProps> = ({
+  label,
+  name,
+  required,
+  optionalLabel,
+  disabled,
+  invalid,
+  hint,
+  errorMessage,
+  testId,
+  defaultValue,
+  onChange$,
+  placeholder,
+  children,
+}) => {
+  const id = useId();
+  const controlId = `${id}-control`;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const describedBy =
+    [hint ? hintId : undefined, invalid && errorMessage ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <div className={selectRoot()}>
+      <label htmlFor={controlId}>{label}</label>
+      <select
+        id={controlId}
+        name={name}
+        required={required}
+        disabled={disabled}
+        defaultValue={defaultValue ?? ''}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        data-testid={testId}
+        onChange={(event) =>
+          !disabled && onChange$?.next(event.currentTarget.value)
+        }
+      >
+        <option value={''}>{placeholder}</option>
+        {children}
+      </select>
+      {!required && optionalLabel && <span>{optionalLabel}</span>}
+      {hint && <p id={hintId}>{hint}</p>}
+      {invalid && errorMessage && (
+        <p id={errorId} data-error>
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export interface ISelectOptionProps {
+  /** Unique, stable, nonempty identity; the empty string belongs to Root's placeholder. */
+  value: string;
+  /** Caller-localized text; native options do not accept rich content. */
+  children: string;
+  testId?: string;
+}
+
+const SelectOption: FunctionComponent<ISelectOptionProps> = ({
+  value,
+  children,
+  testId,
+}) => (
+  <option value={value} data-testid={testId}>
+    {children}
+  </option>
+);
+
+/**
+ * An uncontrolled native single-select field composed from Root and Option.
+ * Root owns the label, selectable empty placeholder and field messages; Option renders text.
+ *
+ * @Guarantees
+ * - Required rejects empty; forms read the current stable value by name.
+ * - onChange$ emits user changes (including clearing), never rendering, option updates or reset.
+ * - Omitted/unmatched defaults start empty; later defaultValue changes do not select a value.
+ * - Removing the selected option falls back to empty without emitting.
+ *
+ * @CallerMustEnsure
+ * - Compose Option members under Root; arrays, fragments and consumer components are supported.
+ * - Option values are unique, stable and nonempty, with stable React keys when mapping children.
+ * - The consumer owns all wording, stream lifetime and domain reconciliation on updates/reset.
+ * - Native reset restores the original default while its option stays mounted, otherwise empty.
+ *   A newly mounted option does not inherit a removed option's reset default; remount Root to
+ *   initialize another record. Translation/reordering with stable keys preserves native state.
+ */
+export const Select = {
+  Root: SelectRoot,
+  Option: SelectOption,
+} as const;

package/src/index.ts

@@ -24,6 +24,7 @@ export { Button } from 'Interaction/Button/Button';
 export { Choices } from 'Interaction/Choices/Choices';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
+export { Select } from 'Interaction/Select/Select';
 export { Slider } from 'Interaction/Slider/Slider';
 export { Tabs } from 'Interaction/Tabs/Tabs';
 export { TextArea } from 'Interaction/TextArea/TextArea';