From f30983a09257d8bc3140bdbd3e917a24e09fde78 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 14 Aug 2024 09:13:25 -0700
Subject: [PATCH] Add slot contexts to all S2 components (#6856)

---
 .../@react-spectrum/s2/src/ActionButton.tsx   |  14 +-
 .../@react-spectrum/s2/src/ActionMenu.tsx     |   9 +-
 packages/@react-spectrum/s2/src/Avatar.tsx    |   9 +-
 packages/@react-spectrum/s2/src/Badge.tsx     |  16 ++-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    | 101 ++++++-------
 packages/@react-spectrum/s2/src/Button.tsx    |  28 ++--
 .../@react-spectrum/s2/src/ButtonGroup.tsx    |  23 +--
 .../@react-spectrum/s2/src/CenterBaseline.tsx |  15 +-
 packages/@react-spectrum/s2/src/Checkbox.tsx  |  19 +--
 .../@react-spectrum/s2/src/CheckboxGroup.tsx  |  11 +-
 packages/@react-spectrum/s2/src/ColorArea.tsx |  11 +-
 .../@react-spectrum/s2/src/ColorField.tsx     |   9 +-
 .../@react-spectrum/s2/src/ColorSlider.tsx    |   9 +-
 .../@react-spectrum/s2/src/ColorSwatch.tsx    |  15 +-
 .../s2/src/ColorSwatchPicker.tsx              |  18 ++-
 .../@react-spectrum/s2/src/ColorWheel.tsx     |  11 +-
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  28 ++--
 packages/@react-spectrum/s2/src/Content.tsx   | 133 +++++++++++++-----
 .../@react-spectrum/s2/src/ContextualHelp.tsx |  19 +--
 packages/@react-spectrum/s2/src/Dialog.tsx    |  48 +++----
 packages/@react-spectrum/s2/src/Divider.tsx   |  10 +-
 packages/@react-spectrum/s2/src/DropZone.tsx  |  10 +-
 packages/@react-spectrum/s2/src/Field.tsx     |   4 +-
 .../s2/src/IllustratedMessage.tsx             |  27 ++--
 .../@react-spectrum/s2/src/InlineAlert.tsx    |  16 ++-
 packages/@react-spectrum/s2/src/Link.tsx      |  16 ++-
 packages/@react-spectrum/s2/src/Menu.tsx      |  31 ++--
 packages/@react-spectrum/s2/src/Meter.tsx     |  11 +-
 .../@react-spectrum/s2/src/NumberField.tsx    |  16 ++-
 packages/@react-spectrum/s2/src/Picker.tsx    |  27 ++--
 .../@react-spectrum/s2/src/ProgressBar.tsx    |  11 +-
 .../@react-spectrum/s2/src/ProgressCircle.tsx |  11 +-
 packages/@react-spectrum/s2/src/Radio.tsx     |   4 +-
 .../@react-spectrum/s2/src/RadioGroup.tsx     |  11 +-
 .../@react-spectrum/s2/src/RangeSlider.tsx    |  15 +-
 .../@react-spectrum/s2/src/SearchField.tsx    |   9 +-
 packages/@react-spectrum/s2/src/Slider.tsx    |   9 +-
 .../@react-spectrum/s2/src/StatusLight.tsx    |  11 +-
 packages/@react-spectrum/s2/src/Switch.tsx    |  13 +-
 packages/@react-spectrum/s2/src/TagGroup.tsx  |  18 ++-
 packages/@react-spectrum/s2/src/TextField.tsx |  18 ++-
 .../@react-spectrum/s2/src/ToggleButton.tsx   |  14 +-
 packages/@react-spectrum/s2/src/index.ts      |  76 +++++-----
 .../s2/src/useSpectrumContextProps.ts         |  45 ++++++
 packages/@react-spectrum/s2/style/runtime.ts  |  15 +-
 .../textfield/src/TextArea.tsx                |   2 +-
 .../textfield/src/TextFieldBase.tsx           |   2 +-
 .../@react-types/textfield/src/index.d.ts     |   4 +-
 .../react-aria-components/src/Breadcrumbs.tsx |   6 +-
 .../react-aria-components/src/Checkbox.tsx    |   6 +-
 .../react-aria-components/src/RadioGroup.tsx  |   6 +-
 packages/react-aria-components/src/Switch.tsx |   6 +-
 packages/react-aria-components/src/utils.tsx  |   2 +-
 53 files changed, 636 insertions(+), 392 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/src/useSpectrumContextProps.ts

diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 1d168660a2d..81acfaa697c 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -11,15 +11,16 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
-import {ButtonProps, ButtonRenderProps, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {FocusableRef} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };
-import {forwardRef, ReactNode, useContext} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionButtonStyleProps {
   /**
@@ -170,7 +171,10 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   disableTapHighlight: true
 }, getAllowedOverrides());
 
+export const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+
 function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
@@ -189,9 +193,9 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index 0bbec20b1ad..169ec639b3a 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -11,13 +11,15 @@
  */
 
 import {ActionButton, ActionButtonProps} from './ActionButton';
-import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {ContextValue} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
-import {forwardRef} from 'react';
 import {forwardRefType} from './types';
 import {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';
 import MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';
 import {StyleProps} from './style-utils' with { type: 'macro' };
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionMenuProps<T> extends
   Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>,
@@ -26,7 +28,10 @@ export interface ActionMenuProps<T> extends
   StyleProps, DOMProps, AriaLabelingProps {
   }
 
+export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
+
 function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});
 
   // size independently controlled?
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index c4ae485e038..369b9ef0e5f 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from 'react-aria-components';
+import {ContextValue} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface AvatarProps extends StyleProps, DOMProps {
   /** Text description of the avatar. */
@@ -40,11 +41,11 @@ const imageStyles = style({
   disableTapHighlight: true
 }, getAllowedOverrides({height: true}));
 
-export const AvatarContext = createContext<ContextValue<AvatarContextProps, HTMLImageElement>>({});
+export const AvatarContext = createContext<ContextValue<AvatarContextProps, DOMRefValue<HTMLImageElement>>>(null);
 
 function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, AvatarContext);
   let {
     alt = '',
     src,
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 9bd534811d0..4c9fda7473f 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -10,16 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IconContext} from './Icon';
-import {Provider} from 'react-aria-components';
-import React, {forwardRef, ReactNode} from 'react';
+import React, {createContext, forwardRef, ReactNode} from 'react';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface BadgeStyleProps {
   /**
@@ -36,13 +37,15 @@ export interface BadgeStyleProps {
   variant: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver'
 }
 
-export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps{
+export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
   /**
    * The content to display in the badge.
    */
   children: ReactNode
 }
 
+export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
+
 const badge = style<BadgeStyleProps>({
   display: 'flex',
   font: 'control',
@@ -115,6 +118,7 @@ const badge = style<BadgeStyleProps>({
 }, getAllowedOverrides());
 
 function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);
   let {
     children,
     variant = 'neutral',
@@ -127,9 +131,9 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Provider
       values={[
-        [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+        [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
         [IconContext, {
-          render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+          render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
           styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
         }]
       ]}>
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 44e96870c1f..2e3a7c76b2f 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {Breadcrumb as AriaBreadcrumb, BreadcrumbsProps as AriaBreadcrumbsProps, HeadingContext, Link, Provider, Breadcrumbs as RACBreadcrumbs} from 'react-aria-components';
+import {Breadcrumb as AriaBreadcrumb, BreadcrumbsProps as AriaBreadcrumbsProps, ContextValue, HeadingContext, Link, Provider, Breadcrumbs as RACBreadcrumbs, useSlottedContext} from 'react-aria-components';
 import {AriaBreadcrumbItemProps} from 'react-aria';
 import ChevronIcon from '../ui-icons/Chevron';
-import {Children, cloneElement, createContext, forwardRef, isValidElement, ReactElement, ReactNode, useContext, useRef} from 'react';
+import {createContext, forwardRef, ReactNode, useRef} from 'react';
+import {DOMRefValue, LinkDOMProps} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {forwardRefType} from './types';
-import {LinkDOMProps} from '@react-types/shared';
 import {size, style} from '../style/spectrum-theme' with { type: 'macro' };
 
 interface BreadcrumbsStyleProps {
@@ -41,6 +41,8 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children?: ReactNode
 }
 
+export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+
 const wrapper = style<BreadcrumbsStyleProps>({
   display: 'flex',
   justifyContent: 'start',
@@ -67,38 +69,27 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-const BreadcrumbsInternalContext = createContext<BreadcrumbsProps<any> & {length: number}>({length: 0});
-
-function Breadcrumbs<T extends object>({
+function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
+  let {
     UNSAFE_className = '',
     UNSAFE_style,
     styles,
-    ...props
-}: BreadcrumbsProps<T>) {
-  let {size = 'M', isDisabled} = props;
+    size = 'M',
+    children,
+    ...otherProps
+  } = props;
   let ref = useRef(null);
-  // TODO: Remove when https://github.com/adobe/react-spectrum/pull/6440 is released
-  let childArray: ReactElement[] = [];
-  Children.forEach(props.children, (child, index) => {
-    if (isValidElement<{index: number}>(child)) {
-      child = cloneElement(child, {key: index, index});
-      childArray.push(child);
-    }
-  });
   return (
     <RACBreadcrumbs
-      {...props}
+      {...otherProps}
       ref={ref}
       style={UNSAFE_style}
       className={UNSAFE_className + wrapper({
         size
       }, styles)}>
-      <Provider
-        values={[
-          [BreadcrumbsInternalContext, {size, isDisabled, length: childArray.length}]
-        ]}>
-        {childArray}
-      </Provider>
+      <BreadcrumbsContext.Provider value={props}>
+        {children}
+      </BreadcrumbsContext.Provider>
     </RACBreadcrumbs>
   );
 }
@@ -192,43 +183,43 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
 
 export function Breadcrumb({children, ...props}: BreadcrumbProps) {
   let {href, target, rel, download, ping, referrerPolicy, ...other} = props;
-  let {size = 'M', length, isDisabled} = useContext(BreadcrumbsInternalContext);
+  let {size = 'M', isDisabled} = useSlottedContext(BreadcrumbsContext)!;
   let ref = useRef(null);
-  // TODO: use isCurrent render prop when https://github.com/adobe/react-spectrum/pull/6440 is released
-  let isCurrent = (props as BreadcrumbProps & {index: number}).index === length - 1;
   return (
     <AriaBreadcrumb
       {...other}
       ref={ref}
-      className={breadcrumbStyles({size, isCurrent})} >
-      {isCurrent ?
-        <span
-          className={currentStyles({size})}>
-          <Provider
-            values={[
-              [HeadingContext, {className: heading}]
-            ]}>
-            {children}
-          </Provider>
-        </span>
-        : (
-          <>
-            <Link
-              style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}
-              href={href}
-              target={target}
-              rel={rel}
-              download={download}
-              ping={ping}
-              referrerPolicy={referrerPolicy}
-              isDisabled={isDisabled || isCurrent}
-              className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isCurrent, isPressed})}>
+      className={({isCurrent}) => breadcrumbStyles({size, isCurrent})}>
+      {({isCurrent}) => (
+        isCurrent ?
+          <span
+            className={currentStyles({size})}>
+            <Provider
+              values={[
+                [HeadingContext, {className: heading}]
+              ]}>
               {children}
-            </Link>
-            <ChevronIcon
-              size="M"
-              className={chevronStyles} />
-          </>
+            </Provider>
+          </span>
+          : (
+            <>
+              <Link
+                style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}
+                href={href}
+                target={target}
+                rel={rel}
+                download={download}
+                ping={ping}
+                referrerPolicy={referrerPolicy}
+                isDisabled={isDisabled || isCurrent}
+                className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isCurrent, isPressed})}>
+                {children}
+              </Link>
+              <ChevronIcon
+                size="M"
+                className={chevronStyles} />
+            </>
+          )
         )}
     </AriaBreadcrumb>
   );
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 87118e06e8b..fa29d9e14d8 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -11,16 +11,16 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
-import {ButtonRenderProps, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
+import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
-import {mergeProps} from 'react-aria';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ButtonStyleProps {
   /**
@@ -55,12 +55,8 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
   children?: ReactNode
 }
 
-interface ButtonContextValue extends ButtonStyleProps, StyleProps {
-  /** Whether the Button is disabled. */
-  isDisabled?: boolean
-}
-
-export const ButtonContext = createContext<ButtonContextValue>({});
+export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const button = style<ButtonRenderProps & ButtonStyleProps>({
   ...focusRing(),
@@ -275,9 +271,8 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
 }, getAllowedOverrides());
 
 function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
   let domRef = useFocusableRef(ref);
-  let ctx = useContext(ButtonContext);
-  props = mergeProps(ctx, props);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
   return (
@@ -296,9 +291,9 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>
@@ -317,9 +312,8 @@ let _Button = forwardRef(Button);
 export {_Button as Button};
 
 function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
   let domRef = useFocusableRef(ref);
-  let ctx = useContext(ButtonContext);
-  props = mergeProps(ctx, props);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
   return (
@@ -338,9 +332,9 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index 10acf7c9e4a..e30416a27fe 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -10,18 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {ButtonContext} from './Button';
-import {ContextValue} from './Content';
+import {ButtonContext, LinkButtonContext} from './Button';
+import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {Provider, SlotProps, useContextProps} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {
   useDOMRef,
   useResizeObserver
 } from '@react-spectrum/utils';
 import {useLayoutEffect, useValueEffect} from '@react-aria/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ButtonGroupStyleProps {
   /**
@@ -52,12 +52,12 @@ export interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, Styl
   isDisabled?: boolean
 }
 
-interface ButtonGroupContextValue extends Omit<ButtonGroupProps, 'children'> {
+interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   /** Whether the ButtonGroup shouldn't be rendered. */
-  hidden?: boolean
+  isHidden?: boolean
 }
 
-export const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, HTMLDivElement>>({});
+export const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',
@@ -102,8 +102,8 @@ const buttongroup = style<ButtonGroupStyleProps>({
 }, getAllowedOverrides());
 
 function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ButtonGroupContext);
   let {
     size = 'M',
     orientation = 'horizontal',
@@ -155,9 +155,11 @@ function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   }, [domRef.current]);
   useResizeObserver({ref: parent, onResize: checkForOverflow});
 
-  if ((props as ButtonGroupContextValue).hidden) {
+  if ((props as ButtonGroupContextValue).isHidden) {
     return null;
   }
+
+  let context = {styles: style({flexShrink: 0}), size, isDisabled};
   return (
     <div
       ref={domRef}
@@ -169,7 +171,8 @@ function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
       }, props.styles)}>
       <Provider
         values={[
-          [ButtonContext, {styles: style({flexShrink: 0}), size, isDisabled}]
+          [ButtonContext, context],
+          [LinkButtonContext, context]
         ]}>
         {children}
       </Provider>
diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
index 7fe07fcacc4..7a5e78e1a8a 100644
--- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx
+++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
@@ -11,18 +11,29 @@
  */
 
 import {CSSProperties, ReactNode} from 'react';
+import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
 
 interface CenterBaselineProps {
   style?: CSSProperties,
-  className?: string,
+  styles?: StyleString,
   children: ReactNode,
   slot?: string
 }
 
+const styles = style({
+  display: 'flex',
+  alignItems: 'center'
+});
+
 export function CenterBaseline(props: CenterBaselineProps) {
   return (
-    <div slot={props.slot} style={props.style} className={(props.className || '') + ' ' + raw('display: flex; align-items: center; &::before { content: "\u00a0"; width: 0; visibility: hidden }')}>
+    <div
+      slot={props.slot}
+      style={props.style}
+      className={mergeStyles(styles, props.styles) + ' ' + centerBaselineBefore}>
       {props.children}
     </div>
   );
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 99308ebcca0..041317d10f2 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -10,17 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useContextProps} from 'react-aria-components';
+import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';
 import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface CheckboxStyleProps {
   /**
@@ -40,9 +41,7 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
   children?: ReactNode
 }
 
-interface CheckboxContextValue extends CheckboxProps, CheckboxStyleProps {}
-
-export const CheckboxContext = createContext<ContextValue<CheckboxContextValue, HTMLLabelElement>>(null);
+export const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -126,18 +125,20 @@ const iconSize = {
 } as const;
 
 function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
-  let domRef = useFocusableRef(ref);
+  let inputRef = useRef<HTMLInputElement | null>(null);
+  let domRef = useFocusableRef(ref, inputRef);
   let isInForm = !!useContext(FormContext);
-  [props, domRef] = useContextProps(props, domRef, CheckboxContext);
   props = useFormProps(props);
   let isInCheckboxGroup = !!useContext(CheckboxGroupStateContext);
-  let ctx = useContext(CheckboxContext) as CheckboxContextValue;
+  let ctx = useSlottedContext(CheckboxContext, props.slot);
 
   return (
     <AriaCheckbox
       {...props}
       ref={domRef}
+      inputRef={inputRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
       {renderProps => (
@@ -150,7 +151,7 @@ function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLab
                 ...renderProps,
                 isSelected: renderProps.isSelected || renderProps.isIndeterminate,
                 size: props.size || 'M',
-                isEmphasized: isInCheckboxGroup ? ctx.isEmphasized : props.isEmphasized
+                isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
               })}>
               {renderProps.isIndeterminate &&
                 <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index 46d9473108f..982d320ddfe 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -12,16 +12,18 @@
 
 import {
   CheckboxGroup as AriaCheckboxGroup,
-  CheckboxGroupProps as AriaCheckboxGroupProps
+  CheckboxGroupProps as AriaCheckboxGroupProps,
+  ContextValue
 } from 'react-aria-components';
 import {CheckboxContext} from './Checkbox';
-import {DOMRef, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ReactNode, useContext} from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
@@ -47,7 +49,10 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   isEmphasized?: boolean
 }
 
+export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx
index 090fe7ed321..ee61a5b87ee 100644
--- a/packages/@react-spectrum/s2/src/ColorArea.tsx
+++ b/packages/@react-spectrum/s2/src/ColorArea.tsx
@@ -12,18 +12,23 @@
 
 import {
   ColorArea as AriaColorArea,
-  ColorAreaProps as AriaColorAreaProps
+  ColorAreaProps as AriaColorAreaProps,
+  ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {createContext, forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}
 
+export const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
   return (
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index d6bf74020c5..9c636799690 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -12,16 +12,18 @@
 
 import {
   ColorField as AriaColorField,
-  ColorFieldProps as AriaColorFieldProps
+  ColorFieldProps as AriaColorFieldProps,
+  ContextValue
 } from 'react-aria-components';
+import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {TextFieldRef} from '@react-types/textfield';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
@@ -32,7 +34,10 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
+export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);
+
 function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index b0b072350d3..b2de66142a1 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -13,23 +13,28 @@
 import {
   ColorSlider as AriaColorSlider,
   ColorSliderProps as AriaColorSliderProps,
+  ContextValue,
   SliderOutput,
   SliderTrack,
   useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
+import {createContext, forwardRef, useRef} from 'react';
+import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel} from './Field';
-import {forwardRef, useRef} from 'react';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
   label?: string
 }
 
+export const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
   let trackRef = useRef(null);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
index efb6a65d673..38e42996e30 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
@@ -13,16 +13,16 @@
 import {
   ColorSwatch as AriaColorSwatch,
   ColorSwatchProps as AriaColorSwatchProps,
-  ColorSwatchContext,
-  parseColor,
-  useContextProps
+  ContextValue,
+  parseColor
 } from 'react-aria-components';
 import {Color} from '@react-types/color';
 import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {
   /**
@@ -43,12 +43,13 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
   useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
-  let ctx = useContext(SpectrumColorSwatchContext);
+  let ctx = useContext(InternalColorSwatchContext);
   let {
     size = ctx?.size || 'M',
     rounding = ctx?.rounding || 'default',
diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
index 555108c7683..9a337e333f1 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
@@ -10,16 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';
+import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, ContextValue, SlotProps} from 'react-aria-components';
 import {Color} from '@react-types/color';
-import {ColorSwatchProps, SpectrumColorSwatchContext} from './ColorSwatch';
-import {DOMRef, ValueBase} from '@react-types/shared';
+import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
+import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
+import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {forwardRef, ReactElement, ReactNode} from 'react';
 import {size as sizeValue, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {
   /** The ColorSwatches within the ColorSwatchPicker. */
   children: ReactNode,
   /**
@@ -39,7 +40,10 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
   rounding?: 'none' | 'default' | 'full'
 }
 
+export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
+
 function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
     size = 'M',
@@ -63,9 +67,9 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivEle
           }
         }
       }, getAllowedOverrides())({density}, props.styles)}>
-      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
+      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
         {props.children}
-      </SpectrumColorSwatchContext.Provider>
+      </InternalColorSwatchContext.Provider>
     </AriaColorSwatchPicker>
   );
 }
diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx
index 30a09516673..6a4c5c0bd66 100644
--- a/packages/@react-spectrum/s2/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx
@@ -13,14 +13,16 @@
 import {
   ColorWheel as AriaColorWheel,
   ColorWheelProps as AriaColorWheelProps,
-  ColorWheelTrack
+  ColorWheelTrack,
+  ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {createContext, forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {StyleProps} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {
   /**
@@ -29,7 +31,10 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
   size?: number
 }
 
+export const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
   // TODO: how to do mobile scaling?
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index fa14b7c9dba..137f8c8351e 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -16,6 +16,7 @@ import {
   PopoverProps as AriaPopoverProps,
   Section as AriaSection,
   Button,
+  ContextValue,
   InputContext,
   ListBox,
   ListBoxItem,
@@ -40,20 +41,22 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {createContext, CSSProperties, forwardRef, ReactNode, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
-import {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';
+import {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
+import {createFocusableRef} from '@react-spectrum/utils';
 import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
-import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
+import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {menu} from './Picker';
 import {mergeRefs, useResizeObserver} from '@react-aria/utils';
 import {Placement} from 'react-aria';
 import {Popover} from './Popover';
 import {pressScale} from './pressScale';
+import {TextFieldRef} from '@react-types/textfield';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface ComboboxStyleProps {
@@ -90,6 +93,8 @@ export interface ComboBoxProps<T extends object> extends
     menuWidth?: number
 }
 
+export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
+
 const inputButton = style({
   display: 'flex',
   outlineStyle: 'none',
@@ -144,9 +149,10 @@ const iconStyles = style({
 
 let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 
-function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: FocusableRef<HTMLDivElement>) {
-  let domRef = useFocusableRef(ref);
+function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
   let inputRef = useRef<HTMLInputElement>(null);
+  let domRef = useRef<HTMLDivElement>(null);
   let buttonRef = useRef<HTMLButtonElement>(null);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -292,11 +298,11 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: FocusableRef<H
               })}>
               <Provider
                 values={[
-                  [HeaderContext, {className: sectionHeader({size})}],
-                  [HeadingContext, {className: sectionHeading}],
+                  [HeaderContext, {styles: sectionHeader({size})}],
+                  [HeadingContext, {styles: sectionHeading}],
                   [TextContext, {
                     slots: {
-                      'description': {className: description({size})}
+                      'description': {styles: description({size})}
                     }
                   }]
                 ]}>
@@ -351,13 +357,13 @@ export function ComboBoxItem(props: ComboBoxItemProps) {
               values={[
                 [IconContext, {
                   slots: {
-                    icon: {render: centerBaseline({slot: 'icon', className: iconCenterWrapper}), styles: icon}
+                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
                   }
                 }],
                 [TextContext, {
                   slots: {
-                    label: {className: label},
-                    description: {className: description({...renderProps, size})}
+                    label: {styles: label({size})},
+                    description: {styles: description({...renderProps, size})}
                   }
                 }]
               ]}>
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index da56110f8e2..168e7fdb3db 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -10,99 +10,154 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, ForwardedRef, forwardRef, HTMLAttributes, ImgHTMLAttributes} from 'react';
-import {DOMRef} from '@react-types/shared';
-import {HeadingProps, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, Text as TextAria, useContextProps} from 'react-aria-components';
+import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, SlotProps, Text as TextAria, useContextProps} from 'react-aria-components';
+import {createContext, forwardRef, ImgHTMLAttributes, ReactNode} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {StyleString} from '../style/types';
+import {UnsafeStyles} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-// TODO: export these types from RAC?
-interface SlottedValue<T> {
-  slots?: Record<string | symbol, T>
+interface ContentProps extends UnsafeStyles, SlotProps {
+  children?: ReactNode,
+  styles?: StyleString,
+  isHidden?: boolean
 }
 
-export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
-export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
-export type WithRef<T, E> = T & {ref?: ForwardedRef<E>};
+interface HeadingProps extends ContentProps {
+  level?: number
+}
 
-export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
+export const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);
 
 // Wrapper around RAC Heading to unmount when hidden.
-function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
-  [props, ref] = useContextProps(props, ref, HeadingContext);
-  if (props.hidden) {
+function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
+  let domRef = useDOMRef(ref);
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
 
-  return <RACHeading {...props} ref={ref} />;
+  return (
+    <RACHeading
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Heading = forwardRef(Heading);
 export {_Heading as Heading};
 
-export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);
 
-function Header(props: HTMLAttributes<HTMLElement>, ref: DOMRef) {
+function Header(props: ContentProps, ref: DOMRef) {
+  [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, HeaderContext);
-  if (props.hidden) {
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
 
-  return <RACHeader {...props} ref={domRef} />;
+  return (
+    <RACHeader
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Header = forwardRef(Header);
 export {_Header as Header};
 
-export const ContentContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+export const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function Content(props: HTMLAttributes<HTMLElement>, ref: DOMRef<HTMLDivElement>) {
+function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ContentContext);
-  if (props.hidden) {
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
-  return <div {...props} ref={domRef} />;
+  return (
+    <div
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Content = forwardRef(Content);
 export {_Content as Content};
 
-export const TextContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+export const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);
 
-function Text(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, TextContext);
-  if (props.hidden) {
+function Text(props: ContentProps, ref: DOMRef) {
+  [props, ref] = useSpectrumContextProps(props, ref, TextContext);
+  let domRef = useDOMRef(ref);
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
-  return <TextAria {...props} ref={ref} />;
+  return (
+    <TextAria
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Text = forwardRef(Text);
 export {_Text as Text};
 
-export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+export const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
 
-function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, KeyboardContext);
-  if (props.hidden) {
+function Keyboard(props: ContentProps, ref: DOMRef) {
+  [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
+  let domRef = useDOMRef(ref);
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
-  return <KeyboardAria {...props} ref={ref} />;
+  return (
+    <KeyboardAria
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Keyboard = forwardRef(Keyboard);
 export {_Keyboard as Keyboard};
 
-export const FooterContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
 
-function Footer(props: HTMLAttributes<HTMLElement>, ref: DOMRef) {
+function Footer(props: ContentProps, ref: DOMRef) {
+  [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, FooterContext);
-  if (props.hidden) {
+  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  if (isHidden) {
     return null;
   }
-  return <footer {...props} ref={domRef} />;
+  return (
+    <footer
+      {...otherProps}
+      ref={domRef}
+      className={UNSAFE_className + styles}
+      style={UNSAFE_style}
+      slot={slot || undefined} />
+  );
 }
 
 const _Footer = forwardRef(Footer);
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 5c2b55daa58..27dd2d70a98 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -1,7 +1,7 @@
 import {ActionButton} from './ActionButton';
-import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {ContentContext, FooterContext, HeadingContext} from './Content';
-import {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext, useContextProps} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {dialogInner} from './Dialog';
 import {DialogTrigger, DialogTriggerProps} from './DialogTrigger';
@@ -12,7 +12,7 @@ import {mergeStyles} from '../style/runtime';
 import {Popover, PopoverProps} from './Popover';
 import {style, size as styleSize} from '../style/spectrum-theme' with {type: 'macro'};
 import {StyleProps} from './style-utils' with { type: 'macro' };
-import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ContextualHelpStyleProps {
   /**
@@ -43,11 +43,10 @@ const popover = style({
   padding: 24
 });
 
-export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, HTMLButtonElement>>({});
+export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
 function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
-  let domRef = useFocusableRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ContextualHelpContext);
+  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
     children,
     defaultOpen,
@@ -61,6 +60,7 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
     shouldFlip,
     UNSAFE_className,
     UNSAFE_style,
+    styles,
     variant = 'help'
   } = props;
 
@@ -85,6 +85,7 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
         {...mergeProps(buttonProps, labelProps)}
         UNSAFE_style={UNSAFE_style}
         UNSAFE_className={UNSAFE_className}
+        styles={styles}
         isQuiet>
         {variant === 'info' ? <InfoIcon /> : <HelpIcon />}
       </ActionButton>
@@ -104,15 +105,15 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
                   [DEFAULT_SLOT]: {}
                 }
               }],
-              [HeadingContext, {className: style({
+              [HeadingContext, {styles: style({
                 font: 'heading-xs',
                 margin: 0,
                 marginBottom: styleSize(8) // This only makes it 10px on mobile and should be 12px
               })}],
-              [ContentContext, {className: style({
+              [ContentContext, {styles: style({
                 font: 'body-sm'
               })}],
-              [FooterContext, {className: style({
+              [FooterContext, {styles: style({
                 font: 'body-sm',
                 marginTop: 16
               })}]
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index a35fd4a47b5..f68e70556ef 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -190,12 +190,12 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
             {/* Hero image */}
             <Provider
               values={[
-              [ImageContext, {className: image}],
-              [HeadingContext, {hidden: true}],
-              [HeaderContext, {hidden: true}],
-              [ContentContext, {hidden: true}],
-              [FooterContext, {hidden: true}],
-              [ButtonGroupContext, {hidden: true}]
+                [ImageContext, {className: image}],
+                [HeadingContext, {isHidden: true}],
+                [HeaderContext, {isHidden: true}],
+                [ContentContext, {isHidden: true}],
+                [FooterContext, {isHidden: true}],
+                [ButtonGroupContext, {isHidden: true}]
               ]}>
               {children}
             </Provider>
@@ -244,12 +244,12 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
                 })}>
                 <Provider
                   values={[
-                  [ImageContext, {hidden: true}],
-                  [HeadingContext, {className: heading}],
-                  [HeaderContext, {className: header}],
-                  [ContentContext, {hidden: true}],
-                  [FooterContext, {hidden: true}],
-                  [ButtonGroupContext, {hidden: buttonGroupPlacement !== 'top'}]
+                    [ImageContext, {hidden: true}],
+                    [HeadingContext, {styles: heading}],
+                    [HeaderContext, {styles: header}],
+                    [ContentContext, {isHidden: true}],
+                    [FooterContext, {isHidden: true}],
+                    [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'top'}]
                   ]}>
                   {children}
                 </Provider>
@@ -261,12 +261,12 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
             {/* Main content */}
             <Provider
               values={[
-              [ImageContext, {hidden: true}],
-              [HeadingContext, {hidden: true}],
-              [HeaderContext, {hidden: true}],
-              [ContentContext, {className: content({type: props.type})}],
-              [FooterContext, {hidden: true}],
-              [ButtonGroupContext, {hidden: true}]
+                [ImageContext, {hidden: true}],
+                [HeadingContext, {isHidden: true}],
+                [HeaderContext, {isHidden: true}],
+                [ContentContext, {styles: content({type: props.type})}],
+                [FooterContext, {isHidden: true}],
+                [ButtonGroupContext, {isHidden: true}]
               ]}>
               {children}
             </Provider>
@@ -290,12 +290,12 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
               })}>
               <Provider
                 values={[
-                [ImageContext, {hidden: true}],
-                [HeadingContext, {hidden: true}],
-                [HeaderContext, {hidden: true}],
-                [ContentContext, {hidden: true}],
-                [FooterContext, {className: footer}],
-                [ButtonGroupContext, {hidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+                  [ImageContext, {hidden: true}],
+                  [HeadingContext, {isHidden: true}],
+                  [HeaderContext, {isHidden: true}],
+                  [ContentContext, {isHidden: true}],
+                  [FooterContext, {styles: footer}],
+                  [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
                 ]}>
                 {children}
               </Provider>
diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx
index bfa588311ff..678a5eeb1fa 100644
--- a/packages/@react-spectrum/s2/src/Divider.tsx
+++ b/packages/@react-spectrum/s2/src/Divider.tsx
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 /*
  * Adding as it's own type to deal with size being a part of the theme so we
@@ -39,6 +40,8 @@ interface DividerSpectrumProps {
 // TODO: allow overriding height (only when orientation is vertical)??
 export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}
 
+export const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);
+
 export const divider = style<DividerSpectrumProps>({
   alignSelf: 'stretch',
   backgroundColor: {
@@ -91,6 +94,7 @@ export const divider = style<DividerSpectrumProps>({
 }, getAllowedOverrides());
 
 function Divider(props: DividerProps, ref: DOMRef) {
+  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);
   let domRef = useDOMRef(ref);
 
   return (
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index f6b7fe1e580..5223d6c7591 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
-import {DOMProps, DOMRef} from '@react-types/shared';
-import {DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
@@ -29,6 +30,8 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
   replaceMessage?: string
 }
 
+export const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);
+
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',
   justifyContent: 'center',
@@ -70,9 +73,8 @@ const banner = style<DropZoneRenderProps>({
   padding: '[calc((self(minHeight))/1.5)]'
 });
 
-export const S2DropZoneContext = createContext<DropZoneRenderProps | null>(null);
-
 function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
   let domRef = useDOMRef(ref);
 
   return (
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index acd05730d1d..9cb60d5a009 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -120,7 +120,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
       </Label>
       {contextualHelp && (
         <CenterBaseline
-          className={style({
+          styles={style({
             display: 'inline-flex',
             height: 0,
             marginStart: 4
@@ -314,7 +314,7 @@ export function FieldErrorIcon(props: {isDisabled?: boolean}) {
         [IconContext, {
           render: centerBaseline({
             slot: 'icon',
-            className: style({
+            styles: style({
               order: 0,
               flexShrink: 0,
               '--iconPrimary': {
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index 2427a225fdb..aade15126f3 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -12,14 +12,15 @@
 
 import {ButtonGroupContext} from './ButtonGroup';
 import {ContentContext, HeadingContext} from './Content';
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {ContextValue, Provider} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
-import {Provider} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface IllustratedMessageStyleProps {
   /**
@@ -151,28 +152,26 @@ const buttonGroup = style({
   marginTop: 16
 });
 
-interface IllustratedMessageContextProps extends Omit<S2SpectrumIllustratedMessageProps, 'children'> {
+interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {
   isInDropZone?: boolean,
   isDropTarget?: boolean
 }
 
-export const IllustratedMessageContext = createContext<IllustratedMessageContextProps | null>(null);
+export const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);
 
 function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
+  let domRef = useDOMRef(ref);
   let {
     children,
     orientation = 'horizontal',
     size = 'M',
     UNSAFE_className = '',
     UNSAFE_style,
+    isInDropZone = false,
+    isDropTarget = false,
     ...otherProps
-  } = props;
-
-  let domRef = useDOMRef(ref);
-
-  let ctx = useContext(IllustratedMessageContext);
-  let isInDropZone = !!ctx;
-  let isDropTarget = ctx ? ctx.isDropTarget : false;
+  } = props as IllustratedMessageContextProps;
 
   return (
     <div
@@ -185,8 +184,8 @@ function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRe
       ref={domRef}>
       <Provider
         values={[
-          [HeadingContext, {className: heading({orientation, size})}],
-          [ContentContext, {className: content({size})}],
+          [HeadingContext, {styles: heading({orientation, size})}],
+          [ContentContext, {styles: content({size})}],
           [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],
           [ButtonGroupContext, {styles: buttonGroup}]
         ]}>
diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx
index d1076515e1e..85d329227ae 100644
--- a/packages/@react-spectrum/s2/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx
@@ -12,20 +12,21 @@
 
 import AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
 import CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
-import {ComponentType, forwardRef, ReactNode, useEffect, useRef} from 'react';
+import {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';
 import {ContentContext, HeadingContext} from './Content';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {ContextValue, Provider, SlotProps} from 'react-aria-components';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
-import {Provider} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useFocusRing} from 'react-aria';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps {
+export interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps, SlotProps {
   /**
    * The contents of the Inline Alert.
    */
@@ -49,6 +50,8 @@ interface InlineStylesProps {
   fillStyle?: 'border' | 'subtleFill' | 'boldFill'
 }
 
+export const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
+
 const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   ...focusRing(),
   display: 'inline-block',
@@ -204,6 +207,7 @@ const content = style({
 });
 
 function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
   let {
     children,
     variant = 'neutral',
@@ -247,8 +251,8 @@ function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
         className={grid}>
         <Provider
           values={[
-            [HeadingContext, {className: heading({fillStyle})}],
-            [ContentContext, {className: content({fillStyle})}],
+            [HeadingContext, {styles: heading({fillStyle})}],
+            [ContentContext, {styles: content({fillStyle})}],
             [IconContext, {styles: icon({variant, fillStyle})}]
           ]}>
           {Icon && <Icon aria-label={iconAlt} />}
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index 093a7c40c30..63b5d578046 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
+import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {forwardRef, ReactNode} from 'react';
-import {LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {useDOMRef} from '@react-spectrum/utils';
+import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface LinkStyleProps {
   /**
@@ -35,6 +36,8 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
   children?: ReactNode
 }
 
+export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
+
 const link = style<LinkRenderProps & LinkStyleProps>({
   ...focusRing(),
   borderRadius: 'sm',
@@ -78,10 +81,11 @@ const link = style<LinkRenderProps & LinkStyleProps>({
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-function Link(props: LinkProps, ref: DOMRef<HTMLAnchorElement>) {
+function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
   let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles} = props;
 
-  let domRef = useDOMRef(ref);
+  let domRef = useFocusableRef(ref);
   return (
     <RACLink
       {...props}
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 6c3391e08b0..1ac0e0b684d 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -20,6 +20,7 @@ import {
   Section as AriaSection,
   SubmenuTrigger as AriaSubmenuTrigger,
   SubmenuTriggerProps as AriaSubmenuTriggerProps,
+  ContextValue,
   Provider,
   SectionProps,
   Separator,
@@ -33,7 +34,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
 import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';
 import {divider} from './Divider';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, ImageContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
@@ -43,6 +44,7 @@ import {Placement} from 'react-aria';
 import {Popover} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 // viewbox on LinkOut is super weird just because i copied the icon from designs...
 // need to strip id's from icons
 
@@ -80,6 +82,8 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   children?: ReactNode | ((item: T) => ReactNode)
 }
 
+export const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
@@ -131,7 +135,7 @@ export let menuitem = style({
   ...focusRing(),
   boxSizing: 'border-box',
   borderRadius: 'control',
-  font: 'ui',
+  font: 'control',
   '--labelPadding': {
     type: 'paddingTop',
     value: centerPadding()
@@ -237,9 +241,9 @@ let image = style({
   objectFit: 'contain'
 });
 
-export let label = style({
+export let label = style<{size: string}>({
   gridArea: 'label',
-  font: 'ui',
+  font: 'control',
   color: '[inherit]',
   fontWeight: 'medium',
   // TODO: token values for padding not defined yet, revisit
@@ -301,6 +305,7 @@ let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'>>({});
 
 function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);
   let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);
   let {
     children,
@@ -347,11 +352,11 @@ function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>
       <InternalMenuContext.Provider value={{size, isSubmenu: true}}>
         <Provider
           values={[
-            [HeaderContext, {className: sectionHeader({size})}],
-            [HeadingContext, {className: sectionHeading}],
+            [HeaderContext, {styles: sectionHeader({size})}],
+            [HeadingContext, {styles: sectionHeading}],
             [TextContext, {
               slots: {
-                'description': {className: description({size})}
+                'description': {styles: description({size})}
               }
             }]
           ]}>
@@ -451,18 +456,18 @@ export function MenuItem(props: MenuItemProps) {
               values={[
                 [IconContext, {
                   slots: {
-                    icon: {render: centerBaseline({slot: 'icon', className: iconCenterWrapper}), styles: icon}, // fix className to css?
-                    descriptor: {render: centerBaseline({slot: 'descriptor', className: descriptor})} // TODO: remove once we have default?
+                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},
+                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?
                   }
                 }],
                 [TextContext, {
                   slots: {
-                    label: {className: label},
-                    description: {className: description({...renderProps, size})},
-                    value: {className: value}
+                    label: {styles: label({size})},
+                    description: {styles: description({...renderProps, size})},
+                    value: {styles: value}
                   }
                 }],
-                [KeyboardContext, {className: keyboard({size, isDisabled: renderProps.isDisabled})}],
+                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
                 [ImageContext, {className: image({size})}]
               ]}>
               {renderProps.selectionMode === 'single' && !isLink && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 436f29f6652..b4b82be13e3 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -12,15 +12,17 @@
 
 import {
   Meter as AriaMeter,
-  MeterProps as AriaMeterProps
+  MeterProps as AriaMeterProps,
+  ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {DOMRef} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {forwardRef, ReactNode} from 'react';
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface MeterStyleProps {
   /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter. */
@@ -40,6 +42,8 @@ export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className
   label?: ReactNode
 }
 
+export const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);
+
 const wrapper = style<MeterStyleProps>({
   ...bar(),
   width: {
@@ -95,6 +99,7 @@ const fillStyles = style<MeterStyleProps>({
 });
 
 function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);
   let domRef = useDOMRef(ref);
 
   let {
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index af922f74dd1..2a83641e585 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -16,22 +16,25 @@ import {
   NumberField as AriaNumberField,
   NumberFieldProps as AriaNumberFieldProps,
   ButtonContext,
+  ContextValue,
   InputContext,
   Text,
   useContextProps
 } from 'react-aria-components';
 import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
 import ChevronIcon from '../ui-icons/Chevron';
-import {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';
-import {CSSProperties, ForwardedRef, forwardRef, ReactNode, useContext, useImperativeHandle, useMemo, useRef} from 'react';
+import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';
+import {createFocusableRef} from '@react-spectrum/utils';
 import Dash from '../ui-icons/Dash';
 import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';
-import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext} from './Form';
+import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {pressScale} from './pressScale';
+import {TextFieldRef} from '@react-types/textfield';
 import {useButton, useFocusRing, useHover} from 'react-aria';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface NumberFieldProps extends
@@ -54,6 +57,8 @@ export interface NumberFieldProps extends
     label?: ReactNode
 }
 
+export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);
+
 const inputButton = style({
   display: 'flex',
   outlineStyle: 'none',
@@ -219,7 +224,8 @@ const chevronSize = {
   XL: 'XL'
 } as const;
 
-function NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>) {
+function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
+  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
     description: descriptionMessage,
@@ -235,7 +241,7 @@ function NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>)
     ...numberFieldProps
   } = props;
   let formContext = useContext(FormContext);
-  let domRef = useFocusableRef(ref);
+  let domRef = useRef<HTMLDivElement | null>(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
   let decrementButtonRef = useRef<HTMLDivElement | null>(null);
   let incrementButtonRef = useRef<HTMLDivElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index 0ec629d105b..0be878d590d 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -18,6 +18,7 @@ import {
   SelectRenderProps as AriaSelectRenderProps,
   Button,
   ButtonRenderProps,
+  ContextValue,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
@@ -48,7 +49,7 @@ import {
   FieldLabel,
   HelpText
 } from './Field';
-import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
@@ -59,6 +60,7 @@ import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface PickerStyleProps {
@@ -103,6 +105,8 @@ export interface PickerProps<T extends object> extends
 
 interface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}
 
+export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+
 const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   ...focusRing(),
   ...fieldInput(),
@@ -144,7 +148,7 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
 const quietFocusLine = style({
   width: 'full',
   // Use pixels since we are emulating a border.
-  height: `[2px]`,
+  height: '[2px]',
   position: 'absolute',
   bottom: 0,
   borderRadius: 'full',
@@ -152,7 +156,7 @@ const quietFocusLine = style({
     default: 'blue-800',
     forcedColors: 'Highlight'
   }
-})
+});
 
 export let menu = style({
   outlineStyle: 'none',
@@ -210,6 +214,7 @@ let InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size:
 let InsideSelectValueContext = createContext(false);
 
 function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -289,7 +294,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                             [IconContext, {
                               slots: {
                                 icon: {
-                                  render: centerBaseline({slot: 'icon', className: iconCenterWrapper}),
+                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                                   styles: icon
                                 }
                               }
@@ -297,7 +302,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                             [TextContext, {
                               slots: {
                                 description: {},
-                                label: {className: style({
+                                label: {styles: style({
                                   display: 'block',
                                   flexGrow: 1,
                                   truncate: true
@@ -355,11 +360,11 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               })(props)}>
               <Provider
                 values={[
-                  [HeaderContext, {className: sectionHeader({size})}],
-                  [HeadingContext, {className: sectionHeading}],
+                  [HeaderContext, {styles: sectionHeader({size})}],
+                  [HeadingContext, {styles: sectionHeading}],
                   [TextContext, {
                     slots: {
-                      description: {className: description({size})}
+                      description: {styles: description({size})}
                     }
                   }]
                 ]}>
@@ -411,14 +416,14 @@ export function PickerItem(props: PickerItemProps) {
           <DefaultProvider
             context={IconContext} 
             value={{slots: {
-              icon: {render: centerBaseline({slot: 'icon', className: iconCenterWrapper}), styles: icon}
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
             }}}>
             <DefaultProvider
               context={TextContext}
               value={{
                 slots: {
-                  label: {className: label},
-                  description: {className: description({...renderProps, size})}
+                  label: {styles: label({size})},
+                  description: {styles: description({...renderProps, size})}
                 }
               }}>
               {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
index 7ce0bb8f145..854841bdc6a 100644
--- a/packages/@react-spectrum/s2/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -12,17 +12,19 @@
 
 import {
   ProgressBar as AriaProgressBar,
-  ProgressBarProps as AriaProgressBarProps
+  ProgressBarProps as AriaProgressBarProps,
+  ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {DOMRef} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {forwardRef, ReactNode} from 'react';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ProgressBarStyleProps {
   /**
@@ -44,6 +46,8 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
   label?: ReactNode
 }
 
+export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);
+
 // TODO:
 // var(--spectrum-global-dimension-size-1700) -> 136px
 // var(--spectrum-global-dimension-size-2400) -> 192px
@@ -112,6 +116,7 @@ const indeterminateAnimation = style({
 });
 
 function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {label, size = 'M', staticColor, isIndeterminate, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
   return (
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index 8642c7cd312..45ae92cddcc 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -12,12 +12,13 @@
 
 import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {clamp} from '@react-aria/utils';
-import {CSSProperties, forwardRef} from 'react';
-import {DOMRef} from '@react-types/shared';
+import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
+import {createContext, CSSProperties, forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
-import {ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ProgressCircleStyleProps {
   /**
@@ -32,9 +33,10 @@ export interface ProgressCircleStyleProps {
    * Whether presentation is indeterminate when progress isn't known.
    */
   isIndeterminate?: boolean
-
 }
 
+export const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);
+
 const fillMask1Frames = keyframes(`
 0% {
   transform: rotate(90deg);
@@ -448,6 +450,7 @@ const fillSubMask2Indeterminate = style({
 export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}
 
 function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
   let {
     value = 0,
     minValue = 0,
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index caf73718869..f14f9b57204 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -105,7 +105,8 @@ const circle = style<RenderProps>({
 function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
-  let domRef = useFocusableRef(ref);
+  let inputRef = useRef<HTMLInputElement | null>(null);
+  let domRef = useFocusableRef(ref, inputRef);
   let isInForm = !!useContext(FormContext);
   let {
     size = 'M',
@@ -116,6 +117,7 @@ function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
     <AriaRadio
       {...allProps}
       ref={domRef}
+      inputRef={inputRef}
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>
       {renderProps => (
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index c8f9b36b9d5..cf8cf22c15f 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -12,15 +12,17 @@
 
 import {
   RadioGroup as AriaRadioGroup,
-  RadioGroupProps as AriaRadioGroupProps
+  RadioGroupProps as AriaRadioGroupProps,
+  ContextValue
 } from 'react-aria-components';
-import {DOMRef, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
-import React, {forwardRef, ReactNode, useContext} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
@@ -45,7 +47,10 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   isEmphasized?: boolean
 }
 
+export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index 3878d73c391..aa75a8a3ab5 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -10,17 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {filledTrack, SliderBase, SliderBaseProps, thumb, thumbContainer, thumbHitArea, track, upperTrack} from './Slider';
-import {FocusableRef, RangeValue} from '@react-types/shared';
-import {FormContext, useFormProps} from './Form';
-import {forwardRef, useContext, useRef} from 'react';
-import {pressScale} from './pressScale';
 import {
+  ContextValue,
   SliderThumb,
   SliderTrack
 } from 'react-aria-components';
+import {createContext, forwardRef, useContext, useRef} from 'react';
+import {filledTrack, SliderBase, SliderBaseProps, thumb, thumbContainer, thumbHitArea, track, upperTrack} from './Slider';
+import {FocusableRef, FocusableRefValue, RangeValue} from '@react-types/shared';
+import {FormContext, useFormProps} from './Form';
+import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number>>, 'children'> {
   /**
@@ -33,7 +35,10 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   endName?: string
 }
 
+export const RangeSliderContext = createContext<ContextValue<RangeSliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+
 function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 090667c1b72..05adc13b6fe 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -13,21 +13,23 @@
 import {
   SearchField as AriaSearchField,
   SearchFieldProps as AriaSearchFieldProps,
+  ContextValue,
   Provider
 } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
+import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
@@ -38,7 +40,10 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
+export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);
+
 function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
@@ -116,7 +121,7 @@ function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
               [IconContext, {
                 render: centerBaseline({
                   slot: 'icon',
-                  className: style({
+                  styles: style({
                     flexShrink: 0,
                     marginEnd: 'text-to-visual',
                     '--iconPrimary': {
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 3d8d473c441..34eceef9723 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -13,21 +13,23 @@
 import {
   Slider as AriaSlider,
   SliderProps as AriaSliderProps,
+  ContextValue,
   SliderOutput,
   SliderThumb,
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
+import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
-import {FocusableRef, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale, useNumberFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
   children?: ReactNode,
@@ -64,6 +66,8 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
   fillOffset?: number
 }
 
+export const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+
 const slider = style({
   font: 'control',
   alignItems: {
@@ -387,6 +391,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
 }
 
 function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 7a985c24c05..5e5c5b60c04 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -10,13 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {CenterBaseline} from './CenterBaseline';
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
-import {forwardRef, ReactNode} from 'react';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface StatusLightStyleProps {
   /**
@@ -32,7 +34,7 @@ interface StatusLightStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps {
+export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {
   /**
    * The content to display as the label.
    */
@@ -45,6 +47,8 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
   role?: 'status'
 }
 
+export const StatusLightContext = createContext<ContextValue<StatusLightProps, DOMRefValue<HTMLDivElement>>>(null);
+
 const wrapper = style<StatusLightStyleProps>({
   display: 'flex',
   gap: 'text-to-visual',
@@ -95,6 +99,7 @@ const light = style<StatusLightStyleProps>({
 });
 
 function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index c956325244b..e133d482b96 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -13,16 +13,18 @@
 import {
   Switch as AriaSwitch,
   SwitchProps as AriaSwitchProps,
+  ContextValue,
   SwitchRenderProps
 } from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
-import {FocusableRef} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ReactNode, useContext, useRef} from 'react';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface SwitchStyleProps {
   /**
@@ -43,6 +45,8 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
   children?: ReactNode
 }
 
+export const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);
+
 const wrapper = style({
   display: 'flex',
   columnGap: 'text-to-control',
@@ -146,8 +150,10 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
 });
 
 function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
-  let domRef = useFocusableRef(ref);
+  let inputRef = useRef<HTMLInputElement | null>(null);
+  let domRef = useFocusableRef(ref, inputRef);
   let handleRef = useRef(null);
   let isInForm = !!useContext(FormContext);
   props = useFormProps(props);
@@ -155,6 +161,7 @@ function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
     <AriaSwitch
       {...props}
       ref={domRef}
+      inputRef={inputRef}
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
       {renderProps => (
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index 5c6a8d3fbbe..b50e02b68c3 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -17,16 +17,18 @@ import {
   TagGroupProps as AriaTagGroupProps,
   TagProps as AriaTagProps,
   composeRenderProps,
+  ContextValue,
   Provider,
   TextContext as RACTextContext,
   TagList,
-  TagListProps
+  TagListProps,
+  useSlottedContext
 } from 'react-aria-components';
 import {AvatarContext} from './Avatar';
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {DOMRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {field, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
 import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
@@ -36,6 +38,7 @@ import {IconContext} from './Icon';
 import {ImageContext, Text, TextContext} from './Content';
 import {pressScale} from './pressScale';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 // Get types from RSP and extend those?
 export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {
@@ -62,7 +65,7 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
   errorMessage?: ReactNode
 }
 
-const TagGroupContext = createContext<TagGroupProps<any>>({});
+export const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
 const helpTextStyles = style({
   gridArea: 'helptext',
@@ -101,6 +104,7 @@ function TagGroup<T extends object>(
   }: TagGroupProps<T>,
   ref: DOMRef<HTMLDivElement>
 ) {
+  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {size = 'M'} = props;
@@ -111,7 +115,7 @@ function TagGroup<T extends object>(
     helpText =  (
       <Text
         slot="description"
-        className={helpTextStyles({size: props.size || 'M'})}>
+        styles={helpTextStyles({size})}>
         {description}
       </Text>
     );
@@ -262,7 +266,7 @@ const tagStyles = style({
 
 export function Tag({children, ...props}: TagProps) {
   let textValue = typeof children === 'string' ? children : undefined;
-  let {size = 'M', isEmphasized} = useContext(TagGroupContext);
+  let {size = 'M', isEmphasized} = useSlottedContext(TagGroupContext)!;
 
   let ref = useRef(null);
   let isLink = props.href != null;
@@ -286,9 +290,9 @@ export function Tag({children, ...props}: TagProps) {
             })}>
             <Provider
               values={[
-                [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+                [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
                 [IconContext, {
-                  render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
                   styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
                 }],
                 [AvatarContext, {
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 2c2df1704ad..cd74e3c2386 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -12,23 +12,25 @@
 
 import {
   TextArea as AriaTextArea,
+  TextAreaContext as AriaTextAreaContext,
   TextField as AriaTextField,
   TextFieldProps as AriaTextFieldProps,
   composeRenderProps,
+  ContextValue,
   InputContext,
-  TextAreaContext,
   useSlottedContext
 } from 'react-aria-components';
 import {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {mergeRefs} from '@react-aria/utils';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
@@ -39,7 +41,10 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
+export const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);
+
 function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
   return (
     <_TextFieldBase
       {...props}
@@ -59,7 +64,10 @@ export {_TextField as TextField};
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
-function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef>) {
+export const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);
+
+function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);
   return (
     <_TextFieldBase
       {...props}
@@ -81,7 +89,7 @@ function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef>) {
 let _TextArea = forwardRef(TextArea);
 export {_TextArea as TextArea};
 
-function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef>) {
+function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
   let formContext = useContext(FormContext);
@@ -160,7 +168,7 @@ let _TextFieldBase = forwardRef(TextFieldBase);
 
 function TextAreaInput() {
   // Force re-render when value changes so we update the height.
-  useSlottedContext(TextAreaContext) ?? {};
+  useSlottedContext(AriaTextAreaContext) ?? {};
   let onHeightChange = (input: HTMLTextAreaElement) => {
     // TODO: only do this if an explicit height is not given?
     if (input) {
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index e3c4a05f173..85599b7ce99 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -12,15 +12,16 @@
 
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
-import {FocusableRef} from '@react-types/shared';
+import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
-import {forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components';
 import {StyleProps} from './style-utils';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the button. */
@@ -29,7 +30,10 @@ export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className
   isEmphasized?: boolean
 }
 
+export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+
 function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   let domRef = useFocusableRef(ref);
   return (
     <RACToggleButton
@@ -45,9 +49,9 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 07286bad96d..26063efa566 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -10,51 +10,51 @@
  * governing permissions and limitations under the License.
  */
 
-export {ActionButton} from './ActionButton';
-export {ActionMenu} from './ActionMenu';
+export {ActionButton, ActionButtonContext} from './ActionButton';
+export {ActionMenu, ActionMenuContext} from './ActionMenu';
 export {AlertDialog} from './AlertDialog';
-export {Avatar} from './Avatar';
-export {Badge} from './Badge';
-export {Breadcrumbs, Breadcrumb} from './Breadcrumbs';
-export {Button, LinkButton} from './Button';
-export {ButtonGroup} from './ButtonGroup';
-export {Checkbox} from './Checkbox';
-export {CheckboxGroup} from './CheckboxGroup';
-export {ColorArea} from './ColorArea';
-export {ColorField} from './ColorField';
-export {ColorSlider} from './ColorSlider';
-export {ColorSwatch} from './ColorSwatch';
-export {ColorSwatchPicker} from './ColorSwatchPicker';
-export {ColorWheel} from './ColorWheel';
-export {ComboBox, ComboBoxItem, ComboBoxSection} from './ComboBox';
-export {ContextualHelp} from './ContextualHelp';
-export {Heading, Header, Content, Footer, Image, Text, Keyboard} from './Content';
+export {Avatar, AvatarContext} from './Avatar';
+export {Badge, BadgeContext} from './Badge';
+export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from './Breadcrumbs';
+export {Button, LinkButton, ButtonContext, LinkButtonContext} from './Button';
+export {ButtonGroup, ButtonGroupContext} from './ButtonGroup';
+export {Checkbox, CheckboxContext} from './Checkbox';
+export {CheckboxGroup, CheckboxGroupContext} from './CheckboxGroup';
+export {ColorArea, ColorAreaContext} from './ColorArea';
+export {ColorField, ColorFieldContext} from './ColorField';
+export {ColorSlider, ColorSliderContext} from './ColorSlider';
+export {ColorSwatch, ColorSwatchContext} from './ColorSwatch';
+export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
+export {ColorWheel, ColorWheelContext} from './ColorWheel';
+export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
+export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
+export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Image, ImageContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
 export {Dialog} from './Dialog';
 export {DialogTrigger} from './DialogTrigger';
 export {DialogContainer, useDialogContainer} from './DialogContainer';
-export {Divider} from './Divider';
-export {DropZone} from './DropZone';
+export {Divider, DividerContext} from './Divider';
+export {DropZone, DropZoneContext} from './DropZone';
 export {Form} from './Form';
-export {IllustratedMessage} from './IllustratedMessage';
-export {InlineAlert} from './InlineAlert';
-export {Link} from './Link';
-export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger} from './Menu';
-export {Meter} from './Meter';
-export {NumberField} from './NumberField';
-export {Picker, PickerItem, PickerSection} from './Picker';
-export {ProgressBar} from './ProgressBar';
-export {ProgressCircle} from './ProgressCircle';
+export {IllustratedMessage, IllustratedMessageContext} from './IllustratedMessage';
+export {InlineAlert, InlineAlertContext} from './InlineAlert';
+export {Link, LinkContext} from './Link';
+export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, MenuContext} from './Menu';
+export {Meter, MeterContext} from './Meter';
+export {NumberField, NumberFieldContext} from './NumberField';
+export {Picker, PickerItem, PickerSection, PickerContext} from './Picker';
+export {ProgressBar, ProgressBarContext} from './ProgressBar';
+export {ProgressCircle, ProgressCircleContext} from './ProgressCircle';
 export {Provider} from './Provider';
 export {Radio} from './Radio';
-export {RadioGroup} from './RadioGroup';
-export {RangeSlider} from './RangeSlider';
-export {SearchField} from './SearchField';
-export {Slider} from './Slider';
-export {StatusLight} from './StatusLight';
-export {Switch} from './Switch';
-export {TagGroup, Tag} from './TagGroup';
-export {TextArea, TextField} from './TextField';
-export {ToggleButton} from './ToggleButton';
+export {RadioGroup, RadioGroupContext} from './RadioGroup';
+export {RangeSlider, RangeSliderContext} from './RangeSlider';
+export {SearchField, SearchFieldContext} from './SearchField';
+export {Slider, SliderContext} from './Slider';
+export {StatusLight, StatusLightContext} from './StatusLight';
+export {Switch, SwitchContext} from './Switch';
+export {TagGroup, Tag, TagGroupContext} from './TagGroup';
+export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
+export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {Tooltip, TooltipTrigger} from './Tooltip';
 
 export {FileTrigger} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts b/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts
new file mode 100644
index 00000000000..1a87722b44b
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Context, ForwardedRef, useMemo} from 'react';
+import {ContextValue, SlotProps, useSlottedContext} from 'react-aria-components';
+import {mergeProps, useObjectRef} from 'react-aria';
+import {mergeRefs} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
+import {RefObject} from '@react-types/shared';
+
+export function useSpectrumContextProps<T, U extends SlotProps, E>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
+  let {ref: contextRef, ...contextProps} = ctx as any;
+  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
+  let mergedProps = mergeProps(contextProps, props) as unknown as T;
+
+  // mergeProps does not merge `UNSAFE_style`
+  if (
+    'UNSAFE_style' in contextProps &&
+    contextProps.UNSAFE_style &&
+    'UNSAFE_style' in props &&
+    props.UNSAFE_style
+  ) {
+    // @ts-ignore
+    mergedProps.UNSAFE_style = {...contextProps.UNSAFE_style, ...props.UNSAFE_style};
+  }
+
+  // Merge macro styles.
+  if ('styles' in contextProps && contextProps.styles && 'styles' in props && props.styles) {
+    // @ts-ignore
+    mergedProps.styles = mergeStyles(contextProps.styles, props.styles);
+  }
+
+  return [mergedProps, mergedRef];
+}
diff --git a/packages/@react-spectrum/s2/style/runtime.ts b/packages/@react-spectrum/s2/style/runtime.ts
index f9555ad6db8..3780d515e34 100644
--- a/packages/@react-spectrum/s2/style/runtime.ts
+++ b/packages/@react-spectrum/s2/style/runtime.ts
@@ -36,13 +36,16 @@ import {StyleString} from './types';
 //   };
 // }
 
-export function mergeStyles(...styles: (StyleString<string> | null | undefined)[]): string {
+export function mergeStyles(...styles: (StyleString | null | undefined)[]): string {
+  let definedStyles = styles.filter(Boolean) as StyleString[];
+  if (definedStyles.length === 1) {
+    return definedStyles[0];
+  }
+
   let map = new Map();
-  for (let style of styles) {
-    if (style) {
-      for (let [k, v] of parse(style)) {
-        map.set(k, v);
-      }
+  for (let style of definedStyles) {
+    for (let [k, v] of parse(style)) {
+      map.set(k, v);
     }
   }
   
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 6162ba96e5a..5f248449460 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -19,7 +19,7 @@ import {useFormProps} from '@react-spectrum/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTextField} from '@react-aria/textfield';
 
-function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef>) {
+function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index 535e2972ef8..87083b2ddf4 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -37,7 +37,7 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | '
   disableFocusRing?: boolean
 }
 
-function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
+function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let {
     validationState = props.isInvalid ? 'invalid' : null,
     icon,
diff --git a/packages/@react-types/textfield/src/index.d.ts b/packages/@react-types/textfield/src/index.d.ts
index d4550a51778..887baa8a499 100644
--- a/packages/@react-types/textfield/src/index.d.ts
+++ b/packages/@react-types/textfield/src/index.d.ts
@@ -54,7 +54,7 @@ export interface SpectrumTextFieldProps extends SpectrumTextInputBase, Omit<Aria
 
 export interface SpectrumTextAreaProps extends Omit<SpectrumTextFieldProps, 'type' | 'pattern'> {}
 
-export interface TextFieldRef extends FocusableRefValue<HTMLInputElement | HTMLTextAreaElement, HTMLDivElement> {
+export interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {
   select(): void,
-  getInputElement(): HTMLInputElement | HTMLTextAreaElement | null
+  getInputElement(): T | null
 }
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index 0411f40cdf9..8c87ecbb176 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -17,7 +17,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
   /** Whether the breadcrumbs are disabled. */
@@ -66,9 +66,7 @@ export interface BreadcrumbRenderProps {
 
 export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>  {
   /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
-  id?: Key,
-  /** The children of the breadcrumb, typically a `<Link>`. */
-  children: ReactNode
+  id?: Key
 }
 
 /**
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index 9c3bc48dc28..695106ce978 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -16,9 +16,9 @@ import {ContextValue, Provider, RACValidation, RenderProps, SlotProps, useContex
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
+import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, MutableRefObject, useContext} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {TextContext} from './Text';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
@@ -26,7 +26,7 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'val
   /**
    * A ref for the HTML input element.
    */
-  inputRef?: MutableRefObject<HTMLInputElement>
+  inputRef?: RefObject<HTMLInputElement | null>
 }
 
 export interface CheckboxGroupRenderProps {
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index e26ffde4365..050bfedc850 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -15,10 +15,10 @@ import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
+import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, MutableRefObject} from 'react';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps {}
@@ -26,7 +26,7 @@ export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvent
   /**
    * A ref for the HTML input element.
    */
-  inputRef?: MutableRefObject<HTMLInputElement>
+  inputRef?: RefObject<HTMLInputElement | null>
 }
 
 export interface RadioGroupRenderProps {
diff --git a/packages/react-aria-components/src/Switch.tsx b/packages/react-aria-components/src/Switch.tsx
index 3004cbe6d2f..3d62771b30e 100644
--- a/packages/react-aria-components/src/Switch.tsx
+++ b/packages/react-aria-components/src/Switch.tsx
@@ -13,15 +13,15 @@
 import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
 import {ContextValue, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
-import {forwardRefType} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef, MutableRefObject} from 'react';
+import {forwardRefType, RefObject} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
 export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps {
   /**
    * A ref for the HTML input element.
    */
-  inputRef?: MutableRefObject<HTMLInputElement>
+  inputRef?: RefObject<HTMLInputElement | null>
 }
 
 export interface SwitchRenderProps {
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index 83ab07d9c86..731afea4226 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -22,7 +22,7 @@ interface SlottedValue<T> {
 }
 
 export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
-export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
+export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
 
 type ProviderValue<T> = [Context<T>, T];
 type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> =