S2 CardView and ghost loading

[devongovett]

This adds S2 Cards, which come in the following configurations:

• Card - a generic card container, into which you can place a <CardPreview>, <Content> with title, description and action menu slots, and a <Footer>. Cards come in 4 sizes, 3 densities, and 4 variants. A <CollectionCardPreview> can also be used to display a grid of multiple images in a preview.
• AssetCard - a pre-configured Card for displaying an asset, with an image preview and metadata.
• UserCard - a pre-configured Card for displaying a user, with an optional preview, avatar, and metadata.
• ProductCard - a pre-configured Card for displaying a product, with an optional preview, thumbnail, metadata, and footer call to action.

CardView displays a grid or waterfall layout of cards, with selection, keyboard navigation, item actions/links, infinite loading, etc.

Cards also integrate with a new system for ghost/skeleton loading.

• The Image component displays a loading animation and supports custom error states. Once the image finishes loading, it fades in if it took longer than 200ms.
• The ImageCoordinator component coordinates the loading states for a group of images, e.g. in a CardView or individual Card. Rather than popping in a random order as soon as they finish loading, the images all fade in together once they have all finished. If this takes longer than 5 seconds (by default), the images are shown as they are ready. CardView wraps its children in an ImageCoordinator so that this behavior happens automatically, and it can be used in other collection components too.
• The Skeleton component causes all <Image>, <Avatar>, <Text>, and icons within it to render as a skeleton, with a shimmer animation instead of displaying its content. Other components like StatusLight and Badge are also skeleton-aware. This enables you to create skeletons with accurate layout by rendering your usual components with mock content. Skeletons are not specific to cards, and can be used anywhere.
• The SkeletonCollection component generates skeleton items within a collection component such as a CardView. It accepts a function as its children which you can use to generate mock data and render your Card component. This function is called as many times as needed to either fill the viewport in case of initial load, or fill the current row in case of load more.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[devongovett]

Not sure if we want this or not. The idea is to not forward Spectrum-specific slots that RAC doesn't expect

[snowystinger]

I haven't had a better Idea yet

We'd talked about clearing our the context around those components in question. Or possibly using a mergeContexts (like has been requested in issues).

[snowystinger]

Seems related: #6992

[devongovett]

Is it a bad idea to do this here? It was an easy way to mark all form components within a skeleton as disabled.

[snowystinger]

Seems somewhat unrelated to forms, but we could always move it out to a separate hook later. useInteractiveSpectrumComponent or whatever

or useIsSkeleton could could accept props and handle the merge? though then we're sensitive to the order call the hooks in, so in some regards this is better

[LFDanLu]

I agree with @snowystinger here, I would've expected that there could be all kinds of components within a skeleton, not just form components so a more general hook feels like it makes more sense.

[devongovett]

So, the alternative is to manually do this in every individual component rather than here in one place. Or I guess we could rename useFormProps to something else...

[LFDanLu]

This is fine for now then, we can see how things shake out when we use Skeleton in more places

[devongovett]

Ideally we'd use a generic here but that would require a lot of changes to propagate everywhere...

[snowystinger]

lot of changes, but would they be breaking?

[devongovett]

This is different from the GridLayout in RAC because it supports variable row heights - the height of a row is equal to the maximum height of the items in that row. The RAC GridLayout just scales the sizes of its items proportionally, which won't work for wrapping text. I could see potentially adding this as an option in RAC at some point.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[snowystinger]

Just double checking, this cloneElement is okay because outside users won't get between this and the things we're rendering. The children will always be our own component internals.

Looks like the plan is to let developers use these components, so we'll just have to document that they need to put the styled child as an immediate child, can't wrap it with anything

[devongovett]

No, SkeletonWrapper is not exported publicly.

[snowystinger]

Seems somewhat unrelated to forms, but we could always move it out to a separate hook later. useInteractiveSpectrumComponent or whatever

or useIsSkeleton could could accept props and handle the merge? though then we're sensitive to the order call the hooks in, so in some regards this is better

[snowystinger]

I haven't had a better Idea yet

We'd talked about clearing our the context around those components in question. Or possibly using a mergeContexts (like has been requested in issues).

[snowystinger]

Suggested change

	// If we are already inside another ImageList, just pass
	// If we are already inside another ImageCoordinator, just pass

Is this what it's saying? Or can there be multiple lists in one coordinator?

[devongovett]

Nested ImageCoordinators don't do anything, they just delegate to the parent.

[snowystinger]

I think so, seems like an ok thing to pass through in general and might make it easier for people to make their website/form builders instead of having to wrap all their components

[snowystinger]

Can you expand on why we might need dependencies here? what kinds of things can change where we'd want to update?

[devongovett]

just like <Collection>, this component caches the results. So if the child function depends on values from outside, they'd need to be dependencies so that the cache invalidates.

[snowystinger]

I don't quite follow the implications of this change

[LFDanLu]

If I recall correctly, the skeleton cards aren't actually in the collection so this.collection.getItem(key) won't actually work here.

[devongovett]

yep. this enables the layout to produce items that aren't in the original collection.

[snowystinger]

The docs page for Cards has a warning about missing labels.

Noticed a bit of a bug with virtualizer reuse. Selection can appear to move to other un-selected items when moving around via keyboard. I know we have this in TableView and ListView, but it feels more noticeable because of the more obvious selected border. Can discuss/handle outside the PR.

cardview-selections.mov

[snowystinger]

I assume you tested it both ways? I don't think it should be necessary, but interested in what you ran into

[devongovett]

It's sort of hard to tell if I'm seeing placebo or how much difference it actually makes, but I noticed that the image's complete property could be true before the onLoad event fires (async). So the theory here is that we could show the image slightly earlier, which is important while scrolling. Just not sure how much difference it makes.

[snowystinger]

clever, i like this approach for setting these styles instead of trying to pull out the img specific styles

[snowystinger]

we've got to start an audit of all these variables we introduce

or hash them for internal module use or something. it'd be nice if we could export/import them internally as well, so we know where they are defined vs used

don't worry about in this PR

[snowystinger]

i think this is preferable over eslint-ignoring the entire dep array, should update this in other places. outside scope of pr

[reidbarber]

The styles and behavior look great! Just a few initial comments

[reidbarber]

Would we support wrapping these in links?

[LFDanLu]

Still going through the Skeleton and layout logic, some initial comments from testing. Overall, performs nicely, tested a variety of keyboard operations/prefers reduced motion/etc

[LFDanLu]

If I recall correctly, the skeleton cards aren't actually in the collection so this.collection.getItem(key) won't actually work here.

[LFDanLu]

I agree with @snowystinger here, I would've expected that there could be all kinds of components within a skeleton, not just form components so a more general hook feels like it makes more sense.

[LFDanLu]

I remember for the old CardView implementation that we offered the ability to customize the layout via maxColumns, inter row/column padding, etc. I assume these were scrapped by Spectrum but just wanna make sure.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[snowystinger]

Testing was pretty good, happy to get in and address anything else in new PRs

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[snowystinger]

I still see the horizontal scrollbar on initial render. I'm not fussed about it. It goes away if I resize the page.

[devongovett]

I still see the horizontal scrollbar on initial render

That's embarrassing. I had it working and then optimized it and apparently it broke and I didn't notice? Reverted to the previous version I had, which updates more frequently (whenever the content size changes at all) rather than trying to detect only when the scrollbars show and hide.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[devongovett]

Updated with the following changes based on my meeting with design today:

• Checkbox wrapper changed from 6px to 4px
• An extra inner white/black stroke was added to quiet cards without a checkbox in order to distinguish the selection outline from the preview image. All other card variants do not have this stroke.
• The whole card now has press scaling in all cases rather than only the checkbox. For quiet cards, only the preview scales down.
• Checkbox now changes size depending on the card t-shirt size, and the space from the edge of the card to the checkbox also changes based on size/density (aligning with the metadata).
• Updated some spacing/sizing values to match designs.
• Fixed grid definition when there is no action menu.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

API Changes

react-aria-components

/react-aria-components:Breadcrumb

 Breadcrumb {
   children?: ReactNode | ((BreadcrumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((BreadcrumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: Key
   style?: CSSProperties | ((BreadcrumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Button

 Button {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ButtonRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/react-aria-components:Calendar

 Calendar <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: DateValue | null
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:CalendarCell

 CalendarCell {
   children?: ReactNode | ((CalendarCellRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarCellRenderProps & {
     defaultClassName: string | undefined
 })) => string
   date: CalendarDate
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((CalendarCellRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:RangeCalendar

 RangeCalendar <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: RangeValue<DateValue> | null
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:Checkbox

 Checkbox {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((CheckboxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CheckboxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((CheckboxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (T) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:CheckboxGroup

 CheckboxGroup {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((CheckboxGroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CheckboxGroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: Array<string>
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   slot?: string | null
   style?: CSSProperties | ((CheckboxGroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Array<string>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: Array<string>
 }

/react-aria-components:ColorArea

 ColorArea {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ColorAreaRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorAreaRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   id?: string
   isDisabled?: boolean
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   slot?: string | null
   style?: CSSProperties | ((ColorAreaRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
   xChannel?: ColorChannel
   xName?: string
   yChannel?: ColorChannel
 }

/react-aria-components:ColorField

 ColorField {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   channel?: ColorChannel
   children?: ReactNode | ((ColorFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   slot?: string | null
   style?: CSSProperties | ((ColorFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Color | null) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: T
 }

/react-aria-components:ColorSlider

 ColorSlider {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   channel: ColorChannel
   children?: ReactNode | ((ColorSliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorSliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   id?: string
   isDisabled?: boolean
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   style?: CSSProperties | ((ColorSliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:ColorSwatch

 ColorSwatch {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   className?: string | ((ColorSwatchRenderProps & {
     defaultClassName: string | undefined
 })) => string
   color?: string | Color
   colorName?: string
   id?: string
   slot?: string | null
   style?: CSSProperties | ((ColorSwatchRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorSwatchPicker

 ColorSwatchPicker {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((ColorSwatchPickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | Color
   layout?: 'grid' | 'stack' = 'grid'
   onChange?: (Color) => void
   style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: string | Color
 }

/react-aria-components:ColorSwatchPickerItem

 ColorSwatchPickerItem {
   children?: ReactNode | ((ColorSwatchPickerItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorSwatchPickerItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   color: string | Color
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorThumb

 ColorThumb {
   children?: ReactNode | ((ColorThumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorThumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColorThumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorWheel

 ColorWheel {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ColorWheelRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorWheelRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
   id?: string
   innerRadius: number
   isDisabled?: boolean
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   outerRadius: number
   slot?: string | null
   style?: CSSProperties | ((ColorWheelRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:ColorWheelTrack

 ColorWheelTrack {
   className?: string | ((ColorWheelTrackRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((ColorWheelTrackRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ComboBox

 ComboBox <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((ComboBoxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ComboBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ComboBoxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:DateField

 DateField <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholderValue?: DateValue
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DateFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateInput

 DateInput {
   children: (DateSegment) => ReactElement
   className?: string | ((DateInputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   slot?: string | null
   style?: CSSProperties | ((DateInputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:DateSegment

 DateSegment {
   children?: ReactNode | ((DateSegmentRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateSegmentRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   segment: DateSegment
   style?: CSSProperties | ((DateSegmentRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TimeField

 TimeField <T extends TimeValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: TimeValue | null
   granularity?: 'hour' | 'minute' | 'second' = 'minute'
   hideTimeZone?: boolean
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: TimeValue
   minValue?: TimeValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedTimeValue<TimeValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   placeholderValue?: TimeValue
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DateFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: TimeValue | null
 }

/react-aria-components:DatePicker

 DatePicker <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DatePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DatePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DatePickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePicker

 DateRangePicker <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateRangePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateRangePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: CSSProperties | ((DateRangePickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/react-aria-components:DropZone

 DropZone {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((DropZoneRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropZoneRenderProps & {
     defaultClassName: string | undefined
 })) => string
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   slot?: string | null
   style?: CSSProperties | ((DropZoneRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:FieldError

 FieldError {
   children?: ReactNode | ((FieldErrorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((FieldErrorRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   style?: CSSProperties | ((FieldErrorRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:GridList

 GridList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:GridListItem

 GridListItem <T extends {}> {
   children?: ReactNode | ((GridListItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((GridListItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((GridListItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:Group

 Group extends HTMLAttributes {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((GroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((GroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   role?: 'group' | 'region' | 'presentation' = 'group'
   slot?: string | null
   style?: CSSProperties | ((GroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Input

 Input extends InputHTMLAttributes {
   className?: string | ((InputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((InputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Link

 Link {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((LinkRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((LinkRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   slot?: string | null
   style?: CSSProperties | ((LinkRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
 }

/react-aria-components:ListBox

 ListBox <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ListBoxItem

 ListBoxItem <T extends {}> {
   aria-label?: string
   children?: ReactNode | ((ListBoxItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ListBoxItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((ListBoxItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:MenuItem

 MenuItem <T extends {}> {
   aria-label?: string
   children?: ReactNode | ((MenuItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((MenuItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((MenuItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:Meter

 Meter {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((MeterRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((MeterRenderProps & {
     defaultClassName: string | undefined
 })) => string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   maxValue?: number = 100
   minValue?: number = 0
   slot?: string | null
   style?: CSSProperties | ((MeterRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: number = 0
   valueLabel?: ReactNode
 }

/react-aria-components:Modal

 Modal {
   UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ModalOverlay

 ModalOverlay {
   UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:NumberField

 NumberField {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((NumberFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((NumberFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   decrementAriaLabel?: string
   defaultValue?: number
   formatOptions?: Intl.NumberFormatOptions
   id?: string
   incrementAriaLabel?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   maxValue?: number
   minValue?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   slot?: string | null
   step?: number
   style?: CSSProperties | ((NumberFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (number) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: number
 }

/react-aria-components:OverlayArrow

 OverlayArrow extends HTMLAttributes {
   children?: ReactNode | ((OverlayArrowRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((OverlayArrowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((OverlayArrowRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Popover

 Popover {
   UNSTABLE_portalContainer?: Element = document.body
   arrowBoundaryOffset?: number = 0
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:ProgressBar

 ProgressBar {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ProgressBarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ProgressBarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   isIndeterminate?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   slot?: string | null
   style?: CSSProperties | ((ProgressBarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: number = 0
   valueLabel?: ReactNode
 }

/react-aria-components:RadioGroup

 RadioGroup {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((RadioGroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RadioGroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | null
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (string) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   orientation?: Orientation = 'vertical'
   slot?: string | null
   style?: CSSProperties | ((RadioGroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (string | null) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string | null
 }

/react-aria-components:Radio

 Radio {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((RadioRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RadioRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((RadioRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value: string
 }

/react-aria-components:SearchField

 SearchField {
   aria-activedescendant?: string
   aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SearchFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SearchFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string
   excludeFromTabOrder?: boolean
   id?: string
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxLength?: number
   minLength?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onClear?: () => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   onSubmit?: (string) => void
   pattern?: string
   slot?: string | null
   style?: CSSProperties | ((SearchFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
   
 })
   validate?: (string) => ValidationError | boolean | null | undefined
   value?: string
 }

/react-aria-components:Select

 Select <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:SelectValue

 SelectValue <T extends {}> extends HTMLAttributes {
   children?: ReactNode | ((SelectValueRenderProps<{}> & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectValueRenderProps<{}> & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((SelectValueRenderProps<{}> & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Slider

 Slider <T extends number | Array<number>> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((SliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: T
   formatOptions?: Intl.NumberFormatOptions
   id?: string
   isDisabled?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   onChange?: (T) => void
   onChangeEnd?: (T) => void
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   step?: number = 1
   style?: CSSProperties | ((SliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:SliderOutput

 SliderOutput {
   children?: ReactNode | ((SliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((SliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SliderTrack

 SliderTrack {
   children?: ReactNode | ((SliderTrackRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderTrackRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((SliderTrackRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SliderThumb

 SliderThumb {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((SliderThumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderThumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   index?: number = 0
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   style?: CSSProperties | ((SliderThumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Switch

 Switch {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((SwitchRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SwitchRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((SwitchRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: string
 }

/react-aria-components:Table

 Table {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((TableRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "selection"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   onRowAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: CSSProperties | ((TableRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Row

 Row <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<{}>
   dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:Cell

 Cell {
   children?: ReactNode | ((CellRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CellRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: Key
   style?: CSSProperties | ((CellRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   textValue?: string
 }

/react-aria-components:Column

 Column {
   allowsSorting?: boolean
   children?: ReactNode | ((ColumnRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColumnRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultWidth?: ColumnSize | null
   id?: Key
   isRowHeader?: boolean
   maxWidth?: ColumnStaticSize | null
   minWidth?: ColumnStaticSize | null
   style?: CSSProperties | ((ColumnRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   textValue?: string
   width?: ColumnSize | null
 }

/react-aria-components:ColumnResizer

 ColumnResizer {
   aria-label?: string
   children?: ReactNode | ((ColumnResizerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColumnResizerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColumnResizerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TableHeader

 TableHeader <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Array<{}>
   dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TableBody

 TableBody <T extends {}> {
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<{}>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Tabs

 Tabs {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabsRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabsRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
   onSelectionChange?: (Key) => void
   orientation?: Orientation = 'horizontal'
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((TabsRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TabList

 TabList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TabPanel

 TabPanel {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabPanelRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabPanelRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   shouldForceMount?: boolean = false
   style?: CSSProperties | ((TabPanelRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Tab

 Tab {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TabRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
 }

/react-aria-components:TagList

 TagList <T extends {}> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Tag

 Tag {
   children?: ReactNode | ((TagRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TagRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TagRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
 }

/react-aria-components:TextArea

 TextArea extends TextareaHTMLAttributes {
   className?: string | ((InputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((InputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TextField

 TextField {
   aria-activedescendant?: string
   aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((TextFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TextFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string
   excludeFromTabOrder?: boolean
   id?: string
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxLength?: number
   minLength?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   pattern?: string
   slot?: string | null
   style?: CSSProperties | ((TextFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
   
 })
   validate?: (string) => ValidationError | boolean | null | undefined
   value?: string
 }

/react-aria-components:ToggleButton

 ToggleButton {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ToggleButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToggleButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ToggleButtonRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/react-aria-components:Toolbar

 Toolbar {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ToolbarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToolbarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   style?: CSSProperties | ((ToolbarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:Tooltip

 Tooltip {
   UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
   children?: ReactNode | ((TooltipRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TooltipRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   offset?: number = 0
   onOpenChange?: (boolean) => void
   placement?: Placement = 'top'
   shouldFlip?: boolean = true
   style?: CSSProperties | ((TooltipRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:UNSTABLE_TreeLoadingIndicator

 UNSTABLE_TreeLoadingIndicator <T extends {}> {
   children?: ReactNode | ((TreeLoadingIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TreeLoadingIndicatorRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((TreeLoadingIndicatorRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:UNSTABLE_Tree

 UNSTABLE_Tree <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'selection'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeRenderProps<TreeRenderProps, 'isEmpty'>) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:UNSTABLE_TreeItem

 UNSTABLE_TreeItem <T extends {}> {
   aria-label?: string
   children: ReactNode
   className?: string | ((TreeItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TreeItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue: string
   value?: {}
 }

/react-aria-components:DropIndicator

 DropIndicator {
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target: DropTarget
 }

/react-aria-components:BreadcrumbProps

 BreadcrumbProps {
   children?: ReactNode | ((BreadcrumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((BreadcrumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: Key
   style?: CSSProperties | ((BreadcrumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ButtonProps

 ButtonProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ButtonRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/react-aria-components:CalendarCellProps

 CalendarCellProps {
   children?: ReactNode | ((CalendarCellRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarCellRenderProps & {
     defaultClassName: string | undefined
 })) => string
   date: CalendarDate
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((CalendarCellRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:CalendarProps

 CalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: DateValue | null
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: RangeValue<DateValue> | null
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:CheckboxGroupProps

 CheckboxGroupProps {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((CheckboxGroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CheckboxGroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: Array<string>
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   slot?: string | null
   style?: CSSProperties | ((CheckboxGroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Array<string>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: Array<string>
 }

/react-aria-components:CheckboxProps

 CheckboxProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((CheckboxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CheckboxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((CheckboxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (T) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:ColorAreaProps

 ColorAreaProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ColorAreaRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorAreaRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   id?: string
   isDisabled?: boolean
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   slot?: string | null
   style?: CSSProperties | ((ColorAreaRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
   xChannel?: ColorChannel
   xName?: string
   yChannel?: ColorChannel
 }

/react-aria-components:ColorFieldProps

 ColorFieldProps {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   channel?: ColorChannel
   children?: ReactNode | ((ColorFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   slot?: string | null
   style?: CSSProperties | ((ColorFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Color | null) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: T
 }

/react-aria-components:ColorSliderProps

 ColorSliderProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   channel: ColorChannel
   children?: ReactNode | ((ColorSliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorSliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   colorSpace?: ColorSpace
   defaultValue?: T
   id?: string
   isDisabled?: boolean
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   style?: CSSProperties | ((ColorSliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:ColorSwatchProps

 ColorSwatchProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   className?: string | ((ColorSwatchRenderProps & {
     defaultClassName: string | undefined
 })) => string
   color?: string | Color
   colorName?: string
   id?: string
   slot?: string | null
   style?: CSSProperties | ((ColorSwatchRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorSwatchPickerProps

 ColorSwatchPickerProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((ColorSwatchPickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | Color
   layout?: 'grid' | 'stack' = 'grid'
   onChange?: (Color) => void
   style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: string | Color
 }

/react-aria-components:ColorSwatchPickerItemProps

 ColorSwatchPickerItemProps {
   children?: ReactNode | ((ColorSwatchPickerItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorSwatchPickerItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   color: string | Color
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorThumbProps

 ColorThumbProps {
   children?: ReactNode | ((ColorThumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorThumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColorThumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColorWheelProps

 ColorWheelProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ColorWheelRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColorWheelRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
   id?: string
   innerRadius: number
   isDisabled?: boolean
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   outerRadius: number
   slot?: string | null
   style?: CSSProperties | ((ColorWheelRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:ColorWheelTrackProps

 ColorWheelTrackProps {
   className?: string | ((ColorWheelTrackRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((ColorWheelTrackRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ComboBoxProps

 ComboBoxProps <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((ComboBoxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ComboBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ComboBoxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:DateFieldProps

 DateFieldProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholderValue?: DateValue
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DateFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateInputProps

 DateInputProps {
   children: (DateSegment) => ReactElement
   className?: string | ((DateInputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   slot?: string | null
   style?: CSSProperties | ((DateInputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:DateSegmentProps

 DateSegmentProps {
   children?: ReactNode | ((DateSegmentRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateSegmentRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   segment: DateSegment
   style?: CSSProperties | ((DateSegmentRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TimeFieldProps

 TimeFieldProps <T extends TimeValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: TimeValue | null
   granularity?: 'hour' | 'minute' | 'second' = 'minute'
   hideTimeZone?: boolean
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: TimeValue
   minValue?: TimeValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedTimeValue<TimeValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   placeholderValue?: TimeValue
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DateFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: TimeValue | null
 }

/react-aria-components:DatePickerProps

 DatePickerProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DatePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DatePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DatePickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePickerProps

 DateRangePickerProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateRangePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateRangePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: CSSProperties | ((DateRangePickerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/react-aria-components:DropZoneProps

 DropZoneProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((DropZoneRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropZoneRenderProps & {
     defaultClassName: string | undefined
 })) => string
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   slot?: string | null
   style?: CSSProperties | ((DropZoneRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:FieldErrorProps

 FieldErrorProps {
   children?: ReactNode | ((FieldErrorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((FieldErrorRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   style?: CSSProperties | ((FieldErrorRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:GridListProps

 GridListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:GridListItemProps

 GridListItemProps <T = {}> {
   children?: ReactNode | ((GridListItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((GridListItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((GridListItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:GroupProps

 GroupProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((GroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((GroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   role?: 'group' | 'region' | 'presentation' = 'group'
   slot?: string | null
   style?: CSSProperties | ((GroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:InputProps

 InputProps {
   className?: string | ((InputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((InputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:LinkProps

 LinkProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((LinkRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((LinkRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   slot?: string | null
   style?: CSSProperties | ((LinkRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
 }

/react-aria-components:ListBoxProps

 ListBoxProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ListBoxItemProps

 ListBoxItemProps <T = {}> {
   aria-label?: string
   children?: ReactNode | ((ListBoxItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ListBoxItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((ListBoxItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:MenuItemProps

 MenuItemProps <T = {}> {
   aria-label?: string
   children?: ReactNode | ((MenuItemRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((MenuItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((MenuItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:MeterProps

 MeterProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((MeterRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((MeterRenderProps & {
     defaultClassName: string | undefined
 })) => string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   maxValue?: number = 100
   minValue?: number = 0
   slot?: string | null
   style?: CSSProperties | ((MeterRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: number = 0
   valueLabel?: ReactNode
 }

/react-aria-components:ModalOverlayProps

 ModalOverlayProps {
   UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:NumberFieldProps

 NumberFieldProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((NumberFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((NumberFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   decrementAriaLabel?: string
   defaultValue?: number
   formatOptions?: Intl.NumberFormatOptions
   id?: string
   incrementAriaLabel?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   maxValue?: number
   minValue?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   slot?: string | null
   step?: number
   style?: CSSProperties | ((NumberFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (number) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: number
 }

/react-aria-components:OverlayArrowProps

 OverlayArrowProps {
   children?: ReactNode | ((OverlayArrowRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((OverlayArrowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((OverlayArrowRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:PopoverProps

 PopoverProps {
   UNSTABLE_portalContainer?: Element = document.body
   arrowBoundaryOffset?: number = 0
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:ProgressBarProps

 ProgressBarProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ProgressBarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ProgressBarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   isIndeterminate?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   slot?: string | null
   style?: CSSProperties | ((ProgressBarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: number = 0
   valueLabel?: ReactNode
 }

/react-aria-components:RadioGroupProps

 RadioGroupProps {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((RadioGroupRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RadioGroupRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string | null
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (string) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   orientation?: Orientation = 'vertical'
   slot?: string | null
   style?: CSSProperties | ((RadioGroupRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (string | null) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string | null
 }

/react-aria-components:RadioProps

 RadioProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((RadioRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RadioRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((RadioRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value: string
 }

/react-aria-components:SearchFieldProps

 SearchFieldProps {
   aria-activedescendant?: string
   aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SearchFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SearchFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string
   excludeFromTabOrder?: boolean
   id?: string
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxLength?: number
   minLength?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onClear?: () => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   onSubmit?: (string) => void
   pattern?: string
   slot?: string | null
   style?: CSSProperties | ((SearchFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
   
 })
   validate?: (string) => ValidationError | boolean | null | undefined
   value?: string
 }

/react-aria-components:SelectProps

 SelectProps <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:SelectValueProps

 SelectValueProps <T extends {}> {
   children?: ReactNode | ((SelectValueRenderProps<{}> & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectValueRenderProps<{}> & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((SelectValueRenderProps<{}> & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SliderOutputProps

 SliderOutputProps {
   children?: ReactNode | ((SliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((SliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SliderProps

 SliderProps <T = number | Array<number>> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((SliderRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: T
   formatOptions?: Intl.NumberFormatOptions
   id?: string
   isDisabled?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   onChange?: (T) => void
   onChangeEnd?: (T) => void
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   step?: number = 1
   style?: CSSProperties | ((SliderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: T
 }

/react-aria-components:SliderThumbProps

 SliderThumbProps {
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((SliderThumbRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderThumbRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   index?: number = 0
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   style?: CSSProperties | ((SliderThumbRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SliderTrackProps

 SliderTrackProps {
   children?: ReactNode | ((SliderTrackRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SliderTrackRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((SliderTrackRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:SwitchProps

 SwitchProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((SwitchRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SwitchRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   slot?: string | null
   style?: CSSProperties | ((SwitchRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   value?: string
 }

/react-aria-components:TableProps

 TableProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((TableRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "selection"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   onRowAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: CSSProperties | ((TableRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TableHeaderProps

 TableHeaderProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Array<T>
   dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TableBodyProps

 TableBodyProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<T>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:ColumnProps

 ColumnProps {
   allowsSorting?: boolean
   children?: ReactNode | ((ColumnRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColumnRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultWidth?: ColumnSize | null
   id?: Key
   isRowHeader?: boolean
   maxWidth?: ColumnStaticSize | null
   minWidth?: ColumnStaticSize | null
   style?: CSSProperties | ((ColumnRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   textValue?: string
   width?: ColumnSize | null
 }

/react-aria-components:ColumnResizerProps

 ColumnResizerProps {
   aria-label?: string
   children?: ReactNode | ((ColumnResizerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ColumnResizerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((ColumnResizerRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:RowProps

 RowProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<T>
   dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:CellProps

 CellProps {
   children?: ReactNode | ((CellRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CellRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: Key
   style?: CSSProperties | ((CellRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   textValue?: string
 }

/react-aria-components:TabListProps

 TabListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TabPanelProps

 TabPanelProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabPanelRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabPanelRenderProps & {
     defaultClassName: string | undefined
 })) => string
   id?: string
   shouldForceMount?: boolean = false
   style?: CSSProperties | ((TabPanelRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TabProps

 TabProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TabRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
 }

/react-aria-components:TabsProps

 TabsProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TabsRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TabsRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
   onSelectionChange?: (Key) => void
   orientation?: Orientation = 'horizontal'
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((TabsRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TagListProps

 TagListProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TagProps

 TagProps {
   children?: ReactNode | ((TagRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TagRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TagRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
 }

/react-aria-components:TextAreaProps

 TextAreaProps {
   className?: string | ((InputRenderProps & {
     defaultClassName: string | undefined
 })) => string
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((InputRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TextFieldProps

 TextFieldProps {
   aria-activedescendant?: string
   aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((TextFieldRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TextFieldRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultValue?: string
   excludeFromTabOrder?: boolean
   id?: string
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxLength?: number
   minLength?: number
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   pattern?: string
   slot?: string | null
   style?: CSSProperties | ((TextFieldRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
   
 })
   validate?: (string) => ValidationError | boolean | null | undefined
   value?: string
 }

/react-aria-components:ToggleButtonProps

 ToggleButtonProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ToggleButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToggleButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ToggleButtonRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/react-aria-components:ToolbarProps

 ToolbarProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((ToolbarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToolbarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   orientation?: Orientation = 'horizontal'
   slot?: string | null
   style?: CSSProperties | ((ToolbarRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TooltipProps

 TooltipProps {
   UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
   children?: ReactNode | ((TooltipRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TooltipRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   offset?: number = 0
   onOpenChange?: (boolean) => void
   placement?: Placement = 'top'
   shouldFlip?: boolean = true
   style?: CSSProperties | ((TooltipRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'selection'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeRenderProps<TreeRenderProps, 'isEmpty'>) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
 }

/react-aria-components:TreeItemProps

 TreeItemProps <T = {}> {
   aria-label?: string
   children: ReactNode
   className?: string | ((TreeItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TreeItemRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue: string
   value?: T
 }

/react-aria-components:DropIndicatorProps

 DropIndicatorProps {
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
     defaultClassName: string | undefined
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
-})) => CSSProperties
+})) => CSSProperties | undefined
   target: DropTarget
 }

---

@react-spectrum/s2

/@react-spectrum/s2:ActionMenu

 ActionMenu <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | (T) => ReactNode
   defaultOpen?: boolean
   direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   items?: Iterable<T>
+  menuSize?: 'S' | 'M' | 'L' | 'XL'
   onAction?: (Key) => void
   onOpenChange?: (boolean) => void
   shouldFlip?: boolean = true
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:Image

 Image {
-  UNTYPED
+  props: ImageProps
+  domRef: ForwardedRef<HTMLDivElement>
+  returnVal: undefined
 }

/@react-spectrum/s2:ActionMenuProps

 ActionMenuProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | (T) => ReactNode
   defaultOpen?: boolean
   direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   items?: Iterable<T>
+  menuSize?: 'S' | 'M' | 'L' | 'XL'
   onAction?: (Key) => void
   onOpenChange?: (boolean) => void
   shouldFlip?: boolean = true
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:Card

+Card {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:CardPreview

+CardPreview {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  id?: string
+}

/@react-spectrum/s2:CollectionCardPreview

+CollectionCardPreview {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  id?: string
+}

/@react-spectrum/s2:AssetCard

+AssetCard {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:UserCard

+UserCard {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:ProductCard

+ProductCard {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}

/@react-spectrum/s2:CardContext

+CardContext {
+  UNTYPED
+}

/@react-spectrum/s2:CardView

+CardView <T extends {}> {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  dependencies?: Array<any>
+  disabledBehavior?: DisabledBehavior
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  dragAndDropHooks?: DragAndDropHooks
+  id?: string
+  items?: Iterable<T>
+  layout?: 'grid' | 'waterfall' = 'grid'
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => void
+  onScroll?: (UIEvent<Element>) => void
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesPropWithHeight
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:ImageCoordinator

+ImageCoordinator {
+  children: ReactNode
+  group?: ImageGroup
+  timeout?: number = 5000
+}

/@react-spectrum/s2:Skeleton

+Skeleton {
+  children: ReactNode
+  isLoading: boolean
+}

/@react-spectrum/s2:useIsSkeleton

+useIsSkeleton {
+  returnVal: undefined
+}

/@react-spectrum/s2:SkeletonCollection

+SkeletonCollection {
+  props: SkeletonCollectionProps
+  ref: any
+  node: any
+  returnVal: undefined
+}

/@react-spectrum/s2:CardProps

+CardProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:CardPreviewProps

+CardPreviewProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  id?: string
+}

/@react-spectrum/s2:AssetCardProps

+AssetCardProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:ProductCardProps

+ProductCardProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}

/@react-spectrum/s2:UserCardProps

+UserCardProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}

/@react-spectrum/s2:CardViewProps

+CardViewProps <T> {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  dependencies?: Array<any>
+  disabledBehavior?: DisabledBehavior
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  dragAndDropHooks?: DragAndDropHooks
+  id?: string
+  items?: Iterable<T>
+  layout?: 'grid' | 'waterfall' = 'grid'
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => void
+  onScroll?: (UIEvent<Element>) => void
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesPropWithHeight
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2:ImageProps

+ImageProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alt?: string
+  crossOrigin?: 'anonymous' | 'use-credentials'
+  decoding?: 'async' | 'auto' | 'sync'
+  group?: ImageGroup
+  loading?: 'eager' | 'lazy'
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  renderError?: () => ReactNode
+  slot?: string | null
+  src?: string
+  styles?: StyleString
+}

/@react-spectrum/s2:ImageCoordinatorProps

+ImageCoordinatorProps {
+  children: ReactNode
+  group?: ImageGroup
+  timeout?: number = 5000
+}

/@react-spectrum/s2:SkeletonProps

+SkeletonProps {
+  children: ReactNode
+  isLoading: boolean
+}

/@react-spectrum/s2:SkeletonCollectionProps

+SkeletonCollectionProps {
+  children: () => ReactNode
+}

---

@react-stately/virtualizer

/@react-stately/virtualizer:LayoutInfo

 LayoutInfo {
   allowOverflow: boolean = false
   constructor: (string, Key, Rect) => void
+  content: any | null
   copy: () => LayoutInfo
   estimatedSize: boolean
   isSticky: boolean
   key: Key
   parentKey: Key | null
   rect: Rect
   transform: string | null
   type: string
   zIndex: number
 }

---

[LFDanLu]

LGTM, double checked disabled/selected/onAction etc locally just in case and things seem to perform well. Only thing is that we might want to hide DnD from the props since isn't ready yet right?

[LFDanLu]

This is fine for now then, we can see how things shake out when we use Skeleton in more places

[devongovett]

Only thing is that we might want to hide DnD from the props since isn't ready yet right?

I can do this in a followup