@kanso-labs/kanso-ui 0.26.6 → 0.28.0

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

@@ -40,8 +40,8 @@ import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "reac
 * which is the element a layout positions.
 */
 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 $ = c(39);
+	const { container, 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;
@@ -158,19 +158,27 @@ function DateRangePicker$1(t0) {
 	} 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 })
-			})
+		t19 = /* @__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, {
+	if ($[26] !== container || $[27] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Popover, {
+			UNSTABLE_portalContainer: container,
+			...t17,
+			children: t19
+		});
+		$[26] = container;
+		$[27] = t19;
+		$[28] = t20;
+	} else t20 = $[28];
+	let t21;
+	if ($[29] !== T0 || $[30] !== isDisabled || $[31] !== props$1 || $[32] !== t15 || $[33] !== t16 || $[34] !== t20 || $[35] !== t6 || $[36] !== t7 || $[37] !== validationBehavior) {
+		t21 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t6,
 			validationBehavior,
@@ -179,21 +187,21 @@ function DateRangePicker$1(t0) {
 			children: [
 				t15,
 				t16,
-				t19
+				t20
 			]
 		});
-		$[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;
+		$[29] = T0;
+		$[30] = isDisabled;
+		$[31] = props$1;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t20;
+		$[35] = t6;
+		$[36] = t7;
+		$[37] = validationBehavior;
+		$[38] = t21;
+	} else t21 = $[38];
+	return t21;
 }
 //#endregion
 export { DateRangePicker$1 as default };

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

@@ -1 +1 @@
-{"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","focus","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","ring","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 { focus } from '../../styles/focus';\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, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","container","Element","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","ring","t19","t20","t21"],"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 type { FieldVariant } from '../../field';\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 { focus } from '../../styles/focus';\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 = DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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?: FieldVariant;\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  container,\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\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.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\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/disclosure/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"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.\n// No overline, and so no three-line header. The row takes the list\n// variant's metrics because a header looks like a list row, but what it\n// follows is its own page, and that page gives a headline and a supporting\n// line — the three-line item belongs to the lists page, which `List.Item`\n// and `ListBox.Item` draw.\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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"}

package/dist/components/form/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 import { FormProps } from "react-aria-components";
 //#region src/components/form/index.d.ts
-type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
+type FormProps$1 = {
   className?: string;
   style?: CSSProperties;
   /**
@@ -10,10 +10,17 @@ type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
    * regardless. `native` hands validation to the browser: a required or
    * malformed field blocks submission, and its message is the browser's
    * own, shown once submission is tried.
+   *
+   * Under `aria`, moving focus after a server answers is the call site's.
+   * The errors are associated — `aria-invalid` on each control, the message
+   * in its `aria-describedby` — but nothing moves and nothing is read out,
+   * because no part of the form knows a round trip happened. `validationErrors`
+   * is a prop rather than an event, so a form cannot tell a submission coming
+   * back from a first render that was given errors to begin with.
    * @default 'aria'
    */
   validationBehavior?: 'aria' | 'native';
-};
+} & Omit<FormProps, 'className' | 'style'>;
 /**
  * A form: the fields inside it and what they are told about validation. Pass
  * `validationErrors`, an object keyed by field `name`, to show what a server
@@ -22,6 +29,10 @@ type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
  * the submit event; call `preventDefault` on it to handle the submission
  * yourself, and read the values from `new FormData(event.currentTarget)`.
  *
+ * Handing `validationErrors` back from a submission is where a reader has to
+ * be told something arrived: see `validationBehavior` for what the form does
+ * and what it leaves to the call site.
+ *
  * The call site's `className` and `style` land on the form element, which is
  * the element a layout positions.
  */

package/dist/components/form/index.js

@@ -12,6 +12,10 @@ import { Form } from "react-aria-components";
 * the submit event; call `preventDefault` on it to handle the submission
 * yourself, and read the values from `new FormData(event.currentTarget)`.
 *
+* Handing `validationErrors` back from a submission is where a reader has to
+* be told something arrived: see `validationBehavior` for what the form does
+* and what it leaves to the call site.
+*
 * The call site's `className` and `style` land on the form element, which is
 * the element a layout positions.
 */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","Omit","className","style","validationBehavior","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = Omit<RACFormProps, 'className' | 'style'> & {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n};\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAD,oBAAAQ,IAAA,GAAAC,UAAAR;EACZ,MAAAD,qBAAAQ,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BM,KAAAA;EAAwBS,KAAAA;EAAWF,KAAAX,YAAY,EAAAE,WACtE,SACb,GAAGW,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BR,oBAAAA;GAAkB,GAAMS;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}
+{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — but nothing moves and nothing is read out,\n   * because no part of the form knows a round trip happened. `validationErrors`\n   * is a prop rather than an event, so a form cannot tell a submission coming\n   * back from a first render that was given errors to begin with.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAS,IAAA,GAAAC,UAAAR;EACZ,MAAAF,qBAAAS,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BK,KAAAA;EAAwBU,KAAAA;EAAWF,KAAAX,YAAY,EAAAC,WACtE,SACb,GAAGY,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BT,oBAAAA;GAAkB,GAAMU;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}

package/dist/components/index.d.ts

@@ -1,70 +1,71 @@
+import { FieldVariant } from "../field/index.js";
 import AppBar, { AppBarProps } from "./app-bar/index.js";
-import Autocomplete, { AutocompleteProps } from "./autocomplete/index.js";
+import Autocomplete, { AutocompleteFilter, AutocompleteProps } from "./autocomplete/index.js";
 import Avatar, { AvatarProps } from "./avatar/index.js";
-import Breadcrumbs, { BreadcrumbsProps } from "./breadcrumbs/index.js";
-import Button, { ButtonProps } from "./button/index.js";
+import Breadcrumbs, { BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs/index.js";
+import Button, { ButtonProps, ButtonSize, ButtonVariant } from "./button/index.js";
 import Calendar, { CalendarProps } from "./calendar/index.js";
 import Card, { CardProps } from "./card/index.js";
 import Checkbox, { CheckboxProps } from "./checkbox/index.js";
 import CheckboxGroup, { CheckboxGroupProps } from "./checkbox-group/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
-import ChipGroup, { ChipGroupProps } from "./chip-group/index.js";
+import ChipGroup, { ChipGroupChipProps, ChipGroupProps } from "./chip-group/index.js";
 import Code, { CodeProps } from "./code/index.js";
 import ColorArea, { ColorAreaProps } from "./color-area/index.js";
 import ColorField, { ColorFieldProps } from "./color-field/index.js";
 import ColorPicker, { ColorPickerProps } from "./color-picker/index.js";
 import ColorSlider, { ColorSliderProps } from "./color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./color-swatch/index.js";
-import ColorSwatchPicker, { ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
+import ColorSwatchPicker, { ColorSwatchPickerItemProps, ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
 import ColorWheel, { ColorWheelProps } from "./color-wheel/index.js";
-import ComboBox, { ComboBoxProps } from "./combo-box/index.js";
+import ComboBox, { ComboBoxProps, ComboBoxSelectionMode } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } from "./currency/index.js";
 import DateField, { DateFieldProps } from "./date-field/index.js";
 import DatePicker, { DatePickerProps } from "./date-picker/index.js";
 import DateRangePicker, { DateRangePickerProps } from "./date-range-picker/index.js";
-import Dialog, { DialogProps } from "./dialog/index.js";
-import Disclosure, { DisclosureProps } from "./disclosure/index.js";
+import Dialog, { DialogContentProps, DialogProps, DialogTitleProps } from "./dialog/index.js";
+import Disclosure, { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps } from "./disclosure/index.js";
 import DisclosureGroup, { DisclosureGroupProps } from "./disclosure-group/index.js";
 import DropZone, { DropZoneProps, FileTrigger, FileTriggerProps } from "./drop-zone/index.js";
 import Feed, { FeedProps } from "./feed/index.js";
 import Form, { FormProps } from "./form/index.js";
-import IconButton, { IconButtonProps } from "./icon-button/index.js";
+import IconButton, { IconButtonProps, IconButtonSize, IconButtonVariant } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
-import Link, { LinkProps } from "./link/index.js";
-import List, { ListProps } from "./list/index.js";
-import ListBox, { ListBoxProps } from "./list-box/index.js";
+import Link, { LinkProps, LinkTone, LinkUnderline } from "./link/index.js";
+import List, { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps } from "./list/index.js";
+import ListBox, { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps } from "./list-box/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
-import Separator, { SeparatorProps } from "./separator/index.js";
-import Menu, { MenuProps } from "./menu/index.js";
-import Meter, { MeterProps } from "./meter/index.js";
+import Separator, { SeparatorInset, SeparatorProps } from "./separator/index.js";
+import Menu, { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps } from "./menu/index.js";
+import Meter, { MeterProps, MeterTone } from "./meter/index.js";
 import NavigationTree, { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps } from "./navigation-tree/index.js";
 import NumberField, { NumberFieldProps } from "./number-field/index.js";
-import Popover, { PopoverProps } from "./popover/index.js";
+import Popover, { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger } from "./popover/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
-import ProgressIndicator, { ProgressIndicatorProps } from "./progress-indicator/index.js";
+import ProgressIndicator, { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant } from "./progress-indicator/index.js";
 import RadioGroup, { Radio, RadioGroupProps, RadioProps } from "./radio-group/index.js";
 import RangeCalendar, { RangeCalendarProps } from "./range-calendar/index.js";
 import SearchField, { SearchFieldProps } from "./search-field/index.js";
 import SegmentedButton, { SegmentedButtonProps, SegmentedButtonSegmentProps } from "./segmented-button/index.js";
 import Select, { SelectProps } from "./select/index.js";
-import Sheet, { SheetProps } from "./sheet/index.js";
+import Sheet, { SheetContentProps, SheetProps, SheetTitleProps } from "./sheet/index.js";
 import Slider, { SliderProps } from "./slider/index.js";
-import Snackbar, { SnackbarProps } from "./snackbar/index.js";
+import Snackbar, { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, SnackbarRegionRenderProps as ToastRegionRenderProps } from "./snackbar/index.js";
 import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Switch, { SwitchProps } from "./switch/index.js";
-import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
-import Tabs, { TabsProps } from "./tabs/index.js";
+import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps } from "./table/index.js";
+import Tabs, { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps } from "./tabs/index.js";
 import Tag, { TagProps } from "./tag/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextArea, { TextAreaProps } from "./text-area/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
 import TimeField, { TimeFieldProps } from "./time-field/index.js";
-import TokenField, { TokenFieldProps } from "./token-field/index.js";
-import Toolbar, { ToolbarProps } from "./toolbar/index.js";
-import Tooltip, { TooltipProps } from "./tooltip/index.js";
+import TokenField, { TokenFieldProps, TokenSegment } from "./token-field/index.js";
+import Toolbar, { ToolbarProps, ToolbarTone } from "./toolbar/index.js";
+import Tooltip, { TooltipAlign, TooltipProps, TooltipSide } from "./tooltip/index.js";
 import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogContentProps, type DialogProps, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureHeaderProps, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, type ListBoxItemProps, type ListBoxLoadMoreProps, type ListBoxProps, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, Menu, type MenuAlign, type MenuContentProps, type MenuItemProps, type MenuLoadMoreProps, type MenuProps, type MenuSectionProps, type MenuSeparatorProps, type MenuSide, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, type PopoverContentProps, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, type SheetContentProps, type SheetProps, type SheetTitleProps, Slider, type SliderProps, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableLoadMoreProps, type TableProps, type TableRowProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };

package/dist/components/list/index.d.ts

@@ -1,20 +1,6 @@
 import { ReactNode } from "react";
 import { GridListItemProps, GridListLoadMoreItemProps, GridListProps, GridListSectionProps } from "react-aria-components";
 //#region src/components/list/index.d.ts
-type ListItemProps<T extends object = object> = {
-  /** The row's headline — the one thing it is mostly about. */
-  children?: ReactNode;
-  /** A function may compute the class from the row's render state. */
-  className?: GridListItemProps<T>['className'];
-  /** Content before the headline: an avatar, an icon. */
-  leading?: ReactNode;
-  /** A function may compute the style from the row's render state. */
-  style?: GridListItemProps<T>['style'];
-  /** A second line under the headline, in the muted role. */
-  supporting?: ReactNode;
-  /** Content after the headline, such as an amount or a control. */
-  trailing?: ReactNode;
-} & Omit<GridListItemProps<T>, 'children' | 'className' | 'style'>;
 type ListLoadMoreProps = Omit<GridListLoadMoreItemProps, 'children'> & {
   /**
    * What the row says while it is loading. Read by a screen reader; the ring
@@ -23,7 +9,7 @@ type ListLoadMoreProps = Omit<GridListLoadMoreItemProps, 'children'> & {
    */
   label?: string;
 };
-type ListProps<T extends object> = Omit<GridListProps<T>, 'className' | 'style'> & {
+type ListProps<T extends object = object> = Omit<GridListProps<T>, 'className' | 'style'> & {
   /** A function may compute the class from the list's render state. */
   className?: GridListProps<T>['className'];
   /**
@@ -35,6 +21,26 @@ type ListProps<T extends object> = Omit<GridListProps<T>, 'className' | 'style'>
   /** A function may compute the style from the list's render state. */
   style?: GridListProps<T>['style'];
 };
+type ListRowProps<T extends object = object> = {
+  /** The row's headline — the one thing it is mostly about. */
+  children?: ReactNode;
+  /** A function may compute the class from the row's render state. */
+  className?: GridListItemProps<T>['className'];
+  /** Content before the headline: an avatar, an icon. */
+  leading?: ReactNode;
+  /**
+   * A line above the headline, in the page's label-small and the same muted
+   * role the supporting line takes — a category, a date, a status. Given
+   * alongside `supporting` it makes the row the page's three-line item.
+   */
+  overline?: ReactNode;
+  /** A function may compute the style from the row's render state. */
+  style?: GridListItemProps<T>['style'];
+  /** A second line under the headline, in the muted role. */
+  supporting?: ReactNode;
+  /** Content after the headline, such as an amount or a control. */
+  trailing?: ReactNode;
+} & Omit<GridListItemProps<T>, 'children' | 'className' | 'style'>;
 type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>, 'children'> & {
   /**
    * The rows in the section. A section built from data puts React Aria's
@@ -80,7 +86,7 @@ declare namespace List {
  * A list that selects with checkboxes draws one before whatever `leading`
  * holds, from the state React Aria reports rather than from a prop here.
  */
-declare function ListItem<T extends object = object>({ children, leading, supporting, textValue, trailing, ...props }: ListItemProps<T>): import("react").JSX.Element;
+declare function ListItem<T extends object = object>({ children, leading, overline, supporting, textValue, trailing, ...props }: ListRowProps<T>): import("react").JSX.Element;
 /**
  * The row the list shows while it is fetching more. React Aria calls
  * `onLoadMore` when this comes into view, and draws it only while
@@ -93,5 +99,5 @@ declare function ListLoadMore({ label, ...props }: ListLoadMoreProps): import("r
  */
 declare function ListSection<T extends object = object>({ children, header, ...props }: ListSectionProps<T>): import("react").JSX.Element;
 //#endregion
-export { type ListItemProps, type ListLoadMoreProps, type ListProps, type ListSectionProps, List as default };
+export { type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, List as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/list/index.js

@@ -10,11 +10,12 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { GridList, GridListHeader, GridListItem, GridListLoadMoreItem, GridListSection } from "react-aria-components";
 //#region src/components/list/index.tsx
 const SelectLabelContext = createContext("Select");
-function itemContent(children, leading, supporting, trailing, selectLabel) {
+function itemContent(children, leading, overline, supporting, trailing, selectLabel) {
 	return (state) => /* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading: leadingFor(state, leading, selectLabel),
+		overline,
 		supporting,
 		trailing,
 		children
@@ -58,13 +59,13 @@ function List(t0) {
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { selectLabel: t4, ...props$2 } = t0;
+		const { selectLabel: t4, ...props$1 } = t0;
 		const selectLabel = t4 === void 0 ? "Select" : t4;
 		T1 = SelectLabelContext;
 		t3 = selectLabel;
 		T0 = GridList;
-		t1 = props$2;
-		t2 = mergeStatefulStyles(props(collectionStyles.container), props$2);
+		t1 = props$1;
+		t2 = mergeStatefulStyles(props(collectionStyles.container), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -111,8 +112,8 @@ function List(t0) {
 * holds, from the state React Aria reports rather than from a prop here.
 */
 function ListItem(t0) {
-	const $ = c(15);
-	const { children, leading, supporting, textValue, trailing, ...props } = t0;
+	const $ = c(16);
+	const { children, leading, overline, supporting, textValue, trailing, ...props } = t0;
 	const selectLabel = useContext(SelectLabelContext);
 	const T0 = GridListItem;
 	let t1;
@@ -122,32 +123,33 @@ function ListItem(t0) {
 		$[1] = textValue;
 		$[2] = t1;
 	} else t1 = $[2];
-	const t2 = mergeStatefulStyles(rowItemStyles(supporting), props);
+	const t2 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
 	let t3;
-	if ($[3] !== children || $[4] !== leading || $[5] !== selectLabel || $[6] !== supporting || $[7] !== trailing) {
-		t3 = itemContent(children, leading, supporting, trailing, selectLabel);
+	if ($[3] !== children || $[4] !== leading || $[5] !== overline || $[6] !== selectLabel || $[7] !== supporting || $[8] !== trailing) {
+		t3 = itemContent(children, leading, overline, supporting, trailing, selectLabel);
 		$[3] = children;
 		$[4] = leading;
-		$[5] = selectLabel;
-		$[6] = supporting;
-		$[7] = trailing;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[5] = overline;
+		$[6] = selectLabel;
+		$[7] = supporting;
+		$[8] = trailing;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[9] !== T0 || $[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+	if ($[10] !== T0 || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
 		t4 = /* @__PURE__ */ jsx(T0, {
 			textValue: t1,
 			...props,
 			...t2,
 			children: t3
 		});
-		$[9] = T0;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[10] = T0;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
 	return t4;
 }
 /**
@@ -162,11 +164,11 @@ function ListLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$1 } = t0;
+		const { label: t3, ...props$2 } = t0;
 		label = t3 === void 0 ? "Loading more" : t3;
 		T0 = GridListLoadMoreItem;
-		t1 = props$1;
-		t2 = mergeStyles(props(collectionStyles.loading), props$1);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.loading), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;