@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/components/date-range-picker/index.js

@@ -8,6 +8,7 @@ import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
 import RangeCalendar$1 from "../range-calendar/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "react-aria-components";
 //#region src/components/date-range-picker/index.tsx
@@ -37,60 +38,161 @@ import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "reac
 * The call site's `className` and `style` land on the picker as a whole,
 * which is the element a layout positions.
 */
-function DateRangePicker$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, separator = "–", triggerLabel = "Choose a date range", variant = "filled", ...props$1 }) {
+function DateRangePicker$1(t0) {
+	const $ = c(36);
+	const { description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, separator: t3, triggerLabel: t4, variant: t5, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const separator = t3 === void 0 ? "–" : t3;
+	const triggerLabel = t4 === void 0 ? "Choose a date range" : t4;
+	const variant = t5 === void 0 ? "filled" : t5;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(DateRangePicker, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [
-			/* @__PURE__ */ jsx(FieldBox, {
-				floatingLabel,
-				isPopulated: true,
-				label,
-				leading: leadingIcon,
-				variant,
-				children: /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
-					...props(picker.group),
-					children: [
-						/* @__PURE__ */ jsx(DateInput, {
-							slot: "start",
-							...props(segmentStyles.input),
-							children: renderSegment
-						}),
-						/* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							className: "x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej",
-							children: separator
-						}),
-						/* @__PURE__ */ jsx(DateInput, {
-							slot: "end",
-							...props(segmentStyles.input),
-							children: renderSegment
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							"aria-label": triggerLabel,
-							className: triggerClassName,
-							children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
-						})
-					]
-				}) })
-			}),
-			/* @__PURE__ */ jsx(FieldMessage, {
-				description,
-				error
-			}),
-			/* @__PURE__ */ jsx(Popover, {
-				...props(overlay.popup, picker.popover),
-				children: /* @__PURE__ */ jsx(Dialog, {
-					...props(overlay.popupDialog),
-					children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
-				})
+	const T0 = DateRangePicker;
+	let t6;
+	if ($[0] !== error) {
+		t6 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t6;
+	} else t6 = $[1];
+	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t8;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = props(picker.group);
+		$[2] = t8;
+	} else t8 = $[2];
+	let t9;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(DateInput, {
+			slot: "start",
+			...props(segmentStyles.input),
+			children: renderSegment
+		});
+		$[3] = t9;
+	} else t9 = $[3];
+	let t10;
+	if ($[4] !== separator) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej",
+			children: separator
+		});
+		$[4] = separator;
+		$[5] = t10;
+	} else t10 = $[5];
+	let t11;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(DateInput, {
+			slot: "end",
+			...props(segmentStyles.input),
+			children: renderSegment
+		});
+		$[6] = t11;
+	} else t11 = $[6];
+	let t12;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) });
+		$[7] = t12;
+	} else t12 = $[7];
+	let t13;
+	if ($[8] !== triggerLabel) {
+		t13 = /* @__PURE__ */ jsx(Button, {
+			"aria-label": triggerLabel,
+			className: triggerClassName,
+			children: t12
+		});
+		$[8] = triggerLabel;
+		$[9] = t13;
+	} else t13 = $[9];
+	let t14;
+	if ($[10] !== t10 || $[11] !== t13) {
+		t14 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+			...t8,
+			children: [
+				t9,
+				t10,
+				t11,
+				t13
+			]
+		}) });
+		$[10] = t10;
+		$[11] = t13;
+		$[12] = t14;
+	} else t14 = $[12];
+	let t15;
+	if ($[13] !== floatingLabel || $[14] !== label || $[15] !== leadingIcon || $[16] !== t14 || $[17] !== variant) {
+		t15 = /* @__PURE__ */ jsx(FieldBox, {
+			floatingLabel,
+			isPopulated: true,
+			label,
+			leading: leadingIcon,
+			variant,
+			children: t14
+		});
+		$[13] = floatingLabel;
+		$[14] = label;
+		$[15] = leadingIcon;
+		$[16] = t14;
+		$[17] = variant;
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] !== description || $[20] !== error) {
+		t16 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error
+		});
+		$[19] = description;
+		$[20] = error;
+		$[21] = t16;
+	} else t16 = $[21];
+	let t17;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = props(overlay.popup, picker.popover);
+		$[22] = t17;
+	} else t17 = $[22];
+	let t18;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = props(overlay.popupDialog);
+		$[23] = t18;
+	} else t18 = $[23];
+	let t19;
+	if ($[24] !== label) {
+		t19 = /* @__PURE__ */ jsx(Popover, {
+			...t17,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...t18,
+				children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
 			})
-		]
-	});
+		});
+		$[24] = label;
+		$[25] = t19;
+	} else t19 = $[25];
+	let t20;
+	if ($[26] !== T0 || $[27] !== isDisabled || $[28] !== props$1 || $[29] !== t15 || $[30] !== t16 || $[31] !== t19 || $[32] !== t6 || $[33] !== t7 || $[34] !== validationBehavior) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t6,
+			validationBehavior,
+			...props$1,
+			...t7,
+			children: [
+				t15,
+				t16,
+				t19
+			]
+		});
+		$[26] = T0;
+		$[27] = isDisabled;
+		$[28] = props$1;
+		$[29] = t15;
+		$[30] = t16;
+		$[31] = t19;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = validationBehavior;
+		$[35] = t20;
+	} else t20 = $[35];
+	return t20;
 }
 //#endregion
 export { DateRangePicker$1 as default };

package/dist/components/date-range-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAS,kBAAqC,EAC5C,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,YAAY,KACZ,eAAe,uBACf,UAAU,UACV,GAAG,WACuB;CAC1B,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,iBAAD;EAAmC;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAA9L,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA;MACE,oBAAC,WAAD;OAAc,MAAK;OAAQ,GAAI,MAAa,cAAc,KAAK;OAC5D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAU;OAChC,UAAA;MACG,CAAA;MACN,oBAAC,WAAD;OAAc,MAAK;OAAM,GAAI,MAAa,cAAc,KAAK;OAC1D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAW,cAAY;OAAc,WAAW;OAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;MAC5C,CAAA;KACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC7C,UAAA,oBAAC,iBAAD,EAAe,cAAY,MAAM,CAAA;IACxB,CAAA;GACD,CAAA;EACM;;AACxB"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","Symbol","for","group","t9","input","t10","t11","t12","triggerGlyph","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

package/dist/components/dialog/index.js

@@ -1,8 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/dialog/index.tsx
 const styles = { centre: {
@@ -84,24 +84,92 @@ function DialogBody(props) {
 * otherwise, which is the same default `Sheet` takes and the reverse of
 * React Aria's own.
 */
-function DialogContent({ children, className, container, isDismissable = true, isKeyboardDismissDisabled, style, ...props$1 }) {
-	return /* @__PURE__ */ jsx(ModalOverlay, {
-		isDismissable,
-		isKeyboardDismissDisabled,
-		UNSTABLE_portalContainer: container,
-		...props(overlay.scrim, styles.centre),
-		children: /* @__PURE__ */ jsx(Modal, {
-			...mergeStatefulStyles({ className: "x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
-				className,
-				style
-			}),
-			children: /* @__PURE__ */ jsx(Dialog, {
-				...props$1,
-				...props(overlay.modalDialog),
-				children
-			})
-		})
-	});
+function DialogContent(t0) {
+	const $ = c(24);
+	let children;
+	let className;
+	let container;
+	let isKeyboardDismissDisabled;
+	let props$1;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, style, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = container;
+		$[4] = isKeyboardDismissDisabled;
+		$[5] = props$1;
+		$[6] = style;
+		$[7] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		container = $[3];
+		isKeyboardDismissDisabled = $[4];
+		props$1 = $[5];
+		style = $[6];
+		t1 = $[7];
+	}
+	const isDismissable = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = props(overlay.scrim, styles.centre);
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== className || $[10] !== style) {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
+			className,
+			style
+		});
+		$[9] = className;
+		$[10] = style;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = props(overlay.modalDialog);
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== children || $[14] !== props$1) {
+		t5 = /* @__PURE__ */ jsx(Dialog, {
+			...props$1,
+			...t4,
+			children
+		});
+		$[13] = children;
+		$[14] = props$1;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t3 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Modal, {
+			...t3,
+			children: t5
+		});
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== container || $[20] !== isDismissable || $[21] !== isKeyboardDismissDisabled || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
+			isDismissable,
+			isKeyboardDismissDisabled,
+			UNSTABLE_portalContainer: container,
+			...t2,
+			children: t6
+		});
+		$[19] = container;
+		$[20] = isDismissable;
+		$[21] = isKeyboardDismissDisabled;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
 }
 function DialogFooter(props) {
 	const $ = c(5);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}

package/dist/components/disclosure/index.js

@@ -3,9 +3,9 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
+import { c } from "react/compiler-runtime";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Button, Disclosure, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 //#region src/components/disclosure/index.tsx
 const styles = { header: {
@@ -82,17 +82,50 @@ function Disclosure$1(t0) {
 * around the trigger and the button inside it, and draws the shared row's
 * slots with a chevron in the trailing one.
 */
-function DisclosureHeader({ children, headingLevel = 3, leading, supporting }) {
+function DisclosureHeader(t0) {
+	const $ = c(13);
+	const { children, headingLevel: t1, leading, supporting } = t0;
+	const headingLevel = t1 === void 0 ? 3 : t1;
 	const state = useContext(DisclosureStateContext);
-	return /* @__PURE__ */ jsx(Heading, {
-		level: headingLevel,
-		className: "x1qlqyl8 x1pd3egz x1ghz6dp",
-		children: /* @__PURE__ */ jsx(Button, {
-			className: headerClassName(supporting),
+	let t2;
+	if ($[0] !== supporting) {
+		t2 = headerClassName(supporting);
+		$[0] = supporting;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = state?.isExpanded === true;
+	let t4;
+	if ($[2] !== children || $[3] !== leading || $[4] !== supporting || $[5] !== t3) {
+		t4 = headerContent(children, leading, supporting, t3);
+		$[2] = children;
+		$[3] = leading;
+		$[4] = supporting;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t2 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			className: t2,
 			slot: "trigger",
-			children: headerContent(children, leading, supporting, state?.isExpanded === true)
-		})
-	});
+			children: t4
+		});
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== headingLevel || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			className: "x1qlqyl8 x1pd3egz x1ghz6dp",
+			children: t5
+		});
+		$[10] = headingLevel;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 }
 /**
 * What the section shows while it is open. Its content lines up with the

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\">\n        {headerContent(children, leading, supporting, state?.isExpanded === true)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n      {children}\n    </RowContent>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DisclosurePanelProps","RACDisclosurePanelProps","DisclosureProps","RACDisclosureProps","stylex","useContext","DisclosureStateContext","Button","RACButton","Disclosure","RACDisclosure","DisclosurePanel","RACDisclosurePanel","Heading","RACHeading","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","colors","motion","spacing","styles","header","kzqmXN","k9WMMc","$$css","DisclosureHeaderProps","children","headingLevel","leading","supporting","Omit","className","style","chevronFor","isExpanded","t0","$","_c","T0","t1","t2","t3","props","DisclosureHeader","undefined","state","headerClassName","t4","headerContent","t5","t6","Symbol","for","0","1","isDisabled","base","list","interactive","twoLine","disabled","Header","Panel"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\">\n        {headerContent(children, leading, supporting, state?.isExpanded === true)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n      {children}\n    </RowContent>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}