@kanso-labs/kanso-ui 0.30.4 → 0.31.0

package/dist/components/token-field/index.js

@@ -5,6 +5,7 @@ import { fieldStyles, invalidFrom } from "../../field/root.js";
 import { FieldBox, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
 import { c } from "react/compiler-runtime";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Token, TokenField, TokenInput } from "react-aria-components";
 //#region src/components/token-field/index.tsx
@@ -13,6 +14,12 @@ const styles = { token: {
 	kXLuUW: "xxymvpz",
 	$$css: true
 } };
+function changeHandler(setHeld, onChange) {
+	return (value) => {
+		setHeld(value);
+		onChange?.(value);
+	};
+}
 function isPopulated(value) {
 	if (value === void 0) return;
 	return value.segments.some((segment) => segment.text.length > 0);
@@ -47,146 +54,99 @@ function tokenContent(renderToken) {
 * which is the element a layout positions.
 */
 function TokenField$1(t0) {
-	const $ = c(41);
-	let T0;
-	let description;
-	let error;
-	let floatingLabel;
-	let label;
-	let leadingIcon;
-	let populated;
-	let props$1;
-	let renderToken;
-	let t1;
-	let t2;
-	let trailingIcon;
-	let variant;
-	if ($[0] !== t0) {
-		const { description: t3, error: t4, floatingLabel: t5, label: t6, leadingIcon: t7, renderToken: t8, trailingIcon: t9, variant: t10, ...t11 } = t0;
-		description = t3;
-		error = t4;
-		label = t6;
-		leadingIcon = t7;
-		renderToken = t8;
-		trailingIcon = t9;
-		props$1 = t11;
-		floatingLabel = t5 === void 0 ? true : t5;
-		variant = t10 === void 0 ? "filled" : t10;
-		populated = isPopulated(props$1.value ?? props$1.defaultValue);
-		T0 = TokenField;
-		t1 = props$1;
-		t2 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = description;
-		$[3] = error;
-		$[4] = floatingLabel;
-		$[5] = label;
-		$[6] = leadingIcon;
-		$[7] = populated;
-		$[8] = props$1;
-		$[9] = renderToken;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = trailingIcon;
-		$[13] = variant;
-	} else {
-		T0 = $[1];
-		description = $[2];
-		error = $[3];
-		floatingLabel = $[4];
-		label = $[5];
-		leadingIcon = $[6];
-		populated = $[7];
-		props$1 = $[8];
-		renderToken = $[9];
-		t1 = $[10];
-		t2 = $[11];
-		trailingIcon = $[12];
-		variant = $[13];
-	}
-	const t3 = props$1.isDisabled;
-	let t4;
-	if ($[14] !== error) {
-		t4 = invalidFrom(error);
-		$[14] = error;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
+	const $ = c(28);
+	const { description, error, floatingLabel: t1, label, leadingIcon, renderToken, trailingIcon, variant: t2, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const variant = t2 === void 0 ? "filled" : t2;
+	const [held, setHeld] = useState(props$1.defaultValue);
+	const populated = isPopulated(props$1.value ?? held);
+	const T0 = TokenField;
+	const t3 = changeHandler(setHeld, props$1.onChange);
+	const t4 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	const t5 = props$1.isDisabled;
+	let t6;
+	if ($[0] !== error) {
+		t6 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t6;
+	} else t6 = $[1];
+	let t7;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
 			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a" },
 			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi" }
 		};
-		$[16] = t5;
-	} else t5 = $[16];
-	const t6 = t5[!!(variant === "filled") << 0];
-	let t7;
-	if ($[17] !== renderToken) {
-		t7 = tokenContent(renderToken);
-		$[17] = renderToken;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== t6 || $[20] !== t7) {
-		t8 = /* @__PURE__ */ jsx(TokenInput, {
-			...t6,
-			children: t7
-		});
-		$[19] = t6;
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
+		$[2] = t7;
+	} else t7 = $[2];
+	const t8 = t7[!!(variant === "filled") << 0];
 	let t9;
-	if ($[22] !== floatingLabel || $[23] !== label || $[24] !== leadingIcon || $[25] !== populated || $[26] !== props$1.isDisabled || $[27] !== t4 || $[28] !== t8 || $[29] !== trailingIcon || $[30] !== variant) {
-		t9 = /* @__PURE__ */ jsx(FieldBox, {
+	if ($[3] !== renderToken) {
+		t9 = tokenContent(renderToken);
+		$[3] = renderToken;
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] !== t8 || $[6] !== t9) {
+		t10 = /* @__PURE__ */ jsx(TokenInput, {
+			...t8,
+			children: t9
+		});
+		$[5] = t8;
+		$[6] = t9;
+		$[7] = t10;
+	} else t10 = $[7];
+	let t11;
+	if ($[8] !== floatingLabel || $[9] !== label || $[10] !== leadingIcon || $[11] !== populated || $[12] !== props$1.isDisabled || $[13] !== t10 || $[14] !== t6 || $[15] !== trailingIcon || $[16] !== variant) {
+		t11 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
-			isDisabled: t3,
-			isInvalid: t4,
+			isDisabled: t5,
+			isInvalid: t6,
 			isPopulated: populated,
 			label,
 			leading: leadingIcon,
 			multiline: true,
 			trailing: trailingIcon,
 			variant,
-			children: t8
+			children: t10
 		});
-		$[22] = floatingLabel;
-		$[23] = label;
-		$[24] = leadingIcon;
-		$[25] = populated;
-		$[26] = props$1.isDisabled;
-		$[27] = t4;
-		$[28] = t8;
-		$[29] = trailingIcon;
-		$[30] = variant;
-		$[31] = t9;
-	} else t9 = $[31];
-	let t10;
-	if ($[32] !== description || $[33] !== error) {
-		t10 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[8] = floatingLabel;
+		$[9] = label;
+		$[10] = leadingIcon;
+		$[11] = populated;
+		$[12] = props$1.isDisabled;
+		$[13] = t10;
+		$[14] = t6;
+		$[15] = trailingIcon;
+		$[16] = variant;
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== description || $[19] !== error) {
+		t12 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[32] = description;
-		$[33] = error;
-		$[34] = t10;
-	} else t10 = $[34];
-	let t11;
-	if ($[35] !== T0 || $[36] !== t1 || $[37] !== t10 || $[38] !== t2 || $[39] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(T0, {
-			...t1,
-			...t2,
-			children: [t9, t10]
+		$[18] = description;
+		$[19] = error;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== T0 || $[22] !== props$1 || $[23] !== t11 || $[24] !== t12 || $[25] !== t3 || $[26] !== t4) {
+		t13 = /* @__PURE__ */ jsxs(T0, {
+			...props$1,
+			onChange: t3,
+			...t4,
+			children: [t11, t12]
 		});
-		$[35] = T0;
-		$[36] = t1;
-		$[37] = t10;
-		$[38] = t2;
-		$[39] = t9;
-		$[40] = t11;
-	} else t11 = $[40];
-	return t11;
+		$[21] = T0;
+		$[22] = props$1;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
 }
 //#endregion
 export { TokenField$1 as default };

package/dist/components/token-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const populated = isPopulated(props.value ?? props.defaultValue);\n  return <RACTokenField<T> {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","useState","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","changeHandler","setHeld","value","onChange","isPopulated","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","t1","t2","held","defaultValue","populated","T0","t3","t4","root","t5","isDisabled","t6","t7","Symbol","for","0","1","t8","t9","t10","t11","t12","t13"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Keeps the mirrored copy in step and then hands the change on to the call\n// site. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its input.\nfunction changeHandler<T extends TokenFieldValue>(setHeld: (value: T) => void, onChange: ((value: T) => void) | undefined) {\n  return (value: T) => {\n    setHeld(value);\n    onChange?.(value);\n  };\n}\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  // A copy of what the field holds, kept only so the label can float from\n  // it. React Aria's token field reports `isDisabled` and `isReadOnly`\n  // through its render props and not its value, and it hands its state down\n  // a context of its own that nothing outside the module can read — so an\n  // uncontrolled field has no other way to say what it is holding now.\n  //\n  // This mirrors rather than controls: `defaultValue` still goes through, so\n  // React Aria keeps owning the value and the editing it does with it. A\n  // controlled field is read straight off the prop, which already moves.\n  const [held, setHeld] = useState(props.defaultValue);\n  const populated = isPopulated(props.value ?? held);\n  return <RACTokenField<T> {...props} onChange={changeHandler(setHeld, props.onChange)} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

package/dist/components/tree/index.js

@@ -41,8 +41,8 @@ function chevronFor(state) {
 		className: chevronClassName,
 		slot: "chevron",
 		children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
-			0: { className: "xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
-			1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
+			0: { className: "x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
+			1: { className: "x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
 		}[!!state.isExpanded << 0] })
 	});
 }

package/dist/components/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","rowItemStyles","ChevronEndGlyph","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","isDisabled","isSelected","leadingFor","selects","selectionBehavior","selectionMode","textValueFor","undefined","t0","$","_c","T0","T1","t1","t2","t3","t4","container","t5","Symbol","for","TreeLoadMore","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object = object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","rowItemStyles","ChevronEndGlyph","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","isDisabled","isSelected","leadingFor","selects","selectionBehavior","selectionMode","textValueFor","undefined","t0","$","_c","T0","T1","t1","t2","t3","t4","container","t5","Symbol","for","TreeLoadMore","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object = object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMyC,qBAAqBhC,cAAc,QAAQ;AACjD,MAAMiC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;AACF;AAwEA,SAASmB,mBAAmB;CAC1B,OAAOlE,MAAakC,OAAOC,SAASb,MAAM8C,IAAI,CAAC,CAACd,aAAa;AAC/D;AASA,SAASe,WAAWC,OAAuC;CACzD,IAAI,CAACA,MAAMC,eACT,OAAO,oBAAC,QAAD,EAAM,WAAU,0BAAyB,CAAA;CAElD,OAAO,oBAAC,QAAD;EAAW,WAAWL;EAAkB,MAAK;EAChD,UAAA,oBAAC,iBAAD,EAAiB,GAAI;GACrB,GAAG,EACDZ,WAAW,sEACb;GACA,GAAG,EACDA,WAAW,sEACb;EACF,EAAE,CAAC,CAACgB,MAAME,cAAc,GAAG,CAAA;CAChB,CAAA;AACf;AAKA,SAASC,YAAYd,UAAqBJ,SAAoBE,YAAuBC,UAAqBK,aAAqB;CAC7H,QAAQO,UAA0C,oBAAC,YAAD;EAAY,YAAYA,MAAMI;EAAY,YAAYJ,MAAMK;EAAY,SAASC,WAAWN,OAAOf,SAASQ,WAAW;EAAeN;EAAsBC;EACzMC,UAAAA;CACS,CAAA;AAChB;;;;;;;AAoBA,SAASiB,WAAWN,OAA4Bf,SAAoBQ,aAAgC;CAClG,MAAMc,UAAUP,MAAMQ,sBAAsB,YAAYR,MAAMS,kBAAkB;CAChF,OAAO,qBAAA,YAAA,EAAA,UAAA;EACFV,WAAWC,KAAK;EAChBO,UAAU,oBAAC,UAAD;GAAU,cAAYd;GAAa,MAAK;EAAW,CAAA,IAAM;EACnER;CACH,EAAA,CAAA;AACJ;AAMA,SAASyB,aAAapB,WAA+BD,UAAqB;CACxE,IAAIC,cAAcqB,KAAAA,GAChB,OAAOrB;CAET,OAAO,OAAOD,aAAa,WAAWA,WAAW;AACnD;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAtD,OAAA6E,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAgC,MAAA,EAAAnB,aAAA2B,IAAA,GAAAvB,YAAAe;EAC9B,MAAAnB,cAAA2B,OAAAT,KAAAA,IAAA,WAAAS;EAGQJ,KAAArD;EAA0B8B,KAAAA;EAC7BsB,KAAA/E;EAAe6D,KAAAA;EAAWqB,KAAAjE,oBAAoBvB,MAAakB,iBAAgByE,SAAU,GAAGxB,OAAK;EAACgB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAA/FE,KAAA,oBAAC,IAAD;GAAQ,GAAQvB;GAAK,GAAMqB;EAAoE,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAG,MAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EADhGE,KAAA,oBAAC,IAAD;GAA2B7B,OAAAA;GAC9B2B,UAAAA;EADsB,CAAA;EAEHP,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFhBS;AAEgB;;;;;AAOzB,SAAArF,aAAA2E,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAoB,MAAA,EAAAjC,aAAA+B;CAEF,IAAAK;CAAA,IAAAJ,EAAA,OAAAU,OAAAC,IAAA,2BAAA,GAAA;EACUP,KAAAvF,MAAakB,iBAAgB+C,MAAO;EAACkB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAhC,UAAA;EAAxDqC,KAAA,oBAAC,YAAD;GAAc,GAAKD;GACrBpC;EADgB,CAAA;EAEHgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAFXK;AAEW;;;;;;;;;;AAYpB,SAAA/E,WAAAyE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA6C,MAAA,EAAAjC,UAAAQ,UAAAJ,SAAAE,YAAAG,WAAAF,UAAA,GAAAS,UAAAe;CAS3C,MAAAnB,cAAoB7D,WAAW+B,kBAAkB;CACzC,MAAAoD,KAAA3E;CAAW,IAAA6E;CAAA,IAAAJ,EAAA,OAAAxB,YAAAwB,EAAA,OAAAvB,WAAA;EAAe2B,KAAAP,aAAapB,WAAWD,QAAQ;EAACwB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAvB;EAAAuB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAiB,MAAAK,KAAAjE,oBAKpFJ,cAAcsC,YAAYwB,KAAAA,GAAW/C,OAAMc,MAAO,GAAGmB,KAAK;CAAC,IAAAsB;CAAA,IAAAN,EAAA,OAAAxB,YAAAwB,EAAA,OAAA5B,WAAA4B,EAAA,OAAApB,eAAAoB,EAAA,OAAA1B,cAAA0B,EAAA,OAAAzB,UAAA;EAEpD+B,KAAAhB,YAAYd,UAAUJ,SAASE,YAAYC,UAAUK,WAAW;EAACoB,EAAA,KAAAxB;EAAAwB,EAAA,KAAA5B;EAAA4B,EAAA,KAAApB;EAAAoB,EAAA,KAAA1B;EAAA0B,EAAA,KAAAzB;EAAAyB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAM,IAAA;EADpEC,KAAA,oBAAC,iBAAD,EAAA,UACGD,GADgB,CAAA;EAEEN,EAAA,KAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAhC,YAAAgC,EAAA,QAAAhB,SAAAgB,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EARlBE,KAAA,qBAAC,IAAD;GAA2B,WAAAL;GAAiC,GAAMpB;GAAK,GAAMqB;GAA7E,UAAA,CAMHE,IAGCvC,QATc;;EAUHgC,EAAA,MAAAE;EAAAF,EAAA,MAAAhC;EAAAgC,EAAA,MAAAhB;EAAAgB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAVTS;AAUS;;;;;;AAQlB,SAAAG,aAAAb,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAvB;CAAA,IAAAyB;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAsB,MAAA,EAAApB,OAAA2B,IAAA,GAAAtB,YAAAe;EACpBpB,QAAA2B,OAAAR,KAAAA,IAAA,iBAAAQ;EAGQJ,KAAAvE;EAAwBqD,KAAAA;EAAWqB,KAAAjE,oBAAoBvB,MAAakB,iBAAgB8E,OAAQ,GAAG7B,OAAK;EAACgB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAArB;EAAAqB,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAArB,QAAAqB,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAArB,OAAA;EACzG2B,KAAA,oBAAC,oBAAD;GAA2B3B;GAAY,MAAA;EAAM,CAAA;EAAGqB,EAAA,KAAArB;EAAAqB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EAD7CC,KAAA,oBAAC,IAAD;GAAoB,GAAKvB;GAAK,GAAMqB;GACvCC,UAAAA;EADuB,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFjBO;AAEiB;;;;AAM1B,SAAA3E,cAAAmE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAlC;CAAA,IAAAc;CAAA,IAAAsB;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAgD,MAAA,EAAA/B,UAAAsC,IAAAxB,QAAAyB,IAAA,GAAAvB,YAAAe;EAAA/B,WAAAsC;EAAAxB,SAAAyB;EAKtCL,KAAArE;EAAsBmD,KAAAA;EAAWqB,KAAAhE,YAAYxB,MAAakB,iBAAgB+E,OAAQ,GAAG9B,OAAK;EAACgB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAhC;EAAAgC,EAAA,KAAAlB;EAAAkB,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAhC,WAAAgC,EAAA;EAAAlB,SAAAkB,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAlB,QAAA;EAC9FwB,KAAAxB,WAAWgB,KAAAA,IAAX,OAA8B,oBAAC,cAAD,EAAA,UAAahB,OAAF,CAAA;EAAsBkB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAhC,YAAAgC,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAD7DC,KAAA,qBAAC,IAAD;GAAe,GAAQvB;GAAK,GAAMqB;GAAlC,UAAA,CACFC,IACAtC,QAFiB;;EAGHgC,EAAA,KAAAE;EAAAF,EAAA,KAAAhC;EAAAgC,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAHZO;AAGY;AAErBrF,OAAK6F,OAAOzF;AACZJ,OAAK8F,WAAWJ;AAChB1F,OAAK+F,UAAUrF"}

package/dist/control/styles.js

@@ -9,6 +9,7 @@ const controlStyles = {
 		$$css: true
 	},
 	disc: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
 		kZKoxP: "x1vqgdyp",

package/dist/control/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","TARGET_SIZE","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The control's target, which the disc draws at and the label centres its\n// first line on. Stated once because those two have to agree: a disc resized\n// without the label following it would put the control off its own label\n// again, which is the drift this row already had once.\nconst TARGET_SIZE = '40px';\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqCA,MAAMQ,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","TARGET_SIZE","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The control's target, which the disc draws at and the label centres its\n// first line on. Stated once because those two have to agree: a disc resized\n// without the label following it would put the control off its own label\n// again, which is the drift this row already had once.\nconst TARGET_SIZE = '40px';\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqCA,MAAMQ,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRnB,OAAO;CACT;CACAoB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRtB,QAAQ;EACRuB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,eAAe;EACbP,QAAQ;EACRtB,QAAQ;EACRC,OAAO;CACT;CACA6B,eAAe;EACb9B,QAAQ;EACRC,OAAO;CACT;CACA8B,UAAU;EACRC,QAAQ;EACR/B,OAAO;CACT;AACF"}

package/dist/field/styles.js

@@ -4,6 +4,7 @@ import { spacing, typography } from "../tokens/design.tokens.stylex.js";
 `${spacing.lg}${typography.bodyLargeLineHeight}`;
 const fieldChromeStyles = {
 	affix: {
+		k6CgDc: "x12w9bfk",
 		kmuXW: "x2lah0s",
 		kMv6JI: "x16svsjw",
 		kGuDYH: "x1848etk",
@@ -31,6 +32,7 @@ const fieldChromeStyles = {
 		$$css: true
 	},
 	box: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x1cy8zhl",
 		kWkggS: "x1rrhr5q",
 		kZKoxP: "x4v968r",
@@ -174,6 +176,7 @@ const fieldChromeStyles = {
 		$$css: true
 	},
 	icon: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kSGwAc: "xkh2ocl",
 		kMwMTN: "x1w5n3ug",
@@ -225,6 +228,7 @@ const fieldChromeStyles = {
 		$$css: true
 	},
 	label: {
+		k6CgDc: "x12w9bfk",
 		kMwMTN: "x1w5n3ug",
 		kIyJzY: "xkzkux9",
 		k1ekBW: "xixa3zk",
@@ -275,6 +279,7 @@ const fieldChromeStyles = {
 		$$css: true
 	},
 	outline: {
+		k6CgDc: "x12w9bfk",
 		kVAM5u: "x1r7ld26",
 		kaIpWk: "x1tfhd1",
 		ksu8eU: "x1y0btm7",