@antscorp/ui 0.1.3 → 0.1.5

package/dist/organisms/TreeSearchPanel.js

@@ -14,75 +14,78 @@ import { Divider as f } from "@astryxdesign/core/Divider";
 import { ScrollableArea as p } from "@astryxdesign/core/ScrollableArea";
 // src/organisms/TreeSearchPanel.tsx
 function m(m) {
-	let _ = s(45), { value: v, more: y, labels: b } = m, x = i(!0), S = y.isLoadingMore === !0, C = m.isSearchedByHost ? [...m.items] : r(m.items, v), { rootRef: w, sentinelRef: T } = a({
-		...y,
-		hasLoadMoreError: b.loadMoreError !== void 0,
-		itemCount: C.length
-	}), E = C.filter(h).length, D;
-	_[0] === m.labels.clear ? D = _[1] : (D = { clear: m.labels.clear }, _[0] = m.labels.clear, _[1] = D);
-	let O;
-	_[2] !== m.labels.search || _[3] !== m.onChange || _[4] !== v || _[5] !== x || _[6] !== D ? (O = /* @__PURE__ */ c(e, {
+	let v = s(45), { value: y, more: b, labels: x } = m, S = i(!0), C = b.isLoadingMore === !0, w = m.isSearchedByHost ? [...m.items] : r(m.items, y), { rootRef: T, sentinelRef: E } = a({
+		...b,
+		hasLoadMoreError: x.loadMoreError !== void 0,
+		itemCount: w.reduce(g, 0)
+	}), D = w.filter(h).length, O;
+	v[0] === m.labels.clear ? O = v[1] : (O = { clear: m.labels.clear }, v[0] = m.labels.clear, v[1] = O);
+	let k;
+	v[2] !== m.labels.search || v[3] !== m.onChange || v[4] !== y || v[5] !== S || v[6] !== O ? (k = /* @__PURE__ */ c(e, {
 		label: m.labels.search,
-		labels: D,
-		value: v,
+		labels: O,
+		value: y,
 		onChange: m.onChange,
-		ref: x
-	}), _[2] = m.labels.search, _[3] = m.onChange, _[4] = v, _[5] = x, _[6] = D, _[7] = O) : O = _[7];
-	let k;
-	_[8] === Symbol.for("react.memo_cache_sentinel") ? (k = /* @__PURE__ */ c(f, {}), _[8] = k) : k = _[8];
+		ref: S
+	}), v[2] = m.labels.search, v[3] = m.onChange, v[4] = y, v[5] = S, v[6] = O, v[7] = k) : k = v[7];
 	let A;
-	_[9] !== E || _[10] !== S || _[11] !== b.loadMoreError || _[12] !== b.loading || _[13] !== b.noMatch || _[14] !== y.isLoading || _[15] !== m.isExpandedByDefault || _[16] !== m.label || _[17] !== m.onPick || _[18] !== m.selectedValue || _[19] !== m.size || _[20] !== v || _[21] !== C ? (A = (y.isLoading === !0 || S) && C.length === 0 ? /* @__PURE__ */ c(t, { labels: { loading: b.loading } }) : C.length === 0 ? b.loadMoreError === void 0 && /* @__PURE__ */ c(u, {
+	v[8] === Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ c(f, {}), v[8] = A) : A = v[8];
+	let j;
+	v[9] !== D || v[10] !== C || v[11] !== x.loadMoreError || v[12] !== x.loading || v[13] !== x.noMatch || v[14] !== b.isLoading || v[15] !== m.isExpandedByDefault || v[16] !== m.label || v[17] !== m.onPick || v[18] !== m.selectedValue || v[19] !== m.size || v[20] !== y || v[21] !== w ? (j = (b.isLoading === !0 || C) && w.length === 0 ? /* @__PURE__ */ c(t, { labels: { loading: x.loading } }) : w.length === 0 ? x.loadMoreError === void 0 && /* @__PURE__ */ c(u, {
 		type: "supporting",
 		as: "p",
-		xstyle: g.noMatch,
-		children: b.noMatch
+		xstyle: _.noMatch,
+		children: x.noMatch
 	}) : /* @__PURE__ */ c(n, {
 		label: m.label,
-		items: C,
+		items: w,
 		value: m.selectedValue,
 		size: m.size,
-		isExpandedByDefault: m.isExpandedByDefault || v.trim() !== "" || E === 1,
+		isExpandedByDefault: m.isExpandedByDefault || y.trim() !== "" || D === 1,
 		onChange: m.onPick
-	}, v), _[9] = E, _[10] = S, _[11] = b.loadMoreError, _[12] = b.loading, _[13] = b.noMatch, _[14] = y.isLoading, _[15] = m.isExpandedByDefault, _[16] = m.label, _[17] = m.onPick, _[18] = m.selectedValue, _[19] = m.size, _[20] = v, _[21] = C, _[22] = A) : A = _[22];
-	let j = S && C.length > 0, M;
-	_[23] !== b.loadMoreError || _[24] !== b.retry || _[25] !== y.onRetryLoadMore ? (M = b.retry !== void 0 && {
-		error: b.loadMoreError,
-		onRetry: y.onRetryLoadMore
-	}, _[23] = b.loadMoreError, _[24] = b.retry, _[25] = y.onRetryLoadMore, _[26] = M) : M = _[26];
-	let N = b.retry ?? "", P;
-	_[27] === N ? P = _[28] : (P = { retry: N }, _[27] = N, _[28] = P);
-	let F;
-	_[29] !== m.size || _[30] !== T || _[31] !== j || _[32] !== M || _[33] !== P ? (F = /* @__PURE__ */ c(d, {
+	}, y), v[9] = D, v[10] = C, v[11] = x.loadMoreError, v[12] = x.loading, v[13] = x.noMatch, v[14] = b.isLoading, v[15] = m.isExpandedByDefault, v[16] = m.label, v[17] = m.onPick, v[18] = m.selectedValue, v[19] = m.size, v[20] = y, v[21] = w, v[22] = j) : j = v[22];
+	let M = C && w.length > 0, N;
+	v[23] !== x.loadMoreError || v[24] !== x.retry || v[25] !== b.onRetryLoadMore ? (N = x.retry !== void 0 && {
+		error: x.loadMoreError,
+		onRetry: b.onRetryLoadMore
+	}, v[23] = x.loadMoreError, v[24] = x.retry, v[25] = b.onRetryLoadMore, v[26] = N) : N = v[26];
+	let P = x.retry ?? "", F;
+	v[27] === P ? F = v[28] : (F = { retry: P }, v[27] = P, v[28] = F);
+	let I;
+	v[29] !== m.size || v[30] !== E || v[31] !== M || v[32] !== N || v[33] !== F ? (I = /* @__PURE__ */ c(d, {
 		paddingInline: 2,
 		children: /* @__PURE__ */ c(o, {
-			isLoadingMore: j,
-			...M,
-			labels: P,
+			isLoadingMore: M,
+			...N,
+			labels: F,
 			size: m.size,
-			sentinelRef: T
+			sentinelRef: E
 		})
-	}), _[29] = m.size, _[30] = T, _[31] = j, _[32] = M, _[33] = P, _[34] = F) : F = _[34];
-	let I;
-	_[35] !== A || _[36] !== F ? (I = /* @__PURE__ */ l(d, { children: [A, F] }), _[35] = A, _[36] = F, _[37] = I) : I = _[37];
+	}), v[29] = m.size, v[30] = E, v[31] = M, v[32] = N, v[33] = F, v[34] = I) : I = v[34];
 	let L;
-	_[38] !== m.label || _[39] !== w || _[40] !== I ? (L = /* @__PURE__ */ c(p, {
+	v[35] !== j || v[36] !== I ? (L = /* @__PURE__ */ l(d, { children: [j, I] }), v[35] = j, v[36] = I, v[37] = L) : L = v[37];
+	let R;
+	v[38] !== m.label || v[39] !== T || v[40] !== L ? (R = /* @__PURE__ */ c(p, {
 		label: m.label,
 		paddingBlock: 1,
-		xstyle: g.list,
-		ref: w,
-		children: I
-	}), _[38] = m.label, _[39] = w, _[40] = I, _[41] = L) : L = _[41];
-	let R;
-	return _[42] !== O || _[43] !== L ? (R = /* @__PURE__ */ l(d, { children: [
-		O,
+		xstyle: _.list,
+		ref: T,
+		children: L
+	}), v[38] = m.label, v[39] = T, v[40] = L, v[41] = R) : R = v[41];
+	let z;
+	return v[42] !== k || v[43] !== R ? (z = /* @__PURE__ */ l(d, { children: [
 		k,
-		L
-	] }), _[42] = O, _[43] = L, _[44] = R) : R = _[44], R;
+		A,
+		R
+	] }), v[42] = k, v[43] = R, v[44] = z) : z = v[44], z;
 }
 function h(e) {
 	return e.children !== void 0;
 }
-var g = {
+function g(e, t) {
+	return e + 1 + (t.children?.length ?? 0);
+}
+var _ = {
 	list: {
 		kskxy: "aui1hkcv85",
 		$$css: !0

package/dist/theme/AntsomiTheme.d.ts

@@ -1,10 +1,11 @@
 import { Theme } from "@astryxdesign/core/theme";
 import type { ComponentProps, ReactElement } from "react";
+import type { Forwardable } from "../lib/forwardable.js";
 /**
  * Astryx Theme props with the Antsomi base theme as the default.
  * Inherited `children` renders the themed subtree; `mode` selects light, dark or system mode.
  */
-export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
+export type AntsomiThemeProps = Forwardable<Omit<ComponentProps<typeof Theme>, "theme">> & {
     /** Optional override created with `defineTheme({ extends: antsomiTheme, … })`. */
     readonly theme?: ComponentProps<typeof Theme>["theme"];
 };
@@ -13,4 +14,4 @@ export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
  * Import `@antscorp/ui/theme.css` separately. Extend the base with Astryx's
  * `defineTheme({ name: "custom", extends: antsomiTheme, tokens: { … } })` and pass it as `theme`.
  */
-export declare function AntsomiTheme({ theme, ...rest }: AntsomiThemeProps): ReactElement;
+export declare function AntsomiTheme({ theme, mode, children }: AntsomiThemeProps): ReactElement;

package/dist/theme/AntsomiTheme.js

@@ -4,12 +4,13 @@ import { Theme as n } from "@astryxdesign/core/theme";
 import { jsx as r } from "react/jsx-runtime";
 // src/theme/AntsomiTheme.tsx
 function i(i) {
-	let a = e(6), o, s;
-	a[0] === i ? (o = a[1], s = a[2]) : ({theme: s, ...o} = i, a[0] = i, a[1] = o, a[2] = s);
-	let c = s ?? t, l;
-	return a[3] !== o || a[4] !== c ? (l = /* @__PURE__ */ r(n, {
-		theme: c,
-		...o
-	}), a[3] = o, a[4] = c, a[5] = l) : l = a[5], l;
+	let a = e(6), { theme: o, mode: s, children: c } = i, l = o ?? t, u;
+	a[0] === s ? u = a[1] : (u = s !== void 0 && { mode: s }, a[0] = s, a[1] = u);
+	let d;
+	return a[2] !== c || a[3] !== l || a[4] !== u ? (d = /* @__PURE__ */ r(n, {
+		theme: l,
+		...u,
+		children: c
+	}), a[2] = c, a[3] = l, a[4] = u, a[5] = d) : d = a[5], d;
 }
 export { i as AntsomiTheme };

package/dist/ui.css

@@ -1 +1 @@
-@property --x-flexBasis{syntax:"*";inherits:false}@property --x-flexShrink{syntax:"*";inherits:false}@property --x-gridColumn{syntax:"*";inherits:false}@property --x-gridTemplateColumns{syntax:"*";inherits:false}@property --x-gridTemplateRows{syntax:"*";inherits:false}@property --x-height{syntax:"*";inherits:false}@property --x-justifySelf{syntax:"*";inherits:false}@property --x-maxHeight{syntax:"*";inherits:false}@property --x-maxWidth{syntax:"*";inherits:false}@property --x-width{syntax:"*";inherits:false}.aui1im1wfi{--color-text-primary:var(--color-text-secondary)}.auifhnz8n{--mh-field-control-max:var(--ants-mh-field-control-max,400px)}.auinpej1e{--radius-element:var(--radius-full)}.auij451x2{--text-body-leading:var(--text-heading-3-leading)}.auimdtmk4{--text-body-size:var(--text-heading-3-size)}.auioco1iw{--text-body-size:var(--text-supporting-size)}.auiln7xf2:not(#\#){font:inherit}.aui15r89dc:not(#\#){grid-area:1/1}.aui10a8y8t:not(#\#){inset:0}.aui1ghz6dp:not(#\#){margin:0}.aui1717udv:not(#\#){padding:0}.aui7z7khe:not(#\#){padding:10px}.auilsj2fj:not(#\#){padding:var(--spacing-2)}.aui1b2ylru:not(#\#){padding:var(--spacing-3)}.auixbl87b:not(#\#):not(#\#){border-color:var(--ants-mh-gray-200)}.aui1wt0qvg:not(#\#):not(#\#){border-color:var(--ants-mh-gray-300)}.aui1touxvs:not(#\#):not(#\#){border-color:var(--color-background-surface)}.aui1ofxpqo:not(#\#):not(#\#){border-color:var(--color-error)}.auiqcx1ss:not(#\#):not(#\#){border-color:var(--color-text-primary)}.aui2u8bby:not(#\#):not(#\#){border-radius:0}.aui9h44rk:not(#\#):not(#\#){border-radius:13px}.aui1nj7uno:not(#\#):not(#\#){border-radius:1px}.auiaqawyj:not(#\#):not(#\#){border-radius:38px}.aui18zih8k:not(#\#):not(#\#){border-radius:3px}.aui1pl3jqz:not(#\#):not(#\#){border-radius:48px}.aui16rqkct:not(#\#):not(#\#){border-radius:50%}.auih6dtrn:not(#\#):not(#\#){border-radius:var(--radius-element)}.auijspbzw:not(#\#):not(#\#){border-radius:var(--radius-full)}.auix3sua9:not(#\#):not(#\#){border-radius:var(--radius-inner)}.auing3xce:not(#\#):not(#\#){border-style:none}.aui1y0btm7:not(#\#):not(#\#){border-style:solid}.auic342km:not(#\#):not(#\#){border-width:0}.auimkeg23:not(#\#):not(#\#){border-width:1px}.auidh2fpr:not(#\#):not(#\#){border-width:2px}.aui1litavf:not(#\#):not(#\#){border-width:var(--border-width)}.aui98rzlu:not(#\#):not(#\#){flex:1}.aui1s4dlld:not(#\#):not(#\#){gap:var(--spacing-1-5)}.auizye2dw:not(#\#):not(#\#){gap:var(--spacing-1)}.aui1txdalj:not(#\#):not(#\#){gap:var(--spacing-2)}.auijcht0a:not(#\#):not(#\#){gap:var(--spacing-3)}.aui18g69wz:not(#\#):not(#\#){gap:var(--spacing-4)}.auigkxs2y:not(#\#):not(#\#){grid-column:1}.aui1npkx4u:not(#\#):not(#\#){grid-column:2}.aui14d52f8:not(#\#):not(#\#){grid-column:var(--x-gridColumn)}.auia1s216:not(#\#):not(#\#){grid-row:1/span 2}.aui1ms6mhf:not(#\#):not(#\#){grid-row:1}.aui7sv70a:not(#\#):not(#\#){grid-row:2}.auiz51j44:not(#\#):not(#\#){grid-row:3}.aui17y0mx6:not(#\#):not(#\#){inset-inline:0}.auinn75i4:not(#\#):not(#\#){margin-inline:-10px}.auivueqy4:not(#\#):not(#\#){margin-inline:auto}.aui1a2a7pz:not(#\#):not(#\#){outline:none}.auib3r6kr:not(#\#):not(#\#){overflow:hidden}.auit970qd:not(#\#):not(#\#){padding-block:0}.auip59q4u:not(#\#):not(#\#){padding-block:10px}.aui1t0vds8:not(#\#):not(#\#){padding-block:6px}.aui1vofgu7:not(#\#):not(#\#){padding-block:var(--spacing-1-5)}.auiu0wf1k:not(#\#):not(#\#){padding-block:var(--spacing-1)}.auice4md1:not(#\#):not(#\#){padding-block:var(--spacing-2)}.aui1awh872:not(#\#):not(#\#){padding-inline:10px}.aui3y1lgt:not(#\#):not(#\#){padding-inline:3px}.aui2hg6jq:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) + var(--border-width))}.auif314gf:not(#\#):not(#\#){padding-inline:var(--spacing-2)}.auirrkdod:not(#\#):not(#\#){padding-inline:var(--spacing-3)}.aui1hl2dhg:not(#\#):not(#\#){text-decoration:none}.aui1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}.aui6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}.auiuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}.auipte31b:not(#\#):not(#\#):not(#\#){aspect-ratio:290/600}.auijbqb8w:not(#\#):not(#\#):not(#\#){background-color:#0000}.aui1vm1evv:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-black)}.aui1gbsizx:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-200)}.aui1mu13x8:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-50)}.auic4yk2q:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-500)}.auial5by5:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-750)}.auiuv6gl1:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-cyan-500)}.auijru1km:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-gray-75)}.aui16cij4:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-green-600)}.aui1ewilqj:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}.auiwmxj5m:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}.aui10xzikg:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-surface)}.aui17x4s8c:not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}.aui19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}.auiun97om:not(#\#):not(#\#):not(#\#){border-inline-end-color:var(--ants-mh-gray-200)}.aui18b5jzi:not(#\#):not(#\#):not(#\#){border-inline-end-style:solid}.auiw8tdv1:not(#\#):not(#\#):not(#\#){border-inline-end-width:var(--border-width)}.aui1s784a7:not(#\#):not(#\#):not(#\#){border-inline-start-color:var(--color-accent)}.aui56jcm7:not(#\#):not(#\#):not(#\#){border-inline-start-width:4px}.aui1urk8h6:not(#\#):not(#\#):not(#\#){box-shadow:0 -8px 24px #0000004d}.aui70qkqb:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 3px var(--ants-mh-gray-700)}.auikukrt6:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 1px var(--color-background-surface)}.aui14hfi27:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}.aui9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}.aui1afcbsf:not(#\#):not(#\#):not(#\#){box-sizing:content-box}.aui1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}.auiqwr325:not(#\#):not(#\#):not(#\#){color:var(--color-accent)}.auijt36v0:not(#\#):not(#\#):not(#\#){color:var(--color-error)}.aui17wrial:not(#\#):not(#\#):not(#\#){color:var(--color-on-accent)}.aui1tgivj0:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}.auiv1l7n4:not(#\#):not(#\#):not(#\#){color:var(--color-text-secondary)}.aui9cihph:not(#\#):not(#\#):not(#\#){contain:size}.auit0e3qv:not(#\#):not(#\#):not(#\#){cursor:default}.aui1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}.auijp7ctv:not(#\#):not(#\#):not(#\#){display:contents}.aui78zum5:not(#\#):not(#\#):not(#\#){display:flex}.auirvj5dj:not(#\#):not(#\#):not(#\#){display:grid}.aui3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}.auiwz0xwf:not(#\#):not(#\#):not(#\#){display:inline-grid}.aui1r8uery:not(#\#):not(#\#):not(#\#){flex-basis:0}.aui5z4jtk:not(#\#):not(#\#):not(#\#){flex-basis:240px}.aui1mz2wy7:not(#\#):not(#\#):not(#\#){flex-basis:var(--x-flexBasis)}.auidt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}.aui1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}.aui2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}.auis83m0k:not(#\#):not(#\#):not(#\#){flex-shrink:1}.auin95wi4:not(#\#):not(#\#):not(#\#){flex-shrink:var(--x-flexShrink)}.aui9ynric:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-body)}.aui1j6dyjg:not(#\#):not(#\#):not(#\#){font-size:11px}.auijm74w1:not(#\#):not(#\#):not(#\#){font-size:var(--text-body-size)}.auiii13ha:not(#\#):not(#\#):not(#\#){font-size:var(--text-heading-3-size)}.auicr08ib:not(#\#):not(#\#):not(#\#){font-size:var(--text-label-size)}.aui117nqv4:not(#\#):not(#\#):not(#\#){font-weight:700}.aui1sodnla:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-normal)}.aui1l7s2pe:not(#\#):not(#\#):not(#\#){grid-template-columns:76px repeat(24,24px)}.auicjjqqt:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auivd4qgy:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(24,24px)}.aui185a7wo:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(3,minmax(0,1fr))}.auiqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}.aui1xxtoay:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--x-gridTemplateRows)}.auixx7yvo:not(#\#):not(#\#):not(#\#){inset-inline-end:4px}.auiy3asu9:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-1)}.auil56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}.aui13a6bvl:not(#\#):not(#\#):not(#\#){justify-content:flex-end}.aui1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}.aui4xo5sw:not(#\#):not(#\#):not(#\#){justify-items:end}.auigszztp:not(#\#):not(#\#):not(#\#){justify-self:var(--x-justifySelf)}.aui14ju556:not(#\#):not(#\#):not(#\#){line-height:0}.aui1d3mw78:not(#\#):not(#\#):not(#\#){line-height:16px}.aui13o0xn4:not(#\#):not(#\#):not(#\#){line-height:calc(var(--text-body-size) * var(--text-body-leading))}.auiwjzt0u:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-3-leading)}.aui1kq96og:not(#\#):not(#\#):not(#\#){line-height:var(--text-label-leading)}.aui1mpyi22:not(#\#):not(#\#):not(#\#){margin-inline-end:1px}.auinur1sd:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--spacing-1)}.auidzw4kq:not(#\#):not(#\#):not(#\#){margin-inline-start:6px}.auivc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}.aui11g1kdw:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-1)}.aui19kjcj4:not(#\#):not(#\#):not(#\#){object-fit:contain}.auiti2d7y:not(#\#):not(#\#):not(#\#){opacity:.4}.auibyyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}.aui197sbye:not(#\#):not(#\#):not(#\#){opacity:.6}.auig01cxk:not(#\#):not(#\#):not(#\#){opacity:0}.aui1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}.aui2ssjo2:not(#\#):not(#\#):not(#\#){outline-offset:-2px}.auiyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}.auiaso8d8:not(#\#):not(#\#):not(#\#){padding-inline-start:5px}.aui1dsw6jg:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(20px + var(--spacing-2))}.auig86vuh:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(24px + var(--spacing-2))}.aui1eib973:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) + var(--spacing-4))}.aui67bb7w:not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}.aui10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}.aui1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}.aui2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}.aui1yc453h:not(#\#):not(#\#):not(#\#){text-align:start}.auitvhhri:not(#\#):not(#\#):not(#\#){text-transform:uppercase}.aui5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}.aui19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}.aui1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}.auiuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}.aui11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}.aui87ps6o:not(#\#):not(#\#):not(#\#){-webkit-user-select:none;user-select:none}.auixymvpz:not(#\#):not(#\#):not(#\#){vertical-align:middle}.auiuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}.auiop90c9.auiop90c9:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){opacity:0}.aui15nwlk0.aui15nwlk0:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}.aui1nays3n.aui1nays3n:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui1hdpjie.aui1hdpjie:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:none}.aui16odi2a.aui16odi2a:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){opacity:0}.auienb0lb.auienb0lb:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){opacity:1}.aui10f8e09.aui10f8e09:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui2dkywa.aui2dkywa:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){pointer-events:none}.aui14zrjfo:hover:not([aria-disabled=true]):not([aria-selected=true]):not(#\#):not(#\#):not(#\#),.auisfqig6:focus:not([aria-selected=true]):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}.aui16khyan:is(:disabled,[aria-disabled=true]):not(#\#):not(#\#):not(#\#),.auitgyt42:disabled:not(#\#):not(#\#):not(#\#){cursor:default}@supports (-webkit-touch-callout:none){@media (pointer:coarse){.aui1w61h2b.aui1w61h2b.aui1w61h2b:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}}@media (hover:hover){.auia3af2z.auia3af2z:hover:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-50)}.aui1h9ned5.aui1h9ned5:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-accent)}}.aui16stqrj:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:#0000}.aui9v4h15:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--ants-mh-gray-200)}.auiw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}.aui1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}.aui92x3c3:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--border-width)}.aui132ci9n:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--ants-mh-gray-200)}.aui5yfxoo:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--ants-mh-gray-300)}.aui1pc3f07:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--color-border)}.auilya59e:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:dashed}.aui13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}.aui11xkdxz:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--border-width)}.aui1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}.auinru01z:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-2)}.auiaylbqo:not(#\#):not(#\#):not(#\#):not(#\#){height:1.125rem}.aui5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}.aui170jfvy:not(#\#):not(#\#):not(#\#):not(#\#){height:10px}.aui6w4g8m:not(#\#):not(#\#):not(#\#):not(#\#){height:11px}.auilup9mm:not(#\#):not(#\#):not(#\#):not(#\#){height:16px}.aui1qx5ct2:not(#\#):not(#\#):not(#\#):not(#\#){height:20px}.auixk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}.auid7y6wv:not(#\#):not(#\#):not(#\#):not(#\#){height:26px}.auicx40h0:not(#\#):not(#\#):not(#\#):not(#\#){height:420px}.auin3w4p2:not(#\#):not(#\#):not(#\#):not(#\#){height:44px}.auiqu0tyb:not(#\#):not(#\#):not(#\#):not(#\#){height:4px}.aui10wjd1d:not(#\#):not(#\#):not(#\#):not(#\#){height:50px}.aui1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}.auiols6we:not(#\#):not(#\#):not(#\#):not(#\#){height:6px}.auidk7pt:not(#\#):not(#\#):not(#\#):not(#\#){height:8px}.aui1ueg155:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-md)}.aui6k0iem:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-sm)}.auigjsvxy:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--text-label-leading)}.aui16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}.aui1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}.aui1hkcv85:not(#\#):not(#\#):not(#\#):not(#\#){max-height:200px}.aui1983irj:not(#\#):not(#\#):not(#\#):not(#\#){max-height:220px}.auiq3t0pi:not(#\#):not(#\#):not(#\#):not(#\#){max-height:280px}.aui1jols5v:not(#\#):not(#\#):not(#\#):not(#\#){max-height:var(--x-maxHeight)}.aui2aouup:not(#\#):not(#\#):not(#\#):not(#\#){max-width:120px}.aui1weugan:not(#\#):not(#\#):not(#\#):not(#\#){max-width:290px}.aui1dt7z5j:not(#\#):not(#\#):not(#\#):not(#\#){max-width:380px}.aui146dmfp:not(#\#):not(#\#):not(#\#):not(#\#){max-width:70px}.auif68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}.aui2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}.auiqt01rp:not(#\#):not(#\#):not(#\#):not(#\#){min-height:41px}.auih0zcz:not(#\#):not(#\#):not(#\#):not(#\#){min-height:calc(var(--size-element-sm) + var(--spacing-5))}.aui1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}.aui1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}.aui1wcf34l:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--text-label-leading)}.auieuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}.aui15kz4h8:not(#\#):not(#\#):not(#\#):not(#\#){min-width:16px}.auigomdpo:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1rem}.auirzjruh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:anchor-size(width)}.aui1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}.auiwa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}.auisk17dz:not(#\#):not(#\#):not(#\#):not(#\#){width:1.125rem}.auih8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}.aui1kky2od:not(#\#):not(#\#):not(#\#):not(#\#){width:16px}.aui17z2i9w:not(#\#):not(#\#):not(#\#):not(#\#){width:22px}.auivy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}.aui1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}.aui1g8rjiy:not(#\#):not(#\#):not(#\#):not(#\#){width:3px}.aui3hqpx7:not(#\#):not(#\#):not(#\#):not(#\#){width:50%}.aui1pju0fl:not(#\#):not(#\#):not(#\#):not(#\#){width:50px}.auiefyazp:not(#\#):not(#\#):not(#\#):not(#\#){width:90px}.auiezivpi:not(#\#):not(#\#):not(#\#):not(#\#){width:max-content}.aui5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}.aui1fbop3j:focus-within:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-accent)}.aui2ucsrd:hover:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}.auieyghm5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-secondary)}
+@property --x-flexBasis{syntax:"*";inherits:false}@property --x-flexShrink{syntax:"*";inherits:false}@property --x-gridColumn{syntax:"*";inherits:false}@property --x-gridTemplateColumns{syntax:"*";inherits:false}@property --x-gridTemplateRows{syntax:"*";inherits:false}@property --x-height{syntax:"*";inherits:false}@property --x-justifySelf{syntax:"*";inherits:false}@property --x-maxHeight{syntax:"*";inherits:false}@property --x-maxWidth{syntax:"*";inherits:false}@property --x-width{syntax:"*";inherits:false}.aui1im1wfi{--color-text-primary:var(--color-text-secondary)}.auifhnz8n{--mh-field-control-max:var(--ants-mh-field-control-max,400px)}.auinpej1e{--radius-element:var(--radius-full)}.auij451x2{--text-body-leading:var(--text-heading-3-leading)}.auimdtmk4{--text-body-size:var(--text-heading-3-size)}.auioco1iw{--text-body-size:var(--text-supporting-size)}.auiln7xf2:not(#\#){font:inherit}.aui15r89dc:not(#\#){grid-area:1/1}.aui10a8y8t:not(#\#){inset:0}.aui1ghz6dp:not(#\#){margin:0}.aui1717udv:not(#\#){padding:0}.aui7z7khe:not(#\#){padding:10px}.auilsj2fj:not(#\#){padding:var(--spacing-2)}.aui1b2ylru:not(#\#){padding:var(--spacing-3)}.auixbl87b:not(#\#):not(#\#){border-color:var(--ants-mh-gray-200)}.aui1wt0qvg:not(#\#):not(#\#){border-color:var(--ants-mh-gray-300)}.aui1touxvs:not(#\#):not(#\#){border-color:var(--color-background-surface)}.aui1ofxpqo:not(#\#):not(#\#){border-color:var(--color-error)}.auiqcx1ss:not(#\#):not(#\#){border-color:var(--color-text-primary)}.aui2u8bby:not(#\#):not(#\#){border-radius:0}.aui9h44rk:not(#\#):not(#\#){border-radius:13px}.aui1nj7uno:not(#\#):not(#\#){border-radius:1px}.auiaqawyj:not(#\#):not(#\#){border-radius:38px}.aui18zih8k:not(#\#):not(#\#){border-radius:3px}.aui1pl3jqz:not(#\#):not(#\#){border-radius:48px}.aui16rqkct:not(#\#):not(#\#){border-radius:50%}.auih6dtrn:not(#\#):not(#\#){border-radius:var(--radius-element)}.auijspbzw:not(#\#):not(#\#){border-radius:var(--radius-full)}.auix3sua9:not(#\#):not(#\#){border-radius:var(--radius-inner)}.auing3xce:not(#\#):not(#\#){border-style:none}.aui1y0btm7:not(#\#):not(#\#){border-style:solid}.auic342km:not(#\#):not(#\#){border-width:0}.auimkeg23:not(#\#):not(#\#){border-width:1px}.auidh2fpr:not(#\#):not(#\#){border-width:2px}.aui1litavf:not(#\#):not(#\#){border-width:var(--border-width)}.aui98rzlu:not(#\#):not(#\#){flex:1}.aui1s4dlld:not(#\#):not(#\#){gap:var(--spacing-1-5)}.auizye2dw:not(#\#):not(#\#){gap:var(--spacing-1)}.aui1txdalj:not(#\#):not(#\#){gap:var(--spacing-2)}.auijcht0a:not(#\#):not(#\#){gap:var(--spacing-3)}.aui18g69wz:not(#\#):not(#\#){gap:var(--spacing-4)}.auigkxs2y:not(#\#):not(#\#){grid-column:1}.aui1npkx4u:not(#\#):not(#\#){grid-column:2}.aui14d52f8:not(#\#):not(#\#){grid-column:var(--x-gridColumn)}.auia1s216:not(#\#):not(#\#){grid-row:1/span 2}.aui1ms6mhf:not(#\#):not(#\#){grid-row:1}.aui7sv70a:not(#\#):not(#\#){grid-row:2}.auiz51j44:not(#\#):not(#\#){grid-row:3}.aui17y0mx6:not(#\#):not(#\#){inset-inline:0}.auinn75i4:not(#\#):not(#\#){margin-inline:-10px}.auivueqy4:not(#\#):not(#\#){margin-inline:auto}.aui1a2a7pz:not(#\#):not(#\#){outline:none}.auib3r6kr:not(#\#):not(#\#){overflow:hidden}.auit970qd:not(#\#):not(#\#){padding-block:0}.auip59q4u:not(#\#):not(#\#){padding-block:10px}.aui1t0vds8:not(#\#):not(#\#){padding-block:6px}.aui1vofgu7:not(#\#):not(#\#){padding-block:var(--spacing-1-5)}.auiu0wf1k:not(#\#):not(#\#){padding-block:var(--spacing-1)}.auice4md1:not(#\#):not(#\#){padding-block:var(--spacing-2)}.aui1awh872:not(#\#):not(#\#){padding-inline:10px}.aui3y1lgt:not(#\#):not(#\#){padding-inline:3px}.aui2hg6jq:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) + var(--border-width))}.auif314gf:not(#\#):not(#\#){padding-inline:var(--spacing-2)}.auirrkdod:not(#\#):not(#\#){padding-inline:var(--spacing-3)}.aui1hl2dhg:not(#\#):not(#\#){text-decoration:none}.aui1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}.aui6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}.auiuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}.auipte31b:not(#\#):not(#\#):not(#\#){aspect-ratio:290/600}.auijbqb8w:not(#\#):not(#\#):not(#\#){background-color:#0000}.aui1jxocwm:not(#\#):not(#\#):not(#\#){background-color:var(--ants-accent-banner)}.auisqkk90:not(#\#):not(#\#):not(#\#){background-color:var(--ants-accent-fill)}.auir796ur:not(#\#):not(#\#):not(#\#){background-color:var(--ants-accent-hover)}.aui1vm1evv:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-black)}.auic4yk2q:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-blue-500)}.auiuv6gl1:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-cyan-500)}.auijru1km:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-gray-75)}.aui16cij4:not(#\#):not(#\#):not(#\#){background-color:var(--ants-mh-green-600)}.aui1ewilqj:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}.auiwmxj5m:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}.aui10xzikg:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-surface)}.aui17x4s8c:not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}.aui19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}.auiun97om:not(#\#):not(#\#):not(#\#){border-inline-end-color:var(--ants-mh-gray-200)}.aui18b5jzi:not(#\#):not(#\#):not(#\#){border-inline-end-style:solid}.auiw8tdv1:not(#\#):not(#\#):not(#\#){border-inline-end-width:var(--border-width)}.aui1s784a7:not(#\#):not(#\#):not(#\#){border-inline-start-color:var(--color-accent)}.aui56jcm7:not(#\#):not(#\#):not(#\#){border-inline-start-width:4px}.aui70qkqb:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 3px var(--ants-mh-gray-700)}.auikukrt6:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 1px var(--color-background-surface)}.aui14hfi27:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}.aui9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}.aui1afcbsf:not(#\#):not(#\#):not(#\#){box-sizing:content-box}.aui1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}.auiqwr325:not(#\#):not(#\#):not(#\#){color:var(--color-accent)}.auijt36v0:not(#\#):not(#\#):not(#\#){color:var(--color-error)}.aui17wrial:not(#\#):not(#\#):not(#\#){color:var(--color-on-accent)}.aui1tgivj0:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}.auiv1l7n4:not(#\#):not(#\#):not(#\#){color:var(--color-text-secondary)}.aui9cihph:not(#\#):not(#\#):not(#\#){contain:size}.auit0e3qv:not(#\#):not(#\#):not(#\#){cursor:default}.aui1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}.auijp7ctv:not(#\#):not(#\#):not(#\#){display:contents}.aui78zum5:not(#\#):not(#\#):not(#\#){display:flex}.auirvj5dj:not(#\#):not(#\#):not(#\#){display:grid}.aui3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}.auiwz0xwf:not(#\#):not(#\#):not(#\#){display:inline-grid}.aui1r8uery:not(#\#):not(#\#):not(#\#){flex-basis:0}.aui5z4jtk:not(#\#):not(#\#):not(#\#){flex-basis:240px}.aui1mz2wy7:not(#\#):not(#\#):not(#\#){flex-basis:var(--x-flexBasis)}.auidt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}.aui1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}.aui2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}.auis83m0k:not(#\#):not(#\#):not(#\#){flex-shrink:1}.auin95wi4:not(#\#):not(#\#):not(#\#){flex-shrink:var(--x-flexShrink)}.aui9ynric:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-body)}.aui1j6dyjg:not(#\#):not(#\#):not(#\#){font-size:11px}.auijm74w1:not(#\#):not(#\#):not(#\#){font-size:var(--text-body-size)}.auiii13ha:not(#\#):not(#\#):not(#\#){font-size:var(--text-heading-3-size)}.auicr08ib:not(#\#):not(#\#):not(#\#){font-size:var(--text-label-size)}.aui117nqv4:not(#\#):not(#\#):not(#\#){font-weight:700}.aui1sodnla:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-normal)}.aui1l7s2pe:not(#\#):not(#\#):not(#\#){grid-template-columns:76px repeat(24,24px)}.auicjjqqt:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auivd4qgy:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(24,24px)}.aui185a7wo:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(3,minmax(0,1fr))}.auiqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}.aui1xxtoay:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--x-gridTemplateRows)}.auixx7yvo:not(#\#):not(#\#):not(#\#){inset-inline-end:4px}.auiy3asu9:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-1)}.auil56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}.aui1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}.aui4xo5sw:not(#\#):not(#\#):not(#\#){justify-items:end}.auigszztp:not(#\#):not(#\#):not(#\#){justify-self:var(--x-justifySelf)}.aui14ju556:not(#\#):not(#\#):not(#\#){line-height:0}.aui1d3mw78:not(#\#):not(#\#):not(#\#){line-height:16px}.aui13o0xn4:not(#\#):not(#\#):not(#\#){line-height:calc(var(--text-body-size) * var(--text-body-leading))}.auiwjzt0u:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-3-leading)}.aui1kq96og:not(#\#):not(#\#):not(#\#){line-height:var(--text-label-leading)}.aui1mpyi22:not(#\#):not(#\#):not(#\#){margin-inline-end:1px}.auinur1sd:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--spacing-1)}.auidzw4kq:not(#\#):not(#\#):not(#\#){margin-inline-start:6px}.auivc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}.aui11g1kdw:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-1)}.aui19kjcj4:not(#\#):not(#\#):not(#\#){object-fit:contain}.auiti2d7y:not(#\#):not(#\#):not(#\#){opacity:.4}.auibyyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}.aui197sbye:not(#\#):not(#\#):not(#\#){opacity:.6}.auig01cxk:not(#\#):not(#\#):not(#\#){opacity:0}.aui1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}.aui2ssjo2:not(#\#):not(#\#):not(#\#){outline-offset:-2px}.auiyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}.auiaso8d8:not(#\#):not(#\#):not(#\#){padding-inline-start:5px}.aui1dsw6jg:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(20px + var(--spacing-2))}.auig86vuh:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(24px + var(--spacing-2))}.aui1eib973:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) + var(--spacing-4))}.aui67bb7w:not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}.aui10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}.aui1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}.aui2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}.aui1yc453h:not(#\#):not(#\#):not(#\#){text-align:start}.auitvhhri:not(#\#):not(#\#):not(#\#){text-transform:uppercase}.aui5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}.aui19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}.aui1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}.auiuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}.aui11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}.aui87ps6o:not(#\#):not(#\#):not(#\#){-webkit-user-select:none;user-select:none}.auixymvpz:not(#\#):not(#\#):not(#\#){vertical-align:middle}.auiuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}.auiop90c9.auiop90c9:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){opacity:0}.aui15nwlk0.aui15nwlk0:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}.aui1nays3n.aui1nays3n:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui1hdpjie.aui1hdpjie:where(.aui-default-marker:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:none}.aui16odi2a.aui16odi2a:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){opacity:0}.auienb0lb.auienb0lb:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){opacity:1}.aui10f8e09.aui10f8e09:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){pointer-events:auto}.aui2dkywa.aui2dkywa:where(.aui-default-marker:hover *):not(#\#):not(#\#):not(#\#){pointer-events:none}.aui14zrjfo:hover:not([aria-disabled=true]):not([aria-selected=true]):not(#\#):not(#\#):not(#\#),.auisfqig6:focus:not([aria-selected=true]):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}.aui16khyan:is(:disabled,[aria-disabled=true]):not(#\#):not(#\#):not(#\#),.auitgyt42:disabled:not(#\#):not(#\#):not(#\#){cursor:default}@supports (-webkit-touch-callout:none){@media (pointer:coarse){.aui1w61h2b.aui1w61h2b.aui1w61h2b:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}}@media (hover:hover){.aui1komwgl.aui1komwgl:hover:not(#\#):not(#\#):not(#\#){background-color:var(--ants-accent-hover)}.aui1h9ned5.aui1h9ned5:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-accent)}}.aui16stqrj:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:#0000}.aui9v4h15:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--ants-mh-gray-200)}.auiw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}.aui1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}.aui92x3c3:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--border-width)}.aui132ci9n:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--ants-mh-gray-200)}.aui5yfxoo:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--ants-mh-gray-300)}.aui1pc3f07:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--color-border)}.auilya59e:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:dashed}.aui13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}.aui11xkdxz:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--border-width)}.aui1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}.auinru01z:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-2)}.auiaylbqo:not(#\#):not(#\#):not(#\#):not(#\#){height:1.125rem}.aui5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}.aui170jfvy:not(#\#):not(#\#):not(#\#):not(#\#){height:10px}.aui6w4g8m:not(#\#):not(#\#):not(#\#):not(#\#){height:11px}.auilup9mm:not(#\#):not(#\#):not(#\#):not(#\#){height:16px}.aui1qx5ct2:not(#\#):not(#\#):not(#\#):not(#\#){height:20px}.auixk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}.auid7y6wv:not(#\#):not(#\#):not(#\#):not(#\#){height:26px}.auin3w4p2:not(#\#):not(#\#):not(#\#):not(#\#){height:44px}.auiqu0tyb:not(#\#):not(#\#):not(#\#):not(#\#){height:4px}.aui10wjd1d:not(#\#):not(#\#):not(#\#):not(#\#){height:50px}.aui1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}.auiols6we:not(#\#):not(#\#):not(#\#):not(#\#){height:6px}.auidk7pt:not(#\#):not(#\#):not(#\#):not(#\#){height:8px}.aui1ueg155:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-md)}.aui6k0iem:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-sm)}.auigjsvxy:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--text-label-leading)}.aui16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}.aui1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}.aui1hkcv85:not(#\#):not(#\#):not(#\#):not(#\#){max-height:200px}.aui1983irj:not(#\#):not(#\#):not(#\#):not(#\#){max-height:220px}.auiq3t0pi:not(#\#):not(#\#):not(#\#):not(#\#){max-height:280px}.aui1jols5v:not(#\#):not(#\#):not(#\#):not(#\#){max-height:var(--x-maxHeight)}.aui1weugan:not(#\#):not(#\#):not(#\#):not(#\#){max-width:290px}.aui1dt7z5j:not(#\#):not(#\#):not(#\#):not(#\#){max-width:380px}.aui146dmfp:not(#\#):not(#\#):not(#\#):not(#\#){max-width:70px}.auif68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}.aui2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}.auiqt01rp:not(#\#):not(#\#):not(#\#):not(#\#){min-height:41px}.auih0zcz:not(#\#):not(#\#):not(#\#):not(#\#){min-height:calc(var(--size-element-sm) + var(--spacing-5))}.aui1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}.aui1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}.aui1wcf34l:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--text-label-leading)}.auieuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}.aui15kz4h8:not(#\#):not(#\#):not(#\#):not(#\#){min-width:16px}.auigomdpo:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1rem}.auirzjruh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:anchor-size(width)}.aui1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}.auiwa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}.auisk17dz:not(#\#):not(#\#):not(#\#):not(#\#){width:1.125rem}.auih8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}.aui1kky2od:not(#\#):not(#\#):not(#\#):not(#\#){width:16px}.aui17z2i9w:not(#\#):not(#\#):not(#\#):not(#\#){width:22px}.auivy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}.aui1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}.aui1g8rjiy:not(#\#):not(#\#):not(#\#):not(#\#){width:3px}.aui3hqpx7:not(#\#):not(#\#):not(#\#):not(#\#){width:50%}.aui1pju0fl:not(#\#):not(#\#):not(#\#):not(#\#){width:50px}.auiefyazp:not(#\#):not(#\#):not(#\#):not(#\#){width:90px}.auiezivpi:not(#\#):not(#\#):not(#\#):not(#\#){width:max-content}.aui5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}.aui1fbop3j:focus-within:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-accent)}.aui2ucsrd:hover:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}.auieyghm5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-secondary)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Generic UI kit: atoms, molecules and organisms over Astryx.",
   "license": "MIT",
   "repository": {
@@ -17,6 +17,8 @@
     "!src/cli/**",
     "!src/**/*.test.*",
     "!src/**/*.stories.*",
+    "!src/**/*.doc.ts",
+    "!dist/**/*.doc.*",
     "!src/**/__snapshots__/**",
     "!src/testing.tsx",
     "!src/story.tsx"
@@ -97,40 +99,44 @@
   "scripts": {
     "astryx:reexports": "bun scripts/astryx-reexports.ts",
     "test": "bun scripts/astryx-reexports.ts --check && vitest run && AUI_REACT_COMPILER=off vitest run --coverage",
+    "test:perf": "PERF=1 vitest run",
     "typecheck": "tsc -p .",
     "build": "vite build --config vite.build.ts && tsc -p tsconfig.build.json && bun scripts/build-declarations.ts && node ../../tools/component-catalog/src/main.ts . && bun build src/cli/main.ts --target=node --outfile=dist/cli.js"
   },
   "dependencies": {
-    "@antscorp/astryx-theme-antsomi": "0.1.3",
-    "@antscorp/immutable": "0.1.0",
+    "@antscorp/astryx-theme-antsomi": "0.1.5",
+    "@antscorp/immutable": "0.1.1",
     "@astryxdesign/core": "0.7.4",
     "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.14",
+    "@codemirror/view": "6.43.15",
     "@stylexjs/stylex": "0.19.1",
     "spin-delay": "2.0.1",
-    "zod": "4.6.5"
+    "zod": "4.6.7"
   },
   "devDependencies": {
     "@antscorp/component-catalog": "0.1.0",
-    "@antscorp/vite-stylex": "0.1.3",
-    "@storybook/react-vite": "10.6.1",
+    "@antscorp/vite-stylex": "0.1.5",
+    "@storybook/react-vite": "10.6.5",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.7",
+    "@testing-library/user-event": "14.6.8",
     "@types/bun": "1.4.4",
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/coverage-v8": "5.0.5",
     "happy-dom": "20.14.5",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "storybook": "10.6.1",
-    "vite": "8.3.3",
-    "vitest": "5.0.3"
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.5",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }

package/src/atoms/AddButton.tsx

@@ -1,14 +1,13 @@
-import { Button } from "@astryxdesign/core/Button";
+import { Button, type ButtonProps } from "@astryxdesign/core/Button";
 import { radiusVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { AddGlyph } from "./AddGlyph";
 
 /** What `AddButton` takes. */
-export type AddButtonProps = {
-  /** What it adds, such as "Add row"; the host translates it. */
-  readonly label: string;
+export type AddButtonProps = Forwardable<Pick<ButtonProps, "label" | "isDisabled">> & {
   /** `ghost` by default; `secondary` for an add that needs more weight. */
   readonly variant?: "ghost" | "secondary" | undefined;
   /** The button's height, `md` by default; its plus follows it. */
@@ -17,8 +16,6 @@ export type AddButtonProps = {
   readonly shape?: "default" | "pill" | undefined;
   /** `sentence` (default) shows the label as given; `upper` in capitals, such as "+ AND". */
   readonly case?: "sentence" | "upper" | undefined;
-  /** Dimmed and not pressable, e.g. when a limit is reached. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: an add is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/Chip.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
 import { IconButton } from "@astryxdesign/core/IconButton";
@@ -9,15 +10,16 @@ import {
   spacingVars,
   typeScaleVars,
 } from "@astryxdesign/core/theme/tokens.stylex";
-import { Token } from "@astryxdesign/core/Token";
+import { Token, type TokenProps } from "@astryxdesign/core/Token";
 import { Tooltip } from "@astryxdesign/core/Tooltip";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { RemoveButton } from "./RemoveButton";
 
 /** What `Chip` takes. */
-export type ChipProps = {
+export type ChipProps = Forwardable<Pick<TokenProps, "isDisabled">> & {
   /** The chip's text; cut short with an ellipsis past `maxWidth`, and shown whole in a tooltip. */
   readonly label: string;
   /** `neutral` (default) is the plain grey chip; `accent` the pale accent one; `danger` a value no longer valid. */
@@ -40,8 +42,6 @@ export type ChipProps = {
    * button over its end; it stays in the tab order. Without it the button always shows after the text.
    */
   readonly isRemoveOnHover?: boolean | undefined;
-  /** Dims the chip and blocks its remove button. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: no remove button. */
   readonly isReadOnly?: boolean | undefined;
 };
@@ -102,6 +102,7 @@ export function Chip(props: ChipProps): ReactNode {
 // The remove button shows while the chip is hovered or has focus inside it.
 const marker = stylex.defaultMarker();
 
+const accentFill: AccentRole = "var(--ants-accent-fill)";
 const styles = stylex.create({
   // A pill as high as the controls, 10px either side (no
   // spacing step is 10px), in 12px body text of the normal weight. An xstyle, not a `token` theme entry: Token is also
@@ -117,7 +118,7 @@ const styles = stylex.create({
   md: { height: sizeVars["--size-element-md"] },
   // Not `color="blue"` with a theme entry, for the same reason.
   accent: {
-    backgroundColor: "var(--ants-mh-blue-200)",
+    backgroundColor: accentFill,
     color: colorVars["--color-text-primary"],
   },
   // A 16px white circle over the chip's end (Token's own remove button is 16px too).

package/src/atoms/RemoveButton.tsx

@@ -1,15 +1,13 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { IconButton } from "@astryxdesign/core/IconButton";
+import { IconButton, type IconButtonProps } from "@astryxdesign/core/IconButton";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `RemoveButton` takes. */
-export type RemoveButtonProps = {
-  /** What goes, such as "Remove row"; the button shows only an icon, so this is its name. */
-  readonly label: string;
+export type RemoveButtonProps = Forwardable<Pick<IconButtonProps, "label" | "isDisabled">> & {
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: a remove is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/TextAction.tsx

@@ -1,11 +1,13 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { Link } from "@astryxdesign/core/Link";
+import { Link, type LinkProps } from "@astryxdesign/core/Link";
 import { spacingVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /** What `TextAction` takes. */
-export type TextActionProps = {
+export type TextActionProps = Forwardable<Pick<LinkProps, "isDisabled">> & {
   /** What it does, such as "Remove all"; shown in capitals by default, so pass it in normal case. */
   readonly label: string;
   /** A glyph before the text, in the text's colour, such as an Astryx `Icon` of a bin for a removal. */
@@ -19,8 +21,6 @@ export type TextActionProps = {
   readonly onClick?: (() => void) | undefined;
   /** A down chevron after the text, for an action that opens a menu. */
   readonly hasChevron?: boolean | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
 };
 
 /**

package/src/lib/forwardable.ts

@@ -0,0 +1,8 @@
+/**
+ * Props taken from another component (`Pick`/`Omit`) whose optional ones also accept `undefined`,
+ * as the kit's own props do, so a host under `exactOptionalPropertyTypes` can forward its own
+ * optional value (`isDisabled={props.isDisabled}`). Required props stay as they are.
+ */
+export type Forwardable<T> = {
+  [K in keyof T]: Partial<Pick<T, K>> extends Pick<T, K> ? T[K] | undefined : T[K];
+};

package/src/lib/iso.ts

@@ -2,6 +2,7 @@ import {
   createISOTimeString,
   type ISODateString,
   type ISOTimeString,
+  parseISO,
 } from "@astryxdesign/core/utils";
 
 // Astryx date and time inputs take a value only when it is a valid one; a draft's empty or broken
@@ -13,14 +14,25 @@ export function timeValue(time: string): { readonly value?: ISOTimeString } {
   return value === null ? {} : { value };
 }
 
-const isISODate = (value: string): value is ISODateString => /^\d{4}-\d{2}-\d{2}$/u.test(value);
+const hasISODateShape = (value: string): value is ISODateString =>
+  /^\d{4}-\d{2}-\d{2}$/u.test(value);
 
-/** Spread into a date input: `{ value }` when `date` is `YYYY-MM-DD`, `{}` otherwise. */
+function isISODate(value: string): value is ISODateString {
+  if (!hasISODateShape(value)) return false;
+  try {
+    parseISO(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Spread into a date input: `{ value }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function dateValue(date: string): { readonly value?: ISODateString } {
   return isISODate(date) ? { value: date } : {};
 }
 
-/** Spread into a date input: `{ min }` when `min` is `YYYY-MM-DD`, `{}` otherwise. */
+/** Spread into a date input: `{ min }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function minDate(min: string | undefined): { readonly min?: ISODateString } {
   return min !== undefined && isISODate(min) ? { min } : {};
 }

package/src/lib/tokenEditorExtensions.ts

@@ -255,7 +255,7 @@ const theme = EditorView.theme({
     font: "inherit",
     fontSize: "12px",
     borderRadius: "50%",
-    color: "var(--ants-mh-blue-700)",
+    color: "var(--color-icon-accent)",
     cursor: "pointer",
   },
   ".cm-token:hover .cm-token-remove, .cm-token:focus-within .cm-token-remove": { opacity: "1" },

package/src/molecules/AccentCard.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Card } from "@astryxdesign/core/Card";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
@@ -86,7 +87,7 @@ export function AccentCard(props: AccentCardProps): ReactNode {
             <RemoveButton
               label={close}
               size="sm"
-              isDisabled={props.isDisabled}
+              isDisabled={props.isDisabled ?? false}
               onClick={props.onClose}
             />
           ))}
@@ -101,6 +102,7 @@ export function AccentCard(props: AccentCardProps): ReactNode {
   );
 }
 
+const accentBanner: AccentRole = "var(--ants-accent-banner)";
 const styles = stylex.create({
   // A grey border and a
   // 4px accent stripe at the start (no border token is 4px). A look of this card only, which no
@@ -122,7 +124,7 @@ const styles = stylex.create({
   bannerCard: { borderStyle: "none", borderRadius: 0 },
   // White semibold capitals on the header blue, 10px 20px around.
   banner: {
-    backgroundColor: "var(--ants-mh-blue-750)",
+    backgroundColor: accentBanner,
     color: colorVars["--color-on-accent"],
     textTransform: "uppercase",
   },

package/src/molecules/CheckGroup.tsx

@@ -3,6 +3,7 @@ import { HStack } from "@astryxdesign/core/HStack";
 import { VStack } from "@astryxdesign/core/VStack";
 import type { ReactNode } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { FieldGroup, type FieldGroupProps } from "./FieldGroup";
 
 /** One checkbox of a `CheckGroup`. */
@@ -14,9 +15,8 @@ export type CheckGroupOption<V extends string> = {
 };
 
 /** What `CheckGroup` takes. */
-export type CheckGroupProps<V extends string> = Pick<
-  FieldGroupProps,
-  "label" | "isDisabled" | "error"
+export type CheckGroupProps<V extends string> = Forwardable<
+  Pick<FieldGroupProps, "label" | "isDisabled" | "error">
 > & {
   /** The checkboxes, in order. */
   readonly options: readonly CheckGroupOption<V>[];

package/src/molecules/CheckRow.tsx

@@ -1,4 +1,4 @@
-import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { CheckboxInput, type CheckboxInputProps } from "@astryxdesign/core/CheckboxInput";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Text } from "@astryxdesign/core/Text";
 import { sizeVars } from "@astryxdesign/core/theme/tokens.stylex";
@@ -8,9 +8,10 @@ import type { ReactNode } from "react";
 
 import { HoverSwap } from "../atoms/HoverSwap";
 import { TruncatedText } from "../atoms/TruncatedText";
+import type { Forwardable } from "../lib/forwardable";
 
 /** What `CheckRow` takes. */
-export type CheckRowProps = {
+export type CheckRowProps = Forwardable<Pick<CheckboxInputProps, "isDisabled" | "isReadOnly">> & {
   /** The row's text and the checkbox's name; one line, the whole text in a tooltip when cut. */
   readonly label: string;
   /** A second line under the text, such as an id under a name; one line too. */
@@ -26,10 +27,6 @@ export type CheckRowProps = {
    * link to the item; the two share one place, so nothing moves. None without it.
    */
   readonly hoverContent?: ReactNode;
-  /** Dims the box and blocks it; nothing is hidden. */
-  readonly isDisabled?: boolean | undefined;
-  /** Shows the box's state, not dimmed, and blocks it. */
-  readonly isReadOnly?: boolean | undefined;
 };
 
 /**

package/src/molecules/ChoiceTiles.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Center } from "@astryxdesign/core/Center";
 import { ClickableCard } from "@astryxdesign/core/ClickableCard";
 import { HStack } from "@astryxdesign/core/HStack";
@@ -67,6 +68,7 @@ export function ChoiceTiles<V extends string>(props: ChoiceTilesProps<V>): React
 // A 150×130 tile at 12px text is too tight; 180×170 leaves room for a two-line description.
 const TILE = { width: 180, height: 170 } as const;
 
+const accentHover: AccentRole = "var(--ants-accent-hover)";
 const styles = stylex.create({
   // Text has no alignment prop: its lines centre under the glyph from here.
   fill: { height: "100%", textAlign: "center" },
@@ -76,7 +78,7 @@ const styles = stylex.create({
     width: 50,
     height: 50,
     borderRadius: "50%",
-    backgroundColor: "var(--ants-mh-blue-50)",
+    backgroundColor: accentHover,
     color: colorVars["--color-accent"],
   },
 });