From 52058a42d5217bc7b6b7e590c23ba16044b91a16 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 10:48:58 +1000
Subject: [PATCH 01/12] chore: TS explicit module S2

---
 .../s2/chromatic/ActionButton.stories.tsx     |  16 +-
 .../chromatic/ActionButtonGroup.stories.tsx   |  50 +-
 .../s2/chromatic/ActionMenu.stories.tsx       |  30 +-
 .../s2/chromatic/AlertDialog.stories.tsx      |  15 +-
 .../s2/chromatic/Avatar.stories.tsx           |   7 +-
 .../s2/chromatic/Badge.stories.tsx            |  20 +-
 .../s2/chromatic/Breadcrumbs.stories.tsx      |  33 +-
 .../s2/chromatic/Button.stories.tsx           |  19 +-
 .../s2/chromatic/ButtonGroup.stories.tsx      |  15 +-
 .../s2/chromatic/Card.stories.tsx             | 472 ++++++++---------
 .../s2/chromatic/CardView.stories.tsx         |  10 +-
 .../s2/chromatic/Checkbox.stories.tsx         |  19 +-
 .../s2/chromatic/CheckboxGroup.stories.tsx    |  71 +--
 .../s2/chromatic/ColorArea.stories.tsx        |   7 +-
 .../s2/chromatic/ColorField.stories.tsx       |  39 +-
 .../s2/chromatic/ColorSlider.stories.tsx      |  33 +-
 .../chromatic/ColorSwatchPicker.stories.tsx   |  18 +-
 .../s2/chromatic/ColorWheel.stories.tsx       |   6 +-
 .../s2/chromatic/Combobox.stories.tsx         |  35 +-
 .../s2/chromatic/ContextualHelp.stories.tsx   |   5 +-
 .../s2/chromatic/Dialog.stories.tsx           |  15 +-
 .../s2/chromatic/Divider.stories.tsx          |   7 +-
 .../s2/chromatic/DropZone.stories.tsx         |  36 +-
 .../s2/chromatic/Forms.stories.tsx            |  20 +-
 .../chromatic/IllustratedMessage.stories.tsx  |  19 +-
 .../s2/chromatic/InlineAlert.stories.tsx      |  17 +-
 .../@react-spectrum/s2/chromatic/Link.tsx     |  11 +-
 .../s2/chromatic/Menu.stories.tsx             |  13 +-
 .../s2/chromatic/Meter.stories.tsx            |   7 +-
 .../s2/chromatic/NumberField.stories.tsx      |  23 +-
 .../s2/chromatic/Picker.stories.tsx           |  35 +-
 .../s2/chromatic/ProgressBar.stories.tsx      |  18 +-
 .../s2/chromatic/RadioGroup.stories.tsx       |  11 +-
 .../s2/chromatic/RangeSlider.stories.tsx      |   7 +-
 .../s2/chromatic/SearchField.stories.tsx      |  15 +-
 .../s2/chromatic/SegmentedControl.stories.tsx |  19 +-
 .../s2/chromatic/Slider.stories.tsx           |  23 +-
 .../s2/chromatic/StatusLight.stories.tsx      |  11 +-
 .../s2/chromatic/Switch.stories.tsx           |  11 +-
 .../s2/chromatic/TableView.stories.tsx        |  67 +--
 .../s2/chromatic/Tabs.stories.tsx             |  15 +-
 .../s2/chromatic/TagGroup.stories.tsx         |  31 +-
 .../s2/chromatic/TextField.stories.tsx        |  39 +-
 .../s2/chromatic/ToggleButton.stories.tsx     |  21 +-
 .../chromatic/ToggleButtonGroup.stories.tsx   |   9 +-
 .../s2/chromatic/Tooltip.stories.tsx          |   6 +-
 .../s2/chromatic/TreeView.stories.tsx         |  47 +-
 .../@react-spectrum/s2/chromatic/utils.tsx    |   4 +-
 packages/@react-spectrum/s2/src/Accordion.tsx |   8 +-
 packages/@react-spectrum/s2/src/ActionBar.tsx |   8 +-
 .../@react-spectrum/s2/src/ActionButton.tsx   |   8 +-
 .../s2/src/ActionButtonGroup.tsx              |   8 +-
 .../@react-spectrum/s2/src/ActionMenu.tsx     |   8 +-
 .../@react-spectrum/s2/src/AlertDialog.tsx    |   8 +-
 packages/@react-spectrum/s2/src/Avatar.tsx    |   8 +-
 .../@react-spectrum/s2/src/AvatarGroup.tsx    |   8 +-
 packages/@react-spectrum/s2/src/Badge.tsx     |   8 +-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    |  12 +-
 packages/@react-spectrum/s2/src/Button.tsx    |  14 +-
 .../@react-spectrum/s2/src/ButtonGroup.tsx    |   8 +-
 packages/@react-spectrum/s2/src/Card.tsx      |  30 +-
 packages/@react-spectrum/s2/src/CardView.tsx  |  10 +-
 packages/@react-spectrum/s2/src/Checkbox.tsx  |  10 +-
 .../@react-spectrum/s2/src/CheckboxGroup.tsx  |   8 +-
 .../@react-spectrum/s2/src/ClearButton.tsx    |   8 +-
 .../@react-spectrum/s2/src/CloseButton.tsx    |  10 +-
 packages/@react-spectrum/s2/src/CoachMark.tsx |  14 +-
 packages/@react-spectrum/s2/src/ColorArea.tsx |  10 +-
 .../@react-spectrum/s2/src/ColorField.tsx     |   8 +-
 .../@react-spectrum/s2/src/ColorSlider.tsx    |  10 +-
 .../@react-spectrum/s2/src/ColorSwatch.tsx    |  12 +-
 .../s2/src/ColorSwatchPicker.tsx              |  10 +-
 .../@react-spectrum/s2/src/ColorWheel.tsx     |  12 +-
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  10 +-
 packages/@react-spectrum/s2/src/Content.tsx   |  50 +-
 .../@react-spectrum/s2/src/ContextualHelp.tsx |  10 +-
 .../@react-spectrum/s2/src/CustomDialog.tsx   |   8 +-
 packages/@react-spectrum/s2/src/Dialog.tsx    |  10 +-
 .../@react-spectrum/s2/src/Disclosure.tsx     |  24 +-
 packages/@react-spectrum/s2/src/Divider.tsx   |   8 +-
 packages/@react-spectrum/s2/src/DropZone.tsx  |  10 +-
 packages/@react-spectrum/s2/src/Field.tsx     |  16 +-
 packages/@react-spectrum/s2/src/Form.tsx      |  10 +-
 .../s2/src/FullscreenDialog.tsx               |   8 +-
 packages/@react-spectrum/s2/src/Icon.tsx      |   8 +-
 .../s2/src/IllustratedMessage.tsx             |  10 +-
 packages/@react-spectrum/s2/src/Image.tsx     |  14 +-
 .../s2/src/ImageCoordinator.tsx               |   2 +-
 .../@react-spectrum/s2/src/InlineAlert.tsx    |  10 +-
 packages/@react-spectrum/s2/src/Link.tsx      |  10 +-
 packages/@react-spectrum/s2/src/Menu.tsx      |  10 +-
 packages/@react-spectrum/s2/src/Meter.tsx     |  10 +-
 packages/@react-spectrum/s2/src/Modal.tsx     |   8 +-
 .../s2/src/NotificationBadge.tsx              |  10 +-
 .../@react-spectrum/s2/src/NumberField.tsx    |  10 +-
 packages/@react-spectrum/s2/src/Picker.tsx    |  10 +-
 packages/@react-spectrum/s2/src/Popover.tsx   |  12 +-
 .../@react-spectrum/s2/src/ProgressBar.tsx    |  10 +-
 .../@react-spectrum/s2/src/ProgressCircle.tsx |  10 +-
 packages/@react-spectrum/s2/src/Provider.tsx  |   6 +-
 packages/@react-spectrum/s2/src/Radio.tsx     |   8 +-
 .../@react-spectrum/s2/src/RadioGroup.tsx     |  10 +-
 .../@react-spectrum/s2/src/RangeSlider.tsx    |   8 +-
 .../@react-spectrum/s2/src/SearchField.tsx    |  10 +-
 .../s2/src/SegmentedControl.tsx               |  16 +-
 packages/@react-spectrum/s2/src/Skeleton.tsx  |   4 +-
 .../s2/src/SkeletonCollection.tsx             |   6 +-
 packages/@react-spectrum/s2/src/Slider.tsx    |  10 +-
 .../@react-spectrum/s2/src/StatusLight.tsx    |  10 +-
 packages/@react-spectrum/s2/src/Switch.tsx    |  10 +-
 packages/@react-spectrum/s2/src/TableView.tsx |  30 +-
 packages/@react-spectrum/s2/src/Tabs.tsx      |  10 +-
 .../@react-spectrum/s2/src/TabsPicker.tsx     |  10 +-
 packages/@react-spectrum/s2/src/TagGroup.tsx  |  14 +-
 packages/@react-spectrum/s2/src/TextField.tsx |  25 +-
 packages/@react-spectrum/s2/src/Toast.tsx     |   4 +-
 .../@react-spectrum/s2/src/ToggleButton.tsx   |  10 +-
 .../s2/src/ToggleButtonGroup.tsx              |  10 +-
 packages/@react-spectrum/s2/src/Tooltip.tsx   |   8 +-
 packages/@react-spectrum/s2/src/TreeView.tsx  |   6 +-
 .../s2/stories/AlertDialog.stories.tsx        |   6 +-
 .../s2/stories/Avatar.stories.tsx             |  11 +-
 .../s2/stories/AvatarGroup.stories.tsx        |  54 +-
 .../s2/stories/Badge.stories.tsx              |  42 +-
 .../s2/stories/Breadcrumbs.stories.tsx        |  99 ++--
 .../s2/stories/Button.stories.tsx             |   2 +-
 .../s2/stories/Card.stories.tsx               | 473 +++++++++---------
 .../s2/stories/CardView.stories.tsx           |  34 +-
 .../s2/stories/Checkbox.stories.tsx           |  12 +-
 .../s2/stories/CheckboxGroup.stories.tsx      |  59 +--
 .../s2/stories/ColorArea.stories.tsx          |  12 +-
 .../s2/stories/ColorField.stories.tsx         |  57 ++-
 .../s2/stories/ColorSlider.stories.tsx        |  16 +-
 .../s2/stories/ColorSwatch.stories.tsx        |  24 +-
 .../s2/stories/ColorSwatchPicker.stories.tsx  |  39 +-
 .../s2/stories/ColorWheel.stories.tsx         |  12 +-
 .../s2/stories/ComboBox.stories.tsx           |  16 +-
 .../s2/stories/CustomDialog.stories.tsx       | 162 +++---
 .../s2/stories/Dialog.stories.tsx             | 100 ++--
 .../s2/stories/Divider.stories.tsx            |   7 +-
 .../s2/stories/DropZone.stories.tsx           |  38 +-
 .../s2/stories/Form.stories.tsx               | 128 ++---
 .../s2/stories/FullscreenDialog.stories.tsx   |  54 +-
 .../s2/stories/IllustratedMessage.stories.tsx | 112 +++--
 .../s2/stories/InlineAlert.stories.tsx        |  31 +-
 .../s2/stories/Link.stories.tsx               |  41 +-
 .../s2/stories/Menu.stories.tsx               |  13 +-
 .../s2/stories/Meter.stories.tsx              |  16 +-
 .../s2/stories/NumberField.stories.tsx        |  85 ++--
 .../s2/stories/Picker.stories.tsx             |  25 +-
 .../s2/stories/Popover.stories.tsx            | 302 +++++------
 .../s2/stories/ProgressBar.stories.tsx        |   7 +-
 .../s2/stories/ProgressCircle.stories.tsx     |  10 +-
 .../s2/stories/RadioGroup.stories.tsx         | 138 ++---
 .../s2/stories/RangeSlider.stories.tsx        |  75 +--
 .../s2/stories/SearchField.stories.tsx        |  76 +--
 .../s2/stories/SegmentedControl.stories.tsx   |  68 +--
 .../s2/stories/Slider.stories.tsx             | 131 ++---
 .../s2/stories/StatusLight.stories.tsx        |  21 +-
 .../s2/stories/StyleMacro.stories.tsx         |   9 +-
 .../s2/stories/Switch.stories.tsx             |  11 +-
 .../s2/stories/TableView.stories.tsx          | 106 ++--
 .../s2/stories/Tabs.stories.tsx               | 141 +++---
 .../s2/stories/TagGroup.stories.tsx           |  32 +-
 .../s2/stories/TextField.stories.tsx          | 198 ++++----
 .../s2/stories/Toast.stories.tsx              | 115 +++--
 .../s2/stories/ToggleButton.stories.tsx       |   8 +-
 .../s2/stories/ToggleButtonGroup.stories.tsx  |  34 +-
 .../s2/stories/TreeView.stories.tsx           |  30 +-
 packages/@react-spectrum/s2/stories/utils.tsx |   8 +-
 170 files changed, 3098 insertions(+), 2470 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
index 9bc2984a188..42fb6084eeb 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
@@ -13,7 +13,7 @@
 import {ActionButton, Text} from '../src';
 import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButton.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
@@ -29,6 +29,8 @@ const meta: Meta<typeof ActionButton> = {
 
 export default meta;
 
+type ActionButtonStory = StoryObj<typeof ActionButton>;
+
 let states = [
   {isQuiet: true},
   {isDisabled: true},
@@ -64,19 +66,19 @@ const Template = (args) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: ActionButtonStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithIcon = {
-  render: Template,
+export const WithIcon: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><NewIcon /><Text>Press me</Text></>
   }
 };
 
-export const IconOnly = {
-  render: Template,
+export const IconOnly: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <NewIcon />
   }
diff --git a/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
index c884e567974..4d84a7807b5 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
@@ -14,7 +14,7 @@ import {ActionButton, ActionButtonGroup, Text} from '../src';
 import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
 import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
 import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg';
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
 import {style} from '../style' with { type: 'macro' };
 
@@ -46,26 +46,32 @@ let justifiedStyle = style({
   }
 });
 
-export const Example: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
-    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
-    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
-  </ActionButtonGroup>
-);
+export const Example: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+      <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+      <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+    </ActionButtonGroup>
+  )
+};
 
-export const IconOnly: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ActionButton aria-label="Cut"><Cut /></ActionButton>
-    <ActionButton aria-label="Copy"><Copy /></ActionButton>
-    <ActionButton aria-label="Paste"><Paste /></ActionButton>
-  </ActionButtonGroup>
-);
+export const IconOnly: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ActionButton aria-label="Cut"><Cut /></ActionButton>
+      <ActionButton aria-label="Copy"><Copy /></ActionButton>
+      <ActionButton aria-label="Paste"><Paste /></ActionButton>
+    </ActionButtonGroup>
+  )
+};
 
-export const Justified: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
-    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
-    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
-    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
-  </ActionButtonGroup>
-);
+export const Justified: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
+      <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+      <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+      <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+    </ActionButtonGroup>
+  )
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
index 3425c9909a0..cf4f7ee3bb2 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
@@ -26,20 +26,22 @@ const meta: Meta<typeof ActionMenu<any>> = {
 export default meta;
 type Story = StoryObj<typeof ActionMenu<any>>;
 
-export const Static: Story = {...Example};
-
-Static.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Static: Story = {
+  ...Example,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };
 
-export const Dynamic = {...DynamicExample};
-
-Dynamic.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Dynamic: Story = {
+  ...DynamicExample,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };
diff --git a/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
index 84b1288f3f9..a9f68efd1a5 100644
--- a/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
@@ -26,11 +26,12 @@ const meta: Meta<typeof AlertDialog> = {
 
 export default meta;
 
-export const Example = {...Base} as StoryObj;
-
-Example.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('alertdialog');
+export const Example: StoryObj<typeof AlertDialog> = {
+  ...Base,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('alertdialog');
+  }
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
index d16b1c316b5..2935e68c6af 100644
--- a/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof Avatar> = {
@@ -23,12 +23,13 @@ const meta: Meta<typeof Avatar> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Avatar>;
 
-export const Default = {
+export const Default: Story = {
   render: () => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
 };
 
-export const OverBackground = {
+export const OverBackground: Story = {
   render: () => (
     <div className={style({backgroundColor: 'indigo-800', padding: 40})}>
       <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
diff --git a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
index b4bf1bcef1e..3f6374b9fe3 100644
--- a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Badge} from '../src';
+import {Badge, BadgeProps} from '../src';
 import {Example} from '../stories/Badge.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 
@@ -26,6 +27,7 @@ const meta: Meta<typeof Badge> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Template>;
 
 let states = [
   {size: ['S', 'M', 'L', 'XL']},
@@ -36,7 +38,7 @@ let states = [
 let combinations = generatePowerset(states);
 let chunkSize = Math.ceil(combinations.length / 3);
 
-const Template = ({combos, ...args}) => {
+const Template = ({combos, ...args}: {combos: any[], args: BadgeProps}): ReactNode => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
@@ -52,20 +54,20 @@ const Template = ({combos, ...args}) => {
   );
 };
 
-export const Default = {
-  render: Template,
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
   name: 'all visual option combos 1 of 3',
   args: {combos: combinations.slice(0, chunkSize)}
 };
 
-export const ComboPt2 = {
-  render: Template,
+export const ComboPt2: Story = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize, chunkSize * 2)},
   name: 'all visual option combos 2 of 3'
 };
 
-export const ComboPt3 = {
-  render: Template,
+export const ComboPt3: Story = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
   name: 'all visual option combos 3 of 3'
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
index d8c72597c5b..4f95bba51a3 100644
--- a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
@@ -14,6 +14,7 @@ import {Breadcrumb, Breadcrumbs} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Many} from '../stories/Breadcrumbs.stories';
 import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 import {userEvent, within} from '@storybook/testing-library';
@@ -26,19 +27,19 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
-export const Dynamic = Many as StoryObj;
-
-Dynamic.parameters = {
-  // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
-  chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
-};
-
-Dynamic.play = async ({canvasElement}) => {
-  // This uses click because using .tab twice didn't move focus to the menu
-  let trigger = await within(canvasElement).findByRole('button');
-  await userEvent.click(trigger);
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Dynamic: StoryObj<typeof Breadcrumbs> = {
+  ...Many,
+  parameters: {
+    // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  play: async ({canvasElement}) => {
+    // This uses click because using .tab twice didn't move focus to the menu
+    let trigger = await within(canvasElement).findByRole('button');
+    await userEvent.click(trigger);
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };
 
 let states = [
@@ -48,7 +49,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = () => {
+const Template = (): ReactNode => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
@@ -76,8 +77,8 @@ const Template = () => {
   );
 };
 
-export const Powerset = {
-  render: Template,
+export const Powerset: StoryObj<typeof Template> = {
+  render: () => <Template />,
   parameters: {
     chromaticProvider: {locales: ['en-US'], disableAnimations: true}
   }
diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
index c3458ad719a..2ad49d90c26 100644
--- a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Text} from '../src';
+import {Button, ButtonProps, Text} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
 import {style} from '../style' with { type: 'macro' };
@@ -39,7 +40,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = (args) => {
+const Template = (args: ButtonProps): ReactNode => {
   let {children, ...otherArgs} = args;
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
@@ -65,19 +66,19 @@ const Template = (args) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithIcon = {
-  render: Template,
+export const WithIcon: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><NewIcon /><Text>Press me</Text></>
   }
 };
 
-export const IconOnly = {
-  render: Template,
+export const IconOnly: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <NewIcon />
   }
diff --git a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
index 29369c0a1e0..6a56ed96d03 100644
--- a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ButtonGroup, Text} from '../src';
+import {Button, ButtonGroup, ButtonGroupProps, Text} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 
@@ -27,7 +28,7 @@ const meta: Meta<typeof ButtonGroup> = {
 
 export default meta;
 
-const Template = ({combos, containerStyle, ...args}) => {
+const Template = ({combos, containerStyle, ...args}: {combos: any[], containerStyle: string, args: ButtonGroupProps}): ReactNode => {
   return (
     <div className={containerStyle}>
       {combos.map(c => {
@@ -61,8 +62,8 @@ let horizontalStates = [
 ];
 
 let horizontalCombos = generatePowerset(horizontalStates);
-export const Horizontal = {
-  render: Template,
+export const Horizontal: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: horizontalCombos,
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
@@ -77,8 +78,8 @@ let verticalStates = [
 ];
 
 let verticalCombos = generatePowerset(verticalStates);
-export const Vertical = {
-  render: Template,
+export const Vertical: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: verticalCombos,
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
diff --git a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
index 2b18a1794ad..2c5d21d7fdb 100644
--- a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
@@ -13,7 +13,7 @@
 import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, StatusLight, Text, UserCard} from '../src';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderGradient from '../spectrum-illustrations/gradient/generic2/FolderClose';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg';
 import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
@@ -28,40 +28,42 @@ const meta: Meta<CardProps> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CardPreview>
-        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Card title</Text>
-        <ActionMenu>
-          <MenuItem>Test</MenuItem>
-        </ActionMenu>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      {args.size !== 'XS' && <>
-        <Divider />
-        <Footer>
-          <StatusLight size="S" variant="positive">Published</StatusLight>
-        </Footer>
-      </>}
-    </Card>
-    <Card {...args}>
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      {args.size !== 'XS' && <>
-        <Divider />
-        <Footer>
-          <StatusLight size="S" variant="positive">Published</StatusLight>
-        </Footer>
-      </>}
-    </Card>
-  </div>
-);
+export const Example: StoryObj<typeof Card> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CardPreview>
+          <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Card title</Text>
+          <ActionMenu>
+            <MenuItem>Test</MenuItem>
+          </ActionMenu>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        {args.size !== 'XS' && <>
+          <Divider />
+          <Footer>
+            <StatusLight size="S" variant="positive">Published</StatusLight>
+          </Footer>
+        </>}
+      </Card>
+      <Card {...args}>
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        {args.size !== 'XS' && <>
+          <Divider />
+          <Footer>
+            <StatusLight size="S" variant="positive">Published</StatusLight>
+          </Footer>
+        </>}
+      </Card>
+    </div>
+  )
+};
 
 const specificArgTypes = {
   density: {
@@ -71,217 +73,225 @@ const specificArgTypes = {
   }
 };
 
-export const Asset = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <AssetCard {...args}>
-      <CardPreview>
-        <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Desert Sunset</Text>
-        <Text slot="description">PNG • 2/3/2024</Text>
-      </Content>
-    </AssetCard>
-    <AssetCard {...args}>
-      <CardPreview>
-        <FolderGradient />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Projects</Text>
-        <Text slot="description">10 items • 6/14/2024</Text>
-      </Content>
-    </AssetCard>
-  </div>
-);
-
-Asset.argTypes = specificArgTypes;
-
-export const User = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
-    <UserCard {...args}>
-      <CardPreview>
-        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <StatusLight size="S" variant="positive">Available</StatusLight>
-      </Footer>
-    </UserCard>
-    <UserCard {...args}>
-      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <StatusLight size="S" variant="positive">Available</StatusLight>
-      </Footer>
-    </UserCard>
-  </div>
-);
+export const Asset: StoryObj<typeof Card> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <AssetCard {...args}>
+        <CardPreview>
+          <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Desert Sunset</Text>
+          <Text slot="description">PNG • 2/3/2024</Text>
+        </Content>
+      </AssetCard>
+      <AssetCard {...args}>
+        <CardPreview>
+          <FolderGradient />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Projects</Text>
+          <Text slot="description">10 items • 6/14/2024</Text>
+        </Content>
+      </AssetCard>
+    </div>
+  ),
+  argTypes: specificArgTypes
+};
 
-User.argTypes = {
-  ...specificArgTypes,
-  variant: {
-    control: 'radio',
-    options: ['primary', 'secondary', 'tertiary']
+export const User: StoryObj<typeof UserCard> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+      <UserCard {...args}>
+        <CardPreview>
+          <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <StatusLight size="S" variant="positive">Available</StatusLight>
+        </Footer>
+      </UserCard>
+      <UserCard {...args}>
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <StatusLight size="S" variant="positive">Available</StatusLight>
+        </Footer>
+      </UserCard>
+    </div>
+  ),
+  argTypes: {
+    ...specificArgTypes,
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary']
+    }
   }
 };
 
-export const Product = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
-    <ProductCard {...args}>
-      <CardPreview>
+export const Product: StoryObj<typeof ProductCard> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+      <ProductCard {...args}>
+        <CardPreview>
+          <Image
+            slot="preview"
+            src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
         <Image
-          slot="preview"
-          src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Image
-        slot="thumbnail"
-        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <Button variant="primary">Buy now</Button>
-      </Footer>
-    </ProductCard>
-    <ProductCard {...args}>
-      <Image
-        slot="thumbnail"
-        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <Button variant="primary">Buy now</Button>
-      </Footer>
-    </ProductCard>
-  </div>
-);
-
-Product.argTypes = {
-  ...specificArgTypes,
-  variant: {
-    control: 'radio',
-    options: ['primary', 'secondary', 'tertiary']
+          slot="thumbnail"
+          src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <Button variant="primary">Buy now</Button>
+        </Footer>
+      </ProductCard>
+      <ProductCard {...args}>
+        <Image
+          slot="thumbnail"
+          src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <Button variant="primary">Buy now</Button>
+        </Footer>
+      </ProductCard>
+    </div>
+  ),
+  argTypes: {
+    ...specificArgTypes,
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary']
+    }
   }
 };
 
-export const Collection = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CollectionCardPreview>
-        <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CollectionCardPreview>
-      <Content>
-        <Text slot="title">Travel</Text>
-        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
-          <Folder />
-          <Text slot="description">20 photos</Text>
-        </div>
-      </Content>
-    </Card>
-    <Card {...args}>
-      <CollectionCardPreview>
-        <Image alt="" src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1720987517313-23d8c4092cfb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8" />
-      </CollectionCardPreview>
-      <Content>
-        <Text slot="title">Architecture</Text>
-        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
-          <Folder />
-          <Text slot="description">15 photos</Text>
-        </div>
-      </Content>
-    </Card>
-  </div>
-);
-
-export const PreviewOverlay = (args: any) => (
-  <Card {...args}>
-    <CardPreview>
-      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
-      <Badge
-        variant="positive"
-        styles={style({
-          position: 'absolute',
-          top: 16,
-          insetEnd: 16
-        })}>
-        Free
-      </Badge>
-      <Avatar
-        src="https://i.imgur.com/xIe7Wlb.png"
-        size={24}
-        isOverBackground
-        styles={style({
-          position: 'absolute',
-          bottom: 16,
-          insetStart: 16
-        })} />
-    </CardPreview>
-  </Card>
-);
-
-export const Custom = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CardPreview>
-        <Image
-          alt=""
-          src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CardPreview>
-      <Content>
-        <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
-          <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-            <Select />
-            <Text slot="description">Click through rate</Text>
+export const Collection: StoryObj<typeof Card> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CollectionCardPreview>
+          <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CollectionCardPreview>
+        <Content>
+          <Text slot="title">Travel</Text>
+          <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+            <Folder />
+            <Text slot="description">20 photos</Text>
           </div>
-          <div className={style({display: 'flex', flexDirection: 'column'})}>
-            <Text styles={style({font: 'title-xl'})}>1.012%</Text>
-            <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
+        </Content>
+      </Card>
+      <Card {...args}>
+        <CollectionCardPreview>
+          <Image alt="" src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1720987517313-23d8c4092cfb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8" />
+        </CollectionCardPreview>
+        <Content>
+          <Text slot="title">Architecture</Text>
+          <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+            <Folder />
+            <Text slot="description">15 photos</Text>
           </div>
-        </div>
-      </Content>
-    </Card>
+        </Content>
+      </Card>
+    </div>
+  )
+};
+
+export const PreviewOverlay: StoryObj<typeof Card> = {
+  render: (args) => (
     <Card {...args}>
       <CardPreview>
-        <Image
-          alt=""
-          src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
+        <Badge
+          variant="positive"
+          styles={style({
+            position: 'absolute',
+            top: 16,
+            insetEnd: 16
+          })}>
+          Free
+        </Badge>
+        <Avatar
+          src="https://i.imgur.com/xIe7Wlb.png"
+          size={24}
+          isOverBackground
+          styles={style({
+            position: 'absolute',
+            bottom: 16,
+            insetStart: 16
+          })} />
       </CardPreview>
-      <Content>
-        <Text slot="title">Yummburger</Text>
-        <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-          <Project />
-          <Text slot="description"><span className={style({fontWeight: 'bold'})}>35k</span> experiences use this</Text>
-        </div>
-      </Content>
-      <Footer styles={style({flexDirection: 'column', alignItems: 'start', gap: 4})}>
-        <Text styles={style({font: 'ui-sm'})}><span className={style({font: 'title-xl'})}>25%</span> click through rate</Text>
-        <Meter variant="positive" value={25} styles={style({marginY: 4})} />
-        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold'})}>56k</span> clicks</Text>
-        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold', color: 'positive-900'})}>3.46%</span> last month</Text>
-      </Footer>
     </Card>
-  </div>
-);
+  )
+};
 
-Custom.argTypes = {
-  size: {
-    table: {
-      disable: true
+export const Custom: StoryObj<typeof Card> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CardPreview>
+          <Image
+            alt=""
+            src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
+            <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+              <Select />
+              <Text slot="description">Click through rate</Text>
+            </div>
+            <div className={style({display: 'flex', flexDirection: 'column'})}>
+              <Text styles={style({font: 'title-xl'})}>1.012%</Text>
+              <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
+            </div>
+          </div>
+        </Content>
+      </Card>
+      <Card {...args}>
+        <CardPreview>
+          <Image
+            alt=""
+            src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Yummburger</Text>
+          <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+            <Project />
+            <Text slot="description"><span className={style({fontWeight: 'bold'})}>35k</span> experiences use this</Text>
+          </div>
+        </Content>
+        <Footer styles={style({flexDirection: 'column', alignItems: 'start', gap: 4})}>
+          <Text styles={style({font: 'ui-sm'})}><span className={style({font: 'title-xl'})}>25%</span> click through rate</Text>
+          <Meter variant="positive" value={25} styles={style({marginY: 4})} />
+          <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold'})}>56k</span> clicks</Text>
+          <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold', color: 'positive-900'})}>3.46%</span> last month</Text>
+        </Footer>
+      </Card>
+    </div>
+  ),
+  argTypes: {
+    size: {
+      table: {
+        disable: true
+      }
     }
   }
 };
diff --git a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
index 8637f39ea03..8744946a9d7 100644
--- a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {CardView, CardViewProps, Content, Heading, IllustratedMessage} from '../src';
+import {CardView, Content, Heading, IllustratedMessage} from '../src';
 import EmptyIcon from '../spectrum-illustrations/gradient/generic1/Image';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof CardView> = {
@@ -32,8 +32,8 @@ const cardViewStyles = style({
   height: 600
 });
 
-export const Empty = (args: CardViewProps<any>) => {
-  return (
+export const Empty: StoryObj<typeof CardView> = {
+  render: (args) => (
     <CardView
       aria-label="Assets"
       {...args}
@@ -47,5 +47,5 @@ export const Empty = (args: CardViewProps<any>) => {
       )}>
       {[]}
     </CardView>
-  );
+  )
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
index ccc666a4c15..635532a5c73 100644
--- a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox} from '../src';
+import {Checkbox, CheckboxProps} from '../src';
 import {generateComboChunks, shortName} from './utils';
 import {LongLabel} from '../stories/Checkbox.stories';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof Checkbox> = {
@@ -37,7 +38,7 @@ let states = [
   {size: ['S', 'M', 'L', 'XL']}
 ];
 
-const Template = ({combos, ...args}) => {
+const Template = ({combos, ...args}: {combos: any[], args: CheckboxProps}): ReactNode => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
@@ -54,22 +55,22 @@ const Template = ({combos, ...args}) => {
 };
 
 let chunks = generateComboChunks({states, numChunks: 3});
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: chunks[0]
   }
 };
 
-export const DefaultPt2 = {
-  render: Template,
+export const DefaultPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: chunks[1]
   }
 };
 
-export const DefaultPt3 = {
-  render: Template,
+export const DefaultPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: chunks[2]
   }
diff --git a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
index a1b03745164..bce455cdb1c 100644
--- a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox, CheckboxGroup, Content, ContextualHelp, Heading} from '../src';
+import {Checkbox, CheckboxGroup, CheckboxGroupProps, Content, ContextualHelp, Heading} from '../src';
 import {generateComboChunks, shortName} from './utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof CheckboxGroup> = {
@@ -37,7 +38,7 @@ let states = [
   {size: ['S', 'M', 'L', 'XL']}
 ];
 
-const Template = ({combos, containerStyle, ...args}) => {
+const Template = ({combos, containerStyle, ...args}: CheckboxGroupProps & {combos: any[], containerStyle: string}): ReactNode => {
   return (
     <div className={containerStyle}>
       {combos.map(c => {
@@ -61,8 +62,8 @@ const Template = ({combos, containerStyle, ...args}) => {
 
 let chunks = generateComboChunks({states, numChunks: 5});
 
-export const Horizontal = {
-  render: Template,
+export const Horizontal: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: chunks[0],
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
@@ -70,40 +71,40 @@ export const Horizontal = {
   }
 };
 
-export const HorizontalPt2 = {
-  render: Template,
+export const HorizontalPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Horizontal.args,
     combos: chunks[1]
   }
 };
 
-export const HorizontalPt3 = {
-  render: Template,
+export const HorizontalPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Horizontal.args,
     combos: chunks[2]
   }
 };
 
-export const HorizontalPt4 = {
-  render: Template,
+export const HorizontalPt4: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Horizontal.args,
     combos: chunks[3]
   }
 };
 
-export const HorizontalPt5 = {
-  render: Template,
+export const HorizontalPt5: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Horizontal.args,
     combos: chunks[4]
   }
 };
 
-export const Vertical = {
-  render: Template,
+export const Vertical: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: chunks[0],
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
@@ -111,32 +112,32 @@ export const Vertical = {
   }
 };
 
-export const VerticalPt2 = {
-  render: Template,
+export const VerticalPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Vertical.args,
     combos: chunks[1]
   }
 };
 
-export const VerticalPt3 = {
-  render: Template,
+export const VerticalPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Vertical.args,
     combos: chunks[2]
   }
 };
 
-export const VerticalPt4 = {
-  render: Template,
+export const VerticalPt4: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Vertical.args,
     combos: chunks[3]
   }
 };
 
-export const VerticalPt5 = {
-  render: Template,
+export const VerticalPt5: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...Vertical.args,
     combos: chunks[4]
@@ -153,8 +154,8 @@ let statesWithContextual = [
 
 let contextualHelpChunks = generateComboChunks({states: statesWithContextual, numChunks: 3});
 
-export const ContextualHelpStories = {
-  render: Template,
+export const ContextualHelpStories: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: contextualHelpChunks[0],
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
@@ -168,24 +169,24 @@ export const ContextualHelpStories = {
   }
 };
 
-export const ContextualHelpPt2 = {
-  render: Template,
+export const ContextualHelpPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...ContextualHelpStories.args,
     combos: contextualHelpChunks[1]
   }
 };
 
-export const ContextualHelpPt3 = {
-  render: Template,
+export const ContextualHelpPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...ContextualHelpStories.args,
     combos: contextualHelpChunks[2]
   }
 };
 
-export const ContextualHelpVertical = {
-  render: Template,
+export const ContextualHelpVertical: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...ContextualHelpStories.args,
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
@@ -193,16 +194,16 @@ export const ContextualHelpVertical = {
   }
 };
 
-export const ContextualHelpVerticalPt2 = {
-  render: Template,
+export const ContextualHelpVerticalPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...ContextualHelpVertical.args,
     combos: contextualHelpChunks[1]
   }
 };
 
-export const ContextualHelpVerticalPt3 = {
-  render: Template,
+export const ContextualHelpVerticalPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...ContextualHelpVertical.args,
     combos: contextualHelpChunks[2]
diff --git a/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
index 936cad11829..5a0b207ff58 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ColorArea} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorArea> = {
   component: ColorArea,
@@ -23,15 +23,16 @@ const meta: Meta<typeof ColorArea> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorArea>;
 
-export const Default = {
+export const Default: Story = {
   render: (args) => <ColorArea {...args} />,
   args: {
     defaultValue: 'hsl(30, 100%, 50%)'
   }
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   ...Default,
   args: {
     ...Default.args,
diff --git a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
index be853ddf762..553903d7904 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField} from '../src';
+import {ColorField, ColorFieldProps} from '../src';
 import {generateComboChunks, shortName} from './utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof ColorField> = {
@@ -34,7 +35,7 @@ let states = [
   {size: ['S', 'M', 'L', 'XL']}
 ];
 
-const Template = ({combos, ...args}) => {
+const Template = ({combos, ...args}: ColorFieldProps & {combos: any[]}): ReactElement => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
@@ -53,24 +54,24 @@ const Template = ({combos, ...args}) => {
 
 let sideChunks = generateComboChunks({states, numChunks: 3});
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: sideChunks[0],
     labelPosition: 'side'
   }
 };
 
-export const LabelPositionSidePt2 = {
-  render: Template,
+export const LabelPositionSidePt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionSide.args,
     combos: sideChunks[1]
   }
 };
 
-export const LabelPositionSidePt3 = {
-  render: Template,
+export const LabelPositionSidePt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionSide.args,
     combos: sideChunks[2]
@@ -84,40 +85,40 @@ let topState = [
 
 let topChunks = generateComboChunks({states: topState, numChunks: 5});
 
-export const LabelPositionTop = {
-  render: Template,
+export const LabelPositionTop: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     combos: topChunks[0],
     labelPosition: 'top'
   }
 };
 
-export const LabelPositionTopPt2 = {
-  render: Template,
+export const LabelPositionTopPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionTop.args,
     combos: topChunks[1]
   }
 };
 
-export const LabelPositionTopPt3 = {
-  render: Template,
+export const LabelPositionTopPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionTop.args,
     combos: topChunks[2]
   }
 };
 
-export const LabelPositionTopPt4 = {
-  render: Template,
+export const LabelPositionTopPt4: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionTop.args,
     combos: topChunks[3]
   }
 };
 
-export const LabelPositionTopPt5 = {
-  render: Template,
+export const LabelPositionTopPt5: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     ...LabelPositionTop.args,
     combos: topChunks[4]
diff --git a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
index f537cad0c4b..32c4afb80cc 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSlider, Content, ContextualHelp, Heading} from '../src';
+import {ColorSlider, ColorSliderProps, Content, ContextualHelp, Heading} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 
@@ -40,7 +41,7 @@ let states = [
 
 let combinations = generatePowerset(states, (merged) => merged.label === null && (merged.showValueLabel === false || merged.contextualHelp));
 
-const Template = (args) => (
+const Template = (args: ColorSliderProps): ReactElement => (
   <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
     {combinations.map(c => {
       let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
@@ -53,7 +54,7 @@ const Template = (args) => (
   </div>
 );
 
-const VerticalTemplate = (args) => (
+const VerticalTemplate = (args: ColorSliderProps): ReactElement => (
   <div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
     {combinations.map(c => {
       let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
@@ -66,38 +67,38 @@ const VerticalTemplate = (args) => (
   </div>
 );
 
-export const PropChannelRed = {
-  render: Template,
+export const PropChannelRed: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'channel: red',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropChannelAlpha = {
-  render: Template,
+export const PropChannelAlpha: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'channel: alpha',
   args: {channel: 'alpha', defaultValue: '#7f0000'}
 };
 
-export const PropChannelLightness = {
-  render: Template,
+export const PropChannelLightness: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'channel: lightness',
   args: {channel: 'lightness', defaultValue: 'hsla(0, 100%, 50%, 0.5)'}
 };
 
-export const PropChannelBrightness = {
-  render: Template,
+export const PropChannelBrightness: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'channel: brightness',
   args: {channel: 'brightness', defaultValue: 'hsba(0, 100%, 50%, 0.5)'}
 };
 
-export const PropVertical = {
-  render: VerticalTemplate,
+export const PropVertical: StoryObj<typeof VerticalTemplate> = {
+  render: (args) => <VerticalTemplate {...args} />,
   name: 'orientation: vertical',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {channel: 'red', defaultValue: '#7f0000', styles: style({width: 384})}
 };
diff --git a/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx
index 68ee34d4200..afed48e5534 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx
@@ -13,7 +13,7 @@
 import {ColorSwatch} from '../src/ColorSwatch';
 import {ColorSwatchPicker} from '../src/ColorSwatchPicker';
 import {Example} from '../stories/ColorSwatchPicker.stories';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 
@@ -56,10 +56,12 @@ let colors = [
   '#bb6b41'
 ];
 
-export const ManySwatches = (args: any) => (
-  <ColorSwatchPicker {...args} styles={style({maxWidth: 192})}>
-    {colors.map((color) => {
-      return <ColorSwatch key={color} color={color} />;
-    })}
-  </ColorSwatchPicker>
-);
+export const ManySwatches: StoryObj<typeof ColorSwatchPicker> = {
+  render: (args) => (
+    <ColorSwatchPicker {...args} styles={style({maxWidth: 192})}>
+      {colors.map((color) => {
+        return <ColorSwatch key={color} color={color} />;
+      })}
+    </ColorSwatchPicker>
+  )
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx
index c619b678b19..7d123961c43 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ColorWheel} from '../src/ColorWheel';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorWheel> = {
   component: ColorWheel,
@@ -23,8 +23,8 @@ const meta: Meta<typeof ColorWheel> = {
 
 export default meta;
 
-export const Example = {
-  render: (args: any) => <ColorWheel {...args} onChange={undefined} />,
+export const Example: StoryObj<typeof ColorWheel> = {
+  render: (args) => <ColorWheel {...args} onChange={undefined} />,
   args: {
     defaultValue: 'hsl(30, 100%, 50%)'
   }
diff --git a/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
index cac5d8127b4..59fe4ca34d5 100644
--- a/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AsyncComboBoxStory, ContextualHelpExample, CustomWidth, Dynamic, EmptyCombobox, Example, Sections, WithIcons} from '../stories/ComboBox.stories';
+import {AsyncComboBoxStory, AsyncComboBoxStoryType, ContextualHelpExample, CustomWidth, Dynamic, EmptyCombobox, Example, Sections, WithIcons} from '../stories/ComboBox.stories';
 import {ComboBox} from '../src';
 import {expect} from '@storybook/jest';
 import type {Meta, StoryObj} from '@storybook/react';
@@ -27,8 +27,9 @@ const meta: Meta<typeof ComboBox<any>> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ComboBox<any>>;
 
-export const Static = {
+export const Static: Story = {
   ...Example,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -38,26 +39,26 @@ export const Static = {
   }
 } as StoryObj;
 
-export const WithSections = {
+export const WithSections: Story = {
   ...Sections,
   name: 'Sections',
-  play: async (context) => await Static.play!(context)
+  play: Static.play
 };
 
-export const WithDynamic = {
+export const WithDynamic: Story = {
   ...Dynamic,
   name: 'Dynamic',
   args: {...Dynamic.args, selectedKey: 'chocolate'},
-  play: async (context) => await Static.play!(context)
+  play: Static.play
 };
 
-export const Icons = {
+export const Icons: Story = {
   ...WithIcons,
   name: 'With Icons',
-  play: async (context) => await Static.play!(context)
+  play: Static.play
 };
 
-export const ContextualHelp = {
+export const ContextualHelp: Story = {
   ...ContextualHelpExample,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -67,12 +68,12 @@ export const ContextualHelp = {
   }
 };
 
-export const WithCustomWidth = {
+export const WithCustomWidth: Story = {
   ...CustomWidth,
-  play: async (context) => await Static.play!(context)
-} as StoryObj;
+  play: Static.play
+};
 
-export const WithEmptyState = {
+export const WithEmptyState: Story = {
   ...EmptyCombobox,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -83,7 +84,7 @@ export const WithEmptyState = {
   }
 };
 
-export const WithInitialLoading = {
+export const WithInitialLoading: Story = {
   ...EmptyCombobox,
   args: {
     loadingState: 'loading',
@@ -98,7 +99,7 @@ export const WithInitialLoading = {
   }
 };
 
-export const WithLoadMore = {
+export const WithLoadMore: Story = {
   ...Example,
   args: {
     loadingState: 'loadingMore',
@@ -113,7 +114,7 @@ export const WithLoadMore = {
   }
 };
 
-export const AsyncResults = {
+export const AsyncResults: StoryObj<AsyncComboBoxStoryType> = {
   ...AsyncComboBoxStory,
   args: {
     ...AsyncComboBoxStory.args,
@@ -130,7 +131,7 @@ export const AsyncResults = {
   }
 };
 
-export const Filtering = {
+export const Filtering: StoryObj<AsyncComboBoxStoryType> = {
   ...AsyncComboBoxStory,
   args: {
     ...AsyncComboBoxStory.args,
diff --git a/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx b/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
index 40c4088274d..0ed47af42b6 100644
--- a/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
@@ -12,7 +12,7 @@
 
 import {ContextualHelp} from '../src';
 import {Example} from '../stories/ContextualHelp.stories';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
 
 const meta: Meta<typeof ContextualHelp> = {
@@ -25,8 +25,9 @@ const meta: Meta<typeof ContextualHelp> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ContextualHelp>;
 
-export const Default = {
+export const Default: Story = {
   ...Example,
   play: async ({canvasElement}) => {
     await userEvent.tab();
diff --git a/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx b/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
index 8b56e6a2741..62d899a4086 100644
--- a/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Dialog} from '../src';
-import {DialogContainerExample, DialogTriggerExample, Example} from '../stories/Dialog.stories';
+import {DialogContainerExample, DialogTriggerExample, Example, ExampleStoryType} from '../stories/Dialog.stories';
 import type {Meta, StoryObj} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
 
@@ -25,8 +25,9 @@ const meta: Meta<typeof Dialog> = {
 };
 
 export default meta;
+type Story = StoryObj<ExampleStoryType>;
 
-export const Default = {
+export const Default: Story = {
   ...Example,
 // TODO: maybe render dialogs with different args instead (showHero/showHeader, etc)
   play: async ({canvasElement}) => {
@@ -35,14 +36,14 @@ export const Default = {
     let body = canvasElement.ownerDocument.body;
     await within(body).findByRole('dialog');
   }
-} as StoryObj;
+};
 
-export const WithDialogTrigger = {
+export const WithDialogTrigger: Story = {
   ...DialogTriggerExample,
   play: async (context) => await Default.play!(context)
-} as StoryObj;
+};
 
-export const DialogContainer = {
+export const DialogContainer: Story = {
   ...DialogContainerExample,
   play: async (context) => await Default.play!(context)
-} as StoryObj;
+};
diff --git a/packages/@react-spectrum/s2/chromatic/Divider.stories.tsx b/packages/@react-spectrum/s2/chromatic/Divider.stories.tsx
index b9783bf40da..dc00f938f54 100644
--- a/packages/@react-spectrum/s2/chromatic/Divider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Divider.stories.tsx
@@ -13,7 +13,7 @@
 import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Divider} from '../src';
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {StaticColorDecorator} from '../stories/utils';
 
 const meta: Meta<typeof Divider> = {
@@ -26,9 +26,10 @@ const meta: Meta<typeof Divider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Divider>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <section
       className={style({
         display: 'flex',
diff --git a/packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx b/packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx
index 3686a4b09a2..14a13f73f36 100644
--- a/packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx
@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ButtonGroup, Content, DropZone, FileTrigger, Heading, IllustratedMessage} from '../src';
+import {Button, ButtonGroup, Content, DropZone, DropZoneProps, FileTrigger, Heading, IllustratedMessage} from '../src';
 import Cloud from '../spectrum-illustrations/linear/Cloud';
 import CloudUpload from '../spectrum-illustrations/gradient/generic1/CloudUpload';
 import DropToUpload from '../spectrum-illustrations/linear/DropToUpload';
 import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
-import type {Meta} from '@storybook/react';
-import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import React, {ReactElement, useState} from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 
 const meta: Meta<typeof DropZone> = {
@@ -29,7 +29,7 @@ const meta: Meta<typeof DropZone> = {
 
 export default meta;
 
-const ExampleRender = (args: any) => {
+const ExampleRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -37,7 +37,7 @@ const ExampleRender = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 320, height: 280})}
+        styles={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -54,11 +54,11 @@ const ExampleRender = (args: any) => {
   );
 };
 
-export const Example = {
+export const Example: StoryObj<typeof ExampleRender> = {
   render: (args: any) => <ExampleRender {...args} />
 };
 
-const ExampleWithFileTriggerRender = (args: any) => {
+const ExampleWithFileTriggerRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -66,7 +66,7 @@ const ExampleWithFileTriggerRender = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 380, height: 280})}
+        styles={style({width: 380, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -89,11 +89,11 @@ const ExampleWithFileTriggerRender = (args: any) => {
   );
 };
 
-export const ExampleWithFileTrigger = {
-  render: (args: any) => <ExampleWithFileTriggerRender {...args} />
+export const ExampleWithFileTrigger: StoryObj<typeof ExampleWithFileTriggerRender> = {
+  render: (args) => <ExampleWithFileTriggerRender {...args} />
 };
 
-const LongBannerRender = (args: any) => {
+const LongBannerRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -102,7 +102,7 @@ const LongBannerRender = (args: any) => {
       <DropZone
         {...args}
         replaceMessage="A really long message that will show the text wrapping hopefully"
-        className={style({width: 320, height: 280})}
+        styles={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -119,8 +119,8 @@ const LongBannerRender = (args: any) => {
   );
 };
 
-export const LongBanner = {
-  render: (args: any) => <LongBannerRender {...args} />
+export const LongBanner: StoryObj<typeof LongBannerRender> = {
+  render: (args) => <LongBannerRender {...args} />
 };
 
 function Draggable() {
@@ -158,7 +158,7 @@ function Draggable() {
   );
 }
 
-const GradientExample = (args: any) => {
+const GradientExample = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -166,7 +166,7 @@ const GradientExample = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 320, height: 280})}
+        styles={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -183,6 +183,6 @@ const GradientExample = (args: any) => {
   );
 };
 
-export const Gradient = {
-  render: (args: any) => <GradientExample {...args} />
+export const Gradient: StoryObj<typeof GradientExample> = {
+  render: (args) => <GradientExample {...args} />
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx b/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
index 65673909f66..b3811ada6e6 100644
--- a/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
@@ -23,6 +23,7 @@ import {
   ContextualHelp,
   Divider,
   Form,
+  FormProps,
   Heading,
   Meter,
   NumberField,
@@ -41,11 +42,11 @@ import {
   TextField,
   ToggleButton
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 import SortDown from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUp from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {useState} from 'react';
 
 const meta: Meta<typeof Form> = {
   component: Form,
@@ -56,9 +57,10 @@ const meta: Meta<typeof Form> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Form>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <Form {...args}>
       <TextField label="First Name" name="firstName" />
       <TextField label="Last Name" name="firstName" />
@@ -86,8 +88,8 @@ export const Example = {
   )
 };
 
-export const MixedForm = {
-  render: (args: any) => (
+export const MixedForm: Story = {
+  render: (args) => (
     <Form {...args}>
       <TextField label="First Name" name="firstName" />
       <TextField label="Last Name" name="firstName" />
@@ -112,7 +114,7 @@ export const MixedForm = {
   }
 };
 
-const CustomLabelsExampleRender = (args: any) => {
+const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
   const [isSortAscending, setIsSortAscending] = useState(true);
   return (
     <Form {...args}>
@@ -205,8 +207,8 @@ const CustomLabelsExampleRender = (args: any) => {
   );
 };
 
-export const CustomLabelsExample = {
-  render: (args: any) => <CustomLabelsExampleRender {...args} />,
+export const CustomLabelsExample: StoryObj<typeof CustomLabelsExampleRender> = {
+  render: (args) => <CustomLabelsExampleRender {...args} />,
   parameters: {
     docs: {
       disable: true
diff --git a/packages/@react-spectrum/s2/chromatic/IllustratedMessage.stories.tsx b/packages/@react-spectrum/s2/chromatic/IllustratedMessage.stories.tsx
index f03309e73de..45fd706c0db 100644
--- a/packages/@react-spectrum/s2/chromatic/IllustratedMessage.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/IllustratedMessage.stories.tsx
@@ -13,7 +13,7 @@
 import {Button, ButtonGroup, Content, Heading, IllustratedMessage} from '../src';
 import Cloud from '../spectrum-illustrations/linear/Cloud';
 import Folder from '../spectrum-illustrations/gradient/generic2/FolderOpen';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof IllustratedMessage> = {
   component: IllustratedMessage,
@@ -24,9 +24,10 @@ const meta: Meta<typeof IllustratedMessage> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof IllustratedMessage>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <IllustratedMessage {...args}>
       <Cloud />
       <Heading>
@@ -42,8 +43,8 @@ export const Example = {
   )
 };
 
-export const NoButtonLongText = {
-  render: (args: any) => (
+export const NoButtonLongText: Story = {
+  render: (args) => (
     <IllustratedMessage {...args}>
       <Cloud />
       <Heading>
@@ -56,8 +57,8 @@ export const NoButtonLongText = {
   )
 };
 
-export const NoButtonShortText = {
-  render: (args: any) => (
+export const NoButtonShortText: Story = {
+  render: (args) => (
     <IllustratedMessage {...args}>
       <Cloud />
       <Heading>
@@ -70,8 +71,8 @@ export const NoButtonShortText = {
   )
 };
 
-export const Gradient = {
-  render: (args: any) => (
+export const Gradient: Story = {
+  render: (args) => (
     <IllustratedMessage {...args}>
       <Folder />
       <Heading>
diff --git a/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx b/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
index 9364e53d772..6646577d75a 100644
--- a/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Content, Heading, InlineAlert} from '../src';
-import type {Meta} from '@storybook/react';
-import {useState} from 'react';
+import {Button, Content, Heading, InlineAlert, InlineAlertProps} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 
 const meta: Meta<typeof InlineAlert> = {
   component: InlineAlert,
@@ -23,9 +23,10 @@ const meta: Meta<typeof InlineAlert> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof InlineAlert>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <InlineAlert {...args}>
       <Heading>Payment Information</Heading>
       <Content>
@@ -35,7 +36,7 @@ export const Example = {
   )
 };
 
-const DynamicExampleRender = (args: any) => {
+const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
   let [shown, setShown] = useState(false);
 
   return (
@@ -53,6 +54,6 @@ const DynamicExampleRender = (args: any) => {
   );
 };
 
-export const DynamicExample = {
-  render: (args: any) => <DynamicExampleRender {...args} />
+export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
+  render: (args) => <DynamicExampleRender {...args} />
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Link.tsx b/packages/@react-spectrum/s2/chromatic/Link.tsx
index 106c52b87b9..e309a2cc80d 100644
--- a/packages/@react-spectrum/s2/chromatic/Link.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Link.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Link} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {StaticColorDecorator} from '../stories/utils';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
@@ -30,9 +30,10 @@ const meta: Meta<typeof Link> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Link>;
 
-export const Inline = {
-  render: (args: any) => (
+export const Inline: Story = {
+  render: (args) => (
     <p
       className={style({
         font: 'body',
@@ -46,8 +47,8 @@ export const Inline = {
   )
 };
 
-export const Standalone = {
-  render: (args: any) => (
+export const Standalone: Story = {
+  render: (args) => (
     <Link {...args} isStandalone>
       The missing link
     </Link>
diff --git a/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx b/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
index 8a23c5cbd5f..72b5f6bf39e 100644
--- a/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
@@ -12,7 +12,7 @@
 
 import {BlendModes, DynamicExample, Example, KeyboardShortcuts, PublishAndExport} from '../stories/Menu.stories';
 import {Menu} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
 
 const meta: Meta<typeof Menu<any>> = {
@@ -25,8 +25,9 @@ const meta: Meta<typeof Menu<any>> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Menu<any>>;
 
-export const Default = {
+export const Default: Story = {
   ...Example,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -36,22 +37,22 @@ export const Default = {
   }
 };
 
-export const WithKeyboardShortcuts = {
+export const WithKeyboardShortcuts: Story = {
   ...KeyboardShortcuts,
   play: async (context) => await Default.play!(context)
 };
 
-export const WithIcons = {
+export const WithIcons: Story = {
   ...PublishAndExport,
   play: async (context) => await Default.play!(context)
 };
 
-export const WithImages = {
+export const WithImages: Story = {
   ...BlendModes,
   play: async (context) => await Default.play!(context)
 };
 
-export const Dynamic = {
+export const Dynamic: Story = {
   ...DynamicExample,
   play: async (context) => await Default.play!(context)
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Meter.stories.tsx b/packages/@react-spectrum/s2/chromatic/Meter.stories.tsx
index 89385196120..f4a7dcf8170 100644
--- a/packages/@react-spectrum/s2/chromatic/Meter.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Meter.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {Meter} from '../src/Meter';
 import {StaticColorDecorator} from '../stories/utils';
 
@@ -24,9 +24,10 @@ const meta: Meta<typeof Meter> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Meter>;
 
-export const Example = {
-  render: (args: any) => <Meter {...args} />,
+export const Example: Story = {
+  render: (args) => <Meter {...args} />,
   args: {
     label: 'Storage space',
     value: 80,
diff --git a/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
index bd9b8a0e360..3ab7a4a13a9 100644
--- a/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
@@ -20,7 +20,9 @@ import {
   Text
 } from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {NumberFieldProps} from '../src/NumberField';
+import {ReactElement} from 'react';
 import {shortName} from './utils';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
@@ -33,6 +35,7 @@ const meta: Meta<typeof NumberField> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof NumberField>;
 
 let states = [
   {hideStepper: true},
@@ -45,7 +48,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = ({...args}) => {
+const Template = (args: NumberFieldProps): ReactElement => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
@@ -61,27 +64,27 @@ const Template = ({...args}) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: Story = {
+  render: (args) => <Template {...args} />
 };
 
-export const DefaultValue = {
-  render: Template,
+export const DefaultValue: Story = {
+  render: (args) => <Template {...args} />,
   args: {
     defaultValue: 10
   }
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: Story = {
+  render: (args) => <Template {...args} />,
   args: {
     labelPosition: 'side',
     value: 10
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => <NumberField {...args} />,
+export const ContextualHelpExample: Story = {
+  render: (args) => <NumberField {...args} />,
   args: {
     label: 'Quantity',
     contextualHelp: (
diff --git a/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
index 6dfb2a95789..3a178635211 100644
--- a/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AsyncPickerStory, ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/Picker.stories';
+import {AsyncPickerStory, AsyncPickerStoryType, ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/Picker.stories';
 import {expect} from '@storybook/jest';
 import type {Meta, StoryObj} from '@storybook/react';
 import {Picker} from '../src';
@@ -27,8 +27,9 @@ const meta: Meta<typeof Picker<any>> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Picker<any>>;
 
-export const Default = {
+export const Default: Story = {
   ...Example,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -36,31 +37,31 @@ export const Default = {
     let body = canvasElement.ownerDocument.body;
     await within(body).findByRole('listbox');
   }
-} as StoryObj;
+};
 
-export const WithSections = {
+export const WithSections: Story = {
   ...Sections,
-  play: async (context) => await Default.play!(context)
+  play: Default.play
 };
 
-export const DynamicExample = {
+export const DynamicExample: Story = {
   ...Dynamic,
   name: 'Dynamic',
-  play: async (context) => await Default.play!(context)
-} as StoryObj;
+  play: Default.play
+};
 
-export const Icons = {
+export const Icons: Story = {
   ...WithIcons,
   name: 'With Icons',
-  play: async (context) => await Default.play!(context)
-} as StoryObj;
+  play: Default.play
+};
 
-export const WithCustomWidth = {
+export const WithCustomWidth: Story = {
   ...CustomWidth,
-  play: async (context) => await Default.play!(context)
-} as StoryObj;
+  play: Default.play
+};
 
-export const ContextualHelp = {
+export const ContextualHelp: Story = {
   ...ContextualHelpExample,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -70,7 +71,7 @@ export const ContextualHelp = {
   }
 };
 
-export const EmptyAndLoading = {
+export const EmptyAndLoading: Story = {
   render: () => (
     <Picker label="loading" loadingState="loading">
       {[]}
@@ -87,7 +88,7 @@ export const EmptyAndLoading = {
   }
 };
 
-export const AsyncResults = {
+export const AsyncResults: StoryObj<AsyncPickerStoryType> = {
   ...AsyncPickerStory,
   args: {
     ...AsyncPickerStory.args,
diff --git a/packages/@react-spectrum/s2/chromatic/ProgressBar.stories.tsx b/packages/@react-spectrum/s2/chromatic/ProgressBar.stories.tsx
index 1f3b57a7c7f..ec37bf349c5 100644
--- a/packages/@react-spectrum/s2/chromatic/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ProgressBar.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {ProgressBar} from '../src';
 import {StaticColorDecorator} from '../stories/utils';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
@@ -26,14 +26,16 @@ const meta: Meta<typeof ProgressBar> = {
 
 export default meta;
 
-export const Example = {
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Example: Story = {
   args: {
     label: 'Loading…',
     value: 80
   }
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: Story = {
   args: {
     label: 'Loading…',
     value: 80,
@@ -41,7 +43,7 @@ export const LabelPositionSide = {
   }
 };
 
-export const Size = {
+export const Size: Story = {
   render: (args) => (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 24})}>
       <ProgressBar label="S" size="S" {...args} />
@@ -55,7 +57,7 @@ export const Size = {
   }
 };
 
-export const StaticColorWhite = {
+export const StaticColorWhite: Story = {
   args: {
     label: 'Loading',
     value: 80,
@@ -63,7 +65,7 @@ export const StaticColorWhite = {
   }
 };
 
-export const StaticColorBlack = {
+export const StaticColorBlack: Story = {
   args: {
     label: 'Loading',
     value: 80,
@@ -71,14 +73,14 @@ export const StaticColorBlack = {
   }
 };
 
-export const Value0 = {
+export const Value0: Story = {
   args: {
     label: 'Loading',
     value: 0
   }
 };
 
-export const Value100 = {
+export const Value100: Story = {
   args: {
     label: 'Loading',
     value: 100
diff --git a/packages/@react-spectrum/s2/chromatic/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/RadioGroup.stories.tsx
index 876766ce346..9ed3a439146 100644
--- a/packages/@react-spectrum/s2/chromatic/RadioGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/RadioGroup.stories.tsx
@@ -20,7 +20,7 @@ import {
   RadioGroup,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof RadioGroup> = {
@@ -32,8 +32,9 @@ const meta: Meta<typeof RadioGroup> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof RadioGroup>;
 
-export const Example = {
+export const Example: Story = {
   render: (args: any) => (
     <RadioGroup {...args}>
       <Radio value="soccer">Soccer</Radio>
@@ -48,7 +49,7 @@ export const Example = {
 };
 
 
-export const LongLabel = {
+export const LongLabel: Story = {
   render: (args: any) => (
     <RadioGroup styles={style({maxWidth: 128})} {...args}>
       <Radio value="longLabel">Radio with very long label so we can see wrapping</Radio>
@@ -61,7 +62,7 @@ export const LongLabel = {
   }
 };
 
-export const ErrorAndDescription = {
+export const ErrorAndDescription: Story = {
   render: (args: any) => (
     <RadioGroup {...args}>
       <Radio value="soccer">Soccer</Radio>
@@ -82,7 +83,7 @@ export const ErrorAndDescription = {
   }
 };
 
-export const ContextualHelpExample = {
+export const ContextualHelpExample: Story = {
   render: (args: any) => (
     <RadioGroup {...args}>
       <Radio isDisabled value="soccer">Soccer</Radio>
diff --git a/packages/@react-spectrum/s2/chromatic/RangeSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/RangeSlider.stories.tsx
index 5027571e621..2c8d5064af7 100644
--- a/packages/@react-spectrum/s2/chromatic/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/RangeSlider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {RangeSlider} from '../src';
 
 const meta: Meta<typeof RangeSlider> = {
@@ -26,8 +26,9 @@ const meta: Meta<typeof RangeSlider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof RangeSlider>;
 
-export const Example = {
+export const Example: Story = {
   render: (args: any) => <RangeSlider {...args} />,
   args: {
     label: 'Range',
@@ -38,7 +39,7 @@ export const Example = {
   }
 };
 
-export const ContextualHelpExample = {
+export const ContextualHelpExample: Story = {
   render: (args: any) => <RangeSlider {...args} />,
   args: {
     label: 'Range',
diff --git a/packages/@react-spectrum/s2/chromatic/SearchField.stories.tsx b/packages/@react-spectrum/s2/chromatic/SearchField.stories.tsx
index 970ebdd56f6..159a2c37151 100644
--- a/packages/@react-spectrum/s2/chromatic/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SearchField.stories.tsx
@@ -19,7 +19,7 @@ import {
   SearchField,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof SearchField> = {
@@ -31,16 +31,17 @@ const meta: Meta<typeof SearchField> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof SearchField>;
 
-export const Example = {
-  render: (args: any) => <SearchField {...args} />,
+export const Example: Story = {
+  render: (args) => <SearchField {...args} />,
   args: {
     label: 'Search'
   }
 };
 
-export const CustomWidth = {
-  render: (args: any) => <SearchField {...args} styles={style({width: 256})} />,
+export const CustomWidth: Story = {
+  render: (args) => <SearchField {...args} styles={style({width: 256})} />,
   args: {
     label: 'Search'
   },
@@ -51,8 +52,8 @@ export const CustomWidth = {
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => <SearchField {...args} />,
+export const ContextualHelpExample: Story = {
+  render: (args) => <SearchField {...args} />,
   args: {
     label: 'Search',
     contextualHelp: (
diff --git a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
index d861a121554..d6b7b830209 100644
--- a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
@@ -16,7 +16,7 @@ import AlignLeft from '../s2wf-icons/S2_Icon_AlignLeft_20_N.svg';
 import ListBulleted from '../s2wf-icons/S2_Icon_ListBulleted_20_N.svg';
 import ListMultiSelect from '../s2wf-icons/S2_Icon_ListMultiSelect_20_N.svg';
 import ListNumbered from '../s2wf-icons/S2_Icon_ListNumbered_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {SegmentedControl, SegmentedControlItem, Text} from '../src';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
@@ -29,9 +29,10 @@ const meta: Meta<typeof SegmentedControl> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <SegmentedControl {...args}>
       <SegmentedControlItem id="day">Day</SegmentedControlItem>
       <SegmentedControlItem id="week">Week</SegmentedControlItem>
@@ -44,8 +45,8 @@ export const Example = {
   }
 };
 
-export const WithIcons = {
-  render: (args: any) => (
+export const WithIcons: Story = {
+  render: (args) => (
     <SegmentedControl {...args}>
       <SegmentedControlItem id="unordered"><ListBulleted /><Text>Unordered</Text></SegmentedControlItem>
       <SegmentedControlItem id="ordered"><ListNumbered /><Text>Ordered</Text></SegmentedControlItem>
@@ -57,8 +58,8 @@ export const WithIcons = {
   }
 };
 
-export const OnlyIcons = {
-  render: (args: any) => (
+export const OnlyIcons: Story = {
+  render: (args) => (
     <SegmentedControl {...args}>
       <SegmentedControlItem id="align bottom"><AlignBottom /></SegmentedControlItem>
       <SegmentedControlItem id="align center"><AlignCenter /></SegmentedControlItem>
@@ -70,8 +71,8 @@ export const OnlyIcons = {
   }
 };
 
-export const CustomWidthJustified = {
-  render: (args: any) => (
+export const CustomWidthJustified: Story = {
+  render: (args) => (
     <SegmentedControl {...args} styles={style({width: 400})}>
       <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
       <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
diff --git a/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx b/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx
index 8af2179cefe..ac410d8a0c0 100644
--- a/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {Slider} from '../src/Slider';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 
@@ -27,9 +27,10 @@ const meta: Meta<typeof Slider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Slider>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
       <Slider {...args} />
     </div>
@@ -40,8 +41,8 @@ export const Example = {
   }
 };
 
-export const FillOffset = {
-  render: (args: any) => (
+export const FillOffset: Story = {
+  render: (args) => (
     <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
       <Slider {...args} />
     </div>
@@ -57,8 +58,8 @@ export const FillOffset = {
   }
 };
 
-export const FormatOptions = {
-  render: (args: any) => (
+export const FormatOptions: Story = {
+  render: (args) => (
     <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
       <Slider {...args} styles={style({width: 300})} />
     </div>
@@ -71,8 +72,8 @@ export const FormatOptions = {
   }
 };
 
-export const MinMaxValue = {
-  render: (args: any) => (
+export const MinMaxValue: Story = {
+  render: (args) => (
     <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
       <Slider {...args} />
     </div>
@@ -84,8 +85,8 @@ export const MinMaxValue = {
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => (
+export const ContextualHelpExample: Story = {
+  render: (args) => (
     <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
       <Slider {...args} />
     </div>
diff --git a/packages/@react-spectrum/s2/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/s2/chromatic/StatusLight.stories.tsx
index c79f27a1ad3..0609196c455 100644
--- a/packages/@react-spectrum/s2/chromatic/StatusLight.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/StatusLight.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {StatusLight} from '../src';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
@@ -23,16 +23,17 @@ const meta: Meta<typeof StatusLight> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof StatusLight>;
 
-export const Example = {
-  render: (args: any) => <StatusLight {...args}>Status</StatusLight>,
+export const Example: Story = {
+  render: (args) => <StatusLight {...args}>Status</StatusLight>,
   args: {
     variant: 'positive'
   }
 };
 
-export const LongLabel = {
-  render: (args: any) => <StatusLight {...args} styles={style({maxWidth: 128})}>StatusLight with very long label so we can see wrapping</StatusLight>,
+export const LongLabel: Story = {
+  render: (args) => <StatusLight {...args} styles={style({maxWidth: 128})}>StatusLight with very long label so we can see wrapping</StatusLight>,
   args: {
     variant: 'positive'
   }
diff --git a/packages/@react-spectrum/s2/chromatic/Switch.stories.tsx b/packages/@react-spectrum/s2/chromatic/Switch.stories.tsx
index 14a0a2cc685..21d87025cc4 100644
--- a/packages/@react-spectrum/s2/chromatic/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Switch.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Switch} from '../src';
 
@@ -27,11 +27,12 @@ const meta: Meta<typeof Switch> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Switch>;
 
-export const Example = {
-  render: (args: any) => <Switch {...args}>Wi-Fi</Switch>
+export const Example: Story = {
+  render: (args) => <Switch {...args}>Wi-Fi</Switch>
 };
 
-export const LongLabel = {
-  render: (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>)
+export const LongLabel: Story = {
+  render: (args) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>)
 };
diff --git a/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
index 3445d905035..16d3a38de6b 100644
--- a/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
@@ -11,13 +11,13 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, TableBody, TableHeader, TableView} from '../src';
+import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, TableBody, TableHeader, TableView, TableViewProps} from '../src';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 import {SortDescriptor} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList} from '@react-stately/data';
-import {useState} from 'react';
 
 const meta: Meta<typeof TableView> = {
   component: TableView,
@@ -29,7 +29,7 @@ const meta: Meta<typeof TableView> = {
 
 export default meta;
 
-const StaticTable = (args: any) => (
+const StaticTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
     <TableHeader>
       <Column isRowHeader>Name</Column>
@@ -64,18 +64,18 @@ const StaticTable = (args: any) => (
   </TableView>
 );
 
-export const Example = {
+export const Example: StoryObj<typeof StaticTable> = {
   render: StaticTable,
   args: {
     selectionMode: 'multiple',
-    onResize: null,
-    onResizeStart: null,
-    onResizeEnd: null,
-    onLoadMore: null
+    onResize: undefined,
+    onResizeStart: undefined,
+    onResizeEnd: undefined,
+    onLoadMore: undefined
   }
 };
 
-export const DisabledRows = {
+export const DisabledRows: StoryObj<typeof StaticTable> = {
   ...Example,
   args: {
     ...Example.args,
@@ -103,7 +103,7 @@ let items = [
   {id: 10, foo: 'Foo 10', bar: 'Bar 10', baz: 'Baz 10', yah: 'Yah long long long 10'}
 ];
 
-const DynamicTable = (args: any) => (
+const DynamicTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
     <TableHeader columns={columns}>
       {(column) => (
@@ -122,7 +122,7 @@ const DynamicTable = (args: any) => (
   </TableView>
 );
 
-export const Dynamic = {
+export const Dynamic: StoryObj<typeof DynamicTable> = {
   render: DynamicTable,
   args: {
     ...Example.args,
@@ -144,7 +144,7 @@ function renderEmptyState() {
   );
 }
 
-const EmptyStateTable = (args: any) => (
+const EmptyStateTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
     <TableHeader columns={columns}>
       {(column) => (
@@ -157,7 +157,7 @@ const EmptyStateTable = (args: any) => (
   </TableView>
 );
 
-export const EmptyState = {
+export const EmptyState: StoryObj<typeof EmptyStateTable> = {
   render: EmptyStateTable,
   args: {
     ...Example.args
@@ -171,7 +171,7 @@ let dividerColumns = [
   {name: 'Yah', id: 'yah'}
 ];
 
-const ShowDividers = (args: any) => {
+const ShowDividers = (args: TableViewProps): ReactElement => {
   return (
     <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={dividerColumns}>
@@ -192,7 +192,7 @@ const ShowDividers = (args: any) => {
   );
 };
 
-export const ShowDividersStory = {
+export const ShowDividersStory: StoryObj<typeof ShowDividers> = {
   render: ShowDividers,
   args: {
     ...Example.args
@@ -207,7 +207,7 @@ let alignColumns = [
   {name: 'Yah', id: 'yah', align: 'end'}
 ];
 
-const TextAlign = (args: any) => {
+const TextAlign = (args: TableViewProps): ReactElement => {
   return (
     <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={alignColumns}>
@@ -228,7 +228,7 @@ const TextAlign = (args: any) => {
   );
 };
 
-export const TextAlignStory = {
+export const TextAlignStory: StoryObj<typeof TextAlign> = {
   render: TextAlign,
   args: {
     ...Example.args
@@ -243,7 +243,7 @@ interface Character {
   birth_year: number
 }
 
-const OnLoadMoreTable = (args: any) => {
+const OnLoadMoreTable = (args: TableViewProps): ReactElement => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -284,7 +284,7 @@ const OnLoadMoreTable = (args: any) => {
   );
 };
 
-export const OnLoadMoreTableStory  = {
+export const OnLoadMoreTableStory: StoryObj<typeof OnLoadMoreTable> = {
   render: OnLoadMoreTable,
   args: {
     ...Example.args
@@ -321,9 +321,9 @@ let sortitems = [
   {id: 20, name: 'T', height: '20', weight: '2'}
 ];
 
-const SortableTable = (args: any) => {
+const SortableTable = (args: TableViewProps): ReactElement => {
   let [items, setItems] = useState(sortitems);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
   let onSortChange = (sortDescriptor: SortDescriptor) => {
     let {direction = 'ascending', column = 'name'} = sortDescriptor;
 
@@ -359,22 +359,31 @@ const SortableTable = (args: any) => {
   );
 };
 
-export const Sorting = {
+export const Sorting: StoryObj<typeof SortableTable> = {
   ...Example,
   render: SortableTable,
   name: 'sortable'
 };
 
-let resizeColumn = [
+type ColumnType = {
+  name: string,
+  id: string,
+  isRowHeader?: boolean,
+  showDivider?: boolean,
+  align?: 'start' | 'center' | 'end',
+  allowsResizing?: boolean
+};
+
+let resizeColumn: ColumnType[] = [
   {name: 'Name', id: 'name', isRowHeader: true, allowsResizing: true, showDivider: true, align: 'end'},
   {name: 'Height', id: 'height', align: 'center'},
   {name: 'Weight', id: 'weight', allowsResizing: true, align: 'center'}
 ];
 
-const SortableResizableTable = (args: any) => {
-  let {isSortable} = args;
+const SortableResizableTable = (args: TableViewProps & {isSortable?: boolean, columns: ColumnType[]}): ReactElement => {
+  let {isSortable = false} = args;
   let [items, setItems] = useState(sortitems);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
   let onSortChange = (sortDescriptor: SortDescriptor) => {
     let {direction = 'ascending', column = 'name'} = sortDescriptor;
 
@@ -391,7 +400,7 @@ const SortableResizableTable = (args: any) => {
   };
 
   return (
-    <TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
+    <TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : undefined} onSortChange={isSortable ? onSortChange : undefined} styles={style({width: 384, height: 320})}>
       <TableHeader columns={args.columns}>
         {(column: any) => (
           <Column isRowHeader={column.isRowHeader} allowsSorting={column.isSortable} allowsResizing={column.allowsResizing} align={column.align}>{column.name}</Column>
@@ -410,7 +419,7 @@ const SortableResizableTable = (args: any) => {
   );
 };
 
-export const ResizingTable = {
+export const ResizingTable: StoryObj<typeof SortableResizableTable> = {
   render: SortableResizableTable,
   args: {
     onResize: action('onResize'),
diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
index 3db86eb4db8..308f982b242 100644
--- a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
@@ -13,7 +13,7 @@
 import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
 import {Text} from '@react-spectrum/s2';
@@ -27,9 +27,10 @@ const meta: Meta<typeof Tabs> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Tabs>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <Tabs {...args} styles={style({width: 450, height: 256})} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR">Founding of Rome</Tab>
@@ -56,8 +57,8 @@ export const Example = {
   )
 };
 
-export const Disabled = {
-  render: (args: any) => (
+export const Disabled: Story = {
+  render: (args) => (
     <Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
       <TabList>
         <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
@@ -77,8 +78,8 @@ export const Disabled = {
   )
 };
 
-export const Icons = {
-  render: (args: any) => (
+export const Icons: Story = {
+  render: (args) => (
     <Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 208, height: 144})} labelBehavior="hide">
       <TabList>
         <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
diff --git a/packages/@react-spectrum/s2/chromatic/TagGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/TagGroup.stories.tsx
index 54f797c9861..3e559ee5fbf 100644
--- a/packages/@react-spectrum/s2/chromatic/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TagGroup.stories.tsx
@@ -23,7 +23,7 @@ import {
   TagGroup,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
@@ -46,9 +46,10 @@ const meta: Meta<typeof TagGroup<any>> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof TagGroup>;
 
-export let Example = {
-  render: (args: any) => {
+export const Example: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
@@ -99,8 +100,8 @@ let items: Array<ITagItem> = [
   {name: 'Vanilla', id: 'vanilla'},
   {name: 'Coffee', id: 'coffee'}
 ];
-export let Dynamic = {
-  render: (args: any) => {
+export const Dynamic: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
@@ -122,8 +123,8 @@ export let Dynamic = {
 const SRC_URL_1 =
   'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png';
 
-export let Disabled = {
-  render: (args: any) => {
+export const Disabled: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
@@ -162,8 +163,8 @@ function renderEmptyState() {
     </span>
   );
 }
-export let Empty = {
-  render: (args: any) => {
+export const Empty: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
@@ -176,8 +177,8 @@ export let Empty = {
     label: 'Ice cream flavor'
   }
 };
-export let DefaultEmpty = {
-  render: (args: any) => {
+export const DefaultEmpty: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
@@ -191,8 +192,8 @@ export let DefaultEmpty = {
   }
 };
 
-export let Links = {
-  render: (args: any) => {
+export const Links: Story = {
+  render: (args) => {
     return (
       <TagGroup {...args} disabledKeys={new Set(['google'])}>
         <Tag id="adobe" href="https://adobe.com">Adobe</Tag>
@@ -207,8 +208,8 @@ export let Links = {
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => {
+export const ContextualHelpExample: Story = {
+  render: (args) => {
     if (args.onRemove) {
       args.onRemove = action('remove');
     }
diff --git a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
index b73b4b94706..551a9dc3e56 100644
--- a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
@@ -14,7 +14,7 @@ import {Button, Form, TextArea, TextField} from '../src';
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof TextField> = {
@@ -29,16 +29,17 @@ const meta: Meta<typeof TextField> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof TextField>;
 
-export const Example = {
-  render: (args: any) => <TextField {...args} />,
+export const Example: Story = {
+  render: (args) => <TextField {...args} />,
   args: {
     label: 'Name'
   }
 };
 
-export const Validation = {
-  render: (args: any) => (
+export const Validation: Story = {
+  render: (args) => (
     <Form>
       <TextField {...args} />
       <Button type="submit" variant="primary">Submit</Button>
@@ -50,8 +51,8 @@ export const Validation = {
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => (
+export const ContextualHelpExample: Story = {
+  render: (args) => (
     <TextField {...args} />
   ),
   args: {
@@ -76,15 +77,15 @@ export const ContextualHelpExample = {
   }
 };
 
-export const TextAreaExample = {
-  render: (args: any) => <TextArea {...args} />,
+export const TextAreaExample: StoryObj<typeof TextArea> = {
+  render: (args) => <TextArea {...args} />,
   args: {
     label: 'Comment'
   }
 };
 
-export const CustomWidth = {
-  render: (args: any) => <TextField {...args} styles={style({width: 384})} />,
+export const CustomWidth: Story = {
+  render: (args) => <TextField {...args} styles={style({width: 384})} />,
   args: {
     label: 'Name'
   },
@@ -95,8 +96,8 @@ export const CustomWidth = {
   }
 };
 
-export const SmallWidth = {
-  render: (args: any) => <TextField {...args} styles={style({width: 48})} />,
+export const SmallWidth: Story = {
+  render: (args) => <TextField {...args} styles={style({width: 48})} />,
   args: {
     label: 'Name'
   },
@@ -107,8 +108,8 @@ export const SmallWidth = {
   }
 };
 
-export const UNSAFEWidth = {
-  render: (args: any) => <TextField {...args} UNSAFE_style={{width: 384}} />,
+export const UNSAFEWidth: Story = {
+  render: (args) => <TextField {...args} UNSAFE_style={{width: 384}} />,
   args: {
     label: 'Name'
   },
@@ -119,8 +120,8 @@ export const UNSAFEWidth = {
   }
 };
 
-export const InForm = {
-  render: (args: any) => (
+export const InForm: Story = {
+  render: (args) => (
     <Form>
       <TextField {...args} />
       <Button type="submit" variant="primary">Submit</Button>
@@ -137,8 +138,8 @@ export const InForm = {
   }
 };
 
-export const FormCustomWidth = {
-  render: (args: any) => (
+export const FormCustomWidth: Story = {
+  render: (args) => (
     <Form styles={style({width: 384})} labelPosition={args.labelPosition}>
       <TextField {...args} />
       <Button type="submit" variant="primary">Submit</Button>
diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
index 6263b5b6aea..9c4b0b64558 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
@@ -12,11 +12,12 @@
 
 import {categorizeArgTypes, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {ReactElement} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
-import {Text, ToggleButton} from '../src';
+import {Text, ToggleButton, ToggleButtonProps} from '../src';
 
 const meta: Meta<typeof ToggleButton> = {
   component: ToggleButton,
@@ -43,7 +44,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = (args) => {
+const Template = (args: ToggleButtonProps): ReactElement => {
   let {children, ...otherArgs} = args;
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
@@ -69,25 +70,25 @@ const Template = (args) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithIcon = {
-  render: Template,
+export const WithIcon: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><NewIcon /><Text>Press me</Text></>
   }
 };
 
-export const IconOnly = {
-  render: Template,
+export const IconOnly: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <NewIcon />
   }
 };
 
-export const Truncate = {
+export const Truncate: StoryObj<typeof Template> = {
   render: (args) => (
     <div style={{display: 'flex', gap: 8, width: 160}}>
       <ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx
index 5880b2b82b1..38524ac7be6 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx
@@ -13,7 +13,7 @@
 import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
 import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
 import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton, ToggleButtonGroup} from '../src';
 import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';
@@ -31,6 +31,7 @@ const meta: Meta<typeof ToggleButtonGroup> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ToggleButtonGroup>;
 
 let justifiedStyle = style({
   width: {
@@ -46,7 +47,7 @@ let justifiedStyle = style({
   }
 });
 
-export const Example = {
+export const Example: Story = {
   render: (args) => (
     <ToggleButtonGroup {...args}>
       <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
@@ -56,7 +57,7 @@ export const Example = {
   )
 };
 
-export const IconOnly = {
+export const IconOnly: Story = {
   render: (args) => (
     <ToggleButtonGroup {...args}>
       <ToggleButton id={1} aria-label="Bold"><Bold /></ToggleButton>
@@ -66,7 +67,7 @@ export const IconOnly = {
 )
 };
 
-export const Justified = {
+export const Justified: Story = {
   render: (args) => (
     <ToggleButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
       <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
diff --git a/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
index 9e7f0586a46..84745f67505 100644
--- a/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta<typeof Tooltip> = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Tooltip> = {
   ...Example,
   play: async ({canvasElement}) => {
     await userEvent.tab();
@@ -35,7 +35,7 @@ export const Default = {
   }
 } as StoryObj;
 
-export const WithLongLabel = {
+export const WithLongLabel: StoryObj<typeof Tooltip> = {
   ...LongLabel,
-  play: async (context) => await Default.play!(context)
+  play: Default.play
 } as StoryObj;
diff --git a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
index 31db84a5fe8..b74ee791c71 100644
--- a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionMenu, Collection, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
+import {ActionMenu, Collection, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeView, TreeViewItem, TreeViewItemContent, TreeViewItemProps, TreeViewProps} from '../src';
 import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 
 const meta: Meta<typeof TreeView> = {
   component: TreeView,
@@ -28,7 +29,7 @@ const meta: Meta<typeof TreeView> = {
 
 export default meta;
 
-function TreeExample(props) {
+function TreeExample(props: TreeViewProps): ReactElement {
   return (
     <div style={{width: '300px', height: '320px'}}>
       <TreeView
@@ -139,11 +140,11 @@ function TreeExample(props) {
 }
 
 
-export const TreeStatic = {
+export const TreeStatic: StoryObj<typeof TreeExample> = {
   render: (args) => <TreeExample {...args} />
 };
 
-export const TreeSelection = {
+export const TreeSelection: StoryObj<typeof TreeExample> = {
   ...TreeStatic,
   args: {
     selectionMode: 'multiple',
@@ -151,7 +152,7 @@ export const TreeSelection = {
   }
 };
 
-export const TreeIsDetached = {
+export const TreeIsDetached: StoryObj<typeof TreeExample> = {
   ...TreeStatic,
   args: {
     isDetached: true,
@@ -160,7 +161,7 @@ export const TreeIsDetached = {
   }
 };
 
-export const TreeIsEmphasized = {
+export const TreeIsEmphasized: StoryObj<typeof TreeExample> = {
   ...TreeStatic,
   args: {
     isEmphasized: true,
@@ -169,7 +170,7 @@ export const TreeIsEmphasized = {
   }
 };
 
-export const TreeIsDetachedIsEmphasized = {
+export const TreeIsDetachedIsEmphasized: StoryObj<typeof TreeExample> = {
   ...TreeStatic,
   args: {
     isDetached: true,
@@ -179,7 +180,7 @@ export const TreeIsDetachedIsEmphasized = {
   }
 };
 
-export const TreeIsDetachedMobile = {
+export const TreeIsDetachedMobile: StoryObj<typeof TreeExample> = {
   ...TreeStatic,
   args: {
     isDetached: true,
@@ -188,8 +189,14 @@ export const TreeIsDetachedMobile = {
   }
 };
 
+interface TreeViewItemType {
+  id: string,
+  name: string,
+  icon: ReactElement,
+  childItems?: TreeViewItemType[]
+}
 
-let rows = [
+let rows: TreeViewItemType[] = [
   {id: 'projects', name: 'Projects', icon: <Folder />, childItems: [
     {id: 'project-1', name: 'Project 1 Level 1', icon: <FileTxt />},
     {id: 'project-2', name: 'Project 2 Level 1', icon: <Folder />, childItems: [
@@ -220,7 +227,7 @@ let rows = [
   ]}
 ];
 
-const DynamicTreeItem = (props) => {
+const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
@@ -240,16 +247,14 @@ const DynamicTreeItem = (props) => {
           </ActionMenu>
         </TreeViewItemContent>
         <Collection items={childItems}>
-          {(item: any) => (
+          {(item: TreeViewItemType) => (
             <DynamicTreeItem
               id={item.id}
               icon={item.icon}
               childItems={item.childItems}
               textValue={item.name}
               name={item.name}
-              href={props.href}>
-              {item.name}
-            </DynamicTreeItem>
+              href={props.href} />
           )}
         </Collection>
       </TreeViewItem>
@@ -257,10 +262,10 @@ const DynamicTreeItem = (props) => {
   );
 };
 
-const TreeExampleDynamic = (args) => (
+const TreeExampleDynamic = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', height: '320px', display: 'flex', flexDirection: 'column'}}>
     <TreeView aria-label="test dynamic tree" items={rows} {...args}>
-      {(item: any) => (
+      {(item: TreeViewItemType) => (
         <DynamicTreeItem
           id={item.id}
           icon={item.icon}
@@ -272,7 +277,7 @@ const TreeExampleDynamic = (args) => (
   </div>
 );
 
-export const Dynamic = {
+export const Dynamic: StoryObj<typeof TreeExampleDynamic> = {
   render: (args) => <TreeExampleDynamic {...args} />,
   args: {
     disabledKeys: ['project-2C', 'project-5'],
@@ -281,7 +286,7 @@ export const Dynamic = {
 };
 
 
-function renderEmptyState() {
+function renderEmptyState(): ReactElement {
   return (
     <IllustratedMessage>
       <FolderOpen />
@@ -295,8 +300,8 @@ function renderEmptyState() {
   );
 }
 
-export const Empty = {
-  render: TreeExampleDynamic,
+export const Empty: StoryObj<typeof TreeExampleDynamic> = {
+  render: (args) => <TreeExampleDynamic {...args} />,
   args: {
     renderEmptyState,
     items: []
diff --git a/packages/@react-spectrum/s2/chromatic/utils.tsx b/packages/@react-spectrum/s2/chromatic/utils.tsx
index e0ffca20578..47f8dd92877 100644
--- a/packages/@react-spectrum/s2/chromatic/utils.tsx
+++ b/packages/@react-spectrum/s2/chromatic/utils.tsx
@@ -12,7 +12,7 @@
 
 import {generatePowerset} from '@react-spectrum/story-utils';
 
-export function shortName(key, value) {
+export function shortName(key: string, value: any): string {
   let returnVal = '';
   switch (key) {
     case 'defaultSelected':
@@ -76,7 +76,7 @@ export function shortName(key, value) {
   return returnVal;
 }
 
-export function generateComboChunks(opts: {states: Array<object>, exclude?: (merged: any) => boolean, numChunks: number}) {
+export function generateComboChunks(opts: {states: Array<object>, exclude?: (merged: any) => boolean, numChunks: number}): any[] {
   let {states, exclude, numChunks} = opts;
   let combos = generatePowerset(states, exclude);
   let chunks: any[] = [];
diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx
index 2145077a512..058e78e63d7 100644
--- a/packages/@react-spectrum/s2/src/Accordion.tsx
+++ b/packages/@react-spectrum/s2/src/Accordion.tsx
@@ -14,7 +14,7 @@ import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 're
 import {DisclosureContext} from './Disclosure';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
-import React, {createContext, forwardRef} from 'react';
+import React, {Context, createContext, forwardRef} from 'react';
 import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -43,12 +43,14 @@ const accordion = style({
   flexDirection: 'column'
 }, getAllowedOverrides({height: true}));
 
-export const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const AccordionContext: Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 /**
  * An accordion is a container for multiple disclosures.
  */
-export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
+export const Accordion:
+  React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx
index da8ff4ac558..4f7255034fa 100644
--- a/packages/@react-spectrum/s2/src/ActionBar.tsx
+++ b/packages/@react-spectrum/s2/src/ActionBar.tsx
@@ -13,8 +13,8 @@
 import {ActionButtonGroup} from './ActionButtonGroup';
 import {announce} from '@react-aria/live-announcer';
 import {CloseButton} from './CloseButton';
+import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope, useKeyboard} from 'react-aria';
 // @ts-ignore
@@ -88,9 +88,11 @@ export interface ActionBarProps extends SlotProps {
   scrollRef?: RefObject<HTMLElement | null>
 }
 
-export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ActionBarContext: Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
-export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ActionBar:
+  ForwardRefExoticComponent<ActionBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index f745883a11c..40c4918e53e 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -15,8 +15,8 @@ import {AvatarContext} from './Avatar';
 import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };
 import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {NotificationBadgeContext} from './NotificationBadge';
@@ -238,13 +238,15 @@ const avatarSize = {
   X: 26
 } as const;
 
-export const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionButtonContext: Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>> | null>(null);
 
 /**
  * ActionButtons allow users to perform an action.
  * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.
  */
-export const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionButton:
+  ForwardRefExoticComponent<ActionButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
index 17033acc4be..45c66e6ca64 100644
--- a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {AriaLabelingProps} from '@react-types/shared';
+import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps, Toolbar} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -72,12 +72,14 @@ export const actionGroupStyle = style({
 }, getAllowedOverrides({height: true}));
 
 
-export const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
+export const ActionButtonGroupContext: Context<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement> | null> = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement> | null>(null);
 
 /**
  * An ActionButtonGroup is a grouping of related ActionButtons.
  */
-export const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ActionButtonGroup:
+  ForwardRefExoticComponent<ActionButtonGroupProps & RefAttributes<HTMLDivElement>> =
+forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index ed891a42d70..1957737d121 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -12,8 +12,8 @@
 
 import {ActionButton, ActionButtonProps} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {Context, createContext, forwardRef, ReactElement, RefAttributes} from 'react';
 import {ContextValue} from 'react-aria-components';
-import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType} from './types';
 // @ts-ignore
@@ -32,12 +32,14 @@ export interface ActionMenuProps<T> extends
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ActionMenuContext = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionMenuContext: Context<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>> | null>(null);
 
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
  */
-export const ActionMenu = /*#__PURE__*/(forwardRef as forwardRefType)(function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionMenu:
+  <T extends object>(props: ActionMenuProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
+/*#__PURE__*/(forwardRef as forwardRefType)(function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});
diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx
index c8ed9643e34..2025d779bea 100644
--- a/packages/@react-spectrum/s2/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/s2/src/AlertDialog.tsx
@@ -17,8 +17,8 @@ import {CenterBaseline} from './CenterBaseline';
 import {chain} from '@react-aria/utils';
 import {Content, Heading} from './Content';
 import {Dialog} from './Dialog';
-import {DOMProps, DOMRef} from '@react-types/shared';
-import {forwardRef, ReactNode} from 'react';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -77,7 +77,9 @@ const icon = style({
 /**
  * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
  */
-export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
+export const AlertDialog:
+  ForwardRefExoticComponent<AlertDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     autoFocusButton,
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index 6ea34ff2bdd..8cfdc6141a9 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, forwardRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -53,12 +53,14 @@ const imageStyles = style({
   }
 }, getAllowedOverrides({width: false}));
 
-export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
+export const AvatarContext: Context<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>> | null> = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>> | null>(null);
 
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.
  */
-export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+export const Avatar:
+  ForwardRefExoticComponent<AvatarProps & RefAttributes<DOMRefValue<HTMLImageElement>>> =
+forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
index 2bba0fa7b4b..ba0097935cd 100644
--- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx
+++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
@@ -12,8 +12,8 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
+import {Context, createContext, CSSProperties, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, CSSProperties, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -35,7 +35,7 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
   styles?: StylesPropWithoutWidth
 }
 
-export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const AvatarGroupContext: Context<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 const avatar = style({
   marginStart: {
@@ -68,7 +68,9 @@ const container = style({
 /**
  * An avatar group is a grouping of avatars that are related to each other.
  */
-export const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const AvatarGroup:
+  ForwardRefExoticComponent<AvatarGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);
   let domRef = useDOMRef(ref);
   let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 8766942111c..c87ff07c5b6 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -17,7 +17,7 @@ import {control, getAllowedOverrides, StyleProps} from './style-utils' with {typ
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
-import React, {createContext, forwardRef, ReactNode} from 'react';
+import React, {Context, createContext, forwardRef, ReactNode} from 'react';
 import {SkeletonWrapper} from './Skeleton';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -55,7 +55,7 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
   children: ReactNode
 }
 
-export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const BadgeContext: Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 const badge = style<BadgeStyleProps>({
   ...control({shape: 'default', wrap: true, icon: true}),
@@ -165,7 +165,9 @@ const badge = style<BadgeStyleProps>({
 /**
  * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
  */
-export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const Badge:
+  React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);
   let {
     children,
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 5436152eefd..61c04347daf 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -28,8 +28,8 @@ import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
 import {baseColor, focusRing, size, style} from '../style' with { type: 'macro' };
 import ChevronIcon from '../ui-icons/Chevron';
 import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';
+import {Context, createContext, forwardRef, Fragment, ReactElement, ReactNode, RefAttributes, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {inertValue, useLayoutEffect} from '@react-aria/utils';
@@ -66,7 +66,7 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children: ReactNode
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
+export const BreadcrumbsContext: Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>> | null> = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>> | null>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
@@ -99,7 +99,9 @@ const wrapper = style<BreadcrumbsStyleProps>({
 const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
 /** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
-export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+export const Breadcrumbs:
+  <T extends object>(props: BreadcrumbsProps<T> & RefAttributes<DOMRefValue<HTMLOListElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
   let {
@@ -296,7 +298,9 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
 }
 
 /** An individual Breadcrumb for Breadcrumbs. */
-export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
+export const Breadcrumb:
+  (props: BreadcrumbProps & RefAttributes<DOMRefValue<HTMLLIElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
   let {href, target, rel, download, ping, referrerPolicy} = props;
   let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index fd4d42728e6..761e968157b 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -13,8 +13,8 @@
 import {baseColor, focusRing, fontRelative, lightDark, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useEffect, useState} from 'react';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -61,8 +61,8 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
   children: ReactNode
 }
 
-export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
-export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const ButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>> | null>(null);
+export const LinkButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>> | null> = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>> | null>(null);
 
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
@@ -297,7 +297,9 @@ const gradient = style({
  * They have multiple styles for various needs, and are ideal for calling attention to
  * where a user needs to do something in order to move forward in a flow.
  */
-export const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const Button:
+  ForwardRefExoticComponent<ButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
   props = useFormProps(props);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -426,7 +428,9 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
 /**
  * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
  */
-export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
+export const LinkButton:
+  ForwardRefExoticComponent<LinkButtonProps & RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>> =
+forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
   props = useFormProps(props);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index 318302ea473..f4dc050dbdb 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {ButtonContext, LinkButtonContext} from './Button';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useCallback, useRef} from 'react';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -57,7 +57,7 @@ interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   isHidden?: boolean
 }
 
-export const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});
+export const ButtonGroupContext: Context<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',
@@ -104,7 +104,9 @@ const buttongroup = style<ButtonGroupStyleProps>({
 /**
  * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
  */
-export const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const ButtonGroup:
+  ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index b737c1505fc..c5223085da5 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -17,7 +17,7 @@ import {Checkbox} from './Checkbox';
 import {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';
 import {ContentContext, FooterContext, TextContext} from './Content';
-import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
+import {Context, createContext, CSSProperties, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {DividerContext} from './Divider';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, inertValue} from '@react-aria/utils';
@@ -346,8 +346,8 @@ let footer = style({
   paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
-export const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');
-export const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalCardViewContext: Context<'div' | typeof GridListItem> = createContext<'div' | typeof GridListItem>('div');
+export const CardContext: Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 interface InternalCardContextValue {
   isQuiet: boolean,
@@ -377,7 +377,9 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
-export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const Card:
+  ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
   [props] = useSpectrumContextProps(props, ref, CardContext);
   let domRef = useDOMRef(ref);
   let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;
@@ -498,7 +500,9 @@ export interface CardPreviewProps extends UnsafeStyles, DOMProps {
   children: ReactNode
 }
 
-export const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
+export const CardPreview:
+  ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);
   let {UNSAFE_className = '', UNSAFE_style} = props;
   let domRef = useDOMRef(ref);
@@ -544,7 +548,9 @@ const collectionImage = style({
   userSelect: 'none'
 });
 
-export const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
+export const CollectionCardPreview:
+  ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size} = useContext(InternalCardContext)!;
   return (
     <CardPreview {...props} ref={ref}>
@@ -559,7 +565,9 @@ export const CollectionCardPreview = forwardRef(function CollectionCardPreview(p
 
 export interface AssetCardProps extends Omit<CardProps, 'density'> {}
 
-export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
+export const AssetCard:
+  ForwardRefExoticComponent<AssetCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Card {...props} ref={ref} density="regular">
       {composeRenderProps(props.children, children => (
@@ -620,7 +628,9 @@ export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const UserCard:
+  ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">
@@ -672,7 +682,9 @@ export interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'>
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {
+export const ProductCard:
+  ForwardRefExoticComponent<ProductCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 01680e96e29..56314e609b0 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -23,7 +23,7 @@ import {
   WaterfallLayout
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
-import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
+import {Context, createContext, forwardRef, ReactElement, RefAttributes, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -187,9 +187,13 @@ const wrapperStyles = style({
   size: 'fit'
 }, getAllowedOverrides({height: true}));
 
-export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const CardViewContext:
+  Context<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>> | null> =
+  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>> | null>(null);
 
-export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardView:
+  <T extends object>(props: CardViewProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {
     children,
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 2a0540b6f17..c79bf525a8f 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -14,8 +14,8 @@ import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGr
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import CheckmarkIcon from '../ui-icons/Checkmark';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
@@ -41,7 +41,9 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
   children?: ReactNode
 }
 
-export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext:
+  Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>> | null> =
+  createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>> | null>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -130,7 +132,9 @@ const iconSize = {
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox:
+  ForwardRefExoticComponent<CheckboxProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index 8ccf4f5e777..1b27a90cd8e 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {CheckboxContext} from './Checkbox';
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, 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';
@@ -49,12 +49,14 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   isEmphasized?: boolean
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const CheckboxGroupContext: Context<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>> | null>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
  */
-export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const CheckboxGroup:
+  ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx
index f562f9e2d84..1f3816b7465 100644
--- a/packages/@react-spectrum/s2/src/ClearButton.tsx
+++ b/packages/@react-spectrum/s2/src/ClearButton.tsx
@@ -17,9 +17,9 @@ import {
 } from 'react-aria-components';
 import {controlSize} from './style-utils' with {type: 'macro'};
 import CrossIcon from '../ui-icons/Cross';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {forwardRef} from 'react';
+import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 interface ClearButtonStyleProps {
@@ -63,7 +63,9 @@ const visibleClearButton = style<ClearButtonRenderProps>({
   }
 });
 
-export const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton:
+  ForwardRefExoticComponent<ClearButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let {size = 'M', isStaticColor = false, ...rest} = props;
   let domRef = useFocusableRef(ref);
   return (
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index ec981959ef2..1dae7691ee2 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -12,8 +12,8 @@
 
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {Button, ButtonProps, ContextValue} from 'react-aria-components';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 // @ts-ignore
@@ -79,12 +79,16 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
   }
 }, getAllowedOverrides());
 
-export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext:
+  Context<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * A CloseButton allows a user to dismiss a dialog.
  */
-export const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const CloseButton:
+  ForwardRefExoticComponent<CloseButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
   let {UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
index 508a73de8a2..8996dc1cefc 100644
--- a/packages/@react-spectrum/s2/src/CoachMark.tsx
+++ b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -31,10 +31,14 @@ import {colorScheme, getAllowedOverrides, StyleProps} from './style-utils' with
 import {ColorSchemeContext} from './Provider';
 import {ContentContext, FooterContext, KeyboardContext, TextContext} from './Content';
 import {
+  Context,
   createContext,
   ForwardedRef,
   forwardRef,
+  ForwardRefExoticComponent,
+  ReactElement,
   ReactNode,
+  RefAttributes,
   useContext,
   useRef
 } from 'react';
@@ -320,9 +324,11 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
-export const CoachMarkContext = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
+export const CoachMarkContext: Context<ContextValue<CoachMarkProps, HTMLElement>> = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
 
-export const CoachMark = forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
+export const CoachMark:
+  ForwardRefExoticComponent<CoachMarkProps & RefAttributes<HTMLElement>> =
+forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
   let colorScheme = useContext(ColorSchemeContext);
   [props, ref] = useContextProps(props, ref, CoachMarkContext);
   let {UNSAFE_style} = props;
@@ -480,7 +486,9 @@ interface CoachMarkIndicatorProps {
   children: ReactNode,
   isActive?: boolean
 }
-export const CoachMarkIndicator = /*#__PURE__*/ (forwardRef as forwardRefType)(function CoachMarkIndicator(props: CoachMarkIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
+export const CoachMarkIndicator:
+  (props: CoachMarkIndicatorProps & RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CoachMarkIndicator(props: CoachMarkIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
   const {children, isActive} = props;
   let objRef = useObjectRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx
index f66df9f008f..546ba238192 100644
--- a/packages/@react-spectrum/s2/src/ColorArea.tsx
+++ b/packages/@react-spectrum/s2/src/ColorArea.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {createContext, forwardRef} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -25,12 +25,16 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}
 
-export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorAreaContext:
+  Context<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
  */
-export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorArea:
+  ForwardRefExoticComponent<ColorAreaProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index b937f10e543..b800d9c031f 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -15,7 +15,7 @@ import {
   ColorFieldProps as AriaColorFieldProps,
   ContextValue
 } from 'react-aria-components';
-import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, Ref, RefAttributes, 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';
@@ -34,12 +34,14 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
+export const ColorFieldContext: Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef>> = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+export const ColorField:
+  ForwardRefExoticComponent<ColorFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
+forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 8e373009287..00f67ec6fe0 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -19,8 +19,8 @@ import {
   useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes, useRef} from 'react';
 import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, useRef} from 'react';
 import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {style} from '../style' with {type: 'macro'};
@@ -31,12 +31,16 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
   label?: string
 }
 
-export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSliderContext:
+  Context<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>> =
+createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.
  */
-export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSlider:
+  ForwardRefExoticComponent<ColorSliderProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
index 8ba5bdad466..56930818f49 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
@@ -17,7 +17,7 @@ import {
   ContextValue,
   parseColor
 } from 'react-aria-components';
-import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, JSX, ReactElement, RefAttributes, useContext, useMemo} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -43,13 +43,17 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
   useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
-export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const ColorSwatchContext:
+  Context<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalColorSwatchContext: Context<SpectrumColorSwatchContextValue | null> = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+export const ColorSwatch:
+  ForwardRefExoticComponent<ColorSwatchProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
   let ctx = useContext(InternalColorSwatchContext);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
index 9028a4f65e4..63bb8cbfa1d 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
@@ -12,7 +12,7 @@
 
 import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';
 import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
-import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes} from 'react';
 import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
 import {focusRing, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -39,12 +39,16 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
   rounding?: 'none' | 'default' | 'full'
 }
 
-export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSwatchPickerContext:
+  Context<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSwatchPicker:
+  ForwardRefExoticComponent<ColorSwatchPickerProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx
index 7d773bd14e4..d937cd472bb 100644
--- a/packages/@react-spectrum/s2/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx
@@ -17,7 +17,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {createContext, forwardRef} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils';
@@ -31,12 +31,16 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
   size?: number
 }
 
-export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorWheelContext:
+  Context<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorWheel:
+  ForwardRefExoticComponent<ColorWheelProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
@@ -46,7 +50,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
   let thickness = 24;
   let innerRadius = outerRadius - 24;
   return (
-    <AriaColorWheel 
+    <AriaColorWheel
       {...props}
       outerRadius={outerRadius}
       innerRadius={innerRadius}
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 5e0fbc124f5..2b11d1d2756 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -46,7 +46,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {Context, createContext, CSSProperties, ForwardedRef, forwardRef, ReactElement, ReactNode, Ref, RefAttributes, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {createLeafComponent} from '@react-aria/collections';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
@@ -104,7 +104,9 @@ export interface ComboBoxProps<T extends object> extends
     loadingState?: LoadingState
 }
 
-export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
+export const ComboBoxContext:
+  Context<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>> =
+  createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
   ...controlBorderRadius('sm'),
@@ -328,7 +330,9 @@ let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({siz
 /**
  * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+export const ComboBox:
+  <T extends object>(props: ComboBoxProps<T> & RefAttributes<TextFieldRef<HTMLInputElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
 
   let formContext = useContext(FormContext);
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index 7c64e6fe7d1..4afd146885e 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {inertValue} from '@react-aria/utils';
 import {StyleString} from '../style/types';
@@ -31,9 +31,13 @@ interface HeadingProps extends ContentProps {
   level?: number
 }
 
-export const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
+export const HeadingContext:
+  Context<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>> =
+  createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
 
-export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
+export const Heading:
+  ForwardRefExoticComponent<HeadingProps & RefAttributes<DOMRefValue<HTMLHeadingElement>>> =
+forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
@@ -52,9 +56,13 @@ function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   );
 });
 
-export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
+export const HeaderContext:
+  Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>> =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
 
-export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
+export const Header:
+  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
@@ -72,9 +80,13 @@ export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRe
   );
 });
 
-export const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ContentContext:
+  Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+export const Content:
+  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
@@ -91,9 +103,13 @@ export const Content = forwardRef(function Content(props: ContentProps, ref: DOM
   );
 });
 
-export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
+export const TextContext:
+  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
 
-export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
+export const Text:
+  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
@@ -125,9 +141,13 @@ export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   return text;
 });
 
-export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
+export const KeyboardContext:
+  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
+export const Keyboard:
+  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(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;
@@ -144,9 +164,13 @@ export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: D
   );
 });
 
-export const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
+export const FooterContext:
+  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
+export const Footer:
+  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 9fdad216498..a11f11e9128 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -1,8 +1,8 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {ContentContext, FooterContext, HeadingContext} from './Content';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 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';
 import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';
@@ -46,12 +46,16 @@ const popover = style({
   padding: 24
 });
 
-export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ContextualHelpContext:
+  Context<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
  */
-export const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ContextualHelp:
+  ForwardRefExoticComponent<ContextualHelpProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx
index ea9e03ed417..7b87c0f274d 100644
--- a/packages/@react-spectrum/s2/src/CustomDialog.tsx
+++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx
@@ -11,8 +11,8 @@
  */
 
 import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
@@ -58,7 +58,9 @@ const dialogStyle = style({
 /**
  * A CustomDialog is a floating window with a custom layout.
  */
-export const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
+export const CustomDialog:
+  ForwardRefExoticComponent<CustomDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
   let {
     size,
     isDismissible,
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index 9cbbc841d6c..ea586fab62e 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -14,8 +14,8 @@ import {ButtonGroupContext} from './ButtonGroup';
 import {CloseButton} from './CloseButton';
 import {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ImageContext} from './Image';
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
@@ -95,7 +95,9 @@ export const dialogInner = style({
  * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
  * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
  */
-export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
+export const Dialog:
+  ForwardRefExoticComponent<DialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
   let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -178,7 +180,7 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                   {children}
                 </Provider>
               </div>
-              {props.isDismissible && 
+              {props.isDismissible &&
                 <CloseButton styles={style({marginBottom: 12})} />
               }
             </div>
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index bddb06cc2fb..40eeeded699 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -18,7 +18,7 @@ import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
+import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -39,7 +39,9 @@ export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' |
   children: ReactNode
 }
 
-export const DisclosureContext = createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DisclosureContext:
+  Context<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const disclosure = style({
   color: 'heading',
@@ -68,7 +70,9 @@ const disclosure = style({
 /**
  * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
  */
-export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
+export const Disclosure:
+  React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);
   let {
     size = 'M',
@@ -99,7 +103,7 @@ export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps,
 
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
   /** The heading level of the disclosure header.
-   * 
+   *
    * @default 3
    */
   level?: number,
@@ -245,12 +249,16 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
 /**
  * A wrapper element for the disclosure title that can contain other elements not part of the trigger.
  */
-export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
+export const DisclosureHeader:
+  (props: DisclosureHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
+  /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
 
 /**
  * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
  */
-export const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosureTitle:
+  ForwardRefExoticComponent<DisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     level = 3,
     UNSAFE_style,
@@ -318,7 +326,9 @@ const panelStyles = style({
 /**
  * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
  */
-export const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosurePanel:
+  ForwardRefExoticComponent<DisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {
     UNSAFE_style,
     UNSAFE_className = '',
diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx
index 09a3cd8a90d..f9a31f4997a 100644
--- a/packages/@react-spectrum/s2/src/Divider.tsx
+++ b/packages/@react-spectrum/s2/src/Divider.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} 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, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -40,7 +40,7 @@ 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<Partial<DividerProps>, DOMRefValue>>(null);
+export const DividerContext: Context<ContextValue<Partial<DividerProps>, DOMRefValue>> = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
 export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
   ...staticColor(),
@@ -92,7 +92,9 @@ export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
  * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
  * They can also be used to establish rhythm and hierarchy.
  */
-export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
+export const Divider:
+  ForwardRefExoticComponent<DividerProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+/*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, DividerContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index 63e0149136a..894d2bd700e 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
@@ -39,7 +39,9 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
     size?: 'S' | 'M' | 'L'
 }
 
-export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DropZoneContext:
+  Context<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>> =
+createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',
@@ -92,7 +94,9 @@ const banner = style({
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+export const DropZone:
+  ForwardRefExoticComponent<DropZoneProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index d4bbe520d38..244e0047de1 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -11,14 +11,14 @@
  */
 
 import AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
-import {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';
+import {Alignment, DOMRef, DOMRefValue, NecessityIndicator} from '@react-types/shared';
 import AsteriskIcon from '../ui-icons/Asterisk';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';
 import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';
 import {ContextualHelpContext} from './ContextualHelp';
 import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
-import {ForwardedRef, forwardRef, ReactNode} from 'react';
+import {ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -42,7 +42,9 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   children?: ReactNode
 }
 
-export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const FieldLabel:
+  ForwardRefExoticComponent<FieldLabelProps & RefAttributes<DOMRefValue<HTMLLabelElement>>> =
+forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     isDisabled,
@@ -186,7 +188,9 @@ const fieldGroupStyles = style({
   }
 });
 
-export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const FieldGroup:
+  ForwardRefExoticComponent<FieldGroupProps & RefAttributes<HTMLDivElement>> =
+forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   return (
     <Group
       ref={ref}
@@ -214,7 +218,9 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
 
 export interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}
 
-export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input:
+  ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>> =
+forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   return (
     <RACInput
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index 0e65b03f6e7..0d884b6da6d 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/packages/@react-spectrum/s2/src/Form.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
-import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useMemo} from 'react';
+import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
@@ -34,7 +34,7 @@ export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className
   children: ReactNode
 }
 
-export const FormContext = createContext<Partial<FormStyleProps | null>>(null);
+export const FormContext: Context<Partial<FormStyleProps | null>> = createContext<Partial<FormStyleProps | null>>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
   let isSkeleton = useIsSkeleton();
@@ -65,7 +65,9 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+export const Form:
+  ForwardRefExoticComponent<FormProps & RefAttributes<DOMRefValue<HTMLFormElement>>> =
+/*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
   let {
     labelPosition = 'top',
     labelAlign,
diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
index d46c31210a5..4a2615746c6 100644
--- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
+++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
@@ -13,8 +13,8 @@
 import {ButtonGroupContext} from './ButtonGroup';
 import {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ContentContext, HeaderContext, HeadingContext} from './Content';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils';
@@ -120,7 +120,9 @@ export const dialogInner = style({
 /**
  * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
  */
-export const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
+export const FullscreenDialog:
+  ForwardRefExoticComponent<FullscreenDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
   let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/Icon.tsx b/packages/@react-spectrum/s2/src/Icon.tsx
index c1c56833fc3..4d8fa877baa 100644
--- a/packages/@react-spectrum/s2/src/Icon.tsx
+++ b/packages/@react-spectrum/s2/src/Icon.tsx
@@ -75,8 +75,12 @@ export interface IllustrationContextValue extends IconContextValue {
   size?: 'S' | 'M' | 'L'
 }
 
-export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
-export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
+export const IconContext:
+  Context<ContextValue<Partial<IconContextValue>, SVGElement>> =
+  createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
+export const IllustrationContext:
+  Context<ContextValue<Partial<IllustrationContextValue>, SVGElement>> =
+  createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
 
 const iconStyles = style({
   size: 20,
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index a7de53690e9..b0ce36e13ba 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -12,9 +12,9 @@
 
 import {ButtonGroupContext} from './ButtonGroup';
 import {ContentContext, HeadingContext} from './Content';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, Provider} from 'react-aria-components';
 import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {IllustrationContext} from './Icon';
@@ -147,13 +147,17 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
   isDropTarget?: boolean
 }
 
-export const IllustratedMessageContext = createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const IllustratedMessageContext:
+  Context<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An IllustratedMessage displays an illustration and a message, usually
  * for an empty state or an error page.
  */
-export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+export const IllustratedMessage:
+  ForwardRefExoticComponent<S2SpectrumIllustratedMessageProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
index 246a98106ce..1ea2088fc0e 100644
--- a/packages/@react-spectrum/s2/src/Image.tsx
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -1,5 +1,5 @@
+import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, HTMLAttributeReferrerPolicy, ReactNode, RefAttributes, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -57,7 +57,9 @@ interface ImageContextValue extends ImageProps {
   hidden?: boolean
 }
 
-export const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
+export const ImageContext:
+  Context<ContextValue<Partial<ImageContextValue>, HTMLDivElement>> =
+  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
 
 type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
 interface State {
@@ -67,7 +69,7 @@ interface State {
   loadTime: number
 }
 
-type Action = 
+type Action =
   | {type: 'update', src: string}
   | {type: 'loaded'}
   | {type: 'revealed'}
@@ -133,7 +135,9 @@ const imgStyles = style({
   transitionDuration: 500
 });
 
-export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+export const Image:
+  ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLDivElement>> =
+forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -155,7 +159,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     slot
   } = props;
   let hidden = (props as ImageContextValue).hidden;
-  
+
   let {revealAll, register, unregister, load} = useContext(group);
   let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);
 
diff --git a/packages/@react-spectrum/s2/src/ImageCoordinator.tsx b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
index 9d2c6d8f978..8e64f9d46b4 100644
--- a/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
+++ b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
@@ -31,7 +31,7 @@ const defaultContext: ImageGroupValue = {
   load() {}
 };
 
-export const DefaultImageGroup = createImageGroup();
+export const DefaultImageGroup: ImageGroup = createImageGroup();
 
 export function createImageGroup(): ImageGroup {
   return createContext(defaultContext);
diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx
index e5a420a2ad9..344283e5ec8 100644
--- a/packages/@react-spectrum/s2/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx
@@ -12,7 +12,7 @@
 
 import AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
 import CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
-import {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';
+import {ComponentType, Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useEffect, useRef} from 'react';
 import {ContentContext, HeadingContext} from './Content';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
@@ -53,7 +53,9 @@ interface InlineStylesProps {
   fillStyle?: 'border' | 'subtleFill' | 'boldFill'
 }
 
-export const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InlineAlertContext:
+  Context<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   ...focusRing(),
@@ -212,7 +214,9 @@ const content = style({
  * Inline alerts display a non-modal message associated with objects in a view.
  * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  */
-export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+export const InlineAlert:
+  ForwardRefExoticComponent<InlineAlertProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index c218555ed57..0ce338d3efe 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -11,8 +11,8 @@
  */
 
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
@@ -38,7 +38,9 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
   children: ReactNode
 }
 
-export const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const LinkContext:
+  Context<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>> =
+  createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
   ...focusRing(),
@@ -82,7 +84,9 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isSt
  * Links allow users to navigate to a different location.
  * They can be presented inline inside a paragraph or as standalone text.
  */
-export const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
+export const Link:
+  ForwardRefExoticComponent<LinkProps & RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>> =
+/*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
   let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index aa990d5744b..6c20a1c691f 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -34,7 +34,7 @@ import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
-import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
+import {Context, createContext, forwardRef, JSX, ReactElement, ReactNode, RefAttributes, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';
 import {forwardRefType} from './types';
@@ -88,7 +88,9 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   hideLinkOutIcon?: boolean
 }
 
-export const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const MenuContext:
+  Context<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 const menuItemGrid = {
   size: {
@@ -323,7 +325,9 @@ let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'
 /**
  * Menus display a list of actions or options that a user can choose.
  */
-export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const Menu:
+  <T extends object>(props: MenuProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MenuContext);
   let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 0f791c80bb0..0667d2e4fd1 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {createContext, forwardRef, ReactNode} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -53,7 +53,9 @@ export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className
   label?: ReactNode
 }
 
-export const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const MeterContext:
+  Context<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style({
   ...bar()
@@ -97,7 +99,9 @@ const fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({
  * Meters are visual representations of a quantity or an achievement.
  * Their progress is determined by user actions, rather than system actions.
  */
-export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
+export const Meter:
+  ForwardRefExoticComponent<MeterProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MeterContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index 67913f99699..3054ab5a00b 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -12,8 +12,8 @@
 
 import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, MutableRefObject, RefAttributes, useCallback, useContext} from 'react';
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -50,7 +50,9 @@ const modalOverlayStyles = style({
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
-export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+export const Modal:
+  ForwardRefExoticComponent<ModalProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
diff --git a/packages/@react-spectrum/s2/src/NotificationBadge.tsx b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
index a2d86d8ef90..ab6ed12fc6c 100644
--- a/packages/@react-spectrum/s2/src/NotificationBadge.tsx
+++ b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
@@ -18,7 +18,7 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFormatter} from '@internationalized/number';
-import React, {createContext, forwardRef} from 'react';
+import React, {Context, createContext, forwardRef, ForwardRefExoticComponent} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -44,7 +44,9 @@ interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps>
   staticColor?: 'black' | 'white' | 'auto'
 }
 
-export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const NotificationBadgeContext:
+  Context<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style({
   display: {
@@ -115,7 +117,9 @@ const badge = style({
 /**
  * Notification badges are used to indicate new or pending activity .
  */
-export const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const NotificationBadge:
+  ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 63fab753df9..9fa7ea5dc0b 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -22,8 +22,8 @@ import {
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
+import {Context, createContext, CSSProperties, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, Ref, RefAttributes, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
@@ -54,7 +54,9 @@ export interface NumberFieldProps extends
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
+export const NumberFieldContext:
+  Context<ContextValue<Partial<NumberFieldProps>, TextFieldRef>> =
+  createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
   ...controlBorderRadius('sm'),
@@ -137,7 +139,9 @@ const stepperContainerStyles = style({
 /**
  * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
  */
-export const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
+export const NumberField:
+  ForwardRefExoticComponent<NumberFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
+forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index 5928c3795ce..74cb6ad902f 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -70,7 +70,7 @@ import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -122,7 +122,9 @@ export interface PickerProps<T extends object> extends
 
 interface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}
 
-export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const PickerContext:
+  Context<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   ...focusRing(),
@@ -262,7 +264,9 @@ let InsideSelectValueContext = createContext(false);
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const Picker:
+  <T extends object>(props: PickerProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
index aebacdad945..a8728a5d1c0 100644
--- a/packages/@react-spectrum/s2/src/Popover.tsx
+++ b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -22,8 +22,8 @@ import {
 } from 'react-aria-components';
 import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef} from '@react-types/shared';
-import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {forwardRef, ForwardRefExoticComponent, MutableRefObject, RefAttributes, useCallback, useContext} from 'react';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
@@ -149,7 +149,9 @@ let arrow = style({
   }
 });
 
-export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const PopoverBase:
+  ForwardRefExoticComponent<PopoverProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     hideArrow = false,
     UNSAFE_className = '',
@@ -238,7 +240,9 @@ const dialogStyle = style({
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
+export const Popover:
+  ForwardRefExoticComponent<PopoverDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
   const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;
 
diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
index 0b2cf4a2a43..e3d015965e2 100644
--- a/packages/@react-spectrum/s2/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {createContext, forwardRef, ReactNode} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -55,7 +55,9 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
   label?: ReactNode
 }
 
-export const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressBarContext:
+  Context<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const indeterminateLTR = keyframes(`
   0% {
@@ -170,7 +172,9 @@ const indeterminateAnimation = style({
  * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
  * They can represent either determinate or indeterminate progress.
  */
-export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBar:
+  ForwardRefExoticComponent<ProgressBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {
     label, size = 'M',
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index 8780c7f03b3..d22ef2c26d3 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
-import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
@@ -34,7 +34,9 @@ export interface ProgressCircleStyleProps {
   isIndeterminate?: boolean
 }
 
-export const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressCircleContext:
+  Context<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 // Double check the types passed to each style, may not need all for each
 const wrapper = style<ProgressCircleStyleProps>({
@@ -99,7 +101,9 @@ let pxToRem = px => (px / 16) + 'rem';
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
  */
-export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressCircle:
+  ForwardRefExoticComponent<ProgressCircleProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
   let {
     size = 'M',
diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
index f1ed9c6292b..c0d87a04bea 100644
--- a/packages/@react-spectrum/s2/src/Provider.tsx
+++ b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -12,7 +12,7 @@
 
 import type {ColorScheme, Router} from '@react-types/provider';
 import {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
-import {createContext, JSX, ReactNode, useContext} from 'react';
+import {Context, createContext, JSX, ReactNode, useContext} from 'react';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
 import {mergeStyles} from '../style/runtime';
@@ -48,7 +48,9 @@ export interface ProviderProps extends UnsafeStyles {
   elementType?: keyof JSX.IntrinsicElements
 }
 
-export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
+export const ColorSchemeContext:
+  Context<ColorScheme | 'light dark' | null> =
+  createContext<ColorScheme | 'light dark' | null>(null);
 
 export function Provider(props: ProviderProps): ReactNode {
   let result = <ProviderInner {...props} />;
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 436bd712a77..032fd96fd29 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -18,9 +18,9 @@ import {
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ReactNode, useContext, useRef} from 'react';
+import {forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 
@@ -107,7 +107,9 @@ const circle = style<RenderProps>({
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio:
+  ForwardRefExoticComponent<RadioProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+/*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index a9f503028a7..cc5dbf7901b 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -19,7 +19,7 @@ import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps}
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
-import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
+import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -47,13 +47,17 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   isEmphasized?: boolean
 }
 
-export const RadioGroupContext = createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const RadioGroupContext:
+  Context<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const RadioGroup:
+  ForwardRefExoticComponent<RadioGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index e197db55f1e..23d0c41755b 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes, useContext, useRef} from 'react';
 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';
@@ -37,9 +37,11 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   endName?: string
 }
 
-export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
+export const RangeSliderContext: Context<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>> = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
-export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider:
+  ForwardRefExoticComponent<RangeSliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 494bc6175c7..dee94bfc014 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -19,7 +19,7 @@ import {
 import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
-import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, Ref, RefAttributes, 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';
@@ -40,12 +40,16 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
+export const SearchFieldContext:
+  Context<ContextValue<Partial<SearchFieldProps>, TextFieldRef>> =
+  createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
 
 /**
  * A SearchField is a text field designed for searches.
  */
-export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+export const SearchField:
+  ForwardRefExoticComponent<SearchFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
+/*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index 8ce68abcdaa..a48aa1260ef 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
+import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, Key} from '@react-types/shared';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject, useCallback, useContext, useRef} from 'react';
 import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
@@ -52,7 +52,9 @@ export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps
   isDisabled?: boolean
 }
 
-export const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const SegmentedControlContext:
+  Context<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const segmentedControl = style({
   display: 'flex',
@@ -149,7 +151,9 @@ const InternalSegmentedControlContext = createContext<InternalSegmentedControlCo
 /**
  * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
  */
-export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
+export const SegmentedControl:
+  ForwardRefExoticComponent<SegmentedControlProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
     defaultSelectedKey,
@@ -218,7 +222,9 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
 /**
  * A SegmentedControlItem represents an option within a SegmentedControl.
  */
-export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+export const SegmentedControlItem:
+  ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+/*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
index de5673602ec..ad5ae0b509e 100644
--- a/packages/@react-spectrum/s2/src/Skeleton.tsx
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
+import {cloneElement, Context, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
 import {color, style} from '../style' with {type: 'macro'};
 import {inertValue, mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
@@ -51,7 +51,7 @@ export type SkeletonElement = ReactElement<{
   inert?: boolean | 'true'
 }>;
 
-export const SkeletonContext = createContext<boolean | null>(null);
+export const SkeletonContext: Context<boolean | null> = createContext<boolean | null>(null);
 export function useIsSkeleton(): boolean {
   return useContext(SkeletonContext) || false;
 }
diff --git a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
index a3e3ada3381..4e78a4629b2 100644
--- a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
+++ b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
@@ -11,7 +11,7 @@
  */
 
 import {createLeafComponent} from '@react-aria/collections';
-import {ReactNode} from 'react';
+import {ReactElement, ReactNode, RefAttributes} from 'react';
 import {Skeleton} from './Skeleton';
 
 export interface SkeletonCollectionProps {
@@ -23,7 +23,9 @@ let cache = new WeakMap();
 /**
  * A SkeletonCollection generates placeholder content within a collection component such as CardView.
  */
-export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+export const SkeletonCollection:
+  (props: SkeletonCollectionProps & RefAttributes<object>) => ReactElement | null =
+createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
   // Cache rendering based on node object identity. This allows the children function to randomize
   // its content (e.g. heights) and preserve on re-renders.
   // TODO: do we need a `dependencies` prop here?
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 657a17b1bab..c9672c95db2 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -20,8 +20,8 @@ import {
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject, useContext, useRef} from 'react';
 import {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
@@ -67,7 +67,9 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
   fillOffset?: number
 }
 
-export const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
+export const SliderContext:
+  Context<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 const slider = style({
   font: controlFont(),
@@ -390,7 +392,9 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   );
 }
 
-export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider:
+  ForwardRefExoticComponent<SliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index f62161bf0b1..b004e7606fc 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {CenterBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
 import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {style} from '../style' with {type: 'macro'};
 import {Text} from './Content';
@@ -49,7 +49,9 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
   role?: 'status'
 }
 
-export const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const StatusLightContext:
+  Context<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style<StatusLightStyleProps>({
   display: 'flex',
@@ -106,7 +108,9 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
  * Status lights are used to color code categories and labels commonly found in data visualization.
  * When status lights have a semantic meaning, they should use semantic variant colors.
  */
-export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+export const StatusLight:
+  ForwardRefExoticComponent<StatusLightProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+/*#__PURE__*/ forwardRef(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 897cc383954..9f6ba689733 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -18,8 +18,8 @@ import {
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
@@ -45,7 +45,9 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
   children?: ReactNode
 }
 
-export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext:
+  Context<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>> =
+createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -153,7 +155,9 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Switch:
+  ForwardRefExoticComponent<SwitchProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+/*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 4447ca218f5..643e05e1bd7 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -59,7 +59,7 @@ import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
 import {useActionBarContainer} from './ActionBar';
@@ -262,12 +262,16 @@ export class S2TableLayout<T> extends TableLayout<T> {
   }
 }
 
-export const TableContext = createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const TableContext:
+  Context<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */
-export const TableView = forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
+export const TableView:
+  ForwardRefExoticComponent<TableViewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TableContext);
   let {
     UNSAFE_style,
@@ -378,7 +382,9 @@ export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' |
 /**
  * The body of a `<Table>`, containing the table rows.
  */
-export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableBody:
+  <T extends object>(props: TableBodyProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {items, renderEmptyState, children, dependencies = []} = props;
   let domRef = useDOMRef(ref);
   let {loadingState, onLoadMore} = useContext(InternalTableContext);
@@ -526,7 +532,9 @@ export interface ColumnProps extends RACColumnProps {
 /**
  * A column within a `<Table>`.
  */
-export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
+export const Column:
+  ForwardRefExoticComponent<ColumnProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
@@ -868,7 +876,9 @@ export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style
 /**
  * A header within a `<Table>`, containing the table columns.
  */
-export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableHeader:
+  <T extends object>(props: TableHeaderProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
   let {isQuiet} = useContext(InternalTableContext);
@@ -1015,7 +1025,9 @@ export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'sh
 /**
  * A cell within a table row.
  */
-export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {
+export const Cell:
+  ForwardRefExoticComponent<CellProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let tableVisualOptions = useContext(InternalTableContext);
@@ -1124,7 +1136,9 @@ export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'ch
 /**
  * A row within a `<Table>`.
  */
-export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, dependencies = [], ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const Row:
+  <T extends object>(props: RowProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, dependencies = [], ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index da5ecc5d5db..e8c1ead137d 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -29,7 +29,7 @@ import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {CollectionBuilder} from '@react-aria/collections';
-import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
@@ -76,7 +76,9 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
   children: ReactNode
 }
 
-export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const TabsContext:
+  Context<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
 const InternalTabsContext = createContext<Partial<TabsProps>>({});
 const CollapseContext = createContext({
   showTabs: true,
@@ -99,7 +101,9 @@ const tabs = style({
 /**
  * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
  */
-export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+export const Tabs:
+  ForwardRefExoticComponent<TabsProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index a480bcfbca8..96d0e964d4e 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -48,7 +48,7 @@ import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import React, {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -87,7 +87,9 @@ export interface PickerProps<T extends object> extends
     /** Id for the SelectedValue so we can label using it. */
     valueId?: string
 }
-export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const PickerContext:
+  Context<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 const inputButton = style({
   ...focusRing(),
   ...fieldInput(),
@@ -281,7 +283,9 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
+let _Picker: <
+  T extends object>(props: PickerProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
 export {_Picker as Picker};
 
 
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index e84b33ad0f7..e099951a62f 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -32,8 +32,8 @@ import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' wi
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
+import {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel, helpTextStyles} from './Field';
 import {flushSync} from 'react-dom';
@@ -81,12 +81,16 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
   onGroupAction?: () => void
 }
 
-export const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const TagGroupContext:
+  Context<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 const InternalTagGroupContext = createContext<TagGroupProps<any>>({});
 
 /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
-export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TagGroup:
+  <T extends object>(props: TagGroupProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);
   props = useFormProps(props);
   let {onRemove} = props;
@@ -487,7 +491,9 @@ const avatarSize = {
 } as const;
 
 /** An individual Tag for TagGroups. */
-export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
+export const Tag:
+  (props: TagProps & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
   textValue ||= typeof children === 'string' ? children : undefined;
   let ctx = useSlottedContext(TagGroupContext);
   let isInRealDOM = Boolean(ctx?.size);
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 182ff4107ba..8b4c059b951 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -21,7 +21,7 @@ import {
   useSlottedContext
 } from 'react-aria-components';
 import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, Ref, RefAttributes, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
@@ -41,14 +41,18 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
+export const TextFieldContext:
+  Context<ContextValue<Partial<TextFieldProps>, TextFieldRef>> =
+  createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
 
 /**
  * TextFields are text inputs that allow users to input custom text entries
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+export const TextField:
+  ForwardRefExoticComponent<TextFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
+forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
   return (
     <TextFieldBase
@@ -61,14 +65,18 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
-export const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
+export const TextAreaContext:
+  Context<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>> =
+  createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
 
 /**
  * TextAreas are multiline text inputs, useful for cases where users have
  * a sizable amount of text to enter. They allow for all customizations that
  * are available to text fields.
  */
-export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+export const TextArea:
+  ForwardRefExoticComponent<TextAreaProps & RefAttributes<TextFieldRef<HTMLTextAreaElement>>> =
+forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);
   return (
     <TextFieldBase
@@ -83,7 +91,12 @@ export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref:
   );
 });
 
-export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase:
+  ForwardRefExoticComponent<TextFieldProps & {
+    children: ReactNode,
+    fieldGroupCss?: StyleString
+  } & RefAttributes<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>> =
+forwardRef(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);
diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx
index 0391cf2bc23..9d20f95dff6 100644
--- a/packages/@react-spectrum/s2/src/Toast.tsx
+++ b/packages/@react-spectrum/s2/src/Toast.tsx
@@ -490,7 +490,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           width: '100%',
           translate: `0 0 ${(-12 * index) / 16}rem`,
           // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.
-          // This allows view transitions to smoothly animate them from where they would be 
+          // This allows view transitions to smoothly animate them from where they would be
           // in the collapsed stack to their final position in the expanded list.
           opacity: index >= 3 ? 0 : 1,
           zIndex: visibleToasts.length - index - 1,
@@ -528,7 +528,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           }
           <Text slot="title">{toast.content.children}</Text>
         </ToastContent>
-        {!isExpanded && visibleToasts.length > 1 && 
+        {!isExpanded && visibleToasts.length > 1 &&
           <ActionButton
             isQuiet
             staticColor="white"
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index b5041a3289a..7b8e6e61ceb 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -12,8 +12,8 @@
 
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
+import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -33,13 +33,17 @@ export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className
   isEmphasized?: boolean
 }
 
-export const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ToggleButtonContext:
+  Context<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
-export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ToggleButton:
+  ForwardRefExoticComponent<ToggleButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
index 24f9ab3f18b..0ceecf99003 100644
--- a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {ActionButtonGroupProps, actionGroupStyle} from './ActionButtonGroup';
+import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps as RACToggleButtonGroupProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef} from 'react';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className'> {
@@ -20,12 +20,16 @@ export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RAC
   isEmphasized?: boolean
 }
 
-export const ToggleButtonGroupContext = createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
+export const ToggleButtonGroupContext:
+  Context<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>> =
+  createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
  */
-export const ToggleButtonGroup = forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ToggleButtonGroup:
+  ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<HTMLDivElement>> =
+forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonGroupContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index 84295a4277c..4e04e722a7b 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -22,8 +22,8 @@ import {
 import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
-import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
-import {DOMRef} from '@react-types/shared';
+import {createContext, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactNode, RefAttributes, useCallback, useContext, useState} from 'react';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
@@ -130,7 +130,9 @@ let InternalTooltipTriggerContext = createContext<Partial<TooltipTriggerProps>>(
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */
-export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
+export const Tooltip:
+  ForwardRefExoticComponent<TooltipProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
   let {children, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 9c6062710a9..e46e6496f3f 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -30,11 +30,11 @@ import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
-import {DOMRef, Key} from '@react-types/shared';
+import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, ForwardRefExoticComponent, JSXElementConstructor, ReactElement, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale} from 'react-aria';
@@ -441,5 +441,5 @@ function ExpandableRowChevron(props: ExpandableRowChevronProps) {
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
-const _TreeView = forwardRef(TreeView);
+const _TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> = forwardRef(TreeView);
 export {_TreeView as TreeView};
diff --git a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
index 8abe5b4b403..9610b152c9b 100644
--- a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ActionButton, AlertDialog, DialogTrigger} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof AlertDialog> = {
   component: AlertDialog as any,
@@ -24,7 +24,9 @@ const meta: Meta<typeof AlertDialog> = {
 
 export default meta;
 
-export const Example = {
+type Story = StoryObj<typeof AlertDialog>;
+
+export const Example: Story = {
   render: (args) => {
     return (
       <DialogTrigger>
diff --git a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
index 80a17ac968c..082131074d0 100644
--- a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof Avatar> = {
@@ -37,6 +37,9 @@ const meta: Meta<typeof Avatar> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" {...args} />
-);
+type Story = StoryObj<typeof Avatar>;
+export const Example: Story = {
+  render: (args) => (
+    <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" {...args} />
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
index 6f6fd83175c..4a5512f1458 100644
--- a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar, AvatarGroup, Provider} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof AvatarGroup> = {
@@ -28,36 +28,44 @@ const meta: Meta<typeof AvatarGroup> = {
 
 export default meta;
 
+type Story = StoryObj<typeof AvatarGroup>;
+
 const SRC_URL_1 =
   'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png';
 const SRC_URL_2 = 'https://i.imgur.com/xIe7Wlb.png';
 
 
-export const Example = (args: any) => (
-  <AvatarGroup aria-label="Online users" {...args}>
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="design provided" src={SRC_URL_2} />
-  </AvatarGroup>
-);
-
-export const WithLabel = (args: any) => (
-  <AvatarGroup label="145 members" {...args}>
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="default adobe" src={SRC_URL_1} />
-    <Avatar alt="design provided" src={SRC_URL_2} />
-  </AvatarGroup>
-);
-
-export const WithProviderBackground = (args: any) => (
-  <Provider background="layer-1" styles={style({padding: 40})}>
+export const Example: Story = {
+  render: (args) => (
+    <AvatarGroup aria-label="Online users" {...args}>
+      <Avatar alt="default adobe" src={SRC_URL_1} />
+      <Avatar alt="default adobe" src={SRC_URL_1} />
+      <Avatar alt="default adobe" src={SRC_URL_1} />
+      <Avatar alt="design provided" src={SRC_URL_2} />
+    </AvatarGroup>
+  )
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
     <AvatarGroup label="145 members" {...args}>
       <Avatar alt="default adobe" src={SRC_URL_1} />
       <Avatar alt="default adobe" src={SRC_URL_1} />
       <Avatar alt="default adobe" src={SRC_URL_1} />
       <Avatar alt="design provided" src={SRC_URL_2} />
     </AvatarGroup>
-  </Provider>
-);
+  )
+};
+
+export const WithProviderBackground: Story = {
+  render: (args) => (
+    <Provider background="layer-1" styles={style({padding: 40})}>
+      <AvatarGroup label="145 members" {...args}>
+        <Avatar alt="default adobe" src={SRC_URL_1} />
+        <Avatar alt="default adobe" src={SRC_URL_1} />
+        <Avatar alt="default adobe" src={SRC_URL_1} />
+        <Avatar alt="design provided" src={SRC_URL_2} />
+      </AvatarGroup>
+    </Provider>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/Badge.stories.tsx b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
index 4424d101ff5..7d497f8ad4b 100644
--- a/packages/@react-spectrum/s2/stories/Badge.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
@@ -12,7 +12,7 @@
 
 import {Badge, Text} from '../src';
 import CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof Badge> = {
@@ -29,21 +29,25 @@ const meta: Meta<typeof Badge> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
-    <Badge {...args}>
-      Licensed
-    </Badge>
-    <Badge {...args}>
-      <CheckmarkCircle aria-label="done" />
-      <Text>Licensed</Text>
-    </Badge>
-    <Badge {...args}>
-      <CheckmarkCircle aria-label="done" />
-    </Badge>
-    <Badge {...args} styles={style({maxWidth: 128})}>
-      <CheckmarkCircle aria-label="done" />
-      <Text>Very long badge with wrapping text to see what happens</Text>
-    </Badge>
-  </div>
-);
+type Story = StoryObj<typeof Badge>;
+
+export const Example: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+      <Badge {...args}>
+        Licensed
+      </Badge>
+      <Badge {...args}>
+        <CheckmarkCircle aria-label="done" />
+        <Text>Licensed</Text>
+      </Badge>
+      <Badge {...args}>
+        <CheckmarkCircle aria-label="done" />
+      </Badge>
+      <Badge {...args} styles={style({maxWidth: 128})}>
+        <CheckmarkCircle aria-label="done" />
+        <Text>Very long badge with wrapping text to see what happens</Text>
+      </Badge>
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
index 2f2ccaf18be..ab5110309d2 100644
--- a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
@@ -12,7 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Breadcrumb, Breadcrumbs} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof Breadcrumbs> = {
   component: Breadcrumbs,
@@ -39,35 +39,40 @@ const meta: Meta<typeof Breadcrumbs> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
 
-export const Example = (args: any) => (
-  <Breadcrumbs {...args}>
-    <Breadcrumb href="/">
-      Home
-    </Breadcrumb>
-    <Breadcrumb href="/react-aria">
-      React Aria
-    </Breadcrumb>
-    <Breadcrumb href="/breadcrumbs">
-      Breadcrumbs
-    </Breadcrumb>
-  </Breadcrumbs>
-);
+export const Example: Story = {
+  render: (args: any) => (
+    <Breadcrumbs {...args}>
+      <Breadcrumb href="/">
+        Home
+      </Breadcrumb>
+      <Breadcrumb href="/react-aria">
+        React Aria
+      </Breadcrumb>
+      <Breadcrumb href="/breadcrumbs">
+        Breadcrumbs
+      </Breadcrumb>
+    </Breadcrumbs>
+  )
+};
 
 let items = [
   {id: 'home', name: 'Home'},
   {id: 'react-aria', name: 'React Aria'},
   {id: 'breadcrumbs', name: 'Breadcrumbs'}
 ];
-export const WithActions = (args: any) => (
-  <Breadcrumbs onAction={action('onAction')} items={items} {...args}>
-    {item => (
-      <Breadcrumb href={item.href}>
-        {item.name}
-      </Breadcrumb>
-    )}
-  </Breadcrumbs>
-);
+export const WithActions: Story = {
+  render: (args: any) => (
+    <Breadcrumbs onAction={action('onAction')} items={items} {...args}>
+      {item => (
+        <Breadcrumb href={item.href}>
+          {item.name}
+        </Breadcrumb>
+      )}
+    </Breadcrumbs>
+  )
+};
 
 let manyItems = [
   {id: 'Folder 1', name: 'The quick brown fox jumps over'},
@@ -79,17 +84,19 @@ let manyItems = [
   {id: 'Folder 7', name: 'April 7'}
 ];
 
-export const Many = (args: any) => (
-  <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
-    <Breadcrumbs items={manyItems} {...args}>
-      {item => (
-        <Breadcrumb>
-          {item.name}
-        </Breadcrumb>
-      )}
-    </Breadcrumbs>
-  </div>
-);
+export const Many: Story = {
+  render: (args: any) => (
+    <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
+      <Breadcrumbs items={manyItems} {...args}>
+        {item => (
+          <Breadcrumb>
+            {item.name}
+          </Breadcrumb>
+        )}
+      </Breadcrumbs>
+    </div>
+  )
+};
 
 let manyItemsWithLinks = [
   {id: 'Folder 1', name: 'The quick brown fox jumps over', href: '/folder1'},
@@ -101,14 +108,16 @@ let manyItemsWithLinks = [
   {id: 'Folder 7', name: 'April 7', href: '/folder7'}
 ];
 
-export const ManyWithLinks = (args: any) => (
-  <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
-    <Breadcrumbs items={manyItemsWithLinks} {...args}>
-      {item => (
-        <Breadcrumb href={item.href}>
-          {item.name}
-        </Breadcrumb>
-      )}
-    </Breadcrumbs>
-  </div>
-);
+export const ManyWithLinks: Story = {
+  render: (args: any) => (
+    <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
+      <Breadcrumbs items={manyItemsWithLinks} {...args}>
+        {item => (
+          <Breadcrumb href={item.href}>
+            {item.name}
+          </Breadcrumb>
+        )}
+      </Breadcrumbs>
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/Button.stories.tsx b/packages/@react-spectrum/s2/stories/Button.stories.tsx
index e35e8cacbd4..737888ebee3 100644
--- a/packages/@react-spectrum/s2/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Button.stories.tsx
@@ -54,7 +54,7 @@ export const Example: Story = {
 };
 
 
-export const PendingButton = {
+export const PendingButton: Story = {
   render: (args) => {
     return (
       <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
diff --git a/packages/@react-spectrum/s2/stories/Card.stories.tsx b/packages/@react-spectrum/s2/stories/Card.stories.tsx
index b48a3f9dac9..5c1a7d031ba 100644
--- a/packages/@react-spectrum/s2/stories/Card.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Card.stories.tsx
@@ -13,7 +13,7 @@
 import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, Skeleton, StatusLight, Text, UserCard} from '../src';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderGradient from '../spectrum-illustrations/gradient/generic2/FolderClose';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg';
 import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
@@ -51,41 +51,44 @@ const meta: Meta<CardProps & {isLoading?: boolean}> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Card>;
 
-export const Example = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CardPreview>
-        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Card title</Text>
-        <ActionMenu>
-          <MenuItem>Test</MenuItem>
-        </ActionMenu>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      {args.size !== 'XS' && <>
-        <Divider />
-        <Footer>
-          <StatusLight size="S" variant="positive">Published</StatusLight>
-        </Footer>
-      </>}
-    </Card>
-    <Card {...args}>
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      {args.size !== 'XS' && <>
-        <Divider />
-        <Footer>
-          <StatusLight size="S" variant="positive">Published</StatusLight>
-        </Footer>
-      </>}
-    </Card>
-  </div>
-);
+export const Example: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CardPreview>
+          <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Card title</Text>
+          <ActionMenu>
+            <MenuItem>Test</MenuItem>
+          </ActionMenu>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        {args.size !== 'XS' && <>
+          <Divider />
+          <Footer>
+            <StatusLight size="S" variant="positive">Published</StatusLight>
+          </Footer>
+        </>}
+      </Card>
+      <Card {...args}>
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        {args.size !== 'XS' && <>
+          <Divider />
+          <Footer>
+            <StatusLight size="S" variant="positive">Published</StatusLight>
+          </Footer>
+        </>}
+      </Card>
+    </div>
+  )
+};
 
 const specificArgTypes = {
   density: {
@@ -95,217 +98,225 @@ const specificArgTypes = {
   }
 };
 
-export const Asset = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <AssetCard {...args}>
-      <CardPreview>
-        <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Desert Sunset</Text>
-        <Text slot="description">PNG • 2/3/2024</Text>
-      </Content>
-    </AssetCard>
-    <AssetCard {...args}>
-      <CardPreview>
-        <FolderGradient />
-      </CardPreview>
-      <Content>
-        <Text slot="title">Projects</Text>
-        <Text slot="description">10 items • 6/14/2024</Text>
-      </Content>
-    </AssetCard>
-  </div>
-);
-
-Asset.argTypes = specificArgTypes;
-
-export const User = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
-    <UserCard {...args}>
-      <CardPreview>
-        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <StatusLight size="S" variant="positive">Available</StatusLight>
-      </Footer>
-    </UserCard>
-    <UserCard {...args}>
-      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <StatusLight size="S" variant="positive">Available</StatusLight>
-      </Footer>
-    </UserCard>
-  </div>
-);
+export const Asset: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <AssetCard {...args}>
+        <CardPreview>
+          <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Desert Sunset</Text>
+          <Text slot="description">PNG • 2/3/2024</Text>
+        </Content>
+      </AssetCard>
+      <AssetCard {...args}>
+        <CardPreview>
+          <FolderGradient />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Projects</Text>
+          <Text slot="description">10 items • 6/14/2024</Text>
+        </Content>
+      </AssetCard>
+    </div>
+  ),
+  argTypes: specificArgTypes
+};
 
-User.argTypes = {
-  ...specificArgTypes,
-  variant: {
-    control: 'radio',
-    options: ['primary', 'secondary', 'tertiary']
+export const User: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+      <UserCard {...args}>
+        <CardPreview>
+          <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <StatusLight size="S" variant="positive">Available</StatusLight>
+        </Footer>
+      </UserCard>
+      <UserCard {...args}>
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <StatusLight size="S" variant="positive">Available</StatusLight>
+        </Footer>
+      </UserCard>
+    </div>
+  ),
+  argTypes: {
+    ...specificArgTypes,
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary']
+    }
   }
 };
 
-export const Product = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
-    <ProductCard {...args}>
-      <CardPreview>
+export const Product: StoryObj<typeof ProductCard> = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+      <ProductCard {...args}>
+        <CardPreview>
+          <Image
+            slot="preview"
+            src={new URL('assets/preview.png', import.meta.url).toString()} />
+        </CardPreview>
         <Image
-          slot="preview"
-          src={new URL('assets/preview.png', import.meta.url).toString()} />
-      </CardPreview>
-      <Image 
-        slot="thumbnail"
-        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <Button variant="primary">Buy now</Button>
-      </Footer>
-    </ProductCard>
-    <ProductCard {...args}>
-      <Image
-        slot="thumbnail"
-        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
-      <Content>
-        <Text slot="title">Card title</Text>
-        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
-      </Content>
-      <Footer>
-        <Button variant="primary">Buy now</Button>
-      </Footer>
-    </ProductCard>
-  </div>
-);
-
-Product.argTypes = {
-  ...specificArgTypes,
-  variant: {
-    control: 'radio',
-    options: ['primary', 'secondary', 'tertiary']
+          slot="thumbnail"
+          src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <Button variant="primary">Buy now</Button>
+        </Footer>
+      </ProductCard>
+      <ProductCard {...args}>
+        <Image
+          slot="thumbnail"
+          src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+        </Content>
+        <Footer>
+          <Button variant="primary">Buy now</Button>
+        </Footer>
+      </ProductCard>
+    </div>
+  ),
+  argTypes: {
+    ...specificArgTypes,
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary']
+    }
   }
 };
 
-export const Collection = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CollectionCardPreview>
-        <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CollectionCardPreview>
-      <Content>
-        <Text slot="title">Travel</Text>
-        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
-          <Folder />
-          <Text slot="description">20 photos</Text>
-        </div>
-      </Content>
-    </Card>
-    <Card {...args}>
-      <CollectionCardPreview>
-        <Image alt="" src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
-        <Image alt="" src="https://images.unsplash.com/photo-1720987517313-23d8c4092cfb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8" />
-      </CollectionCardPreview>
-      <Content>
-        <Text slot="title">Architecture</Text>
-        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
-          <Folder />
-          <Text slot="description">15 photos</Text>
-        </div>
-      </Content>
-    </Card>
-  </div>
-);
-
-export const PreviewOverlay = (args: any) => (
-  <Card {...args}>
-    <CardPreview>
-      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
-      <Badge
-        variant="positive"
-        styles={style({
-          position: 'absolute',
-          top: 16,
-          insetEnd: 16
-        })}>
-        Free
-      </Badge>
-      <Avatar
-        src="https://i.imgur.com/xIe7Wlb.png"
-        size={24}
-        isOverBackground
-        styles={style({
-          position: 'absolute',
-          bottom: 16,
-          insetStart: 16
-        })} />
-    </CardPreview>
-  </Card>
-);
-
-export const Custom = (args: any) => (
-  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
-    <Card {...args}>
-      <CardPreview>
-        <Image 
-          alt=""
-          src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </CardPreview>
-      <Content>
-        <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
-          <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-            <Select /> 
-            <Text slot="description">Click through rate</Text>
+export const Collection: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CollectionCardPreview>
+          <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CollectionCardPreview>
+        <Content>
+          <Text slot="title">Travel</Text>
+          <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+            <Folder />
+            <Text slot="description">20 photos</Text>
           </div>
-          <div className={style({display: 'flex', flexDirection: 'column'})}>
-            <Text styles={style({font: 'title-xl'})}>1.012%</Text>
-            <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
+        </Content>
+      </Card>
+      <Card {...args}>
+        <CollectionCardPreview>
+          <Image alt="" src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+          <Image alt="" src="https://images.unsplash.com/photo-1720987517313-23d8c4092cfb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8" />
+        </CollectionCardPreview>
+        <Content>
+          <Text slot="title">Architecture</Text>
+          <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+            <Folder />
+            <Text slot="description">15 photos</Text>
           </div>
-        </div>
-      </Content>
-    </Card>
+        </Content>
+      </Card>
+    </div>
+  )
+};
+
+export const PreviewOverlay: Story = {
+  render: (args) => (
     <Card {...args}>
       <CardPreview>
-        <Image 
-          alt=""
-          src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
+        <Badge
+          variant="positive"
+          styles={style({
+            position: 'absolute',
+            top: 16,
+            insetEnd: 16
+          })}>
+          Free
+        </Badge>
+        <Avatar
+          src="https://i.imgur.com/xIe7Wlb.png"
+          size={24}
+          isOverBackground
+          styles={style({
+            position: 'absolute',
+            bottom: 16,
+            insetStart: 16
+          })} />
       </CardPreview>
-      <Content>
-        <Text slot="title">Yummburger</Text>
-        <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-          <Project />
-          <Text slot="description"><span className={style({fontWeight: 'bold'})}>35k</span> experiences use this</Text>
-        </div>
-      </Content>
-      <Footer styles={style({flexDirection: 'column', alignItems: 'start', gap: 4})}>
-        <Text styles={style({font: 'ui-sm'})}><span className={style({font: 'title-xl'})}>25%</span> click through rate</Text>
-        <Meter variant="positive" value={25} styles={style({marginY: 4})} />
-        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold'})}>56k</span> clicks</Text>
-        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold', color: 'positive-900'})}>3.46%</span> last month</Text>
-      </Footer>
     </Card>
-  </div>
-);
+  )
+};
 
-Custom.argTypes = {
-  size: {
-    table: {
-      disable: true
+export const Custom: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+      <Card {...args}>
+        <CardPreview>
+          <Image
+            alt=""
+            src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
+            <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+              <Select />
+              <Text slot="description">Click through rate</Text>
+            </div>
+            <div className={style({display: 'flex', flexDirection: 'column'})}>
+              <Text styles={style({font: 'title-xl'})}>1.012%</Text>
+              <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
+            </div>
+          </div>
+        </Content>
+      </Card>
+      <Card {...args}>
+        <CardPreview>
+          <Image
+            alt=""
+            src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        </CardPreview>
+        <Content>
+          <Text slot="title">Yummburger</Text>
+          <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+            <Project />
+            <Text slot="description"><span className={style({fontWeight: 'bold'})}>35k</span> experiences use this</Text>
+          </div>
+        </Content>
+        <Footer styles={style({flexDirection: 'column', alignItems: 'start', gap: 4})}>
+          <Text styles={style({font: 'ui-sm'})}><span className={style({font: 'title-xl'})}>25%</span> click through rate</Text>
+          <Meter variant="positive" value={25} styles={style({marginY: 4})} />
+          <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold'})}>56k</span> clicks</Text>
+          <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold', color: 'positive-900'})}>3.46%</span> last month</Text>
+        </Footer>
+      </Card>
+    </div>
+  ),
+  argTypes: {
+    size: {
+      table: {
+        disable: true
+      }
     }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
index 2ff2d71e5f7..326977e20d4 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -14,7 +14,7 @@ import {ActionMenu, Avatar, Card, CardPreview, CardView, CardViewProps, Collecti
 import EmptyIcon from '../spectrum-illustrations/gradient/generic1/Image';
 import ErrorIcon from '../spectrum-illustrations/linear/AlertNotice';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList} from 'react-stately';
 
@@ -28,6 +28,8 @@ const meta: Meta<typeof CardView> = {
 
 export default meta;
 
+type Story = StoryObj<typeof CardView>;
+
 const cardViewStyles = style({
   width: 'screen',
   maxWidth: 'full',
@@ -92,7 +94,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-export const Example = (args: CardViewProps<any>) => {
+const ExampleRender = (args: CardViewProps<any>) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -142,14 +144,17 @@ export const Example = (args: CardViewProps<any>) => {
   );
 };
 
-Example.args = {
-  loadingState: 'idle',
-  onAction: null,
-  selectionMode: 'multiple'
+export const Example: Story = {
+  render: (args) => <ExampleRender {...args} />,
+  args: {
+    loadingState: 'idle',
+    onAction: undefined,
+    selectionMode: 'multiple'
+  }
 };
 
-export const Empty = (args: CardViewProps<any>) => {
-  return (
+export const Empty: Story = {
+  render: (args: CardViewProps<any>) => (
     <CardView
       aria-label="Assets"
       {...args}
@@ -163,7 +168,7 @@ export const Empty = (args: CardViewProps<any>) => {
       )}>
       {[]}
     </CardView>
-  );
+  )
 };
 
 interface Topic {
@@ -193,7 +198,7 @@ function TopicCard({topic}: {topic: Topic}) {
   );
 }
 
-export const CollectionCards = (args: CardViewProps<any>) => {
+const CollectionCardsRender = (args: CardViewProps<any>) => {
   let list = useAsyncList<Topic, number | null>({
     async load({signal, cursor}) {
       let page = cursor || 1;
@@ -242,7 +247,10 @@ export const CollectionCards = (args: CardViewProps<any>) => {
   );
 };
 
-CollectionCards.args = {
-  loadingState: 'idle',
-  onAction: null
+export const CollectionCards: Story = {
+  render: (args) => <CollectionCardsRender {...args} />,
+  args: {
+    loadingState: 'idle',
+    onAction: undefined
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index cdb5c838d78..f1693481c84 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Checkbox} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof Checkbox> = {
@@ -30,6 +30,12 @@ const meta: Meta<typeof Checkbox> = {
 
 export default meta;
 
-export const Example = (args: any) => (<Checkbox {...args}>Unsubscribe</Checkbox>);
+type Story = StoryObj<typeof Checkbox>;
 
-export const LongLabel = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
+export const Example: Story = {
+  render: (args) => (<Checkbox {...args}>Unsubscribe</Checkbox>)
+};
+
+export const LongLabel: Story = {
+  render: (args) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>)
+};
diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
index dc48a3e0ded..f3f7821db64 100644
--- a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -58,10 +58,34 @@ export const Example: Story = {
   }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <CheckboxGroup 
-    {...args}
-    contextualHelp={
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <CheckboxGroup
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>Sports</Heading>
+          <Content>
+            <Text>
+              Social games we paly to have fun and stay healthy.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://en.wikipedia.org/wiki/Sport"
+              target="_blank">Learn more about sports</Link>
+          </Footer>
+        </ContextualHelp>
+      }>
+      <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
+      <Checkbox value="baseball">Baseball</Checkbox>
+      <Checkbox value="basketball">Basketball</Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Favorite sports',
+    contextualHelp: (
       <ContextualHelp>
         <Heading>Sports</Heading>
         <Content>
@@ -76,29 +100,6 @@ export const ContextualHelpExample = (args: any) => (
             target="_blank">Learn more about sports</Link>
         </Footer>
       </ContextualHelp>
-    }>
-    <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
-    <Checkbox value="baseball">Baseball</Checkbox>
-    <Checkbox value="basketball">Basketball</Checkbox>
-  </CheckboxGroup>
-);
-
-ContextualHelpExample.args = {
-  label: 'Favorite sports',
-  contextualHelp: (
-    <ContextualHelp>
-      <Heading>Sports</Heading>
-      <Content>
-        <Text>
-          Social games we paly to have fun and stay healthy.
-        </Text>
-      </Content>
-      <Footer>
-        <Link
-          isStandalone
-          href="https://en.wikipedia.org/wiki/Sport"
-          target="_blank">Learn more about sports</Link>
-      </Footer>
-    </ContextualHelp>
-  )
+    )
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
index 8de40a2bb6e..46b5310d30a 100644
--- a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
@@ -12,7 +12,7 @@
 
 import {categorizeArgTypes} from './utils';
 import {ColorArea} from '../src/ColorArea';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorArea> = {
   component: ColorArea,
@@ -28,9 +28,11 @@ const meta: Meta<typeof ColorArea> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorArea>;
 
-export const Example = (args: any) => <ColorArea {...args} onChange={undefined} />;
-
-Example.args = {
-  defaultValue: 'hsl(30, 100%, 50%)'
+export const Example: Story = {
+  render: (args) => <ColorArea {...args} onChange={undefined} />,
+  args: {
+    defaultValue: 'hsl(30, 100%, 50%)'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index 5ca4a5d9bc9..a2bda88da85 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -19,7 +19,7 @@ import {
   Link,
   Text
 } from '../src/';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorField> = {
   component: ColorField,
@@ -38,34 +38,37 @@ const meta: Meta<typeof ColorField> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorField>;
 
-export const Example = (args: any) => <ColorField {...args} />;
-
-Example.args = {
-  label: 'Color'
+export const Example: Story = {
+  render: (args) => <ColorField {...args} />,
+  args: {
+    label: 'Color'
+  }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <ColorField
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>Color</Heading>
-        <Content>
-          <Text>
-            Pick your favorite color.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://en.wikipedia.org/wiki/Color"
-            target="_blank">Learn more about color</Link>
-        </Footer>
-      </ContextualHelp>
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <ColorField
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>Color</Heading>
+          <Content>
+            <Text>
+              Pick your favorite color.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://en.wikipedia.org/wiki/Color"
+              target="_blank">Learn more about color</Link>
+          </Footer>
+        </ContextualHelp>
     } />
-);
-
-ContextualHelpExample.args = {
-  label: 'Color'
+  ),
+  args: {
+    label: 'Color'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
index 34688f57cc2..ddba4ba61d9 100644
--- a/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
@@ -13,7 +13,7 @@
 import {categorizeArgTypes} from './utils';
 
 import {ColorSlider} from '../src/ColorSlider';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorSlider> = {
   component: ColorSlider,
@@ -29,11 +29,13 @@ const meta: Meta<typeof ColorSlider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorSlider>;
 
-export const Example = (args: any) => <ColorSlider {...args} onChange={undefined} />;
-
-Example.args = {
-  label: 'Red Opacity',
-  defaultValue: '#f00',
-  channel: 'alpha'
+export const Example: Story = {
+  render: (args) => <ColorSlider {...args} onChange={undefined} />,
+  args: {
+    label: 'Red Opacity',
+    defaultValue: '#f00',
+    channel: 'alpha'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
index 8828d2f2453..b8d625c3aae 100644
--- a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ColorSwatch} from '../src/ColorSwatch';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof ColorSwatch> = {
@@ -24,16 +24,20 @@ const meta: Meta<typeof ColorSwatch> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorSwatch>;
 
-export const Example = (args: any) => (
-  <ColorSwatch {...args} />
-);
-
-Example.args = {
-  color: 'rgb(255, 0, 0)'
+export const Example: Story = {
+  render: (args) => <ColorSwatch {...args} />,
+  args: {
+    color: 'rgb(255, 0, 0)'
+  }
 };
 
-export const NoValue = (args: any) => <ColorSwatch {...args} />;
+export const NoValue: Story = {
+  render: (args) => <ColorSwatch {...args} />
+};
 
-export const CustomWidth = (args: any) => <ColorSwatch {...args} styles={style({width: 96})} />;
-CustomWidth.args = Example.args;
+export const CustomWidth: Story = {
+  render: (args) => <ColorSwatch {...args} styles={style({width: 96})} />,
+  args: Example.args
+};
diff --git a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
index d28f0846534..84405ab8b48 100644
--- a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
@@ -12,7 +12,7 @@
 
 import {ColorSwatch} from '../src/ColorSwatch';
 import {ColorSwatchPicker} from '../src/ColorSwatchPicker';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof ColorSwatchPicker> = {
@@ -28,21 +28,26 @@ const meta: Meta<typeof ColorSwatchPicker> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorSwatchPicker>;
 
-export const Example = (args: any) => (
-  <ColorSwatchPicker defaultValue="#f00" {...args}>
-    <ColorSwatch color="#f00" />
-    <ColorSwatch color="#0f0" />
-    <ColorSwatch color="#0ff" />
-    <ColorSwatch color="#00f" />
-  </ColorSwatchPicker>
-);
+export const Example: Story = {
+  render: (args) => (
+    <ColorSwatchPicker defaultValue="#f00" {...args}>
+      <ColorSwatch color="#f00" />
+      <ColorSwatch color="#0f0" />
+      <ColorSwatch color="#0ff" />
+      <ColorSwatch color="#00f" />
+    </ColorSwatchPicker>
+  )
+};
 
-export const ManySwatches = (args: any) => (
-  <ColorSwatchPicker {...args} styles={style({maxWidth: 192})}>
-    {Array.from(Array(24)).map(() => {
-      let color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
-      return <ColorSwatch key={color} color={color} />;
-    })}
-  </ColorSwatchPicker>
-);
+export const ManySwatches: Story = {
+  render: (args) => (
+    <ColorSwatchPicker {...args} styles={style({maxWidth: 192})}>
+      {Array.from(Array(24)).map(() => {
+        let color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
+        return <ColorSwatch key={color} color={color} />;
+      })}
+    </ColorSwatchPicker>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx b/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
index 8257dc2f4a8..e777a9f4734 100644
--- a/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
@@ -13,7 +13,7 @@
 import {categorizeArgTypes} from './utils';
 
 import {ColorWheel} from '../src/ColorWheel';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof ColorWheel> = {
   component: ColorWheel,
@@ -28,9 +28,11 @@ const meta: Meta<typeof ColorWheel> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ColorWheel>;
 
-export const Example = (args: any) => <ColorWheel {...args} onChange={undefined} />;
-
-Example.args = {
-  defaultValue: 'hsl(30, 100%, 50%)'
+export const Example: Story = {
+  render: (args) => <ColorWheel {...args} onChange={undefined} />,
+  args: {
+    defaultValue: 'hsl(30, 100%, 50%)'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 5d9731201b0..19af5c3f3d1 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -16,6 +16,7 @@ import {ComboBoxProps} from 'react-aria-components';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useAsyncList} from 'react-stately';
 
@@ -39,7 +40,7 @@ const meta: Meta<typeof ComboBox<any>> = {
 export default meta;
 type Story = StoryObj<typeof ComboBox<any>>;
 
-export const Example = {
+export const Example: Story = {
   render: (args: ComboBoxProps<any>) => (
     <ComboBox {...args}>
       <ComboBoxItem>Chocolate</ComboBoxItem>
@@ -146,8 +147,8 @@ export const WithIcons: Story = {
   }
 };
 
-export const Validation = {
-  render: (args: any) => (
+export const Validation: Story = {
+  render: (args) => (
     <Form>
       <ComboBox {...args}>
         {(item) => <ComboBoxItem id={(item as IExampleItem).id} textValue={(item as IExampleItem).label}>{(item as IExampleItem).label}</ComboBoxItem>}
@@ -195,7 +196,7 @@ export const ContextualHelpExample: Story = {
   }
 };
 
-export const CustomWidth = {
+export const CustomWidth: Story = {
   render: (args) => (
     <ComboBox {...args} styles={style({width: 384})}>
       <ComboBoxItem>Chocolate</ComboBoxItem>
@@ -220,7 +221,7 @@ interface Character {
   birth_year: number
 }
 
-const AsyncComboBox = (args: any) => {
+const AsyncComboBox = (args: ComboBoxProps<Character> & {delay: number, label: string}): ReactElement => {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
@@ -253,7 +254,8 @@ const AsyncComboBox = (args: any) => {
   );
 };
 
-export const AsyncComboBoxStory  = {
+export type AsyncComboBoxStoryType = typeof AsyncComboBox;
+export const AsyncComboBoxStory: StoryObj<AsyncComboBoxStoryType> = {
   render: AsyncComboBox,
   args: {
     ...Example.args,
@@ -289,7 +291,7 @@ return (
   }
 };
 
-export const EmptyCombobox = {
+export const EmptyCombobox: Story = {
   render: (args) => (
     <ComboBox {...args}>
       {[]}
diff --git a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
index 74474f6bd1b..251fa09178b 100644
--- a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
@@ -13,7 +13,7 @@
 import {ActionButton, Button, ButtonGroup, CloseButton, Content, CustomDialog, DialogTrigger, DropZone, Heading, IllustratedMessage, Image, TextField} from '../src';
 import Checkmark from '../spectrum-illustrations/gradient/generic1/Checkmark';
 import DropToUpload from '../spectrum-illustrations/linear/DropToUpload';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof CustomDialog> = {
@@ -29,90 +29,94 @@ const meta: Meta<typeof CustomDialog> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof CustomDialog>;
 
-export const EdgeToEdge = (args: any) => (
-  <DialogTrigger>
-    <ActionButton>Open dialog</ActionButton>
-    <CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
-      <div className={style({display: 'flex', size: 'full'})}>
-        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
-          <Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>Example</Heading>
-          <ul className={style({listStyleType: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8})}>
-            <li className={style({height: 32, font: 'ui'})}>Lorem ipsum</li>
-            <li className={style({height: 32, font: 'ui'})}>Consectetur adipiscing</li>
-            <li className={style({height: 32, font: 'ui'})}>Tempor incididunt</li>
-            <li className={style({height: 32, font: 'ui'})}>Colore magna</li>
-            <li className={style({height: 32, font: 'ui'})}>Exercitation ullamco</li>
-            <li className={style({height: 32, font: 'ui'})}>Commodo consequat</li>
-          </ul>
-        </div>
-        <div className={style({flexGrow: 1})}>
-          <Image src={new URL('./assets/placeholder.png', import.meta.url).toString()} styles={style({width: 'full'})} />
-          <div className={style({padding: 32, paddingEnd: 16})}>
-            <h3 className={style({font: 'title-lg', marginY: 0})}>Example Heading</h3>
-            <p className={style({font: 'body'})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+export const EdgeToEdge: Story = {
+  render: (args) => (
+    <DialogTrigger>
+      <ActionButton>Open dialog</ActionButton>
+      <CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
+        <div className={style({display: 'flex', size: 'full'})}>
+          <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
+            <Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>Example</Heading>
+            <ul className={style({listStyleType: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8})}>
+              <li className={style({height: 32, font: 'ui'})}>Lorem ipsum</li>
+              <li className={style({height: 32, font: 'ui'})}>Consectetur adipiscing</li>
+              <li className={style({height: 32, font: 'ui'})}>Tempor incididunt</li>
+              <li className={style({height: 32, font: 'ui'})}>Colore magna</li>
+              <li className={style({height: 32, font: 'ui'})}>Exercitation ullamco</li>
+              <li className={style({height: 32, font: 'ui'})}>Commodo consequat</li>
+            </ul>
+          </div>
+          <div className={style({flexGrow: 1})}>
+            <Image src={new URL('./assets/placeholder.png', import.meta.url).toString()} styles={style({width: 'full'})} />
+            <div className={style({padding: 32, paddingEnd: 16})}>
+              <h3 className={style({font: 'title-lg', marginY: 0})}>Example Heading</h3>
+              <p className={style({font: 'body'})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+            </div>
           </div>
+          <CloseButton staticColor="black" styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
         </div>
-        <CloseButton staticColor="black" styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
-      </div>
-    </CustomDialog>
-  </DialogTrigger>
-);
-
-EdgeToEdge.args = {
-  padding: 'none'
+      </CustomDialog>
+    </DialogTrigger>
+  ),
+  args: {
+    padding: 'none'
+  }
 };
 
-export const Illustration = (args: any) => (
-
-  <DialogTrigger>
-    <ActionButton>Open dialog</ActionButton>
-    <CustomDialog {...args}>
-      <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
-        <Checkmark />
-        <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
-        <p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
-      </div>
-    </CustomDialog>
-  </DialogTrigger>
-);
-
-Illustration.args = {
-  size: 'M'
+export const Illustration: Story = {
+  render: (args) => (
+    <DialogTrigger>
+      <ActionButton>Open dialog</ActionButton>
+      <CustomDialog {...args}>
+        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
+          <Checkmark />
+          <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
+          <p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
+        </div>
+      </CustomDialog>
+    </DialogTrigger>
+  ),
+  args: {
+    size: 'M'
+  }
 };
 
-export const SideImage = (args: any) => (
-  <DialogTrigger>
-    <ActionButton>Open dialog</ActionButton>
-    <CustomDialog padding="none" {...args}>
-      <div className={style({display: 'flex', size: 'full', flexDirection: {default: 'column', sm: 'row'}})}>
-        <Image
-          alt=""
-          src={new URL('./assets/preview.png', import.meta.url).toString()}
-          styles={style({
-            width: {default: 'full', sm: 208},
-            height: {default: 112, sm: 'auto'},
-            objectFit: 'cover'
-          })} />
-        <div className={style({padding: {default: 24, sm: 32}, flexGrow: 1, display: 'flex', flexDirection: 'column', rowGap: 32})}>
-          <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, flexGrow: 1})}>
-            <Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new</Heading>
-            <TextField label="Name" isRequired />
-            <DropZone>
-              <IllustratedMessage orientation="horizontal" size="S">
-                <DropToUpload />
-                <Heading>Drop file here</Heading>
-                <Content>Or select a file from your computer</Content>
-              </IllustratedMessage>
-            </DropZone>
+export const SideImage: Story = {
+  render: (args) => (
+    <DialogTrigger>
+      <ActionButton>Open dialog</ActionButton>
+      <CustomDialog padding="none" {...args}>
+        <div className={style({display: 'flex', size: 'full', flexDirection: {default: 'column', sm: 'row'}})}>
+          <Image
+            alt=""
+            src={new URL('./assets/preview.png', import.meta.url).toString()}
+            styles={style({
+              width: {default: 'full', sm: 208},
+              height: {default: 112, sm: 'auto'},
+              objectFit: 'cover'
+            })} />
+          <div className={style({padding: {default: 24, sm: 32}, flexGrow: 1, display: 'flex', flexDirection: 'column', rowGap: 32})}>
+            <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, flexGrow: 1})}>
+              <Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new</Heading>
+              <TextField label="Name" isRequired />
+              <DropZone>
+                <IllustratedMessage orientation="horizontal" size="S">
+                  <DropToUpload />
+                  <Heading>Drop file here</Heading>
+                  <Content>Or select a file from your computer</Content>
+                </IllustratedMessage>
+              </DropZone>
+            </div>
+            <ButtonGroup styles={style({marginStart: 'auto'})}>
+              <Button slot="close" variant="secondary">Close</Button>
+              <Button variant="accent">Add</Button>
+            </ButtonGroup>
           </div>
-          <ButtonGroup styles={style({marginStart: 'auto'})}>
-            <Button slot="close" variant="secondary">Close</Button>
-            <Button variant="accent">Add</Button>
-          </ButtonGroup>
         </div>
-      </div>
-    </CustomDialog>
-  </DialogTrigger>
-);
+      </CustomDialog>
+    </DialogTrigger>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
index e664d5a86bd..e178ef0c56f 100644
--- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogContainer, DialogTrigger, Footer, Header, Heading, Image, Provider} from '../src';
-import type {Meta} from '@storybook/react';
+import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogContainer, DialogProps, DialogTrigger, Footer, Header, Heading, Image, Provider} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {useState} from 'react';
 
 const meta: Meta<typeof Dialog> = {
   component: Dialog,
@@ -32,35 +32,55 @@ const meta: Meta<typeof Dialog> = {
 
 export default meta;
 
-export const Example = {
-  render: (args: any) => (
-    <DialogTrigger {...args}>
-      <Button variant="primary">Open dialog</Button>
-      <Dialog {...args}>
-        {({close}) => (
-          <>
-            {args.type !== 'popover' && <Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" alt="Sky over roof" />}
-            <Heading slot="title">Dialog title</Heading>
-            <Header>Header</Header>
-            <Content>
-              {[...Array(args.paragraphs)].map((_, i) =>
-                <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
-              )}
-            </Content>
-            <Footer><Checkbox>Don't show this again</Checkbox></Footer>
-            <ButtonGroup>
-              <Button onPress={close} variant="secondary">Cancel</Button>
-              <Button onPress={close} variant="accent">Save</Button>
-            </ButtonGroup>
-          </>
-        )}
-      </Dialog>
-    </DialogTrigger>
-  )
+interface ExampleRenderProps extends DialogProps {
+  type: 'popover' | 'dialog',
+  paragraphs: number,
+  title: string
+}
+
+const ExampleRender = (args: ExampleRenderProps): ReactElement => (
+  <DialogTrigger {...args}>
+    <Button variant="primary">Open dialog</Button>
+    <Dialog {...args}>
+      {({close}) => (
+        <>
+          {args.type !== 'popover' && <Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" alt="Sky over roof" />}
+          <Heading slot="title">Dialog title</Heading>
+          <Header>Header</Header>
+          <Content>
+            {[...Array(args.paragraphs)].map((_, i) =>
+              <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+            )}
+          </Content>
+          <Footer><Checkbox>Don't show this again</Checkbox></Footer>
+          <ButtonGroup>
+            <Button onPress={close} variant="secondary">Cancel</Button>
+            <Button onPress={close} variant="accent">Save</Button>
+          </ButtonGroup>
+        </>
+      )}
+    </Dialog>
+  </DialogTrigger>
+);
+
+export type ExampleStoryType = typeof ExampleRender;
+export const Example: StoryObj<typeof ExampleRender> = {
+  render: (args) => <ExampleRender {...args} />,
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['popover', 'dialog']
+    },
+    paragraphs: {
+      control: 'number',
+      min: 1,
+      max: 10
+    }
+  }
 };
 
-export const DialogTriggerExample = {
-  render: (args: any) => (
+export const DialogTriggerExample: StoryObj<typeof ExampleDialog> = {
+  render: (args) => (
     <DialogTrigger {...args}>
       <Button variant="primary">Open dialog</Button>
       <ExampleDialog {...args} />
@@ -82,7 +102,17 @@ export const DialogTriggerExample = {
   }
 };
 
-function ExampleDialog(args: any) {
+interface ExampleDialogProps extends DialogProps {
+  showHero?: boolean,
+  showHeading?: boolean,
+  showHeader?: boolean,
+  showFooter?: boolean,
+  showButtons?: boolean,
+  paragraphs: number,
+  title: string
+}
+
+function ExampleDialog(args: ExampleDialogProps): ReactElement {
   return (
     <Dialog {...args}>
       {({close}) => (
@@ -108,7 +138,7 @@ function ExampleDialog(args: any) {
   );
 }
 
-function DialogContainerExampleRender(props: any) {
+function DialogContainerExampleRender(props: ExampleDialogProps): ReactElement {
   let [isOpen, setOpen] = useState(false);
 
   return (
@@ -123,13 +153,13 @@ function DialogContainerExampleRender(props: any) {
   );
 }
 
-export const DialogContainerExample = {
+export const DialogContainerExample: StoryObj<typeof DialogContainerExampleRender> = {
   render: (args) => <DialogContainerExampleRender {...args} />,
   args: DialogTriggerExample.args
 };
 
-export const ColorScheme = {
-  render: (args: any) => (
+export const ColorScheme: StoryObj<typeof ExampleDialog> = {
+  render: (args) => (
     <Provider colorScheme="dark" background="base" styles={style({padding: 48})}>
       <DialogTrigger {...args}>
         <Button variant="primary">Open dialog</Button>
diff --git a/packages/@react-spectrum/s2/stories/Divider.stories.tsx b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
index fadd81523d7..624c680be5d 100644
--- a/packages/@react-spectrum/s2/stories/Divider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
@@ -13,7 +13,7 @@
 import {baseColor, style} from '../style' with {type: 'macro'};
 import {Divider} from '../src';
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {StaticColorDecorator} from './utils';
 
 const meta: Meta<typeof Divider> = {
@@ -27,9 +27,10 @@ const meta: Meta<typeof Divider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Divider>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <section
       className={style({
         display: 'flex',
diff --git a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
index eb57c9772e6..50002b3af21 100644
--- a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ButtonGroup, Content, DropZone, FileTrigger, Heading, IllustratedMessage} from '../src';
+import {Button, ButtonGroup, Content, DropZone, DropZoneProps, FileTrigger, Heading, IllustratedMessage} from '../src';
 import {categorizeArgTypes} from './utils';
 import Cloud from '../spectrum-illustrations/linear/Cloud';
 import CloudUpload from '../spectrum-illustrations/gradient/generic1/CloudUpload';
 import DropToUpload from '../spectrum-illustrations/linear/DropToUpload';
 import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
-import type {Meta} from '@storybook/react';
-import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import React, {ReactElement, useState} from 'react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof DropZone> = {
@@ -35,7 +35,7 @@ const meta: Meta<typeof DropZone> = {
 
 export default meta;
 
-export const Example = (args: any) => {
+const ExampleRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -43,7 +43,7 @@ export const Example = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 320, height: 280})}
+        styles={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -60,7 +60,11 @@ export const Example = (args: any) => {
   );
 };
 
-export const ExampleWithFileTrigger = (args: any) => {
+export const Example: StoryObj<typeof ExampleRender> = {
+  render: (args) => <ExampleRender {...args} />
+};
+
+const ExampleWithFileTriggerRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -68,7 +72,7 @@ export const ExampleWithFileTrigger = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 380, height: 280})}
+        styles={style({width: 380, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -91,7 +95,11 @@ export const ExampleWithFileTrigger = (args: any) => {
   );
 };
 
-export const LongBanner = (args: any) => {
+export const ExampleWithFileTrigger: StoryObj<typeof ExampleWithFileTriggerRender> = {
+  render: (args) => <ExampleWithFileTriggerRender {...args} />
+};
+
+const LongBannerRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -100,7 +108,7 @@ export const LongBanner = (args: any) => {
       <DropZone
         {...args}
         replaceMessage="A really long message that will show the text wrapping hopefully"
-        className={style({width: 380, height: 280})}
+        styles={style({width: 380, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -117,7 +125,11 @@ export const LongBanner = (args: any) => {
   );
 };
 
-export const Gradient = (args: any) => {
+export const LongBanner: StoryObj<typeof LongBannerRender> = {
+  render: (args) => <LongBannerRender {...args} />
+};
+
+const GradientRender = (args: DropZoneProps): ReactElement => {
   let [isFilled, setIsFilled] = useState(false);
 
   return (
@@ -125,7 +137,7 @@ export const Gradient = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: 380, height: 280})}
+        styles={style({width: 380, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -142,6 +154,10 @@ export const Gradient = (args: any) => {
   );
 };
 
+export const Gradient: StoryObj<typeof GradientRender> = {
+  render: (args) => <GradientRender {...args} />
+};
+
 function Draggable() {
   let {dragProps} = useDrag({
     getItems() {
diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx
index 2392c3c5b01..4c1aaf7d3e5 100644
--- a/packages/@react-spectrum/s2/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx
@@ -23,6 +23,7 @@ import {
   ContextualHelp,
   Divider,
   Form,
+  FormProps,
   Heading,
   Meter,
   NumberField,
@@ -42,11 +43,11 @@ import {
   ToggleButton
 } from '../src';
 import {categorizeArgTypes} from './utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 import SortDown from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUp from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
 import {style} from '../style' with {type: 'macro'};
-import {useState} from 'react';
 
 const meta: Meta<typeof Form> = {
   component: Form,
@@ -61,67 +62,71 @@ const meta: Meta<typeof Form> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Form>;
 
-export const Example = (args: any) => (
-  <Form {...args}>
-    <TextField label="First Name" name="firstName" />
-    <TextField label="Last Name" name="firstName" />
-    <TextField label="Email" name="email" type="email" description="Enter an email" />
-    <Picker label="Country" name="country">
-      <PickerItem id="canada">Canada</PickerItem>
-      <PickerItem id="united-states">United States</PickerItem>
-      <PickerItem id="mexico">Mexico</PickerItem>
-      <PickerItem id="argentina">Argentina</PickerItem>
-    </Picker>
-    <CheckboxGroup label="Favorite sports">
-      <Checkbox value="soccer">Soccer</Checkbox>
-      <Checkbox value="baseball">Baseball</Checkbox>
-      <Checkbox value="basketball">Basketball</Checkbox>
-    </CheckboxGroup>
-    <RadioGroup label="Favorite pet">
-      <Radio value="cat">Cat</Radio>
-      <Radio value="dog">Dog</Radio>
-      <Radio value="plant" isDisabled>Plant</Radio>
-    </RadioGroup>
-    <TextField label="City" name="city" description="A long description to test help text wrapping." />
-    <TextField label="A long label to test wrapping behavior" name="long" />
-    <SearchField label="Search" name="search" />
-    <TextArea label="Comment" name="comment" />
-    <Switch>Wi-Fi</Switch>
-    <Checkbox>I agree to the terms</Checkbox>
-    <Slider label="Cookies"  defaultValue={30} />
-    <RangeSlider label="Range"  defaultValue={{start: 30, end: 60}} />
-    <Button type="submit" variant="primary" styles={style({gridColumnStart: 'field', width: 'fit'})}>Submit</Button>
-  </Form>
-);
-
-export const MixedForm = (args: any) => (
-  <Form {...args}>
-    <TextField label="First Name" name="firstName" />
-    <TextField label="Last Name" name="firstName" />
-    <TextField label="Email" name="email" type="email" description="Enter an email" />
-    <CheckboxGroup aria-label="Favorite sports">
-      <Checkbox value="soccer">Soccer</Checkbox>
-      <Checkbox value="baseball">Baseball</Checkbox>
-      <Checkbox value="basketball">Basketball</Checkbox>
-    </CheckboxGroup>
-    <RadioGroup aria-label="Favorite pet">
-      <Radio value="cat">Cat</Radio>
-      <Radio value="dog">Dog</Radio>
-      <Radio value="plant" isDisabled>Plant</Radio>
-    </RadioGroup>
-    <SearchField label="Search" name="search" />
-  </Form>
-);
+export const Example: Story = {
+  render: (args) => (
+    <Form {...args}>
+      <TextField label="First Name" name="firstName" />
+      <TextField label="Last Name" name="firstName" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <Picker label="Country" name="country">
+        <PickerItem id="canada">Canada</PickerItem>
+        <PickerItem id="united-states">United States</PickerItem>
+        <PickerItem id="mexico">Mexico</PickerItem>
+        <PickerItem id="argentina">Argentina</PickerItem>
+      </Picker>
+      <CheckboxGroup label="Favorite sports">
+        <Checkbox value="soccer">Soccer</Checkbox>
+        <Checkbox value="baseball">Baseball</Checkbox>
+        <Checkbox value="basketball">Basketball</Checkbox>
+      </CheckboxGroup>
+      <RadioGroup label="Favorite pet">
+        <Radio value="cat">Cat</Radio>
+        <Radio value="dog">Dog</Radio>
+        <Radio value="plant" isDisabled>Plant</Radio>
+      </RadioGroup>
+      <TextField label="City" name="city" description="A long description to test help text wrapping." />
+      <TextField label="A long label to test wrapping behavior" name="long" />
+      <SearchField label="Search" name="search" />
+      <TextArea label="Comment" name="comment" />
+      <Switch>Wi-Fi</Switch>
+      <Checkbox>I agree to the terms</Checkbox>
+      <Slider label="Cookies"  defaultValue={30} />
+      <RangeSlider label="Range"  defaultValue={{start: 30, end: 60}} />
+      <Button type="submit" variant="primary" styles={style({gridColumnStart: 'field', width: 'fit'})}>Submit</Button>
+    </Form>
+  )
+};
 
-MixedForm.parameters = {
-  docs: {
-    disable: true
+export const MixedForm: Story = {
+  render: (args) => (
+    <Form {...args}>
+      <TextField label="First Name" name="firstName" />
+      <TextField label="Last Name" name="firstName" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <CheckboxGroup aria-label="Favorite sports">
+        <Checkbox value="soccer">Soccer</Checkbox>
+        <Checkbox value="baseball">Baseball</Checkbox>
+        <Checkbox value="basketball">Basketball</Checkbox>
+      </CheckboxGroup>
+      <RadioGroup aria-label="Favorite pet">
+        <Radio value="cat">Cat</Radio>
+        <Radio value="dog">Dog</Radio>
+        <Radio value="plant" isDisabled>Plant</Radio>
+      </RadioGroup>
+      <SearchField label="Search" name="search" />
+    </Form>
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
 
-export const CustomLabelsExample = (args: any) => {
+const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
   const [isSortAscending, setIsSortAscending] = useState(true);
   return (
     <Form {...args}>
@@ -214,8 +219,11 @@ export const CustomLabelsExample = (args: any) => {
   );
 };
 
-CustomLabelsExample.parameters = {
-  docs: {
-    disable: true
+export const CustomLabelsExample: StoryObj<typeof CustomLabelsExampleRender> = {
+  render: (args) => <CustomLabelsExampleRender {...args} />,
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/FullscreenDialog.stories.tsx b/packages/@react-spectrum/s2/stories/FullscreenDialog.stories.tsx
index 5aa4da058ef..e8a8627deec 100644
--- a/packages/@react-spectrum/s2/stories/FullscreenDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/FullscreenDialog.stories.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ButtonGroup, Content, DialogTrigger, FullscreenDialog, Header, Heading} from '../src';
-import type {Meta} from '@storybook/react';
+import {Button, ButtonGroup, Content, DialogTrigger, FullscreenDialog, FullscreenDialogProps, Header, Heading} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof FullscreenDialog> = {
   component: FullscreenDialog,
@@ -26,26 +26,32 @@ const meta: Meta<typeof FullscreenDialog> = {
 };
 
 export default meta;
+type ExampleRenderProps = FullscreenDialogProps & {
+  paragraphs: number
+};
+type Story = StoryObj<ExampleRenderProps>;
 
-export const Example = (args: any) => (
-  <DialogTrigger {...args}>
-    <Button variant="primary">Open dialog</Button>
-    <FullscreenDialog {...args}>
-      {({close}) => (
-        <>
-          <Heading slot="title">Dialog title</Heading>
-          <Header>Header</Header>
-          <Content>
-            {[...Array(5)].map((_, i) =>
-              <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
-            )}
-          </Content>
-          <ButtonGroup>
-            <Button onPress={close} variant="secondary">Cancel</Button>
-            <Button onPress={close} variant="accent">Save</Button>
-          </ButtonGroup>
-        </>
-      )}
-    </FullscreenDialog>
-  </DialogTrigger>
-);
+export const Example: Story = {
+  render: (args) => (
+    <DialogTrigger {...args}>
+      <Button variant="primary">Open dialog</Button>
+      <FullscreenDialog {...args}>
+        {({close}) => (
+          <>
+            <Heading slot="title">Dialog title</Heading>
+            <Header>Header</Header>
+            <Content>
+              {[...Array(5)].map((_, i) =>
+                <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+              )}
+            </Content>
+            <ButtonGroup>
+              <Button onPress={close} variant="secondary">Cancel</Button>
+              <Button onPress={close} variant="accent">Save</Button>
+            </ButtonGroup>
+          </>
+        )}
+      </FullscreenDialog>
+    </DialogTrigger>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx b/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
index bf3bf82d2c4..2b9481c8d3e 100644
--- a/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
@@ -13,7 +13,7 @@
 import {Button, ButtonGroup, Content, Heading, IllustratedMessage} from '../src';
 import Cloud from '../spectrum-illustrations/linear/Cloud';
 import Folder from '../spectrum-illustrations/gradient/generic2/FolderOpen';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof IllustratedMessage> = {
   component: IllustratedMessage,
@@ -29,56 +29,66 @@ const meta: Meta<typeof IllustratedMessage> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <IllustratedMessage {...args}>
-    <Cloud />
-    <Heading>
-      Illustrated message title
-    </Heading>
-    <Content>
-      Illustrated message description. Give more information about what a user can do, expect, or how to make items appear.    </Content>
-    <ButtonGroup>
-      <Button variant="secondary" >Label</Button>
-      <Button variant="accent" >Label</Button>
-    </ButtonGroup>
-  </IllustratedMessage>
-);
+type Story = StoryObj<typeof IllustratedMessage>;
 
-export const NoButtonLongText = (args: any) => (
-  <IllustratedMessage {...args}>
-    <Cloud />
-    <Heading>
-      Error 403: Access not allowed
-    </Heading>
-    <Content>
-      You do not have permission to access this page. Try checking the URL or visit a different page.
-    </Content>
-  </IllustratedMessage>
-);
+export const Example: Story = {
+  render: (args) => (
+    <IllustratedMessage {...args}>
+      <Cloud />
+      <Heading>
+        Illustrated message title
+      </Heading>
+      <Content>
+        Illustrated message description. Give more information about what a user can do, expect, or how to make items appear.    </Content>
+      <ButtonGroup>
+        <Button variant="secondary" >Label</Button>
+        <Button variant="accent" >Label</Button>
+      </ButtonGroup>
+    </IllustratedMessage>
+  )
+};
 
-export const NoButtonShortText = (args: any) => (
-  <IllustratedMessage {...args}>
-    <Cloud />
-    <Heading>
-      Error 504: Server timeout
-    </Heading>
-    <Content>
-      The server took too long. Please try again later.
-    </Content>
-  </IllustratedMessage>
-);
+export const NoButtonLongText: Story = {
+  render: (args) => (
+    <IllustratedMessage {...args}>
+      <Cloud />
+      <Heading>
+        Error 403: Access not allowed
+      </Heading>
+      <Content>
+        You do not have permission to access this page. Try checking the URL or visit a different page.
+      </Content>
+    </IllustratedMessage>
+  )
+};
 
-export const Gradient = (args: any) => (
-  <IllustratedMessage {...args}>
-    <Folder />
-    <Heading>
-      Illustrated message title
-    </Heading>
-    <Content>
-      Illustrated message description. Give more information about what a user can do, expect, or how to make items appear.    </Content>
-    <ButtonGroup>
-      <Button variant="secondary" >Label</Button>
-      <Button variant="accent" >Label</Button>
-    </ButtonGroup>
-  </IllustratedMessage>
-);
+export const NoButtonShortText: Story = {
+  render: (args) => (
+    <IllustratedMessage {...args}>
+      <Cloud />
+      <Heading>
+        Error 504: Server timeout
+      </Heading>
+      <Content>
+        The server took too long. Please try again later.
+      </Content>
+    </IllustratedMessage>
+  )
+};
+
+export const Gradient: Story = {
+  render: (args) => (
+    <IllustratedMessage {...args}>
+      <Folder />
+      <Heading>
+        Illustrated message title
+      </Heading>
+      <Content>
+        Illustrated message description. Give more information about what a user can do, expect, or how to make items appear.    </Content>
+      <ButtonGroup>
+        <Button variant="secondary" >Label</Button>
+        <Button variant="accent" >Label</Button>
+      </ButtonGroup>
+    </IllustratedMessage>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
index 09d69564fe6..28635b3ce61 100644
--- a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Content, Heading, InlineAlert} from '../src';
-import type {Meta} from '@storybook/react';
-import {useState} from 'react';
+import {Button, Content, Heading, InlineAlert, InlineAlertProps} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 
 const meta: Meta<typeof InlineAlert> = {
   component: InlineAlert,
@@ -27,17 +27,20 @@ const meta: Meta<typeof InlineAlert> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof InlineAlert>;
 
-export const Example = (args: any) => (
-  <InlineAlert {...args}>
-    <Heading>Payment Information</Heading>
-    <Content>
-      There was an error processing your payment. Please check that your card information is correct, then try again.
-    </Content>
-  </InlineAlert>
-);
+export const Example: Story = {
+  render: (args) => (
+    <InlineAlert {...args}>
+      <Heading>Payment Information</Heading>
+      <Content>
+        There was an error processing your payment. Please check that your card information is correct, then try again.
+      </Content>
+    </InlineAlert>
+  )
+};
 
-export const DynamicExample = (args: any) => {
+const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
   let [shown, setShown] = useState(false);
 
   return (
@@ -54,3 +57,7 @@ export const DynamicExample = (args: any) => {
     </>
   );
 };
+
+export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
+  render: (args) => <DynamicExampleRender {...args} />
+};
diff --git a/packages/@react-spectrum/s2/stories/Link.stories.tsx b/packages/@react-spectrum/s2/stories/Link.stories.tsx
index d3a576cfa8a..40ed8737678 100644
--- a/packages/@react-spectrum/s2/stories/Link.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Link.stories.tsx
@@ -12,7 +12,7 @@
 
 import {categorizeArgTypes, StaticColorDecorator} from './utils';
 import {Link} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof Link> = {
@@ -33,22 +33,27 @@ const meta: Meta<typeof Link> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Link>;
 
-export const Inline = (args: any) => (
-  <p
-    className={style({
-      font: 'body',
-      color: {
-        default: 'body',
-        staticColor: {white: 'white', black: 'black', auto: 'auto'}
-      }
-    })({staticColor: args.staticColor})}>
-    Checkbox groups should use <Link {...args}>help text</Link> for error messaging and descriptions. Descriptions are valuable for giving context.
-  </p>
-);
+export const Inline: Story = {
+  render: (args) => (
+    <p
+      className={style({
+        font: 'body',
+        color: {
+          default: 'body',
+          staticColor: {white: 'white', black: 'black', auto: 'auto'}
+        }
+      })({staticColor: args.staticColor})}>
+      Checkbox groups should use <Link {...args}>help text</Link> for error messaging and descriptions. Descriptions are valuable for giving context.
+    </p>
+  )
+};
 
-export const Standalone = (args: any) => (
-  <Link {...args} isStandalone>
-    The missing link
-  </Link>
-);
+export const Standalone: Story = {
+  render: (args) => (
+    <Link {...args} isStandalone>
+      The missing link
+    </Link>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
index 7adeed0cf80..e4787eef554 100644
--- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
@@ -14,7 +14,7 @@ import AlignLeft from '../s2wf-icons/S2_Icon_TextAlignLeft_20_N.svg';
 import AlignMiddle from '../s2wf-icons/S2_Icon_TextAlignCenter_20_N.svg';
 import AlignRight from '../s2wf-icons/S2_Icon_TextAlignRight_20_N.svg';
 import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
-import {Button, Header, Heading, Image, Keyboard, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Text} from '../src';
+import {Button, Header, Heading, Image, Keyboard, Menu, MenuItem, MenuProps, MenuSection, MenuTrigger, SubmenuTrigger, Text} from '../src';
 import {categorizeArgTypes} from './utils';
 import ClockPendingIcon from '../s2wf-icons/S2_Icon_ClockPending_20_N.svg';
 import {CombinedMenu} from '../src/Menu';
@@ -30,10 +30,10 @@ import type {Meta, StoryObj} from '@storybook/react';
 import More from '../s2wf-icons/S2_Icon_More_20_N.svg';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
+import {ReactElement, useState} from 'react';
 import {Selection} from 'react-aria-components';
 import TextIcon from '../s2wf-icons/S2_Icon_Text_20_N.svg';
 import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';
-import {useState} from 'react';
 
 const meta: Meta<typeof CombinedMenu> = {
   component: CombinedMenu,
@@ -243,7 +243,7 @@ export const DynamicExample: Story = {
   }
 };
 
-export const SelectionGroups = (args) => {
+const SelectionGroupsRender = (args: MenuProps<IExampleItem>): ReactElement => {
   let [group1, setGroup1] = useState<Selection>(new Set([1]));
   let [group2, setGroup2] = useState<Selection>(new Set());
   return (
@@ -306,6 +306,9 @@ export const SelectionGroups = (args) => {
   );
 };
 
-SelectionGroups.parameters = {
-  layout: 'padded'
+export const SelectionGroups: StoryObj<typeof SelectionGroupsRender> = {
+  render: (args) => <SelectionGroupsRender {...args} />,
+  parameters: {
+    layout: 'padded'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/Meter.stories.tsx b/packages/@react-spectrum/s2/stories/Meter.stories.tsx
index 99ac0ee6192..94b697956e2 100644
--- a/packages/@react-spectrum/s2/stories/Meter.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Meter.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {Meter} from '../src/Meter';
 import {StaticColorDecorator} from './utils';
 
@@ -28,11 +28,13 @@ const meta: Meta<typeof Meter> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Meter>;
 
-export const Example = (args: any) => <Meter {...args} />;
-
-Example.args = {
-  label: 'Storage space',
-  value: 80,
-  variant: 'informative'
+export const Example: Story = {
+  render: (args) => <Meter {...args} />,
+  args: {
+    label: 'Storage space',
+    value: 80,
+    variant: 'informative'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index 54975490d06..2682f1bc8be 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -51,50 +51,55 @@ export const Example: Story = {
   }
 };
 
-export const Validation = (args: any) => (
-  <Form>
-    <NumberField {...args} />
-    <Button type="submit" variant="primary">Submit</Button>
-  </Form>
-);
-Validation.args = {
-  label: 'Quantity',
-  isRequired: true
+export const Validation: Story = {
+  render: (args) => (
+    <Form>
+      <NumberField {...args} />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    label: 'Quantity',
+    isRequired: true
+  }
 };
 
-export const CustomWidth = (args: any) => <NumberField {...args} styles={style({width: 384})} />;
-
-CustomWidth.args = {
-  label: 'Large quantity'
-};
-CustomWidth.parameters = {
-  docs: {
-    disable: true
+export const CustomWidth: Story = {
+  render: (args) => <NumberField {...args} styles={style({width: 384})} />,
+  args: {
+    label: 'Large quantity'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
 
-export const ContextualHelpExample = (args: any) => (
-  <NumberField
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>Quantity</Heading>
-        <Content>
-          <Text>
-            Pick a number between negative infinity and positive infinity.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://en.wikipedia.org/wiki/Quantity"
-            target="_blank">Learn more about quantity</Link>
-        </Footer>
-      </ContextualHelp>
-    } />
-);
-
-ContextualHelpExample.args = {
-  label: 'Quantity'
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <NumberField
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>Quantity</Heading>
+          <Content>
+            <Text>
+              Pick a number between negative infinity and positive infinity.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://en.wikipedia.org/wiki/Quantity"
+              target="_blank">Learn more about quantity</Link>
+          </Footer>
+        </ContextualHelp>
+      } />
+  ),
+  args: {
+    label: 'Quantity'
+  }
 };
+
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
index 48322ff5b7c..7685f4f5c43 100644
--- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -21,6 +21,7 @@ import {
   Link,
   Picker,
   PickerItem,
+  PickerProps,
   PickerSection,
   Text
 } from '../src';
@@ -28,6 +29,7 @@ import {categorizeArgTypes, StaticColorDecorator} from './utils';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useAsyncList} from '@react-stately/data';
 
@@ -52,8 +54,8 @@ const meta: Meta<typeof Picker<any>> = {
 export default meta;
 type Story = StoryObj<typeof Picker<any>>;
 
-export const Example = {
-  render: (args: any) => (
+export const Example: Story = {
+  render: (args) => (
     <Picker {...args}>
       <PickerItem>Chocolate</PickerItem>
       <PickerItem>Mint</PickerItem>
@@ -159,16 +161,16 @@ export const ManyItems: Story = {
   }
 };
 
-const ValidationRender = (props) => (
+const ValidationRender = (props: PickerProps<IExampleItem>): ReactElement => (
   <Form>
     <Picker {...props}>
-      {(item) => <PickerItem id={(item as IExampleItem).id} textValue={(item as IExampleItem).label}>{(item as IExampleItem).label}</PickerItem>}
+      {(item) => <PickerItem id={item.id} textValue={item.label}>{item.label}</PickerItem>}
     </Picker>
     <Button type="submit" variant="primary">Submit</Button>
   </Form>
 );
 
-export const Validation = {
+export const Validation: StoryObj<typeof ValidationRender> = {
   render: (args) => <ValidationRender {...args} />,
   args: {
     ...Dynamic.args,
@@ -176,8 +178,8 @@ export const Validation = {
   }
 };
 
-export const CustomWidth = {
-  render: (args: any) => (
+export const CustomWidth: StoryObj<typeof Picker<any>> = {
+  render: (args) => (
     <Picker {...args} styles={style({width: 384})}>
       <PickerItem>Chocolate</PickerItem>
       <PickerItem>Mint</PickerItem>
@@ -194,7 +196,7 @@ export const CustomWidth = {
   }
 };
 
-const ContextualHelpExampleRender = (props) => (
+const ContextualHelpExampleRender = (props: PickerProps<any>): ReactElement => (
   <Picker
     {...props}
     contextualHelp={
@@ -223,7 +225,7 @@ const ContextualHelpExampleRender = (props) => (
   </Picker>
 );
 
-export const ContextualHelpExample = {
+export const ContextualHelpExample: StoryObj<typeof ContextualHelpExampleRender> = {
   render: (args) => <ContextualHelpExampleRender {...args} />,
   args: {
     label: 'Ice cream flavor'
@@ -237,7 +239,7 @@ interface Character {
   birth_year: number
 }
 
-const AsyncPicker = (args: any) => {
+const AsyncPicker = (args: PickerProps<Character> & {delay: number}): ReactElement => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -262,7 +264,8 @@ const AsyncPicker = (args: any) => {
   );
 };
 
-export const AsyncPickerStory  = {
+export type AsyncPickerStoryType = typeof AsyncPicker;
+export const AsyncPickerStory: StoryObj<AsyncPickerStoryType> = {
   render: AsyncPicker,
   args: {
     ...Example.args,
diff --git a/packages/@react-spectrum/s2/stories/Popover.stories.tsx b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
index 9b040993a27..42ca7489c0e 100644
--- a/packages/@react-spectrum/s2/stories/Popover.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
@@ -16,13 +16,13 @@ import Education from '../s2wf-icons/S2_Icon_Education_20_N.svg';
 import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import Help from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';
 import Lightbulb from '../s2wf-icons/S2_Icon_Lightbulb_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import Org from '../s2wf-icons/S2_Icon_Buildings_20_N.svg';
 import {Autocomplete as RACAutocomplete, useFilter} from 'react-aria-components';
+import {ReactElement, useRef, useState} from 'react';
 import Settings from '../s2wf-icons/S2_Icon_Settings_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import User from '../s2wf-icons/S2_Icon_User_20_N.svg';
-import {useRef, useState} from 'react';
 import Users from '../s2wf-icons/S2_Icon_UserGroup_20_N.svg';
 
 const meta: Meta<typeof Popover> = {
@@ -38,139 +38,142 @@ const meta: Meta<typeof Popover> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Popover>;
 
-export const HelpCenter = (args: any) => (
-  <DialogTrigger {...args}>
-    <ActionButton aria-label="Help" styles={style({marginX: 'auto'})}>
-      <Help />
-    </ActionButton>
-    <Popover {...args}>
-      <Tabs density="compact" aria-label="Support and assistance tabs">
-        <TabList styles={style({marginX: 12})}>
-          <Tab id="help">Help</Tab>
-          <Tab id="support">Support</Tab>
-          <Tab id="feedback">Feedback</Tab>
-        </TabList>
-        <TabPanel id="help">
-          <div className={style({marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12})}>
-            <SearchField label="Search" styles={style({marginX: 12})} />
-            <Menu aria-label="Help">
-              <MenuSection>
-                <MenuItem href="#">
-                  <File />
-                  <Text slot="label">Documentation</Text>
-                </MenuItem>
-              </MenuSection>
-              <MenuSection>
-                <MenuItem href="#">
-                  <Education />
-                  <Text slot="label">Learning</Text>
-                </MenuItem>
-                <MenuItem href="#">
-                  <Users />
-                  <Text slot="label">Community</Text>
-                </MenuItem>
-              </MenuSection>
-              <MenuSection>
-                <MenuItem href="#">
-                  <User />
-                  <Text slot="label">Customer Care</Text>
-                </MenuItem>
-                <MenuItem href="#">
-                  <Cloud />
-                  <Text slot="label">Status</Text>
-                </MenuItem>
-                <MenuItem href="#">
-                  <Lightbulb />
-                  <Text slot="label">Developer Connection</Text>
-                </MenuItem>
-              </MenuSection>
-            </Menu>
-          </div>
-        </TabPanel>
-        <TabPanel id="support" styles={style({margin: 12})}>
-          <Card size="L" styles={style({width: 'full'})}>
-            <CardPreview>
-              <Image src="https://react-spectrum.adobe.com/ReactSpectrumHome_976x445_2x.3eedfdc2.webp" />
-            </CardPreview>
-            <Content>
-              <Text slot="title">Go to support</Text>
-              <Text slot="description">Find support resources or submit a ticket</Text>
-            </Content>
-          </Card>
-        </TabPanel>
-        <TabPanel id="feedback" styles={style({margin: 12})}>
-          <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
-          <Form>
-            <TextField label="Subject" />
-            <TextField label="Description" isRequired />
-            <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
-            <Button styles={style({marginStart: 'auto'})}>Submit</Button>
-          </Form>
-        </TabPanel>
-      </Tabs>
-    </Popover>
-  </DialogTrigger>
-);
-
-HelpCenter.parameters = {
-  layout: 'padded'
-};
-
-HelpCenter.args = {
-  size: 'S'
+export const HelpCenter: Story = {
+  render: (args) => (
+    <DialogTrigger {...args}>
+      <ActionButton aria-label="Help" styles={style({marginX: 'auto'})}>
+        <Help />
+      </ActionButton>
+      <Popover {...args}>
+        <Tabs density="compact" aria-label="Support and assistance tabs">
+          <TabList styles={style({marginX: 12})}>
+            <Tab id="help">Help</Tab>
+            <Tab id="support">Support</Tab>
+            <Tab id="feedback">Feedback</Tab>
+          </TabList>
+          <TabPanel id="help">
+            <div className={style({marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12})}>
+              <SearchField label="Search" styles={style({marginX: 12})} />
+              <Menu aria-label="Help">
+                <MenuSection>
+                  <MenuItem href="#">
+                    <File />
+                    <Text slot="label">Documentation</Text>
+                  </MenuItem>
+                </MenuSection>
+                <MenuSection>
+                  <MenuItem href="#">
+                    <Education />
+                    <Text slot="label">Learning</Text>
+                  </MenuItem>
+                  <MenuItem href="#">
+                    <Users />
+                    <Text slot="label">Community</Text>
+                  </MenuItem>
+                </MenuSection>
+                <MenuSection>
+                  <MenuItem href="#">
+                    <User />
+                    <Text slot="label">Customer Care</Text>
+                  </MenuItem>
+                  <MenuItem href="#">
+                    <Cloud />
+                    <Text slot="label">Status</Text>
+                  </MenuItem>
+                  <MenuItem href="#">
+                    <Lightbulb />
+                    <Text slot="label">Developer Connection</Text>
+                  </MenuItem>
+                </MenuSection>
+              </Menu>
+            </div>
+          </TabPanel>
+          <TabPanel id="support" styles={style({margin: 12})}>
+            <Card size="L" styles={style({width: 'full'})}>
+              <CardPreview>
+                <Image src="https://react-spectrum.adobe.com/ReactSpectrumHome_976x445_2x.3eedfdc2.webp" />
+              </CardPreview>
+              <Content>
+                <Text slot="title">Go to support</Text>
+                <Text slot="description">Find support resources or submit a ticket</Text>
+              </Content>
+            </Card>
+          </TabPanel>
+          <TabPanel id="feedback" styles={style({margin: 12})}>
+            <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
+            <Form>
+              <TextField label="Subject" />
+              <TextField label="Description" isRequired />
+              <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
+              <Button styles={style({marginStart: 'auto'})}>Submit</Button>
+            </Form>
+          </TabPanel>
+        </Tabs>
+      </Popover>
+    </DialogTrigger>
+  ),
+  parameters: {
+    layout: 'padded'
+  },
+  args: {
+    size: 'S'
+  }
 };
 
-export const AccountMenu = (args: any) => (
-  <DialogTrigger {...args}>
-    <ActionButton aria-label="Account" styles={style({marginX: 'auto'})}>
-      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
-    </ActionButton>
-    <Popover {...args} hideArrow placement="bottom end">
-      <div className={style({paddingTop: 4, display: 'flex', flexDirection: 'column', gap: 12})}>
-        <div className={style({display: 'flex', gap: 12, alignItems: 'center', marginX: 12})}>
-          <Avatar src="https://i.imgur.com/xIe7Wlb.png" size={56} />
-          <div>
-            <div className={style({font: 'title'})}>Devon Govett</div>
-            <div className={style({font: 'ui'})}>user@example.com</div>
-            <Switch styles={style({marginTop: 4})}>Dark theme</Switch>
+export const AccountMenu: Story = {
+  render: (args) => (
+    <DialogTrigger {...args}>
+      <ActionButton aria-label="Account" styles={style({marginX: 'auto'})}>
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+      </ActionButton>
+      <Popover {...args} hideArrow placement="bottom end">
+        <div className={style({paddingTop: 4, display: 'flex', flexDirection: 'column', gap: 12})}>
+          <div className={style({display: 'flex', gap: 12, alignItems: 'center', marginX: 12})}>
+            <Avatar src="https://i.imgur.com/xIe7Wlb.png" size={56} />
+            <div>
+              <div className={style({font: 'title'})}>Devon Govett</div>
+              <div className={style({font: 'ui'})}>user@example.com</div>
+              <Switch styles={style({marginTop: 4})}>Dark theme</Switch>
+            </div>
           </div>
-        </div>
-        <Divider styles={style({marginX: 12})} />
-        <Menu aria-label="Account">
-          <MenuSection>
-            <SubmenuTrigger>
+          <Divider styles={style({marginX: 12})} />
+          <Menu aria-label="Account">
+            <MenuSection>
+              <SubmenuTrigger>
+                <MenuItem>
+                  <Org />
+                  <Text slot="label">Organization</Text>
+                  <Text slot="value">Nike</Text>
+                </MenuItem>
+                <Menu selectionMode="single" selectedKeys={['nike']}>
+                  <MenuItem id="adobe">Adobe</MenuItem>
+                  <MenuItem id="nike">Nike</MenuItem>
+                  <MenuItem id="apple">Apple</MenuItem>
+                </Menu>
+              </SubmenuTrigger>
               <MenuItem>
-                <Org />
-                <Text slot="label">Organization</Text>
-                <Text slot="value">Nike</Text>
+                <Settings />
+                <Text slot="label">Settings</Text>
               </MenuItem>
-              <Menu selectionMode="single" selectedKeys={['nike']}>
-                <MenuItem id="adobe">Adobe</MenuItem>
-                <MenuItem id="nike">Nike</MenuItem>
-                <MenuItem id="apple">Apple</MenuItem>
-              </Menu>
-            </SubmenuTrigger>
-            <MenuItem>
-              <Settings />
-              <Text slot="label">Settings</Text>
-            </MenuItem>
-          </MenuSection>
-          <MenuSection>
-            <MenuItem>Legal notices</MenuItem>
-            <MenuItem>Sign out</MenuItem>
-          </MenuSection>
-        </Menu>
-      </div>
-    </Popover>
-  </DialogTrigger>
-);
-
-AccountMenu.argTypes = {
-  hideArrow: {table: {disable: true}},
-  placement: {table: {disable: true}}
+            </MenuSection>
+            <MenuSection>
+              <MenuItem>Legal notices</MenuItem>
+              <MenuItem>Sign out</MenuItem>
+            </MenuSection>
+          </Menu>
+        </div>
+      </Popover>
+    </DialogTrigger>
+  ),
+  argTypes: {
+    hideArrow: {table: {disable: true}},
+    placement: {table: {disable: true}}
+  }
 };
 
+
 function Autocomplete(props) {
   let {contains} = useFilter({sensitivity: 'base'});
   return (
@@ -178,27 +181,29 @@ function Autocomplete(props) {
   );
 }
 
-export const AutocompletePopover = (args: any) => (
-  <>
-    <DialogTrigger {...args}>
-      <ActionButton aria-label="Help" styles={style({marginX: 'auto'})}>
-        <Help />
-      </ActionButton>
-      <Popover {...args}>
-        <Autocomplete>
-          <SearchField autoFocus label="Search" styles={style({marginTop: 12, marginX: 12})} />
-          <Menu aria-label="test menu" styles={style({marginTop: 12})}>
-            <MenuItem>Foo</MenuItem>
-            <MenuItem>Bar</MenuItem>
-            <MenuItem>Baz</MenuItem>
-          </Menu>
-        </Autocomplete>
-      </Popover>
-    </DialogTrigger>
-  </>
-);
+export const AutocompletePopover: Story = {
+  render: (args) => (
+    <>
+      <DialogTrigger {...args}>
+        <ActionButton aria-label="Help" styles={style({marginX: 'auto'})}>
+          <Help />
+        </ActionButton>
+        <Popover {...args}>
+          <Autocomplete>
+            <SearchField autoFocus label="Search" styles={style({marginTop: 12, marginX: 12})} />
+            <Menu aria-label="test menu" styles={style({marginTop: 12})}>
+              <MenuItem>Foo</MenuItem>
+              <MenuItem>Bar</MenuItem>
+              <MenuItem>Baz</MenuItem>
+            </Menu>
+          </Autocomplete>
+        </Popover>
+      </DialogTrigger>
+    </>
+  )
+};
 
-export const CustomTrigger = () => {
+const CustomTriggerRender = (): ReactElement => {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef<any>(null);
 
@@ -219,3 +224,6 @@ export const CustomTrigger = () => {
   );
 };
 
+export const CustomTrigger: StoryObj<typeof CustomTriggerRender> = {
+  render: () => <CustomTriggerRender />
+};
diff --git a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
index 2f21d1d078a..a9216940572 100644
--- a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {ProgressBar} from '../src';
 import {StaticColorDecorator} from './utils';
 import {style} from '../style' with {type: 'macro'};
@@ -29,15 +29,16 @@ const meta: Meta<typeof ProgressBar> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof ProgressBar>;
 
-export const Example = {
+export const Example: Story = {
   args: {
     label: 'Loading…',
     value: 80
   }
 };
 
-export const CustomWidth = {
+export const CustomWidth: Story = {
   args: {
     label: 'Loading…',
     value: 80,
diff --git a/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx b/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
index 48ba2a5a6f1..4e52c75f664 100644
--- a/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
@@ -49,9 +49,11 @@ export const Example: Story = {
   }
 };
 
-export const CustomSize = (args) => <ProgressCircle aria-label="Test Progress Circle" value="40" size="S" {...args} styles={style({size: 20})} />;
-CustomSize.parameters = {
-  docs: {
-    disable: true
+export const CustomSize: Story = {
+  render: (args) => <ProgressCircle aria-label="Test Progress Circle" value={40} size="S" {...args} styles={style({size: 20})} />,
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
index 5249f29d1a7..653f8b8826d 100644
--- a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
@@ -20,7 +20,7 @@ import {
   RadioGroup,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof RadioGroup> = {
@@ -41,79 +41,83 @@ const meta: Meta<typeof RadioGroup> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof RadioGroup>;
 
-export const Example = (args: any) => (
-  <RadioGroup {...args}>
-    <Radio value="soccer">Soccer</Radio>
-    <Radio value="baseball">Baseball</Radio>
-    <Radio value="football" isDisabled>Football</Radio>
-    <Radio value="basketball">Basketball</Radio>
-  </RadioGroup>
-);
-
-Example.args = {
-  label: 'Favorite sport'
-};
-
-export const LongLabel = (args: any) => (
-  <RadioGroup styles={style({maxWidth: 128})} {...args}>
-    <Radio value="longLabel">Radio with very long label so we can see wrapping</Radio>
-  </RadioGroup>
-);
-
-LongLabel.parameters = {
-  docs: {
-    disable: true
+export const Example: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="soccer">Soccer</Radio>
+      <Radio value="baseball">Baseball</Radio>
+      <Radio value="football" isDisabled>Football</Radio>
+      <Radio value="basketball">Basketball</Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Favorite sport'
   }
 };
 
-export const ErrorAndDescription = (args: any) => (
-  <RadioGroup {...args}>
-    <Radio value="soccer">Soccer</Radio>
-    <Radio value="baseball">Baseball</Radio>
-    <Radio value="football" isDisabled>Football</Radio>
-    <Radio value="basketball">Basketball</Radio>
-  </RadioGroup>
-);
-
-ErrorAndDescription.args = {
-  label: 'Favorite sport',
-  description: 'A long description to test help text wrapping.',
-  errorMessage: 'A long error message to test help text wrapping. Only shows when invalid is set which makes it red too!'
+export const LongLabel: Story = {
+  render: (args) => (
+    <RadioGroup styles={style({maxWidth: 128})} {...args}>
+      <Radio value="longLabel">Radio with very long label so we can see wrapping</Radio>
+    </RadioGroup>
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
 };
 
-ErrorAndDescription.parameters = {
-  docs: {
-    disable: true
+export const ErrorAndDescription: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="soccer">Soccer</Radio>
+      <Radio value="baseball">Baseball</Radio>
+      <Radio value="football" isDisabled>Football</Radio>
+      <Radio value="basketball">Basketball</Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Favorite sport',
+    description: 'A long description to test help text wrapping.',
+    errorMessage: 'A long error message to test help text wrapping. Only shows when invalid is set which makes it red too!'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <RadioGroup
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>Sports</Heading>
-        <Content>
-          <Text>
-            Social games we paly to have fun and stay healthy.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://en.wikipedia.org/wiki/Sport"
-            target="_blank">Learn more about sports</Link>
-        </Footer>
-      </ContextualHelp>
-    }>
-    <Radio isDisabled value="soccer">Soccer</Radio>
-    <Radio value="baseball">Baseball</Radio>
-    <Radio value="football">Football</Radio>
-    <Radio value="basketball">Basketball</Radio>
-  </RadioGroup>
-);
-
-ContextualHelpExample.args = {
-  label: 'Favorite sports'
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <RadioGroup
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>Sports</Heading>
+          <Content>
+            <Text>
+              Social games we paly to have fun and stay healthy.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://en.wikipedia.org/wiki/Sport"
+              target="_blank">Learn more about sports</Link>
+          </Footer>
+        </ContextualHelp>
+      }>
+      <Radio isDisabled value="soccer">Soccer</Radio>
+      <Radio value="baseball">Baseball</Radio>
+      <Radio value="football">Football</Radio>
+      <Radio value="basketball">Basketball</Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Favorite sports'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
index a1257ce7f99..7226db2a6b6 100644
--- a/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {RangeSlider} from '../src';
 
 const meta: Meta<typeof RangeSlider> = {
@@ -32,44 +32,47 @@ const meta: Meta<typeof RangeSlider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof RangeSlider>;
 
-export const Example = (args: any) => <RangeSlider {...args} />;
-
-Example.args = {
-  label: 'Range',
-  defaultValue: {
-    start: 30,
-    end: 60
+export const Example: Story = {
+  render: (args) => <RangeSlider {...args} />,
+  args: {
+    label: 'Range',
+    defaultValue: {
+      start: 30,
+      end: 60
+    }
   }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <RangeSlider
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>What is a ice cream?</Heading>
-        <Content>
-          <Text>
-            A combination of sugar, eggs, milk, and cream is cooked to make
-            a custard base. Then, flavorings are added, and this flavored
-            mixture is carefully churned and frozen to make ice cream.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://en.wikipedia.org/wiki/Ice_cream"
-            target="_blank">Learn more about ice cream</Link>
-        </Footer>
-      </ContextualHelp>
-    } />
-);
-
-ContextualHelpExample.args = {
-  label: 'Range',
-  defaultValue: {
-    start: 30,
-    end: 60
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <RangeSlider
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>What is a ice cream?</Heading>
+          <Content>
+            <Text>
+              A combination of sugar, eggs, milk, and cream is cooked to make
+              a custard base. Then, flavorings are added, and this flavored
+              mixture is carefully churned and frozen to make ice cream.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://en.wikipedia.org/wiki/Ice_cream"
+              target="_blank">Learn more about ice cream</Link>
+          </Footer>
+        </ContextualHelp>
+      } />
+  ),
+  args: {
+    label: 'Range',
+    defaultValue: {
+      start: 30,
+      end: 60
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index 38426805ebb..827a5cb8ed5 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -20,7 +20,7 @@ import {
   SearchField,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof SearchField> = {
@@ -40,45 +40,49 @@ const meta: Meta<typeof SearchField> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof SearchField>;
 
-export const Example = (args: any) => <SearchField {...args} />;
-
-Example.args = {
-  label: 'Search'
+export const Example: Story = {
+  render: (args) => <SearchField {...args} />,
+  args: {
+    label: 'Search'
+  }
 };
 
-export const CustomWidth = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
-
-CustomWidth.args = {
-  label: 'Search'
-};
-CustomWidth.parameters = {
-  docs: {
-    disable: true
+export const CustomWidth: Story = {
+  render: (args) => <SearchField {...args} styles={style({width: 256})} />,
+  args: {
+    label: 'Search'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <SearchField
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>Search tips</Heading>
-        <Content>
-          <Text>
-            You can use modifiers like "date:" and "from:" to search by specific attributes.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://react-spectrum.adobe.com/"
-            target="_blank">React Spectrum</Link>
-        </Footer>
-      </ContextualHelp>
-    } />
-);
-
-ContextualHelpExample.args = {
-  label: 'Search'
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <SearchField
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>Search tips</Heading>
+          <Content>
+            <Text>
+              You can use modifiers like "date:" and "from:" to search by specific attributes.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://react-spectrum.adobe.com/"
+              target="_blank">React Spectrum</Link>
+          </Footer>
+        </ContextualHelp>
+      } />
+  ),
+  args: {
+    label: 'Search'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
index e99a4783d2e..93c82882c98 100644
--- a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
@@ -16,7 +16,7 @@ import AlignLeft from '../s2wf-icons/S2_Icon_AlignLeft_20_N.svg';
 import ListBulleted from '../s2wf-icons/S2_Icon_ListBulleted_20_N.svg';
 import ListMultiSelect from '../s2wf-icons/S2_Icon_ListMultiSelect_20_N.svg';
 import ListNumbered from '../s2wf-icons/S2_Icon_ListNumbered_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {SegmentedControl, SegmentedControlItem, Text} from '../src';
 import {style} from '../style' with {type: 'macro'};
 
@@ -34,44 +34,48 @@ const meta: Meta<typeof SegmentedControl> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
 
 const justifiedStyle = style({
   width: 400
 });
 
-export const Example = (args: any) => (
-  <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
-    <SegmentedControlItem id="day">Day</SegmentedControlItem>
-    <SegmentedControlItem id="week">Week</SegmentedControlItem>
-    <SegmentedControlItem id="month">Month</SegmentedControlItem>
-    <SegmentedControlItem id="year">Year</SegmentedControlItem>
-  </SegmentedControl>
-);
-
-Example.args = {
-  'aria-label': 'Time granularity'
+export const Example: Story = {
+  render: (args) => (
+    <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
+      <SegmentedControlItem id="day">Day</SegmentedControlItem>
+      <SegmentedControlItem id="week">Week</SegmentedControlItem>
+      <SegmentedControlItem id="month">Month</SegmentedControlItem>
+      <SegmentedControlItem id="year">Year</SegmentedControlItem>
+    </SegmentedControl>
+  ),
+  args: {
+    'aria-label': 'Time granularity'
+  }
 };
 
-export const WithIcons = (args: any) => (
-  <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
-    <SegmentedControlItem id="unordered"><ListBulleted /><Text>Unordered</Text></SegmentedControlItem>
-    <SegmentedControlItem id="ordered"><ListNumbered /><Text>Ordered</Text></SegmentedControlItem>
-    <SegmentedControlItem id="task list"><ListMultiSelect /><Text>Task List</Text></SegmentedControlItem>
-  </SegmentedControl>
-);
-
-WithIcons.args = {
-  'aria-label': 'List organization'
+export const WithIcons: Story = {
+  render: (args) => (
+    <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
+      <SegmentedControlItem id="unordered"><ListBulleted /><Text>Unordered</Text></SegmentedControlItem>
+      <SegmentedControlItem id="ordered"><ListNumbered /><Text>Ordered</Text></SegmentedControlItem>
+      <SegmentedControlItem id="task list"><ListMultiSelect /><Text>Task List</Text></SegmentedControlItem>
+    </SegmentedControl>
+  ),
+  args: {
+    'aria-label': 'List organization'
+  }
 };
 
-export const OnlyIcons = (args: any) => (
-  <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
-    <SegmentedControlItem aria-label="Align bottom" id="align bottom"><AlignBottom /></SegmentedControlItem>
-    <SegmentedControlItem aria-label="Align center" id="align center"><AlignCenter /></SegmentedControlItem>
-    <SegmentedControlItem aria-label="Align left" id="align left"><AlignLeft /></SegmentedControlItem>
-  </SegmentedControl>
-);
-
-OnlyIcons.args = {
-  'aria-label': 'Text alignment'
+export const OnlyIcons: Story = {
+  render: (args) => (
+    <SegmentedControl {...args} styles={args.isJustified ? justifiedStyle : undefined}>
+      <SegmentedControlItem aria-label="Align bottom" id="align bottom"><AlignBottom /></SegmentedControlItem>
+      <SegmentedControlItem aria-label="Align center" id="align center"><AlignCenter /></SegmentedControlItem>
+      <SegmentedControlItem aria-label="Align left" id="align left"><AlignLeft /></SegmentedControlItem>
+    </SegmentedControl>
+  ),
+  args: {
+    'aria-label': 'Text alignment'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/Slider.stories.tsx b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
index 5a5e9d946b2..cad59d99df7 100644
--- a/packages/@react-spectrum/s2/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {Slider} from '../src/Slider';
 import {style} from '../style' with { type: 'macro' };
 
@@ -33,73 +33,78 @@ const meta: Meta<typeof Slider> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Slider>;
 
-export const Example = (args: any) => (
-  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
-    <Slider {...args} />
-  </div>
-);
-
-Example.args = {
-  label: 'Cookies',
-  defaultValue: 30
+export const Example: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+      <Slider {...args} />
+    </div>
+  ),
+  args: {
+    label: 'Cookies',
+    defaultValue: 30
+  }
 };
 
-export const FillOffset = (args: any) => (
-  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
-    <Slider {...args} />
-  </div>
-);
-
-FillOffset.args = {
-  label: 'Exposure',
-  fillOffset: 0,
-  defaultValue: 1.83,
-  minValue: -5,
-  maxValue: 5,
-  formatOptions: {signDisplay: 'always'},
-  step: 0.01
+export const FillOffset: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+      <Slider {...args} />
+    </div>
+  ),
+  args: {
+    label: 'Exposure',
+    fillOffset: 0,
+    defaultValue: 1.83,
+    minValue: -5,
+    maxValue: 5,
+    formatOptions: {signDisplay: 'always'},
+    step: 0.01
+  }
 };
 
-export const FormatOptions = (args: any) => (
-  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
-    <Slider {...args} styles={style({width: 300})} />
-  </div>
-);
-
-FormatOptions.args = {
-  label: 'Currency',
-  defaultValue: 0,
-  maxValue: 500,
-  formatOptions: {style: 'currency', currency: 'JPY'}
+export const FormatOptions: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+      <Slider {...args} styles={style({width: 300})} />
+    </div>
+  ),
+  args: {
+    label: 'Currency',
+    defaultValue: 0,
+    maxValue: 500,
+    formatOptions: {style: 'currency', currency: 'JPY'}
+  }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
-    <Slider
-      {...args}
-      contextualHelp={
-        <ContextualHelp>
-          <Heading>What is a ice cream?</Heading>
-          <Content>
-            <Text>
-              A combination of sugar, eggs, milk, and cream is cooked to make
-              a custard base. Then, flavorings are added, and this flavored
-              mixture is carefully churned and frozen to make ice cream.
-            </Text>
-          </Content>
-          <Footer>
-            <Link
-              isStandalone
-              href="https://en.wikipedia.org/wiki/Ice_cream"
-              target="_blank">Learn more about ice cream</Link>
-          </Footer>
-        </ContextualHelp>
-      } />
-  </div>
-);
-
-ContextualHelpExample.args = {
-  label: 'Cookies',
-  defaultValue: 30
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+      <Slider
+        {...args}
+        contextualHelp={
+          <ContextualHelp>
+            <Heading>What is a ice cream?</Heading>
+            <Content>
+              <Text>
+                A combination of sugar, eggs, milk, and cream is cooked to make
+                a custard base. Then, flavorings are added, and this flavored
+                mixture is carefully churned and frozen to make ice cream.
+              </Text>
+            </Content>
+            <Footer>
+              <Link
+                isStandalone
+                href="https://en.wikipedia.org/wiki/Ice_cream"
+                target="_blank">Learn more about ice cream</Link>
+            </Footer>
+          </ContextualHelp>
+        } />
+    </div>
+  ),
+  args: {
+    label: 'Cookies',
+    defaultValue: 30
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
index 268ca51ff17..e4deebe2f41 100644
--- a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {StatusLight} from '../src';
 import {style} from '../style' with {type: 'macro'};
 
@@ -27,15 +27,18 @@ const meta: Meta<typeof StatusLight> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof StatusLight>;
 
-export const Example = (args: any) => <StatusLight {...args}>Status</StatusLight>;
-
-Example.args = {
-  variant: 'positive'
+export const Example: Story = {
+  render: (args) => <StatusLight {...args}>Status</StatusLight>,
+  args: {
+    variant: 'positive'
+  }
 };
 
-export const LongLabel = (args: any) => <StatusLight {...args} styles={style({maxWidth: 128})}>StatusLight with very long label so we can see wrapping</StatusLight>;
-
-LongLabel.args = {
-  variant: 'positive'
+export const LongLabel: Story = {
+  render: (args) => <StatusLight {...args} styles={style({maxWidth: 128})}>StatusLight with very long label so we can see wrapping</StatusLight>,
+  args: {
+    variant: 'positive'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
index 02cd128121e..de4f2beff2f 100644
--- a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
@@ -11,7 +11,8 @@
  */
 
 import {Link} from '../src';
-import React from 'react';
+import type {Meta} from '@storybook/react';
+import React, {ReactElement} from 'react';
 import {style} from '../style' with {type: 'macro'};
 
 export default {
@@ -19,9 +20,9 @@ export default {
   parameters: {
     docs: {disable: true}
   }
-};
+} as Meta<typeof Example>;
 
-export function Example() {
+export function Example(): ReactElement {
   return (
     <div className={style({backgroundColor: 'orange-500', color: 'black', font: 'body', paddingX: 8, paddingY: 4, borderRadius: 'lg'})}>
       Test
@@ -29,7 +30,7 @@ export function Example() {
   );
 }
 
-export function Well() {
+export function Well(): ReactElement {
   return (
     <div
       className={style({
diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
index e73cb4adec0..db08b6433d5 100644
--- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 import {Switch} from '../src';
 
@@ -28,7 +28,12 @@ const meta: Meta<typeof Switch> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Switch>;
 
-export const Example = (args: any) => <Switch {...args}>Wi-Fi</Switch>;
+export const Example: Story = {
+  render: (args) => <Switch {...args}>Wi-Fi</Switch>
+};
 
-export const LongLabel = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
+export const LongLabel: Story = {
+  render: (args) => <Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>
+};
diff --git a/packages/@react-spectrum/s2/stories/TableView.stories.tsx b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
index 59396601397..cfd2f7b569e 100644
--- a/packages/@react-spectrum/s2/stories/TableView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
@@ -11,15 +11,15 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionButton, Cell, Column, Content, Heading, IllustratedMessage, Link, MenuItem, MenuSection, Row, TableBody, TableHeader, TableView, Text} from '../src';
+import {ActionButton, Cell, Column, Content, Heading, IllustratedMessage, Link, MenuItem, MenuSection, Row, TableBody, TableHeader, TableView, TableViewProps, Text} from '../src';
 import {categorizeArgTypes} from './utils';
 import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement, useState} from 'react';
 import {SortDescriptor} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList} from '@react-stately/data';
-import {useState} from 'react';
 
 let onActionFunc = action('onAction');
 let noOnAction = null;
@@ -61,7 +61,7 @@ const meta: Meta<typeof TableView> = {
 
 export default meta;
 
-const StaticTable = (args: any) => (
+const StaticTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
     <TableHeader>
       <Column isRowHeader>Name</Column>
@@ -96,18 +96,18 @@ const StaticTable = (args: any) => (
   </TableView>
 );
 
-export const Example = {
+export const Example: StoryObj<typeof StaticTable> = {
   render: StaticTable,
   args: {
     selectionMode: 'multiple',
-    onResize: null,
-    onResizeStart: null,
-    onResizeEnd: null,
-    onLoadMore: null
+    onResize: undefined,
+    onResizeStart: undefined,
+    onResizeEnd: undefined,
+    onLoadMore: undefined
   }
 };
 
-export const DisabledRows = {
+export const DisabledRows: StoryObj<typeof StaticTable> = {
   ...Example,
   args: {
     ...Example.args,
@@ -135,7 +135,7 @@ let items = [
   {id: 10, foo: 'Foo 10', bar: 'Bar 10', baz: 'Baz 10', yah: 'Yah long long long 10'}
 ];
 
-const DynamicTable = (args: any) => (
+const DynamicTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
     <TableHeader columns={columns}>
       {(column) => (
@@ -154,8 +154,8 @@ const DynamicTable = (args: any) => (
   </TableView>
 );
 
-export const DynamicColumns = {
-  render: function DynamicColumnsExample(args: any) {
+export const DynamicColumns: StoryObj<typeof DynamicTable> = {
+  render: function DynamicColumnsExample(args) {
     let [cols, setColumns] = useState(columns);
     return (
       <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
@@ -187,7 +187,7 @@ export const DynamicColumns = {
   }
 };
 
-const DynamicTableWithCustomMenus = (args: any) => (
+const DynamicTableWithCustomMenus = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
     <TableHeader columns={columns}>
       {(column) => (
@@ -221,9 +221,9 @@ const DynamicTableWithCustomMenus = (args: any) => (
 );
 
 let sortItems = items;
-const DynamicSortableTableWithCustomMenus = (args: any) => {
+const DynamicSortableTableWithCustomMenus = (args: TableViewProps): ReactElement => {
   let [items, setItems] = useState(sortItems);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
   let onSortChange = (sortDescriptor: SortDescriptor) => {
     let {direction = 'ascending', column = 'name'} = sortDescriptor;
 
@@ -274,7 +274,7 @@ const DynamicSortableTableWithCustomMenus = (args: any) => {
   );
 };
 
-export const Dynamic = {
+export const Dynamic: StoryObj<typeof DynamicTable> = {
   render: DynamicTable,
   args: {
     ...Example.args,
@@ -282,7 +282,7 @@ export const Dynamic = {
   }
 };
 
-export const DynamicCustomMenus = {
+export const DynamicCustomMenus: StoryObj<typeof DynamicTableWithCustomMenus> = {
   render: DynamicTableWithCustomMenus,
   args: {
     ...Example.args,
@@ -290,7 +290,7 @@ export const DynamicCustomMenus = {
   }
 };
 
-export const DynamicSortableCustomMenus = {
+export const DynamicSortableCustomMenus: StoryObj<typeof DynamicSortableTableWithCustomMenus> = {
   render: DynamicSortableTableWithCustomMenus,
   args: {
     ...Example.args,
@@ -312,7 +312,7 @@ function renderEmptyState() {
   );
 }
 
-const EmptyStateTable = (args: any) => (
+const EmptyStateTable = (args: TableViewProps): ReactElement => (
   <TableView aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
     <TableHeader columns={columns}>
       {(column) => (
@@ -325,14 +325,14 @@ const EmptyStateTable = (args: any) => (
   </TableView>
 );
 
-export const EmptyState = {
+export const EmptyState: StoryObj<typeof EmptyStateTable> = {
   render: EmptyStateTable,
   args: {
     ...Example.args
   }
 };
 
-export const LoadingStateNoItems = {
+export const LoadingStateNoItems: StoryObj<typeof EmptyStateTable> = {
   render: EmptyStateTable,
   args: {
     ...Example.args,
@@ -346,7 +346,7 @@ export const LoadingStateNoItems = {
   }
 };
 
-export const LoadingStateWithItems = {
+export const LoadingStateWithItems: StoryObj<typeof DynamicTable> = {
   render: DynamicTable,
   args: {
     ...Example.args,
@@ -360,7 +360,7 @@ export const LoadingStateWithItems = {
   }
 };
 
-export const LoadingStateWithItemsStatic = {
+export const LoadingStateWithItemsStatic: StoryObj<typeof StaticTable> = {
   render: StaticTable,
   args: {
     ...Example.args,
@@ -381,7 +381,7 @@ let dividerColumns = [
   {name: 'Yah', id: 'yah'}
 ];
 
-const ShowDividers = (args: any) => {
+const ShowDividers = (args: TableViewProps): ReactElement => {
   return (
     <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={dividerColumns}>
@@ -402,7 +402,7 @@ const ShowDividers = (args: any) => {
   );
 };
 
-export const ShowDividersStory = {
+export const ShowDividersStory: StoryObj<typeof ShowDividers> = {
   render: ShowDividers,
   args: {
     ...Example.args
@@ -417,7 +417,7 @@ let alignColumns = [
   {name: 'Yah', id: 'yah', align: 'end'}
 ];
 
-const TextAlign = (args: any) => {
+const TextAlign = (args: TableViewProps): ReactElement => {
   return (
     <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={alignColumns}>
@@ -438,7 +438,7 @@ const TextAlign = (args: any) => {
   );
 };
 
-export const TextAlignStory = {
+export const TextAlignStory: StoryObj<typeof TextAlign> = {
   render: TextAlign,
   args: {
     ...Example.args
@@ -453,7 +453,7 @@ interface Character {
   birth_year: number
 }
 
-const OnLoadMoreTable = (args: any) => {
+const OnLoadMoreTable = (args: TableViewProps & {delay: number}): ReactElement => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -494,7 +494,7 @@ const OnLoadMoreTable = (args: any) => {
   );
 };
 
-export const OnLoadMoreTableStory  = {
+export const OnLoadMoreTableStory: StoryObj<typeof OnLoadMoreTable> = {
   render: OnLoadMoreTable,
   args: {
     ...Example.args,
@@ -532,9 +532,9 @@ let sortitems = [
   {id: 20, name: 'T', height: '20', weight: '2'}
 ];
 
-const SortableTable = (args: any) => {
+const SortableTable = (args: TableViewProps): ReactElement => {
   let [items, setItems] = useState(sortitems);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
   let onSortChange = (sortDescriptor: SortDescriptor) => {
     let {direction = 'ascending', column = 'name'} = sortDescriptor;
 
@@ -570,28 +570,38 @@ const SortableTable = (args: any) => {
   );
 };
 
-export const Sorting = {
+export const Sorting: StoryObj<typeof SortableTable> = {
   ...Example,
   render: SortableTable,
   name: 'sortable'
 };
 
+type ResizeColumn = Array<{
+  name: string,
+  id: string,
+  isRowHeader?: boolean,
+  allowsResizing?: boolean,
+  showDivider: boolean,
+  align: 'start' | 'center' | 'end',
+  allowsSorting?: boolean
+}>;
+
 let resizeColumn = [
   {name: 'Name', id: 'name', isRowHeader: true, allowsResizing: true, showDivider: true, align: 'end'},
   {name: 'Height', id: 'height', align: 'center'},
   {name: 'Weight', id: 'weight', allowsResizing: true, align: 'center'}
-];
+] as ResizeColumn;
 
 let sortResizeColumns = [
   {name: 'Name', id: 'name', isRowHeader: true, allowsResizing: true, showDivider: true, allowsSorting: true},
   {name: 'Height', id: 'height', allowsSorting: true},
   {name: 'Weight', id: 'weight', allowsResizing: true, allowsSorting: true}
-];
+] as ResizeColumn;
 
-const SortableResizableTable = (args: any) => {
+const SortableResizableTable = (args: TableViewProps & {isSortable: boolean, columns: ResizeColumn}): ReactElement => {
   let {isSortable} = args;
   let [items, setItems] = useState(sortitems);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
   let onSortChange = (sortDescriptor: SortDescriptor) => {
     let {direction = 'ascending', column = 'name'} = sortDescriptor;
 
@@ -608,7 +618,7 @@ const SortableResizableTable = (args: any) => {
   };
 
   return (
-    <TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
+    <TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : undefined} onSortChange={isSortable ? onSortChange : undefined} styles={style({width: 384, height: 320})}>
       <TableHeader columns={args.columns}>
         {(column: any) => (
           <Column {...column}>{column.name}</Column>
@@ -627,7 +637,7 @@ const SortableResizableTable = (args: any) => {
   );
 };
 
-export const ResizingTable = {
+export const ResizingTable: StoryObj<typeof SortableResizableTable> = {
   render: SortableResizableTable,
   args: {
     onResizeStart: action('onResizeStart'),
@@ -638,7 +648,7 @@ export const ResizingTable = {
   name: 'resizing only table'
 };
 
-export const ResizingSortableTable = {
+export const ResizingSortableTable: StoryObj<typeof SortableResizableTable> = {
   render: SortableResizableTable,
   args: {
     onResizeStart: action('onResizeStart'),
@@ -649,7 +659,7 @@ export const ResizingSortableTable = {
   name: 'resizing and sortable table'
 };
 
-function AsyncLoadingExample(props) {
+function AsyncLoadingExample(props: TableViewProps): ReactElement {
   interface Item {
     data: {
       id: string,
@@ -720,7 +730,7 @@ function AsyncLoadingExample(props) {
   );
 }
 
-export const ResizingUncontrolledSortableColumns = {
+export const ResizingUncontrolledSortableColumns: StoryObj<typeof AsyncLoadingExample> = {
   render: (args) => <AsyncLoadingExample {...args} />,
   args: {
     ...Example.args,
@@ -750,7 +760,7 @@ for (let i = 0; i < 1000; i++) {
   manyRows.push(row);
 }
 
-export const ManyItems = {
+export const ManyItems: StoryObj<typeof TableView> = {
   render: (args) => (
     <TableView aria-label="Many items table" {...args} styles={style({width: 800, height: 400})}>
       <TableHeader columns={manyColumns}>
@@ -780,7 +790,7 @@ export const ManyItems = {
   }
 };
 
-export const FlexHeight = {
+export const FlexHeight: StoryObj<typeof TableView> = {
   render: (args) => (
     <div className={style({display: 'flex', width: 400, height: 400, alignItems: 'stretch', flexDirection: 'column'})}>
       <div className={style({backgroundColor: 'blue-200'})}>Flex child 1</div>
@@ -815,7 +825,7 @@ export const FlexHeight = {
 };
 
 
-export const FlexWidth = {
+export const FlexWidth: StoryObj<typeof TableView> = {
   render: (args) => (
     <div className={style({display: 'flex', width: 400, height: 400, alignItems: 'stretch'})}>
       <div className={style({backgroundColor: 'blue-200'})}>Flex child 1</div>
@@ -850,7 +860,7 @@ export const FlexWidth = {
 };
 
 
-function ColSpanExample(args: any) {
+function ColSpanExample(args: TableViewProps): ReactElement {
   let [hide, setHide] = useState(false);
   return (
     <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
@@ -891,8 +901,8 @@ function ColSpanExample(args: any) {
 }
 
 
-export const ColSpan = {
-  render: (args: any) => (
+export const ColSpan: StoryObj<typeof ColSpanExample> = {
+  render: (args) => (
     <ColSpanExample {...args} />
   ),
   parameters: {
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 4ac61e43749..98063f7d1e8 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -14,9 +14,10 @@ import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
 import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactElement} from 'react';
 import {style} from '../style' with { type: 'macro' };
-import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
+import {Tab, TabList, TabPanel, Tabs, TabsProps} from '../src';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -32,56 +33,62 @@ const meta: Meta<typeof Tabs> = {
 
 export default meta;
 
+type Story = StoryObj<typeof Tabs>;
+
 const tabs = style({width: 'full', height: 'full'});
 
-export const Example = (args: any) => (
-  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={tabs} aria-label="History of Ancient Rome">
-      <TabList>
-        <Tab id="FoR">Founding of Rome</Tab>
-        <Tab id="MaR">Monarchy and Republic</Tab>
-        <Tab id="Emp">Empire</Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        <div className={style({overflow: 'auto', height: 'full'})}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.
-        </div>
-      </TabPanel>
-      <TabPanel id="MaR">
-        <div className={style({overflow: 'auto', height: 'full'})}>
-          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
-          <div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
-        </div>
-      </TabPanel>
-      <TabPanel id="Emp">
-        <div className={style({overflow: 'auto', height: 'full'})}>Alea jacta est.</div>
-      </TabPanel>
-    </Tabs>
-  </div>
-);
+export const Example: Story = {
+  render: (args) => (
+    <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+      <Tabs {...args} styles={tabs} aria-label="History of Ancient Rome">
+        <TabList>
+          <Tab id="FoR">Founding of Rome</Tab>
+          <Tab id="MaR">Monarchy and Republic</Tab>
+          <Tab id="Emp">Empire</Tab>
+        </TabList>
+        <TabPanel id="FoR">
+          <div className={style({overflow: 'auto', height: 'full'})}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.
+          </div>
+        </TabPanel>
+        <TabPanel id="MaR">
+          <div className={style({overflow: 'auto', height: 'full'})}>
+            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
+            <div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
+          </div>
+        </TabPanel>
+        <TabPanel id="Emp">
+          <div className={style({overflow: 'auto', height: 'full'})}>Alea jacta est.</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  )
+};
 
-export const Disabled = (args: any) => (
-  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={tabs} disabledKeys={['FoR', 'MaR', 'Emp']} aria-label="History of Ancient Rome">
-      <TabList>
-        <Tab id="FoR">Founding of Rome</Tab>
-        <Tab id="MaR">Monarchy and Republic</Tab>
-        <Tab id="Emp">Empire</Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </TabPanel>
-      <TabPanel id="MaR">
-        Senatus Populusque Romanus.
-      </TabPanel>
-      <TabPanel id="Emp">
-        Alea jacta est.
-      </TabPanel>
-    </Tabs>
-  </div>
-);
+export const Disabled: Story = {
+  render: (args) => (
+    <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+      <Tabs {...args} styles={tabs} disabledKeys={['FoR', 'MaR', 'Emp']} aria-label="History of Ancient Rome">
+        <TabList>
+          <Tab id="FoR">Founding of Rome</Tab>
+          <Tab id="MaR">Monarchy and Republic</Tab>
+          <Tab id="Emp">Empire</Tab>
+        </TabList>
+        <TabPanel id="FoR">
+          Arma virumque cano, Troiae qui primus ab oris.
+        </TabPanel>
+        <TabPanel id="MaR">
+          Senatus Populusque Romanus.
+        </TabPanel>
+        <TabPanel id="Emp">
+          Alea jacta est.
+        </TabPanel>
+      </Tabs>
+    </div>
+  )
+};
 
-const IconsRender = (props) => (
+const IconsRender = (props: TabsProps): ReactElement => (
   <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...props} styles={tabs} aria-label="History of Ancient Rome">
       <TabList>
@@ -102,7 +109,7 @@ const IconsRender = (props) => (
   </div>
 );
 
-export const Icons = {
+export const Icons: Story = {
   render: (args) => <IconsRender {...args} />
 };
 
@@ -117,20 +124,22 @@ let items: Item[] = [
   {id: 3, title: 'Gamepad settings', description: 'Configure the buttons and triggers on your gamepad.'}
 ];
 
-export const Dynamic = (args: any) => (
-  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <div id="the-label" className={style({font: 'ui'})}>External label for tabs</div>
-    <Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
-      <TabList items={items}>
-        {item => <Tab>{item.title}</Tab>}
-      </TabList>
-      <Collection items={items}>
-        {item => (
-          <TabPanel>
-            {item.description}
-          </TabPanel>
-      )}
-      </Collection>
-    </Tabs>
-  </div>
-);
+export const Dynamic: Story = {
+  render: (args) => (
+    <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+      <div id="the-label" className={style({font: 'ui'})}>External label for tabs</div>
+      <Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
+        <TabList items={items}>
+          {item => <Tab>{item.title}</Tab>}
+        </TabList>
+        <Collection items={items}>
+          {item => (
+            <TabPanel>
+              {item.description}
+            </TabPanel>
+        )}
+        </Collection>
+      </Tabs>
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
index 9511e0b33c5..a3e2674188f 100644
--- a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
@@ -23,7 +23,7 @@ import {
   TagGroup,
   Text
 } from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {style} from '../style' with {type: 'macro'};
 
@@ -52,8 +52,10 @@ const meta: Meta<typeof TagGroup<any>> = {
 
 export default meta;
 
-export let Example = {
-  render: (args: any) => {
+type Story = StoryObj<typeof TagGroup>;
+
+export const Example: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -105,8 +107,8 @@ let items: Array<ITagItem> = [
   {name: 'Vanilla', id: 'vanilla'},
   {name: 'Coffee', id: 'coffee'}
 ];
-export let Dynamic = {
-  render: (args: any) => {
+export const Dynamic: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -129,8 +131,8 @@ export let Dynamic = {
 const SRC_URL_1 =
   'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png';
 
-export let Disabled = {
-  render: (args: any) => {
+export const Disabled: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -170,8 +172,8 @@ function renderEmptyState() {
     </span>
   );
 }
-export let Empty = {
-  render: (args: any) => {
+export const Empty: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -185,8 +187,8 @@ export let Empty = {
     label: 'Ice cream flavor'
   }
 };
-export let DefaultEmpty = {
-  render: (args: any) => {
+export const DefaultEmpty: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -201,8 +203,8 @@ export let DefaultEmpty = {
   }
 };
 
-export let Links = {
-  render: (args: any) => {
+export const Links: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
@@ -221,8 +223,8 @@ export let Links = {
   }
 };
 
-export const ContextualHelpExample = {
-  render: (args: any) => {
+export const ContextualHelpExample: Story = {
+  render: (args) => {
     let props = {...args};
     if (args.onRemove) {
       props.onRemove = action('remove');
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index 2c68b70aadf..eea59c28416 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -14,7 +14,7 @@ import {Button, Form, TextArea, TextField} from '../src';
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof TextField> = {
@@ -35,118 +35,134 @@ const meta: Meta<typeof TextField> = {
 
 export default meta;
 
-export const Example = (args: any) => <TextField {...args} />;
+type StoryTextField = StoryObj<typeof TextField>;
+type StoryTextArea = StoryObj<typeof TextArea>;
+
+export const Example: StoryTextField = {
+  args: {
+    label: 'Name'
+  }
+};
 
 Example.args = {
   label: 'Name'
 };
 
-export const Validation = (args: any) => (
-  <Form>
-    <TextField {...args} />
-    <Button type="submit" variant="primary">Submit</Button>
-  </Form>
-);
-
-Validation.args = {
-  ...Example.args,
-  isRequired: true
+export const Validation: StoryTextField = {
+  render: (args) => (
+    <Form>
+      <TextField {...args} />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    ...Example.args,
+    isRequired: true
+  }
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <TextField 
-    {...args}
-    contextualHelp={
-      <ContextualHelp>
-        <Heading>What is a segment?</Heading>
-        <Content>
-          <Text>
-            Segments identify who your visitors are, what devices and services they
-            use, where they navigated from, and much more.
-          </Text>
-        </Content>
-        <Footer>
-          <Link
-            isStandalone
-            href="https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/personalization/campaign-segmentation"
-            target="_blank">Learn more about segments</Link>
-        </Footer>
-      </ContextualHelp>
-    } />
-);
-
-ContextualHelpExample.args = {
-  label: 'Segment'
+export const ContextualHelpExample: StoryTextField = {
+  render: (args) => (
+    <TextField
+      {...args}
+      contextualHelp={
+        <ContextualHelp>
+          <Heading>What is a segment?</Heading>
+          <Content>
+            <Text>
+              Segments identify who your visitors are, what devices and services they
+              use, where they navigated from, and much more.
+            </Text>
+          </Content>
+          <Footer>
+            <Link
+              isStandalone
+              href="https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/personalization/campaign-segmentation"
+              target="_blank">Learn more about segments</Link>
+          </Footer>
+        </ContextualHelp>
+      } />
+  ),
+  args: {
+    label: 'Segment'
+  }
 };
 
-export const TextAreaExample = (args: any) => <TextArea {...args} />;
-TextAreaExample.args = {
-  label: 'Comment'
+export const TextAreaExample: StoryTextArea = {
+  render: (args) => <TextArea {...args} />,
+  args: {
+    label: 'Comment'
+  }
 };
 
-export const CustomWidth = (args: any) => <TextField {...args} styles={style({width: 384})} />;
-
-CustomWidth.args = {
-  label: 'Name'
-};
-CustomWidth.parameters = {
-  docs: {
-    disable: true
+export const CustomWidth: StoryTextField = {
+  render: (args) => <TextField {...args} styles={style({width: 384})} />,
+  args: {
+    label: 'Name'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const SmallWidth = (args: any) => <TextField {...args} styles={style({width: 48})} />;
-
-SmallWidth.args = {
-  label: 'Name'
-};
-SmallWidth.parameters = {
-  docs: {
-    disable: true
+export const SmallWidth: StoryTextField = {
+  render: (args) => <TextField {...args} styles={style({width: 48})} />,
+  args: {
+    label: 'Name'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const UNSAFEWidth = (args: any) => <TextField {...args} UNSAFE_style={{width: 384}} />;
-
-UNSAFEWidth.args = {
-  label: 'Name'
-};
-UNSAFEWidth.parameters = {
-  docs: {
-    disable: true
+export const UNSAFEWidth: StoryTextField = {
+  render: (args) => <TextField {...args} UNSAFE_style={{width: 384}} />,
+  args: {
+    label: 'Name'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const InForm = (args: any) => (
-  <Form>
-    <TextField {...args} />
-    <Button type="submit" variant="primary">Submit</Button>
-  </Form>
-);
-
-InForm.args = {
-  ...Example.args,
-  isRequired: true
-};
-InForm.parameters = {
-  docs: {
-    disable: true
+export const InForm: StoryTextField = {
+  render: (args) => (
+    <Form>
+      <TextField {...args} />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    ...Example.args,
+    isRequired: true
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
 
-export const FormCustomWidth = (args: any) => (
-  <Form styles={style({width: 384})} labelPosition={args.labelPosition}>
-    <TextField {...args} />
-    <Button type="submit" variant="primary">Submit</Button>
-  </Form>
-);
-
-FormCustomWidth.args = {
-  ...Example.args,
-  isRequired: true
-};
-FormCustomWidth.parameters = {
-  docs: {
-    disable: true
+export const FormCustomWidth: StoryTextField = {
+  render: (args) => (
+    <Form styles={style({width: 384})} labelPosition={args.labelPosition}>
+      <TextField {...args} />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    ...Example.args,
+    isRequired: true
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/Toast.stories.tsx b/packages/@react-spectrum/s2/stories/Toast.stories.tsx
index 8f2fe8a702b..5c5f04d9158 100644
--- a/packages/@react-spectrum/s2/stories/Toast.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Toast.stories.tsx
@@ -12,12 +12,12 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, ButtonGroup, UNSTABLE_ToastContainer as ToastContainer, UNSTABLE_ToastQueue as ToastQueue} from '../src';
-import type {Meta} from '@storybook/react';
-import {SpectrumToast} from '../src/Toast';
+import type {Meta, StoryObj} from '@storybook/react';
+import {SpectrumToast, SpectrumToastValue, ToastOptions, ToastPlacement} from '../src/Toast';
 import {UNSTABLE_ToastStateContext} from 'react-aria-components';
 import {useToastState} from 'react-stately';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta<ToastStoryProps> = {
   parameters: {
     layout: 'centered'
   },
@@ -35,64 +35,75 @@ const meta: Meta<typeof Example> = {
   args: {
     actionLabel: 'Action!',
     shouldCloseOnAction: false,
-    timeout: null,
+    timeout: undefined,
     placement: 'bottom'
   }
 };
 
 export default meta;
 
-export const Example = (args: any) => (
-  <>
-    <ToastContainer placement={args.placement} />
-    <ButtonGroup>
-      <Button
-        onPress={() => ToastQueue.neutral('Toast available', {...args, onAction: action('onAction'), onClose: action('onClose')})}
-        variant="secondary">
-        Show Neutral Toast
-      </Button>
-      <Button
-        onPress={() => ToastQueue.positive('Toast is done!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
-        variant="primary">
-        Show Positive Toast
-      </Button>
-      <Button
-        onPress={() => ToastQueue.negative('Toast is burned!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
-        variant="negative">
-        Show Negative Toast
-      </Button>
-      <Button
-        onPress={() => ToastQueue.info('Toasting…', {...args, onAction: action('onAction'), onClose: action('onClose')})}
-        variant="accent">
-        Show Info Toast
-      </Button>
-      <Button
-        onPress={() => ToastQueue.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', {...args, onClose: action('onClose')})}
-        variant="accent">
-        Show Long Toast
-      </Button>
-    </ButtonGroup>
-  </>
-);
+interface ToastStoryProps extends ToastOptions {
+  placement?: ToastPlacement,
+  actionLabel: string
+}
 
-export const Toast = (args: any) => (
-  <UNSTABLE_ToastStateContext.Provider value={useToastState()}>
-    <SpectrumToast
-      toast={{
-        key: 'x',
-        content: args
-      }} />
-  </UNSTABLE_ToastStateContext.Provider>
-);
+type Story = StoryObj<ToastStoryProps>;
 
-Toast.args = {
-  variant: 'info',
-  children: 'Toasting…'
+export const Example: Story = {
+  render: (args) => (
+    <>
+      <ToastContainer placement={args.placement} />
+      <ButtonGroup>
+        <Button
+          onPress={() => ToastQueue.neutral('Toast available', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          variant="secondary">
+          Show Neutral Toast
+        </Button>
+        <Button
+          onPress={() => ToastQueue.positive('Toast is done!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          variant="primary">
+          Show Positive Toast
+        </Button>
+        <Button
+          onPress={() => ToastQueue.negative('Toast is burned!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          variant="negative">
+          Show Negative Toast
+        </Button>
+        <Button
+          onPress={() => ToastQueue.info('Toasting…', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          variant="accent">
+          Show Info Toast
+        </Button>
+        <Button
+          onPress={() => ToastQueue.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', {...args, onClose: action('onClose')})}
+          variant="accent">
+          Show Long Toast
+        </Button>
+      </ButtonGroup>
+    </>
+  )
 };
 
-Toast.argTypes = {
-  variant: {
-    control: 'radio',
-    options: ['neutral', 'info', 'positive', 'negative']
+export const Toast: StoryObj<SpectrumToastValue> = {
+  render: function Example(args) {
+    return (
+      <UNSTABLE_ToastStateContext.Provider value={useToastState()}>
+        <SpectrumToast
+          toast={{
+            key: 'x',
+            content: args
+          }} />
+      </UNSTABLE_ToastStateContext.Provider>
+    );
+  },
+  args: {
+    variant: 'info',
+    children: 'Toasting…'
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['neutral', 'info', 'positive', 'negative']
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
index 5c59692d47d..bdfba9b7af9 100644
--- a/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {categorizeArgTypes, StaticColorDecorator} from './utils';
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {Text, ToggleButton} from '../src';
 
@@ -31,12 +31,12 @@ const meta: Meta<typeof ToggleButton> = {
 
 export default meta;
 
-export const Example: StoryFn<typeof ToggleButton> = (args) => {
-  return (
+export const Example: StoryObj<typeof ToggleButton> = {
+  render: (args) => (
     <div style={{display: 'flex', gap: 8}}>
       <ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
       <ToggleButton {...args}>Press me</ToggleButton>
       <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
     </div>
-  );
+  )
 };
diff --git a/packages/@react-spectrum/s2/stories/ToggleButtonGroup.stories.tsx b/packages/@react-spectrum/s2/stories/ToggleButtonGroup.stories.tsx
index 144f2a29942..0978ac173dc 100644
--- a/packages/@react-spectrum/s2/stories/ToggleButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ToggleButtonGroup.stories.tsx
@@ -13,7 +13,7 @@
 import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
 import {categorizeArgTypes, StaticColorDecorator} from './utils';
 import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg';
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 import {Text, ToggleButton, ToggleButtonGroup} from '../src';
 import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';
@@ -48,18 +48,22 @@ let justifiedStyle = style({
   }
 });
 
-export const Example: StoryFn<typeof ToggleButtonGroup> = (args) => (
-  <ToggleButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
-    <ToggleButton id={2}><Italic /><Text slot="label">Italic</Text></ToggleButton>
-    <ToggleButton id={3}><Underline /><Text slot="label">Underline</Text></ToggleButton>
-  </ToggleButtonGroup>
-);
+export const Example: StoryObj<typeof ToggleButtonGroup> = {
+  render: (args) => (
+    <ToggleButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
+      <ToggleButton id={2}><Italic /><Text slot="label">Italic</Text></ToggleButton>
+      <ToggleButton id={3}><Underline /><Text slot="label">Underline</Text></ToggleButton>
+    </ToggleButtonGroup>
+  )
+};
 
-export const IconOnly: StoryFn<typeof ToggleButtonGroup> = (args) => (
-  <ToggleButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ToggleButton id={1} aria-label="Bold"><Bold /></ToggleButton>
-    <ToggleButton id={2} aria-label="Italic"><Italic /></ToggleButton>
-    <ToggleButton id={3} aria-label="Underline"><Underline /></ToggleButton>
-  </ToggleButtonGroup>
-);
+export const IconOnly: StoryObj<typeof ToggleButtonGroup> = {
+  render: (args) => (
+    <ToggleButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ToggleButton id={1} aria-label="Bold"><Bold /></ToggleButton>
+      <ToggleButton id={2} aria-label="Italic"><Italic /></ToggleButton>
+      <ToggleButton id={3} aria-label="Underline"><Underline /></ToggleButton>
+    </ToggleButtonGroup>
+  )
+};
diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index f61f0ae7610..3f1fac3665a 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -22,7 +22,8 @@ import {
   Text,
   TreeView,
   TreeViewItem,
-  TreeViewItemContent
+  TreeViewItemContent,
+  TreeViewProps
 } from '../src';
 import {categorizeArgTypes} from './utils';
 import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
@@ -30,8 +31,8 @@ import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
-import type {Meta} from '@storybook/react';
-import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import React, {ReactElement} from 'react';
 
 let onActionFunc = action('onAction');
 let noOnAction = null;
@@ -70,8 +71,7 @@ const meta: Meta<typeof TreeView> = {
 
 export default meta;
 
-
-const TreeExampleStatic = (args) => (
+const TreeExampleStatic = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -179,14 +179,14 @@ const TreeExampleStatic = (args) => (
   </div>
 );
 
-export const Example = {
+export const Example: StoryObj<typeof TreeExampleStatic> = {
   render: TreeExampleStatic,
   args: {
     selectionMode: 'multiple'
   }
 };
 
-const TreeExampleStaticNoActions = (args) => (
+const TreeExampleStaticNoActions = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -234,7 +234,7 @@ const TreeExampleStaticNoActions = (args) => (
   </div>
 );
 
-export const ExampleNoActions = {
+export const ExampleNoActions: StoryObj<typeof TreeExampleStaticNoActions> = {
   render: TreeExampleStaticNoActions,
   args: {
     selectionMode: 'multiple'
@@ -273,7 +273,7 @@ let rows = [
   ]}
 ];
 
-const DynamicTreeItem = (props) => {
+const DynamicTreeItem = (props): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
@@ -310,7 +310,7 @@ const DynamicTreeItem = (props) => {
   );
 };
 
-const TreeExampleDynamic = (args) => (
+const TreeExampleDynamic = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
     <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
       {(item: any) => (
@@ -325,7 +325,7 @@ const TreeExampleDynamic = (args) => (
   </div>
 );
 
-export const Dynamic = {
+export const Dynamic: StoryObj<typeof TreeExampleDynamic> = {
   render: TreeExampleDynamic,
   args: {
     ...Example.args,
@@ -333,7 +333,7 @@ export const Dynamic = {
   }
 };
 
-function renderEmptyState() {
+function renderEmptyState(): ReactElement {
   return (
     <IllustratedMessage>
       <FolderOpen />
@@ -347,7 +347,7 @@ function renderEmptyState() {
   );
 }
 
-export const Empty = {
+export const Empty: StoryObj<typeof TreeExampleDynamic> = {
   render: TreeExampleDynamic,
   args: {
     renderEmptyState,
@@ -355,7 +355,7 @@ export const Empty = {
   }
 };
 
-const TreeExampleWithLinks = (args) => (
+const TreeExampleWithLinks = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (
@@ -371,7 +371,7 @@ const TreeExampleWithLinks = (args) => (
   </div>
 );
 
-export const WithLinks = {
+export const WithLinks: StoryObj<typeof TreeExampleWithLinks> = {
   ...Dynamic,
   render: TreeExampleWithLinks,
   name: 'Tree with links',
diff --git a/packages/@react-spectrum/s2/stories/utils.tsx b/packages/@react-spectrum/s2/stories/utils.tsx
index 9a166a56d8e..dd179bc6f6a 100644
--- a/packages/@react-spectrum/s2/stories/utils.tsx
+++ b/packages/@react-spectrum/s2/stories/utils.tsx
@@ -11,7 +11,7 @@
  */
 
 
-import {ReactNode, useState} from 'react';
+import {ReactElement, ReactNode, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 
 type StaticColor = 'black' | 'white' | 'auto' | undefined;
@@ -25,7 +25,7 @@ function getBackgroundColor(staticColor: StaticColor) {
   return undefined;
 }
 
-export function StaticColorProvider(props: {children: ReactNode, staticColor?: StaticColor}) {
+export function StaticColorProvider(props: {children: ReactNode, staticColor?: StaticColor}): ReactElement {
   let [autoBg, setAutoBg] = useState('#5131c4');
   return (
     <>
@@ -39,7 +39,7 @@ export function StaticColorProvider(props: {children: ReactNode, staticColor?: S
         {props.children}
       </div>
       {props.staticColor === 'auto' && (
-        <label 
+        <label
           className={style({
             display: 'flex',
             alignItems: 'center',
@@ -58,7 +58,7 @@ export function StaticColorProvider(props: {children: ReactNode, staticColor?: S
   );
 }
 
-export const StaticColorDecorator = (Story: any, {args}: any) => (
+export const StaticColorDecorator = (Story: any, {args}: any): ReactElement => (
   <StaticColorProvider staticColor={args.staticColor}>
     <Story />
   </StaticColorProvider>

From 7583104dc907282ea917d5e44e9d3f73c6d13395 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 10:55:30 +1000
Subject: [PATCH 02/12] fix any types in story

---
 .../@react-spectrum/s2/stories/TreeView.stories.tsx  | 12 +++++++++---
 tsconfig.json                                        |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index 3f1fac3665a..3b5a55795cf 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -241,8 +241,14 @@ export const ExampleNoActions: StoryObj<typeof TreeExampleStaticNoActions> = {
   }
 };
 
+interface TreeViewItemType {
+  id: string,
+  name: string,
+  icon: ReactElement,
+  childItems?: TreeViewItemType[]
+}
 
-let rows = [
+let rows: TreeViewItemType[] = [
   {id: 'projects', name: 'Projects', icon: <Folder />, childItems: [
     {id: 'project-1', name: 'Project 1 Level 1', icon: <FileTxt />},
     {id: 'project-2', name: 'Project 2 Level 1', icon: <Folder />, childItems: [
@@ -293,7 +299,7 @@ const DynamicTreeItem = (props): ReactElement => {
           </ActionMenu>
         </TreeViewItemContent>
         <Collection items={childItems}>
-          {(item: any) => (
+          {(item: TreeViewItemType) => (
             <DynamicTreeItem
               id={item.id}
               icon={item.icon}
@@ -313,7 +319,7 @@ const DynamicTreeItem = (props): ReactElement => {
 const TreeExampleDynamic = (args: TreeViewProps): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
     <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
-      {(item: any) => (
+      {(item) => (
         <DynamicTreeItem
           id={item.id}
           icon={item.icon}
diff --git a/tsconfig.json b/tsconfig.json
index a703b0a76eb..14970af1a03 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,11 +19,13 @@
     "moduleResolution": "bundler",
     "module": "esnext",
     // Process & infer types from .js files.
-    "allowJs": true,
+    "allowJs": false,
     // Don't emit; allow Babel to transform files.
     "noEmit": true,
     // Disallow features that require cross-file information for emit.
     "isolatedModules": true,
+    "declaration": true,
+    "isolatedDeclarations": true,
     // Import non-ES modules as default imports.
     "esModuleInterop": true,
     // if 'target' is updated, this should be updated as well

From 10cc73dce21584012e30b699a727e6f735787ae6 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 11:01:25 +1000
Subject: [PATCH 03/12] accidentally checked in tsconfig

---
 tsconfig.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 14970af1a03..a703b0a76eb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,13 +19,11 @@
     "moduleResolution": "bundler",
     "module": "esnext",
     // Process & infer types from .js files.
-    "allowJs": false,
+    "allowJs": true,
     // Don't emit; allow Babel to transform files.
     "noEmit": true,
     // Disallow features that require cross-file information for emit.
     "isolatedModules": true,
-    "declaration": true,
-    "isolatedDeclarations": true,
     // Import non-ES modules as default imports.
     "esModuleInterop": true,
     // if 'target' is updated, this should be updated as well

From 3dd27bfb6073a19e0b7573ab67d6c3d0cfe690f9 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 11:49:04 +1000
Subject: [PATCH 04/12] tidy up

---
 packages/@react-spectrum/s2/src/Accordion.tsx         | 4 +++-
 packages/@react-spectrum/s2/src/ActionBar.tsx         | 4 +++-
 packages/@react-spectrum/s2/src/ActionButton.tsx      | 4 +++-
 packages/@react-spectrum/s2/src/ActionButtonGroup.tsx | 4 +++-
 packages/@react-spectrum/s2/src/ActionMenu.tsx        | 4 +++-
 packages/@react-spectrum/s2/src/Avatar.tsx            | 4 +++-
 packages/@react-spectrum/s2/src/AvatarGroup.tsx       | 4 +++-
 packages/@react-spectrum/s2/src/Badge.tsx             | 4 +++-
 packages/@react-spectrum/s2/src/Breadcrumbs.tsx       | 4 +++-
 packages/@react-spectrum/s2/src/Button.tsx            | 8 ++++++--
 packages/@react-spectrum/s2/src/ButtonGroup.tsx       | 4 +++-
 packages/@react-spectrum/s2/src/Card.tsx              | 4 +++-
 packages/@react-spectrum/s2/src/CardView.tsx          | 4 ++--
 packages/@react-spectrum/s2/src/Checkbox.tsx          | 4 ++--
 packages/@react-spectrum/s2/src/CheckboxGroup.tsx     | 4 +++-
 packages/@react-spectrum/s2/src/ColorField.tsx        | 4 +++-
 packages/@react-spectrum/s2/src/ColorSlider.tsx       | 2 +-
 packages/@react-spectrum/s2/src/Divider.tsx           | 4 +++-
 packages/@react-spectrum/s2/src/DropZone.tsx          | 2 +-
 packages/@react-spectrum/s2/src/RangeSlider.tsx       | 4 +++-
 packages/@react-spectrum/s2/src/Switch.tsx            | 2 +-
 packages/@react-spectrum/s2/src/Tabs.tsx              | 1 +
 packages/@react-spectrum/s2/src/TabsPicker.tsx        | 1 +
 23 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx
index 058e78e63d7..454b33bc482 100644
--- a/packages/@react-spectrum/s2/src/Accordion.tsx
+++ b/packages/@react-spectrum/s2/src/Accordion.tsx
@@ -43,7 +43,9 @@ const accordion = style({
   flexDirection: 'column'
 }, getAllowedOverrides({height: true}));
 
-export const AccordionContext: Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const AccordionContext:
+  Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An accordion is a container for multiple disclosures.
diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx
index 4f7255034fa..963d945d0a5 100644
--- a/packages/@react-spectrum/s2/src/ActionBar.tsx
+++ b/packages/@react-spectrum/s2/src/ActionBar.tsx
@@ -88,7 +88,9 @@ export interface ActionBarProps extends SlotProps {
   scrollRef?: RefObject<HTMLElement | null>
 }
 
-export const ActionBarContext: Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const ActionBarContext:
+  Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 export const ActionBar:
   ForwardRefExoticComponent<ActionBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 40c4918e53e..3157bec6c86 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -238,7 +238,9 @@ const avatarSize = {
   X: 26
 } as const;
 
-export const ActionButtonContext: Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>> | null>(null);
+export const ActionButtonContext:
+  Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionButtons allow users to perform an action.
diff --git a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
index 45c66e6ca64..85d4d590ad2 100644
--- a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
@@ -72,7 +72,9 @@ export const actionGroupStyle = style({
 }, getAllowedOverrides({height: true}));
 
 
-export const ActionButtonGroupContext: Context<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement> | null> = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement> | null>(null);
+export const ActionButtonGroupContext:
+  Context<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>> =
+  createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * An ActionButtonGroup is a grouping of related ActionButtons.
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index 1957737d121..b2ed223b3ea 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -32,7 +32,9 @@ export interface ActionMenuProps<T> extends
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ActionMenuContext: Context<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>> | null>(null);
+export const ActionMenuContext:
+Context<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
+createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index 8cfdc6141a9..eea72d45a68 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -53,7 +53,9 @@ const imageStyles = style({
   }
 }, getAllowedOverrides({width: false}));
 
-export const AvatarContext: Context<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>> | null> = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>> | null>(null);
+export const AvatarContext:
+  Context<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>> =
+  createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
 
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.
diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
index ba0097935cd..660435903a8 100644
--- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx
+++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
@@ -35,7 +35,9 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
   styles?: StylesPropWithoutWidth
 }
 
-export const AvatarGroupContext: Context<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const AvatarGroupContext:
+  Context<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const avatar = style({
   marginStart: {
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index c87ff07c5b6..5fae2ff48da 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -55,7 +55,9 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
   children: ReactNode
 }
 
-export const BadgeContext: Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const BadgeContext:
+  Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style<BadgeStyleProps>({
   ...control({shape: 'default', wrap: true, icon: true}),
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 61c04347daf..e3a18482da8 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -66,7 +66,9 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children: ReactNode
 }
 
-export const BreadcrumbsContext: Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>> | null> = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>> | null>(null);
+export const BreadcrumbsContext:
+  Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>> =
+  createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 761e968157b..5da9c33a217 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -61,8 +61,12 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
   children: ReactNode
 }
 
-export const ButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>> | null> = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>> | null>(null);
-export const LinkButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>> | null> = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>> | null>(null);
+export const ButtonContext:
+  Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
+  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext:
+  Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>> =
+  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index f4dc050dbdb..9d332c1d130 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -57,7 +57,9 @@ interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   isHidden?: boolean
 }
 
-export const ButtonGroupContext: Context<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const ButtonGroupContext:
+  Context<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>(null);
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index c5223085da5..b994b293007 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -347,7 +347,9 @@ let footer = style({
 });
 
 export const InternalCardViewContext: Context<'div' | typeof GridListItem> = createContext<'div' | typeof GridListItem>('div');
-export const CardContext: Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const CardContext:
+  Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 interface InternalCardContextValue {
   isQuiet: boolean,
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 56314e609b0..92916e371c0 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -188,8 +188,8 @@ const wrapperStyles = style({
 }, getAllowedOverrides({height: true}));
 
 export const CardViewContext:
-  Context<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>> | null> =
-  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>> | null>(null);
+  Context<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 export const CardView:
   <T extends object>(props: CardViewProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index c79bf525a8f..5c233154d96 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -42,8 +42,8 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
 }
 
 export const CheckboxContext:
-  Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>> | null> =
-  createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>> | null>(null);
+  Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>> =
+  createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index 1b27a90cd8e..c3c59b65cba 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -49,7 +49,9 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   isEmphasized?: boolean
 }
 
-export const CheckboxGroupContext: Context<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>> | null> = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>> | null>(null);
+export const CheckboxGroupContext:
+  Context<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index b800d9c031f..11291be7a1c 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -34,7 +34,9 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ColorFieldContext: Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef>> = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
+export const ColorFieldContext:
+  Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef>> =
+  createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 00f67ec6fe0..c2b2d1ba91d 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -33,7 +33,7 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
 
 export const ColorSliderContext:
   Context<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>> =
-createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
+  createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.
diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx
index f9a31f4997a..17105cc23cc 100644
--- a/packages/@react-spectrum/s2/src/Divider.tsx
+++ b/packages/@react-spectrum/s2/src/Divider.tsx
@@ -40,7 +40,9 @@ 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: Context<ContextValue<Partial<DividerProps>, DOMRefValue>> = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
+export const DividerContext:
+  Context<ContextValue<Partial<DividerProps>, DOMRefValue>> =
+  createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
 export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
   ...staticColor(),
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index 894d2bd700e..b0a732236ef 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -41,7 +41,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
 
 export const DropZoneContext:
   Context<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>> =
-createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
+  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index 23d0c41755b..8c969f55d90 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -37,7 +37,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   endName?: string
 }
 
-export const RangeSliderContext: Context<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>> = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
+export const RangeSliderContext:
+  Context<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>> =
+  createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 export const RangeSlider:
   ForwardRefExoticComponent<RangeSliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index 9f6ba689733..9463e3b7876 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -47,7 +47,7 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
 
 export const SwitchContext:
   Context<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>> =
-createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+  createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index e8c1ead137d..1ae63007188 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -79,6 +79,7 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
 export const TabsContext:
   Context<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>> =
   createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
+
 const InternalTabsContext = createContext<Partial<TabsProps>>({});
 const CollapseContext = createContext({
   showTabs: true,
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 96d0e964d4e..8e976f3d81a 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -90,6 +90,7 @@ export interface PickerProps<T extends object> extends
 export const PickerContext:
   Context<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
   createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+
 const inputButton = style({
   ...focusRing(),
   ...fieldInput(),

From 7e1d71c6d4d1fa494b48667b04d0e6acb2249107 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 18 Jun 2025 10:19:12 +1000
Subject: [PATCH 05/12] fix types for s2 TreeView

---
 .../s2/chromatic/TreeView.stories.tsx         | 10 ++++-----
 packages/@react-spectrum/s2/src/TreeView.tsx  | 22 +++++++++++--------
 .../s2/stories/TreeView.stories.tsx           | 17 +++++++-------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
index b74ee791c71..68c69813363 100644
--- a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
@@ -29,7 +29,7 @@ const meta: Meta<typeof TreeView> = {
 
 export default meta;
 
-function TreeExample(props: TreeViewProps): ReactElement {
+function TreeExample(props: TreeViewProps<any>): ReactElement {
   return (
     <div style={{width: '300px', height: '320px'}}>
       <TreeView
@@ -227,7 +227,7 @@ let rows: TreeViewItemType[] = [
   ]}
 ];
 
-const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
+const DynamicTreeItem = (props: Omit<TreeViewItemProps<TreeViewItemType>, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
@@ -247,7 +247,7 @@ const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & {icon: Rea
           </ActionMenu>
         </TreeViewItemContent>
         <Collection items={childItems}>
-          {(item: TreeViewItemType) => (
+          {(item) => (
             <DynamicTreeItem
               id={item.id}
               icon={item.icon}
@@ -262,10 +262,10 @@ const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & {icon: Rea
   );
 };
 
-const TreeExampleDynamic = (args: TreeViewProps): ReactElement => (
+const TreeExampleDynamic = (args: TreeViewProps<TreeViewItemType>): ReactElement => (
   <div style={{width: '300px', height: '320px', display: 'flex', flexDirection: 'column'}}>
     <TreeView aria-label="test dynamic tree" items={rows} {...args}>
-      {(item: TreeViewItemType) => (
+      {(item) => (
         <DynamicTreeItem
           id={item.id}
           icon={item.icon}
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index e46e6496f3f..02f36e7bfea 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -30,11 +30,11 @@ import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
-import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, Key} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ForwardRefExoticComponent, JSXElementConstructor, ReactElement, ReactNode, RefAttributes, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
 import {TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale} from 'react-aria';
@@ -48,12 +48,16 @@ interface S2TreeProps {
   isEmphasized?: boolean
 }
 
-export interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
+export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'children' | 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight
+  styles?: StylesPropWithHeight,
+  /**
+   * The contents of the tree.
+   */
+  children?: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {
+export interface TreeViewItemProps<T> extends Omit<RACTreeItemProps<T>, 'className' | 'style'> {
   /** Whether this item has children, even if not loaded yet. */
   hasChildItems?: boolean
 }
@@ -91,7 +95,7 @@ const tree = style({
   }
 }, getAllowedOverrides({height: true}));
 
-function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
+const TreeView = (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;
   let scale = useScale();
 
@@ -123,7 +127,7 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
-}
+});
 
 const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
 const selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));
@@ -293,7 +297,7 @@ const treeRowFocusIndicator = raw(`
   }`
 );
 
-export const TreeViewItem = (props: TreeViewItemProps): ReactNode => {
+export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>): ReactNode => {
   let {
     href
   } = props;
@@ -441,5 +445,5 @@ function ExpandableRowChevron(props: ExpandableRowChevronProps) {
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
-const _TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> = forwardRef(TreeView);
+const _TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null = TreeView;
 export {_TreeView as TreeView};
diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index 3b5a55795cf..d32c9711518 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -23,6 +23,7 @@ import {
   TreeView,
   TreeViewItem,
   TreeViewItemContent,
+  TreeViewItemProps,
   TreeViewProps
 } from '../src';
 import {categorizeArgTypes} from './utils';
@@ -71,7 +72,7 @@ const meta: Meta<typeof TreeView> = {
 
 export default meta;
 
-const TreeExampleStatic = (args: TreeViewProps): ReactElement => (
+const TreeExampleStatic = (args: TreeViewProps<any>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -186,7 +187,7 @@ export const Example: StoryObj<typeof TreeExampleStatic> = {
   }
 };
 
-const TreeExampleStaticNoActions = (args: TreeViewProps): ReactElement => (
+const TreeExampleStaticNoActions = (args: TreeViewProps<any>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -279,7 +280,7 @@ let rows: TreeViewItemType[] = [
   ]}
 ];
 
-const DynamicTreeItem = (props): ReactElement => {
+const DynamicTreeItem = <T extends object>(props: Omit<TreeViewItemProps<T>, 'children'> & TreeViewItemType): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
@@ -299,16 +300,14 @@ const DynamicTreeItem = (props): ReactElement => {
           </ActionMenu>
         </TreeViewItemContent>
         <Collection items={childItems}>
-          {(item: TreeViewItemType) => (
+          {(item) => (
             <DynamicTreeItem
               id={item.id}
               icon={item.icon}
               childItems={item.childItems}
               textValue={item.name}
               name={item.name}
-              href={props.href}>
-              {item.name}
-            </DynamicTreeItem>
+              href={props.href} />
           )}
         </Collection>
       </TreeViewItem>
@@ -316,7 +315,7 @@ const DynamicTreeItem = (props): ReactElement => {
   );
 };
 
-const TreeExampleDynamic = (args: TreeViewProps): ReactElement => (
+const TreeExampleDynamic = (args: TreeViewProps<TreeViewItemType>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
     <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
       {(item) => (
@@ -361,7 +360,7 @@ export const Empty: StoryObj<typeof TreeExampleDynamic> = {
   }
 };
 
-const TreeExampleWithLinks = (args: TreeViewProps): ReactElement => (
+const TreeExampleWithLinks = (args: TreeViewProps<TreeViewItemType>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (

From 57631c8d4a6611af721a4ed072ac35ab33fa6613 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 18 Jun 2025 10:21:17 +1000
Subject: [PATCH 06/12] make two implementations align

---
 packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
index 68c69813363..ba5b648d6b2 100644
--- a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
@@ -227,7 +227,7 @@ let rows: TreeViewItemType[] = [
   ]}
 ];
 
-const DynamicTreeItem = (props: Omit<TreeViewItemProps<TreeViewItemType>, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
+const DynamicTreeItem = <T extends object>(props: Omit<TreeViewItemProps<T>, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>

From 6faf7f9b623de4005fcd6334e7c4068f97a0686a Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 18 Jun 2025 10:26:37 +1000
Subject: [PATCH 07/12] fix types again

---
 .../s2/chromatic/TreeView.stories.tsx                |  2 +-
 packages/@react-spectrum/s2/src/TreeView.tsx         | 12 ++++--------
 .../@react-spectrum/s2/stories/TreeView.stories.tsx  |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
index ba5b648d6b2..d297c5e911c 100644
--- a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
@@ -227,7 +227,7 @@ let rows: TreeViewItemType[] = [
   ]}
 ];
 
-const DynamicTreeItem = <T extends object>(props: Omit<TreeViewItemProps<T>, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
+const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & {icon: ReactElement, childItems?: TreeViewItemType[], name: string}): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 02f36e7bfea..fbc4e63a823 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -48,16 +48,12 @@ interface S2TreeProps {
   isEmphasized?: boolean
 }
 
-export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'children' | 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
+export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
-  /**
-   * The contents of the tree.
-   */
-  children?: ReactNode | ((item: T) => ReactNode)
+  styles?: StylesPropWithHeight
 }
 
-export interface TreeViewItemProps<T> extends Omit<RACTreeItemProps<T>, 'className' | 'style'> {
+export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {
   /** Whether this item has children, even if not loaded yet. */
   hasChildItems?: boolean
 }
@@ -297,7 +293,7 @@ const treeRowFocusIndicator = raw(`
   }`
 );
 
-export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>): ReactNode => {
+export const TreeViewItem = (props: TreeViewItemProps): ReactNode => {
   let {
     href
   } = props;
diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index d32c9711518..156392d9e57 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -280,7 +280,7 @@ let rows: TreeViewItemType[] = [
   ]}
 ];
 
-const DynamicTreeItem = <T extends object>(props: Omit<TreeViewItemProps<T>, 'children'> & TreeViewItemType): ReactElement => {
+const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & TreeViewItemType): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>

From e3c35d29ee3d44680e8a333603653902fc2a7954 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 18 Jun 2025 10:32:27 +1000
Subject: [PATCH 08/12] add pure

---
 packages/@react-spectrum/s2/src/TreeView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index fbc4e63a823..c6ec5fee9d9 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -91,7 +91,7 @@ const tree = style({
   }
 }, getAllowedOverrides({height: true}));
 
-const TreeView = (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;
   let scale = useScale();
 

From 9f6d8622a6704d9c1cb5914a053d1e7d34cf215e Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 24 Jun 2025 07:09:41 +1000
Subject: [PATCH 09/12] fix lint

---
 packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
index effdfcf6cb1..9aa0e2149eb 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
@@ -15,10 +15,10 @@ import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButto
 import {generatePowerset} from '@react-spectrum/story-utils';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {ReactElement} from 'react';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
 import {style} from '../style' with { type: 'macro' };
-import { ReactElement } from 'react';
 
 const meta: Meta<typeof ActionButton> = {
   component: ActionButton,

From 0008a1618e4c68c1845e69a1ae8fb19b251bfeee Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 27 Jun 2025 08:32:27 +1000
Subject: [PATCH 10/12] undo changes to source

---
 packages/@react-spectrum/s2/src/Accordion.tsx | 10 ++--
 packages/@react-spectrum/s2/src/ActionBar.tsx | 10 ++--
 .../@react-spectrum/s2/src/ActionButton.tsx   | 10 ++--
 .../s2/src/ActionButtonGroup.tsx              | 10 ++--
 .../@react-spectrum/s2/src/ActionMenu.tsx     | 10 ++--
 .../@react-spectrum/s2/src/AlertDialog.tsx    |  8 ++-
 packages/@react-spectrum/s2/src/Avatar.tsx    | 10 ++--
 .../@react-spectrum/s2/src/AvatarGroup.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Badge.tsx     | 10 ++--
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    | 14 ++----
 packages/@react-spectrum/s2/src/Button.tsx    | 18 ++-----
 .../@react-spectrum/s2/src/ButtonGroup.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Card.tsx      | 32 ++++--------
 packages/@react-spectrum/s2/src/CardView.tsx  | 10 ++--
 packages/@react-spectrum/s2/src/Checkbox.tsx  | 10 ++--
 .../@react-spectrum/s2/src/CheckboxGroup.tsx  | 10 ++--
 .../@react-spectrum/s2/src/ClearButton.tsx    |  8 ++-
 .../@react-spectrum/s2/src/CloseButton.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/CoachMark.tsx | 14 ++----
 packages/@react-spectrum/s2/src/ColorArea.tsx | 10 ++--
 .../@react-spectrum/s2/src/ColorField.tsx     | 10 ++--
 .../@react-spectrum/s2/src/ColorSlider.tsx    | 10 ++--
 .../@react-spectrum/s2/src/ColorSwatch.tsx    | 12 ++---
 .../s2/src/ColorSwatchPicker.tsx              | 10 ++--
 .../@react-spectrum/s2/src/ColorWheel.tsx     | 12 ++---
 packages/@react-spectrum/s2/src/ComboBox.tsx  | 10 ++--
 packages/@react-spectrum/s2/src/Content.tsx   | 50 +++++--------------
 .../@react-spectrum/s2/src/ContextualHelp.tsx | 10 ++--
 .../@react-spectrum/s2/src/CustomDialog.tsx   |  8 ++-
 packages/@react-spectrum/s2/src/Dialog.tsx    | 10 ++--
 .../@react-spectrum/s2/src/Disclosure.tsx     | 24 +++------
 packages/@react-spectrum/s2/src/Divider.tsx   | 10 ++--
 packages/@react-spectrum/s2/src/DropZone.tsx  | 10 ++--
 packages/@react-spectrum/s2/src/Field.tsx     | 16 ++----
 packages/@react-spectrum/s2/src/Form.tsx      | 10 ++--
 .../s2/src/FullscreenDialog.tsx               |  8 ++-
 packages/@react-spectrum/s2/src/Icon.tsx      |  8 +--
 .../s2/src/IllustratedMessage.tsx             | 10 ++--
 packages/@react-spectrum/s2/src/Image.tsx     | 14 ++----
 .../s2/src/ImageCoordinator.tsx               |  2 +-
 .../@react-spectrum/s2/src/InlineAlert.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Link.tsx      | 10 ++--
 packages/@react-spectrum/s2/src/Menu.tsx      | 10 ++--
 packages/@react-spectrum/s2/src/Meter.tsx     | 10 ++--
 packages/@react-spectrum/s2/src/Modal.tsx     |  8 ++-
 .../s2/src/NotificationBadge.tsx              | 10 ++--
 .../@react-spectrum/s2/src/NumberField.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Picker.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Popover.tsx   | 12 ++---
 .../@react-spectrum/s2/src/ProgressBar.tsx    | 10 ++--
 .../@react-spectrum/s2/src/ProgressCircle.tsx | 10 ++--
 packages/@react-spectrum/s2/src/Provider.tsx  |  6 +--
 packages/@react-spectrum/s2/src/Radio.tsx     |  8 ++-
 .../@react-spectrum/s2/src/RadioGroup.tsx     | 10 ++--
 .../@react-spectrum/s2/src/RangeSlider.tsx    | 10 ++--
 .../@react-spectrum/s2/src/SearchField.tsx    | 10 ++--
 .../s2/src/SegmentedControl.tsx               | 16 ++----
 packages/@react-spectrum/s2/src/Skeleton.tsx  |  4 +-
 .../s2/src/SkeletonCollection.tsx             |  6 +--
 packages/@react-spectrum/s2/src/Slider.tsx    | 10 ++--
 .../@react-spectrum/s2/src/StatusLight.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/Switch.tsx    | 10 ++--
 packages/@react-spectrum/s2/src/TableView.tsx | 30 +++--------
 packages/@react-spectrum/s2/src/Tabs.tsx      | 11 ++--
 .../@react-spectrum/s2/src/TabsPicker.tsx     | 13 ++---
 packages/@react-spectrum/s2/src/TagGroup.tsx  | 14 ++----
 packages/@react-spectrum/s2/src/TextField.tsx | 25 +++-------
 packages/@react-spectrum/s2/src/Toast.tsx     |  4 +-
 .../@react-spectrum/s2/src/ToggleButton.tsx   | 10 ++--
 .../s2/src/ToggleButtonGroup.tsx              | 10 ++--
 packages/@react-spectrum/s2/src/Tooltip.tsx   |  8 ++-
 71 files changed, 250 insertions(+), 573 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx
index 454b33bc482..2145077a512 100644
--- a/packages/@react-spectrum/s2/src/Accordion.tsx
+++ b/packages/@react-spectrum/s2/src/Accordion.tsx
@@ -14,7 +14,7 @@ import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 're
 import {DisclosureContext} from './Disclosure';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
-import React, {Context, createContext, forwardRef} from 'react';
+import React, {createContext, forwardRef} from 'react';
 import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -43,16 +43,12 @@ const accordion = style({
   flexDirection: 'column'
 }, getAllowedOverrides({height: true}));
 
-export const AccordionContext:
-  Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An accordion is a container for multiple disclosures.
  */
-export const Accordion:
-  React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
+export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx
index 963d945d0a5..da8ff4ac558 100644
--- a/packages/@react-spectrum/s2/src/ActionBar.tsx
+++ b/packages/@react-spectrum/s2/src/ActionBar.tsx
@@ -13,8 +13,8 @@
 import {ActionButtonGroup} from './ActionButtonGroup';
 import {announce} from '@react-aria/live-announcer';
 import {CloseButton} from './CloseButton';
-import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope, useKeyboard} from 'react-aria';
 // @ts-ignore
@@ -88,13 +88,9 @@ export interface ActionBarProps extends SlotProps {
   scrollRef?: RefObject<HTMLElement | null>
 }
 
-export const ActionBarContext:
-  Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const ActionBar:
-  ForwardRefExoticComponent<ActionBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 763c16ebcb6..9f817c9827c 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -15,8 +15,8 @@ import {AvatarContext} from './Avatar';
 import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };
 import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {NotificationBadgeContext} from './NotificationBadge';
@@ -243,17 +243,13 @@ const avatarSize = {
   X: 26
 } as const;
 
-export const ActionButtonContext:
-  Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionButtons allow users to perform an action.
  * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.
  */
-export const ActionButton:
-  ForwardRefExoticComponent<ActionButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
index 85d4d590ad2..17033acc4be 100644
--- a/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {AriaLabelingProps} from '@react-types/shared';
-import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps, Toolbar} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -72,16 +72,12 @@ export const actionGroupStyle = style({
 }, getAllowedOverrides({height: true}));
 
 
-export const ActionButtonGroupContext:
-  Context<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>> =
-  createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
+export const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * An ActionButtonGroup is a grouping of related ActionButtons.
  */
-export const ActionButtonGroup:
-  ForwardRefExoticComponent<ActionButtonGroupProps & RefAttributes<HTMLDivElement>> =
-forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index b2ed223b3ea..ed891a42d70 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -12,8 +12,8 @@
 
 import {ActionButton, ActionButtonProps} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {Context, createContext, forwardRef, ReactElement, RefAttributes} from 'react';
 import {ContextValue} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType} from './types';
 // @ts-ignore
@@ -32,16 +32,12 @@ export interface ActionMenuProps<T> extends
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ActionMenuContext:
-Context<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
-createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionMenuContext = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
  */
-export const ActionMenu:
-  <T extends object>(props: ActionMenuProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
-/*#__PURE__*/(forwardRef as forwardRefType)(function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionMenu = /*#__PURE__*/(forwardRef as forwardRefType)(function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});
diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx
index 2025d779bea..c8ed9643e34 100644
--- a/packages/@react-spectrum/s2/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/s2/src/AlertDialog.tsx
@@ -17,8 +17,8 @@ import {CenterBaseline} from './CenterBaseline';
 import {chain} from '@react-aria/utils';
 import {Content, Heading} from './Content';
 import {Dialog} from './Dialog';
-import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -77,9 +77,7 @@ const icon = style({
 /**
  * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
  */
-export const AlertDialog:
-  ForwardRefExoticComponent<AlertDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
+export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     autoFocusButton,
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index eea72d45a68..6ea34ff2bdd 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -53,16 +53,12 @@ const imageStyles = style({
   }
 }, getAllowedOverrides({width: false}));
 
-export const AvatarContext:
-  Context<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>> =
-  createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
+export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
 
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.
  */
-export const Avatar:
-  ForwardRefExoticComponent<AvatarProps & RefAttributes<DOMRefValue<HTMLImageElement>>> =
-forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
index 660435903a8..2bba0fa7b4b 100644
--- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx
+++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
@@ -12,8 +12,8 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
-import {Context, createContext, CSSProperties, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, CSSProperties, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -35,9 +35,7 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
   styles?: StylesPropWithoutWidth
 }
 
-export const AvatarGroupContext:
-  Context<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const avatar = style({
   marginStart: {
@@ -70,9 +68,7 @@ const container = style({
 /**
  * An avatar group is a grouping of avatars that are related to each other.
  */
-export const AvatarGroup:
-  ForwardRefExoticComponent<AvatarGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);
   let domRef = useDOMRef(ref);
   let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 5fae2ff48da..8766942111c 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -17,7 +17,7 @@ import {control, getAllowedOverrides, StyleProps} from './style-utils' with {typ
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
-import React, {Context, createContext, forwardRef, ReactNode} from 'react';
+import React, {createContext, forwardRef, ReactNode} from 'react';
 import {SkeletonWrapper} from './Skeleton';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -55,9 +55,7 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
   children: ReactNode
 }
 
-export const BadgeContext:
-  Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style<BadgeStyleProps>({
   ...control({shape: 'default', wrap: true, icon: true}),
@@ -167,9 +165,7 @@ const badge = style<BadgeStyleProps>({
 /**
  * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
  */
-export const Badge:
-  React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);
   let {
     children,
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 570b74b459f..71527967aa6 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -28,8 +28,8 @@ import {
 import {baseColor, focusRing, size, style} from '../style' with { type: 'macro' };
 import ChevronIcon from '../ui-icons/Chevron';
 import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';
-import {Context, createContext, forwardRef, Fragment, ReactElement, ReactNode, RefAttributes, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {inertValue, useLayoutEffect} from '@react-aria/utils';
@@ -67,9 +67,7 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children: ReactNode
 }
 
-export const BreadcrumbsContext:
-  Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>> =
-  createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
+export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
@@ -102,9 +100,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
 const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
 /** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
-export const Breadcrumbs:
-  <T extends object>(props: BreadcrumbsProps<T> & RefAttributes<DOMRefValue<HTMLOListElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
   let {
@@ -301,9 +297,7 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
 }
 
 /** An individual Breadcrumb for Breadcrumbs. */
-export const Breadcrumb:
-  (props: BreadcrumbProps & RefAttributes<DOMRefValue<HTMLLIElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
+export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
   let {href, target, rel, download, ping, referrerPolicy} = props;
   let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 5da9c33a217..fd4d42728e6 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -13,8 +13,8 @@
 import {baseColor, focusRing, fontRelative, lightDark, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useEffect, useState} from 'react';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -61,12 +61,8 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
   children: ReactNode
 }
 
-export const ButtonContext:
-  Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
-export const LinkButtonContext:
-  Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>> =
-  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
@@ -301,9 +297,7 @@ const gradient = style({
  * They have multiple styles for various needs, and are ideal for calling attention to
  * where a user needs to do something in order to move forward in a flow.
  */
-export const Button:
-  ForwardRefExoticComponent<ButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
   props = useFormProps(props);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -432,9 +426,7 @@ forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonEleme
 /**
  * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
  */
-export const LinkButton:
-  ForwardRefExoticComponent<LinkButtonProps & RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>> =
-forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
+export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
   props = useFormProps(props);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index 9d332c1d130..318302ea473 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {ButtonContext, LinkButtonContext} from './Button';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useCallback, useRef} from 'react';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -57,9 +57,7 @@ interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   isHidden?: boolean
 }
 
-export const ButtonGroupContext:
-  Context<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>(null);
+export const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',
@@ -106,9 +104,7 @@ const buttongroup = style<ButtonGroupStyleProps>({
 /**
  * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
  */
-export const ButtonGroup:
-  ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index b994b293007..b737c1505fc 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -17,7 +17,7 @@ import {Checkbox} from './Checkbox';
 import {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';
 import {ContentContext, FooterContext, TextContext} from './Content';
-import {Context, createContext, CSSProperties, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
+import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
 import {DividerContext} from './Divider';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, inertValue} from '@react-aria/utils';
@@ -346,10 +346,8 @@ let footer = style({
   paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
-export const InternalCardViewContext: Context<'div' | typeof GridListItem> = createContext<'div' | typeof GridListItem>('div');
-export const CardContext:
-  Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');
+export const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 interface InternalCardContextValue {
   isQuiet: boolean,
@@ -379,9 +377,7 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
-export const Card:
-  ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
   [props] = useSpectrumContextProps(props, ref, CardContext);
   let domRef = useDOMRef(ref);
   let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;
@@ -502,9 +498,7 @@ export interface CardPreviewProps extends UnsafeStyles, DOMProps {
   children: ReactNode
 }
 
-export const CardPreview:
-  ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
+export const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);
   let {UNSAFE_className = '', UNSAFE_style} = props;
   let domRef = useDOMRef(ref);
@@ -550,9 +544,7 @@ const collectionImage = style({
   userSelect: 'none'
 });
 
-export const CollectionCardPreview:
-  ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
+export const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size} = useContext(InternalCardContext)!;
   return (
     <CardPreview {...props} ref={ref}>
@@ -567,9 +559,7 @@ forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<H
 
 export interface AssetCardProps extends Omit<CardProps, 'density'> {}
 
-export const AssetCard:
-  ForwardRefExoticComponent<AssetCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
+export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Card {...props} ref={ref} density="regular">
       {composeRenderProps(props.children, children => (
@@ -630,9 +620,7 @@ export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const UserCard:
-  ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">
@@ -684,9 +672,7 @@ export interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'>
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const ProductCard:
-  ForwardRefExoticComponent<ProductCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {
+export const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 4e32c62c4e0..6af61aea052 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -23,7 +23,7 @@ import {
   WaterfallLayout
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
-import {Context, createContext, forwardRef, ReactElement, RefAttributes, useMemo, useRef, useState} from 'react';
+import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -189,13 +189,9 @@ const wrapperStyles = style({
   overflow: 'clip'
 }, getAllowedOverrides({height: true}));
 
-export const CardViewContext:
-  Context<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const CardView:
-  <T extends object>(props: CardViewProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {
     children,
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 5c233154d96..2a0540b6f17 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -14,8 +14,8 @@ import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGr
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import CheckmarkIcon from '../ui-icons/Checkmark';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
@@ -41,9 +41,7 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
   children?: ReactNode
 }
 
-export const CheckboxContext:
-  Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>> =
-  createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -132,9 +130,7 @@ const iconSize = {
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox:
-  ForwardRefExoticComponent<CheckboxProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index c3c59b65cba..8ccf4f5e777 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {CheckboxContext} from './Checkbox';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
+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';
@@ -49,16 +49,12 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   isEmphasized?: boolean
 }
 
-export const CheckboxGroupContext:
-  Context<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
  */
-export const CheckboxGroup:
-  ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx
index 1f3816b7465..f562f9e2d84 100644
--- a/packages/@react-spectrum/s2/src/ClearButton.tsx
+++ b/packages/@react-spectrum/s2/src/ClearButton.tsx
@@ -17,9 +17,9 @@ import {
 } from 'react-aria-components';
 import {controlSize} from './style-utils' with {type: 'macro'};
 import CrossIcon from '../ui-icons/Cross';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {forwardRef} from 'react';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 interface ClearButtonStyleProps {
@@ -63,9 +63,7 @@ const visibleClearButton = style<ClearButtonRenderProps>({
   }
 });
 
-export const ClearButton:
-  ForwardRefExoticComponent<ClearButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let {size = 'M', isStaticColor = false, ...rest} = props;
   let domRef = useFocusableRef(ref);
   return (
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index 1dae7691ee2..ec981959ef2 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -12,8 +12,8 @@
 
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {Button, ButtonProps, ContextValue} from 'react-aria-components';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 // @ts-ignore
@@ -79,16 +79,12 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
   }
 }, getAllowedOverrides());
 
-export const CloseButtonContext:
-  Context<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * A CloseButton allows a user to dismiss a dialog.
  */
-export const CloseButton:
-  ForwardRefExoticComponent<CloseButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
   let {UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
index 8996dc1cefc..508a73de8a2 100644
--- a/packages/@react-spectrum/s2/src/CoachMark.tsx
+++ b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -31,14 +31,10 @@ import {colorScheme, getAllowedOverrides, StyleProps} from './style-utils' with
 import {ColorSchemeContext} from './Provider';
 import {ContentContext, FooterContext, KeyboardContext, TextContext} from './Content';
 import {
-  Context,
   createContext,
   ForwardedRef,
   forwardRef,
-  ForwardRefExoticComponent,
-  ReactElement,
   ReactNode,
-  RefAttributes,
   useContext,
   useRef
 } from 'react';
@@ -324,11 +320,9 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
-export const CoachMarkContext: Context<ContextValue<CoachMarkProps, HTMLElement>> = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
+export const CoachMarkContext = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
 
-export const CoachMark:
-  ForwardRefExoticComponent<CoachMarkProps & RefAttributes<HTMLElement>> =
-forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
+export const CoachMark = forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
   let colorScheme = useContext(ColorSchemeContext);
   [props, ref] = useContextProps(props, ref, CoachMarkContext);
   let {UNSAFE_style} = props;
@@ -486,9 +480,7 @@ interface CoachMarkIndicatorProps {
   children: ReactNode,
   isActive?: boolean
 }
-export const CoachMarkIndicator:
-  (props: CoachMarkIndicatorProps & RefAttributes<HTMLDivElement>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function CoachMarkIndicator(props: CoachMarkIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
+export const CoachMarkIndicator = /*#__PURE__*/ (forwardRef as forwardRefType)(function CoachMarkIndicator(props: CoachMarkIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
   const {children, isActive} = props;
   let objRef = useObjectRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx
index 546ba238192..f66df9f008f 100644
--- a/packages/@react-spectrum/s2/src/ColorArea.tsx
+++ b/packages/@react-spectrum/s2/src/ColorArea.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} 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' with {type: 'macro'};
@@ -25,16 +25,12 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}
 
-export const ColorAreaContext:
-  Context<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
  */
-export const ColorArea:
-  ForwardRefExoticComponent<ColorAreaProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index 07f22ea8405..bb7ed37b0d0 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -15,7 +15,7 @@ import {
   ColorFieldProps as AriaColorFieldProps,
   ContextValue
 } from 'react-aria-components';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, Ref, RefAttributes, useContext, useImperativeHandle, useRef} from 'react';
+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';
@@ -34,16 +34,12 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ColorFieldContext:
-  Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef>> =
-  createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
+export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField:
-  ForwardRefExoticComponent<ColorFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
-forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index c2b2d1ba91d..8e373009287 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -19,8 +19,8 @@ import {
   useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes, useRef} from 'react';
 import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, useRef} from 'react';
 import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {style} from '../style' with {type: 'macro'};
@@ -31,16 +31,12 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
   label?: string
 }
 
-export const ColorSliderContext:
-  Context<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.
  */
-export const ColorSlider:
-  ForwardRefExoticComponent<ColorSliderProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
index 56930818f49..8ba5bdad466 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
@@ -17,7 +17,7 @@ import {
   ContextValue,
   parseColor
 } from 'react-aria-components';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, JSX, ReactElement, RefAttributes, useContext, useMemo} from 'react';
+import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -43,17 +43,13 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
   useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const ColorSwatchContext:
-  Context<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
-export const InternalColorSwatchContext: Context<SpectrumColorSwatchContextValue | null> = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch:
-  ForwardRefExoticComponent<ColorSwatchProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
   let ctx = useContext(InternalColorSwatchContext);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
index 63bb8cbfa1d..9028a4f65e4 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
@@ -12,7 +12,7 @@
 
 import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';
 import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes} from 'react';
+import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
 import {focusRing, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -39,16 +39,12 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
   rounding?: 'none' | 'default' | 'full'
 }
 
-export const ColorSwatchPickerContext:
-  Context<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker:
-  ForwardRefExoticComponent<ColorSwatchPickerProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx
index d937cd472bb..7d773bd14e4 100644
--- a/packages/@react-spectrum/s2/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx
@@ -17,7 +17,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils';
@@ -31,16 +31,12 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
   size?: number
 }
 
-export const ColorWheelContext:
-  Context<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel:
-  ForwardRefExoticComponent<ColorWheelProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
@@ -50,7 +46,7 @@ forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElemen
   let thickness = 24;
   let innerRadius = outerRadius - 24;
   return (
-    <AriaColorWheel
+    <AriaColorWheel 
       {...props}
       outerRadius={outerRadius}
       innerRadius={innerRadius}
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 2b11d1d2756..5e0fbc124f5 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -46,7 +46,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {Context, createContext, CSSProperties, ForwardedRef, forwardRef, ReactElement, ReactNode, Ref, RefAttributes, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {createLeafComponent} from '@react-aria/collections';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
@@ -104,9 +104,7 @@ export interface ComboBoxProps<T extends object> extends
     loadingState?: LoadingState
 }
 
-export const ComboBoxContext:
-  Context<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>> =
-  createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
+export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
   ...controlBorderRadius('sm'),
@@ -330,9 +328,7 @@ let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({siz
 /**
  * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const ComboBox:
-  <T extends object>(props: ComboBoxProps<T> & RefAttributes<TextFieldRef<HTMLInputElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
 
   let formContext = useContext(FormContext);
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index 4afd146885e..7c64e6fe7d1 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {inertValue} from '@react-aria/utils';
 import {StyleString} from '../style/types';
@@ -31,13 +31,9 @@ interface HeadingProps extends ContentProps {
   level?: number
 }
 
-export const HeadingContext:
-  Context<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>> =
-  createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
+export const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
 
-export const Heading:
-  ForwardRefExoticComponent<HeadingProps & RefAttributes<DOMRefValue<HTMLHeadingElement>>> =
-forwardRef(// Wrapper around RAC Heading to unmount when hidden.
+export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
@@ -56,13 +52,9 @@ function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   );
 });
 
-export const HeaderContext:
-  Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>> =
-  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
+export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
 
-export const Header:
-  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Header(props: ContentProps, ref: DOMRef) {
+export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
@@ -80,13 +72,9 @@ forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   );
 });
 
-export const ContentContext:
-  Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const Content:
-  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
@@ -103,13 +91,9 @@ forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   );
 });
 
-export const TextContext:
-  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
-  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
+export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
 
-export const Text:
-  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Text(props: ContentProps, ref: DOMRef) {
+export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
@@ -141,13 +125,9 @@ forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   return text;
 });
 
-export const KeyboardContext:
-  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
-  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
+export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-export const Keyboard:
-  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
+export const Keyboard = forwardRef(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;
@@ -164,13 +144,9 @@ forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   );
 });
 
-export const FooterContext:
-  Context<ContextValue<Partial<ContentProps>, DOMRefValue>> =
-  createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
+export const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-export const Footer:
-  ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
+export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index a11f11e9128..9fdad216498 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -1,8 +1,8 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {ContentContext, FooterContext, HeadingContext} from './Content';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 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';
 import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';
@@ -46,16 +46,12 @@ const popover = style({
   padding: 24
 });
 
-export const ContextualHelpContext:
-  Context<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
  */
-export const ContextualHelp:
-  ForwardRefExoticComponent<ContextualHelpProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx
index 7b87c0f274d..ea9e03ed417 100644
--- a/packages/@react-spectrum/s2/src/CustomDialog.tsx
+++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx
@@ -11,8 +11,8 @@
  */
 
 import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {forwardRef} from 'react';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
@@ -58,9 +58,7 @@ const dialogStyle = style({
 /**
  * A CustomDialog is a floating window with a custom layout.
  */
-export const CustomDialog:
-  ForwardRefExoticComponent<CustomDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
+export const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
   let {
     size,
     isDismissible,
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index ea586fab62e..9cbbc841d6c 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -14,8 +14,8 @@ import {ButtonGroupContext} from './ButtonGroup';
 import {CloseButton} from './CloseButton';
 import {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {forwardRef} from 'react';
 import {ImageContext} from './Image';
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
@@ -95,9 +95,7 @@ export const dialogInner = style({
  * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
  * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
  */
-export const Dialog:
-  ForwardRefExoticComponent<DialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
+export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
   let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -180,7 +178,7 @@ forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
                   {children}
                 </Provider>
               </div>
-              {props.isDismissible &&
+              {props.isDismissible && 
                 <CloseButton styles={style({marginBottom: 12})} />
               }
             </div>
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 40eeeded699..bddb06cc2fb 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -18,7 +18,7 @@ import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, useContext} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -39,9 +39,7 @@ export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' |
   children: ReactNode
 }
 
-export const DisclosureContext:
-  Context<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DisclosureContext = createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const disclosure = style({
   color: 'heading',
@@ -70,9 +68,7 @@ const disclosure = style({
 /**
  * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
  */
-export const Disclosure:
-  React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
+export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);
   let {
     size = 'M',
@@ -103,7 +99,7 @@ forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElemen
 
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
   /** The heading level of the disclosure header.
-   *
+   * 
    * @default 3
    */
   level?: number,
@@ -249,16 +245,12 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
 /**
  * A wrapper element for the disclosure title that can contain other elements not part of the trigger.
  */
-export const DisclosureHeader:
-  (props: DisclosureHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
-  /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
+export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
 
 /**
  * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
  */
-export const DisclosureTitle:
-  ForwardRefExoticComponent<DisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     level = 3,
     UNSAFE_style,
@@ -326,9 +318,7 @@ const panelStyles = style({
 /**
  * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
  */
-export const DisclosurePanel:
-  ForwardRefExoticComponent<DisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {
     UNSAFE_style,
     UNSAFE_className = '',
diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx
index 17105cc23cc..09a3cd8a90d 100644
--- a/packages/@react-spectrum/s2/src/Divider.tsx
+++ b/packages/@react-spectrum/s2/src/Divider.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} 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, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -40,9 +40,7 @@ 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:
-  Context<ContextValue<Partial<DividerProps>, DOMRefValue>> =
-  createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
+export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
 export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
   ...staticColor(),
@@ -94,9 +92,7 @@ export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
  * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
  * They can also be used to establish rhythm and hierarchy.
  */
-export const Divider:
-  ForwardRefExoticComponent<DividerProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-/*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
+export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, DividerContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index b0a732236ef..63e0149136a 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
@@ -39,9 +39,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
     size?: 'S' | 'M' | 'L'
 }
 
-export const DropZoneContext:
-  Context<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',
@@ -94,9 +92,7 @@ const banner = style({
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone:
-  ForwardRefExoticComponent<DropZoneProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 244e0047de1..d4bbe520d38 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -11,14 +11,14 @@
  */
 
 import AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
-import {Alignment, DOMRef, DOMRefValue, NecessityIndicator} from '@react-types/shared';
+import {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';
 import AsteriskIcon from '../ui-icons/Asterisk';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';
 import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';
 import {ContextualHelpContext} from './ContextualHelp';
 import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
-import {ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
+import {ForwardedRef, forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -42,9 +42,7 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   children?: ReactNode
 }
 
-export const FieldLabel:
-  ForwardRefExoticComponent<FieldLabelProps & RefAttributes<DOMRefValue<HTMLLabelElement>>> =
-forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     isDisabled,
@@ -188,9 +186,7 @@ const fieldGroupStyles = style({
   }
 });
 
-export const FieldGroup:
-  ForwardRefExoticComponent<FieldGroupProps & RefAttributes<HTMLDivElement>> =
-forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   return (
     <Group
       ref={ref}
@@ -218,9 +214,7 @@ forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDiv
 
 export interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}
 
-export const Input:
-  ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>> =
-forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   return (
     <RACInput
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index 0d884b6da6d..0e65b03f6e7 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/packages/@react-spectrum/s2/src/Form.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useMemo} from 'react';
-import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
+import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
@@ -34,7 +34,7 @@ export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className
   children: ReactNode
 }
 
-export const FormContext: Context<Partial<FormStyleProps | null>> = createContext<Partial<FormStyleProps | null>>(null);
+export const FormContext = createContext<Partial<FormStyleProps | null>>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
   let isSkeleton = useIsSkeleton();
@@ -65,9 +65,7 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-export const Form:
-  ForwardRefExoticComponent<FormProps & RefAttributes<DOMRefValue<HTMLFormElement>>> =
-/*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
   let {
     labelPosition = 'top',
     labelAlign,
diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
index 4a2615746c6..d46c31210a5 100644
--- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
+++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
@@ -13,8 +13,8 @@
 import {ButtonGroupContext} from './ButtonGroup';
 import {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ContentContext, HeaderContext, HeadingContext} from './Content';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {forwardRef} from 'react';
 import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils';
@@ -120,9 +120,7 @@ export const dialogInner = style({
 /**
  * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
  */
-export const FullscreenDialog:
-  ForwardRefExoticComponent<FullscreenDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
+export const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
   let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/Icon.tsx b/packages/@react-spectrum/s2/src/Icon.tsx
index 9b110072b24..de728ab8155 100644
--- a/packages/@react-spectrum/s2/src/Icon.tsx
+++ b/packages/@react-spectrum/s2/src/Icon.tsx
@@ -75,12 +75,8 @@ export interface IllustrationContextValue extends IconContextValue {
   size?: 'S' | 'M' | 'L'
 }
 
-export const IconContext:
-  Context<ContextValue<Partial<IconContextValue>, SVGElement>> =
-  createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
-export const IllustrationContext:
-  Context<ContextValue<Partial<IllustrationContextValue>, SVGElement>> =
-  createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
+export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
+export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
 
 const iconStyles = style({
   size: 20,
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index b0ce36e13ba..a7de53690e9 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -12,9 +12,9 @@
 
 import {ButtonGroupContext} from './ButtonGroup';
 import {ContentContext, HeadingContext} from './Content';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, Provider} from 'react-aria-components';
 import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {IllustrationContext} from './Icon';
@@ -147,17 +147,13 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
   isDropTarget?: boolean
 }
 
-export const IllustratedMessageContext:
-  Context<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const IllustratedMessageContext = createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An IllustratedMessage displays an illustration and a message, usually
  * for an empty state or an error page.
  */
-export const IllustratedMessage:
-  ForwardRefExoticComponent<S2SpectrumIllustratedMessageProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
   let domRef = useDOMRef(ref);
   let {
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
index 1ea2088fc0e..246a98106ce 100644
--- a/packages/@react-spectrum/s2/src/Image.tsx
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -1,5 +1,5 @@
-import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, HTMLAttributeReferrerPolicy, ReactNode, RefAttributes, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -57,9 +57,7 @@ interface ImageContextValue extends ImageProps {
   hidden?: boolean
 }
 
-export const ImageContext:
-  Context<ContextValue<Partial<ImageContextValue>, HTMLDivElement>> =
-  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
+export const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
 
 type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
 interface State {
@@ -69,7 +67,7 @@ interface State {
   loadTime: number
 }
 
-type Action =
+type Action = 
   | {type: 'update', src: string}
   | {type: 'loaded'}
   | {type: 'revealed'}
@@ -135,9 +133,7 @@ const imgStyles = style({
   transitionDuration: 500
 });
 
-export const Image:
-  ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLDivElement>> =
-forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -159,7 +155,7 @@ forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement
     slot
   } = props;
   let hidden = (props as ImageContextValue).hidden;
-
+  
   let {revealAll, register, unregister, load} = useContext(group);
   let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);
 
diff --git a/packages/@react-spectrum/s2/src/ImageCoordinator.tsx b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
index 8e64f9d46b4..9d2c6d8f978 100644
--- a/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
+++ b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
@@ -31,7 +31,7 @@ const defaultContext: ImageGroupValue = {
   load() {}
 };
 
-export const DefaultImageGroup: ImageGroup = createImageGroup();
+export const DefaultImageGroup = createImageGroup();
 
 export function createImageGroup(): ImageGroup {
   return createContext(defaultContext);
diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx
index 344283e5ec8..e5a420a2ad9 100644
--- a/packages/@react-spectrum/s2/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx
@@ -12,7 +12,7 @@
 
 import AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
 import CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
-import {ComponentType, Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useEffect, useRef} from 'react';
+import {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';
 import {ContentContext, HeadingContext} from './Content';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
@@ -53,9 +53,7 @@ interface InlineStylesProps {
   fillStyle?: 'border' | 'subtleFill' | 'boldFill'
 }
 
-export const InlineAlertContext:
-  Context<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   ...focusRing(),
@@ -214,9 +212,7 @@ const content = style({
  * Inline alerts display a non-modal message associated with objects in a view.
  * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  */
-export const InlineAlert:
-  ForwardRefExoticComponent<InlineAlertProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index 0ce338d3efe..c218555ed57 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -11,8 +11,8 @@
  */
 
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
@@ -38,9 +38,7 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
   children: ReactNode
 }
 
-export const LinkContext:
-  Context<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>> =
-  createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
   ...focusRing(),
@@ -84,9 +82,7 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isSt
  * Links allow users to navigate to a different location.
  * They can be presented inline inside a paragraph or as standalone text.
  */
-export const Link:
-  ForwardRefExoticComponent<LinkProps & RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>> =
-/*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
+export const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
   let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 6c20a1c691f..aa990d5744b 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -34,7 +34,7 @@ import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
-import {Context, createContext, forwardRef, JSX, ReactElement, ReactNode, RefAttributes, useContext, useRef, useState} from 'react';
+import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';
 import {forwardRefType} from './types';
@@ -88,9 +88,7 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   hideLinkOutIcon?: boolean
 }
 
-export const MenuContext:
-  Context<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 const menuItemGrid = {
   size: {
@@ -325,9 +323,7 @@ let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'
 /**
  * Menus display a list of actions or options that a user can choose.
  */
-export const Menu:
-  <T extends object>(props: MenuProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MenuContext);
   let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 0667d2e4fd1..0f791c80bb0 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -53,9 +53,7 @@ export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className
   label?: ReactNode
 }
 
-export const MeterContext:
-  Context<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style({
   ...bar()
@@ -99,9 +97,7 @@ const fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({
  * Meters are visual representations of a quantity or an achievement.
  * Their progress is determined by user actions, rather than system actions.
  */
-export const Meter:
-  ForwardRefExoticComponent<MeterProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
+export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MeterContext);
   let domRef = useDOMRef(ref);
 
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index 780eda0bb1d..8bbf7d266d7 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -12,8 +12,8 @@
 
 import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, RefAttributes, useCallback, useContext} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -51,9 +51,7 @@ const modalOverlayStyles = style({
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
-export const Modal:
-  ForwardRefExoticComponent<ModalProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
diff --git a/packages/@react-spectrum/s2/src/NotificationBadge.tsx b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
index ab6ed12fc6c..a2d86d8ef90 100644
--- a/packages/@react-spectrum/s2/src/NotificationBadge.tsx
+++ b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
@@ -18,7 +18,7 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFormatter} from '@internationalized/number';
-import React, {Context, createContext, forwardRef, ForwardRefExoticComponent} from 'react';
+import React, {createContext, forwardRef} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -44,9 +44,7 @@ interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps>
   staticColor?: 'black' | 'white' | 'auto'
 }
 
-export const NotificationBadgeContext:
-  Context<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style({
   display: {
@@ -117,9 +115,7 @@ const badge = style({
 /**
  * Notification badges are used to indicate new or pending activity .
  */
-export const NotificationBadge:
-  ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);
   let {
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 0390029f26a..132e03728a9 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -22,8 +22,8 @@ import {
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
-import {Context, createContext, CSSProperties, ForwardedRef, forwardRef, ForwardRefExoticComponent, ReactNode, Ref, RefAttributes, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
@@ -54,9 +54,7 @@ export interface NumberFieldProps extends
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const NumberFieldContext:
-  Context<ContextValue<Partial<NumberFieldProps>, TextFieldRef>> =
-  createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
+export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
   ...controlBorderRadius('sm'),
@@ -139,9 +137,7 @@ const stepperContainerStyles = style({
 /**
  * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
  */
-export const NumberField:
-  ForwardRefExoticComponent<NumberFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
-forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
+export const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index e12de8f38cf..edc7b55383e 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -70,7 +70,7 @@ import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -121,9 +121,7 @@ export interface PickerProps<T extends object> extends
 
 interface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}
 
-export const PickerContext:
-  Context<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   ...focusRing(),
@@ -263,9 +261,7 @@ let InsideSelectValueContext = createContext(false);
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const Picker:
-  <T extends object>(props: PickerProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
index fd4ddf43f1d..5d0c7f4ce20 100644
--- a/packages/@react-spectrum/s2/src/Popover.tsx
+++ b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -22,8 +22,8 @@ import {
 } from 'react-aria-components';
 import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, RefAttributes, useCallback, useContext} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
@@ -150,9 +150,7 @@ let arrow = style({
   }
 });
 
-export const PopoverBase:
-  ForwardRefExoticComponent<PopoverProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     hideArrow = false,
     UNSAFE_className = '',
@@ -241,9 +239,7 @@ const dialogStyle = style({
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover:
-  ForwardRefExoticComponent<PopoverDialogProps & RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
+export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
   const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;
 
diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
index e3d015965e2..0b2cf4a2a43 100644
--- a/packages/@react-spectrum/s2/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -16,7 +16,7 @@ import {
   ContextValue
 } from 'react-aria-components';
 import {bar, track} from './bar-utils'  with {type: 'macro'};
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -55,9 +55,7 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
   label?: ReactNode
 }
 
-export const ProgressBarContext:
-  Context<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const indeterminateLTR = keyframes(`
   0% {
@@ -172,9 +170,7 @@ const indeterminateAnimation = style({
  * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
  * They can represent either determinate or indeterminate progress.
  */
-export const ProgressBar:
-  ForwardRefExoticComponent<ProgressBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {
     label, size = 'M',
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index d22ef2c26d3..8780c7f03b3 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
@@ -34,9 +34,7 @@ export interface ProgressCircleStyleProps {
   isIndeterminate?: boolean
 }
 
-export const ProgressCircleContext:
-  Context<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 // Double check the types passed to each style, may not need all for each
 const wrapper = style<ProgressCircleStyleProps>({
@@ -101,9 +99,7 @@ let pxToRem = px => (px / 16) + 'rem';
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
  */
-export const ProgressCircle:
-  ForwardRefExoticComponent<ProgressCircleProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
   let {
     size = 'M',
diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
index c0d87a04bea..f1ed9c6292b 100644
--- a/packages/@react-spectrum/s2/src/Provider.tsx
+++ b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -12,7 +12,7 @@
 
 import type {ColorScheme, Router} from '@react-types/provider';
 import {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
-import {Context, createContext, JSX, ReactNode, useContext} from 'react';
+import {createContext, JSX, ReactNode, useContext} from 'react';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
 import {mergeStyles} from '../style/runtime';
@@ -48,9 +48,7 @@ export interface ProviderProps extends UnsafeStyles {
   elementType?: keyof JSX.IntrinsicElements
 }
 
-export const ColorSchemeContext:
-  Context<ColorScheme | 'light dark' | null> =
-  createContext<ColorScheme | 'light dark' | null>(null);
+export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
 export function Provider(props: ProviderProps): ReactNode {
   let result = <ProviderInner {...props} />;
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 032fd96fd29..436bd712a77 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -18,9 +18,9 @@ import {
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import {forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
+import {forwardRef, ReactNode, useContext, useRef} from 'react';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 
@@ -107,9 +107,7 @@ const circle = style<RenderProps>({
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio:
-  ForwardRefExoticComponent<RadioProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-/*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index cc5dbf7901b..a9f503028a7 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -19,7 +19,7 @@ import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps}
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
-import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -47,17 +47,13 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   isEmphasized?: boolean
 }
 
-export const RadioGroupContext:
-  Context<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const RadioGroupContext = createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const RadioGroup:
-  ForwardRefExoticComponent<RadioGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index 8c969f55d90..e197db55f1e 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, RefAttributes, useContext, useRef} from 'react';
 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';
@@ -37,13 +37,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   endName?: string
 }
 
-export const RangeSliderContext:
-  Context<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
+export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
-export const RangeSlider:
-  ForwardRefExoticComponent<RangeSliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index dee94bfc014..494bc6175c7 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -19,7 +19,7 @@ import {
 import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, Ref, RefAttributes, useContext, useImperativeHandle, useRef} from 'react';
+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';
@@ -40,16 +40,12 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const SearchFieldContext:
-  Context<ContextValue<Partial<SearchFieldProps>, TextFieldRef>> =
-  createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
+export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
 
 /**
  * A SearchField is a text field designed for searches.
  */
-export const SearchField:
-  ForwardRefExoticComponent<SearchFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
-/*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index 9f71d10414a..de31da5bde6 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, Key} from '@react-types/shared';
+import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject, useCallback, useContext, useRef} from 'react';
 import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
@@ -52,9 +52,7 @@ export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps
   isDisabled?: boolean
 }
 
-export const SegmentedControlContext:
-  Context<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const segmentedControl = style({
   display: 'flex',
@@ -151,9 +149,7 @@ const InternalSegmentedControlContext = createContext<InternalSegmentedControlCo
 /**
  * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
  */
-export const SegmentedControl:
-  ForwardRefExoticComponent<SegmentedControlProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
+export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
     defaultSelectedKey,
@@ -223,9 +219,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
 /**
  * A SegmentedControlItem represents an option within a SegmentedControl.
  */
-export const SegmentedControlItem:
-  ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-/*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
index ad5ae0b509e..de5673602ec 100644
--- a/packages/@react-spectrum/s2/src/Skeleton.tsx
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {cloneElement, Context, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
+import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
 import {color, style} from '../style' with {type: 'macro'};
 import {inertValue, mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
@@ -51,7 +51,7 @@ export type SkeletonElement = ReactElement<{
   inert?: boolean | 'true'
 }>;
 
-export const SkeletonContext: Context<boolean | null> = createContext<boolean | null>(null);
+export const SkeletonContext = createContext<boolean | null>(null);
 export function useIsSkeleton(): boolean {
   return useContext(SkeletonContext) || false;
 }
diff --git a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
index 4e78a4629b2..a3e3ada3381 100644
--- a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
+++ b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
@@ -11,7 +11,7 @@
  */
 
 import {createLeafComponent} from '@react-aria/collections';
-import {ReactElement, ReactNode, RefAttributes} from 'react';
+import {ReactNode} from 'react';
 import {Skeleton} from './Skeleton';
 
 export interface SkeletonCollectionProps {
@@ -23,9 +23,7 @@ let cache = new WeakMap();
 /**
  * A SkeletonCollection generates placeholder content within a collection component such as CardView.
  */
-export const SkeletonCollection:
-  (props: SkeletonCollectionProps & RefAttributes<object>) => ReactElement | null =
-createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
   // Cache rendering based on node object identity. This allows the children function to randomize
   // its content (e.g. heights) and preserve on re-renders.
   // TODO: do we need a `dependencies` prop here?
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index d507682e4ec..08d3fe8f140 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -20,8 +20,8 @@ import {
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject, useContext, useRef} from 'react';
 import {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
@@ -67,9 +67,7 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
   fillOffset?: number
 }
 
-export const SliderContext:
-  Context<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
+export const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 const slider = style({
   font: controlFont(),
@@ -395,9 +393,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
 /**
  * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
  */
-export const Slider:
-  ForwardRefExoticComponent<SliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index b004e7606fc..f62161bf0b1 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {CenterBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
 import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {style} from '../style' with {type: 'macro'};
 import {Text} from './Content';
@@ -49,9 +49,7 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
   role?: 'status'
 }
 
-export const StatusLightContext:
-  Context<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style<StatusLightStyleProps>({
   display: 'flex',
@@ -108,9 +106,7 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
  * Status lights are used to color code categories and labels commonly found in data visualization.
  * When status lights have a semantic meaning, they should use semantic variant colors.
  */
-export const StatusLight:
-  ForwardRefExoticComponent<StatusLightProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-/*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+export const StatusLight = /*#__PURE__*/ forwardRef(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 9463e3b7876..897cc383954 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -18,8 +18,8 @@ import {
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useContext, useRef} from 'react';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
@@ -45,9 +45,7 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
   children?: ReactNode
 }
 
-export const SwitchContext:
-  Context<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>> =
-  createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -155,9 +153,7 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export const Switch:
-  ForwardRefExoticComponent<SwitchProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-/*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 643e05e1bd7..4447ca218f5 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -59,7 +59,7 @@ import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
 import {useActionBarContainer} from './ActionBar';
@@ -262,16 +262,12 @@ export class S2TableLayout<T> extends TableLayout<T> {
   }
 }
 
-export const TableContext:
-  Context<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const TableContext = createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */
-export const TableView:
-  ForwardRefExoticComponent<TableViewProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
+export const TableView = forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TableContext);
   let {
     UNSAFE_style,
@@ -382,9 +378,7 @@ export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' |
 /**
  * The body of a `<Table>`, containing the table rows.
  */
-export const TableBody:
-  <T extends object>(props: TableBodyProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {items, renderEmptyState, children, dependencies = []} = props;
   let domRef = useDOMRef(ref);
   let {loadingState, onLoadMore} = useContext(InternalTableContext);
@@ -532,9 +526,7 @@ export interface ColumnProps extends RACColumnProps {
 /**
  * A column within a `<Table>`.
  */
-export const Column:
-  ForwardRefExoticComponent<ColumnProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
+export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
@@ -876,9 +868,7 @@ export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style
 /**
  * A header within a `<Table>`, containing the table columns.
  */
-export const TableHeader:
-  <T extends object>(props: TableHeaderProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
   let {isQuiet} = useContext(InternalTableContext);
@@ -1025,9 +1015,7 @@ export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'sh
 /**
  * A cell within a table row.
  */
-export const Cell:
-  ForwardRefExoticComponent<CellProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {
+export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let tableVisualOptions = useContext(InternalTableContext);
@@ -1136,9 +1124,7 @@ export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'ch
 /**
  * A row within a `<Table>`.
  */
-export const Row:
-  <T extends object>(props: RowProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, dependencies = [], ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, dependencies = [], ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 2ba6ff02795..c1e2d2c7ed6 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -29,7 +29,7 @@ import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {CollectionBuilder} from '@react-aria/collections';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
@@ -76,10 +76,7 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
   children: ReactNode
 }
 
-export const TabsContext:
-  Context<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>> =
-createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
-
+export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
 const InternalTabsContext = createContext<Partial<TabsProps> & {
   tablistRef?: RefObject<HTMLDivElement | null>,
   prevRef?: RefObject<DOMRect | null>,
@@ -106,9 +103,7 @@ const tabs = style({
 /**
  * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
  */
-export const Tabs:
-  ForwardRefExoticComponent<TabsProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 0195074e6f6..a480bcfbca8 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -48,7 +48,7 @@ import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -87,10 +87,7 @@ export interface PickerProps<T extends object> extends
     /** Id for the SelectedValue so we can label using it. */
     valueId?: string
 }
-export const PickerContext:
-  Context<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
-
+export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 const inputButton = style({
   ...focusRing(),
   ...fieldInput(),
@@ -125,7 +122,7 @@ const inputButton = style({
   },
   boxSizing: 'border-box'
 });
-let menu = style({
+export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
   gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
@@ -284,9 +281,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-let _Picker: <
-  T extends object>(props: PickerProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
+let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
 export {_Picker as Picker};
 
 
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index e099951a62f..e84b33ad0f7 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -32,8 +32,8 @@ import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' wi
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
-import {Context, createContext, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel, helpTextStyles} from './Field';
 import {flushSync} from 'react-dom';
@@ -81,16 +81,12 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
   onGroupAction?: () => void
 }
 
-export const TagGroupContext:
-  Context<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>> =
-  createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 const InternalTagGroupContext = createContext<TagGroupProps<any>>({});
 
 /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
-export const TagGroup:
-  <T extends object>(props: TagGroupProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);
   props = useFormProps(props);
   let {onRemove} = props;
@@ -491,9 +487,7 @@ const avatarSize = {
 } as const;
 
 /** An individual Tag for TagGroups. */
-export const Tag:
-  (props: TagProps & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null =
-/*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
+export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
   textValue ||= typeof children === 'string' ? children : undefined;
   let ctx = useSlottedContext(TagGroupContext);
   let isInRealDOM = Boolean(ctx?.size);
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 2f47c7abc72..56d27b4cff9 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -21,7 +21,7 @@ import {
   useSlottedContext
 } from 'react-aria-components';
 import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, Ref, RefAttributes, useContext, useImperativeHandle, useRef} from 'react';
+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';
@@ -41,18 +41,14 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const TextFieldContext:
-  Context<ContextValue<Partial<TextFieldProps>, TextFieldRef>> =
-  createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
+export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
 
 /**
  * TextFields are text inputs that allow users to input custom text entries
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-export const TextField:
-  ForwardRefExoticComponent<TextFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>> =
-forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
   return (
     <TextFieldBase
@@ -65,18 +61,14 @@ forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
-export const TextAreaContext:
-  Context<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>> =
-  createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
+export const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
 
 /**
  * TextAreas are multiline text inputs, useful for cases where users have
  * a sizable amount of text to enter. They allow for all customizations that
  * are available to text fields.
  */
-export const TextArea:
-  ForwardRefExoticComponent<TextAreaProps & RefAttributes<TextFieldRef<HTMLTextAreaElement>>> =
-forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);
   return (
     <TextFieldBase
@@ -91,12 +83,7 @@ forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTex
   );
 });
 
-export const TextFieldBase:
-  ForwardRefExoticComponent<TextFieldProps & {
-    children: ReactNode,
-    fieldGroupCss?: StyleString
-  } & RefAttributes<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>> =
-forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase = forwardRef(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);
diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx
index 9d20f95dff6..0391cf2bc23 100644
--- a/packages/@react-spectrum/s2/src/Toast.tsx
+++ b/packages/@react-spectrum/s2/src/Toast.tsx
@@ -490,7 +490,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           width: '100%',
           translate: `0 0 ${(-12 * index) / 16}rem`,
           // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.
-          // This allows view transitions to smoothly animate them from where they would be
+          // This allows view transitions to smoothly animate them from where they would be 
           // in the collapsed stack to their final position in the expanded list.
           opacity: index >= 3 ? 0 : 1,
           zIndex: visibleToasts.length - index - 1,
@@ -528,7 +528,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           }
           <Text slot="title">{toast.content.children}</Text>
         </ToastContent>
-        {!isExpanded && visibleToasts.length > 1 &&
+        {!isExpanded && visibleToasts.length > 1 && 
           <ActionButton
             isQuiet
             staticColor="white"
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index 7b8e6e61ceb..b5041a3289a 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -12,8 +12,8 @@
 
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
-import {Context, createContext, forwardRef, ForwardRefExoticComponent, ReactNode, RefAttributes} from 'react';
 import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -33,17 +33,13 @@ export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className
   isEmphasized?: boolean
 }
 
-export const ToggleButtonContext:
-  Context<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>> =
-  createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
-export const ToggleButton:
-  ForwardRefExoticComponent<ToggleButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
index 0ceecf99003..24f9ab3f18b 100644
--- a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
@@ -11,8 +11,8 @@
  */
 
 import {ActionButtonGroupProps, actionGroupStyle} from './ActionButtonGroup';
-import {Context, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {ContextValue, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps as RACToggleButtonGroupProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef} from 'react';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className'> {
@@ -20,16 +20,12 @@ export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RAC
   isEmphasized?: boolean
 }
 
-export const ToggleButtonGroupContext:
-  Context<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>> =
-  createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
+export const ToggleButtonGroupContext = createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
  */
-export const ToggleButtonGroup:
-  ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<HTMLDivElement>> =
-forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ToggleButtonGroup = forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonGroupContext);
   let {
     density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index 4e04e722a7b..84295a4277c 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -22,8 +22,8 @@ import {
 import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
-import {createContext, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactNode, RefAttributes, useCallback, useContext, useState} from 'react';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
+import {DOMRef} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
@@ -130,9 +130,7 @@ let InternalTooltipTriggerContext = createContext<Partial<TooltipTriggerProps>>(
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */
-export const Tooltip:
-  ForwardRefExoticComponent<TooltipProps & RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
+export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
   let {children, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
   let {

From a80e7510ac549ee5f58df64ac61a384ff5ae8fd5 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 27 Jun 2025 08:34:39 +1000
Subject: [PATCH 11/12] undo tsconfig change

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index d8b26be2112..f2c0426473a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -57,4 +57,4 @@
     "packages/@react-spectrum/s2/icon.d.ts",
     "packages/dev/s2-docs/pages/**"
   ]
-}
\ No newline at end of file
+}

From 091c8028117bef0c31517ce254417b0743ccc604 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 27 Jun 2025 11:34:46 +1000
Subject: [PATCH 12/12] fix story

---
 packages/@react-spectrum/s2/stories/ActionBar.stories.tsx | 2 +-
 packages/@react-spectrum/s2/stories/CardView.stories.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/ActionBar.stories.tsx b/packages/@react-spectrum/s2/stories/ActionBar.stories.tsx
index de6e2e3cc52..1c32c3ec9f2 100644
--- a/packages/@react-spectrum/s2/stories/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionBar.stories.tsx
@@ -13,7 +13,7 @@
 import {action} from '@storybook/addon-actions';
 import {ActionBar} from '../src/ActionBar';
 import {ActionButton} from '../src/ActionButton';
-import {Example as CardViewExample} from './CardView.stories';
+import {ExampleRender as CardViewExample} from './CardView.stories';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
index 5dae278430c..4562931a31e 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -43,7 +43,8 @@ const meta: Meta<typeof CardView> = {
   tags: ['autodocs'],
   args: {
     onLoadMore: fn()
-  }
+  },
+  excludeStories: ['ExampleRender']
 };
 
 export default meta;
@@ -114,7 +115,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-const ExampleRender = (args: CardViewProps<any>) => {
+export const ExampleRender = (args: CardViewProps<any>) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;