diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
index 8fbc6f25644..9aa0e2149eb 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton, Avatar, Text} from '../src';
+import {ActionButton, ActionButtonProps, Avatar, 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 {ReactElement} from 'react';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
 import {style} from '../style' with { type: 'macro' };
@@ -29,6 +30,8 @@ const meta: Meta<typeof ActionButton> = {
 
 export default meta;
 
+type ActionButtonStory = StoryObj<typeof ActionButton>;
+
 let states = [
   {isQuiet: true},
   {isDisabled: true},
@@ -38,7 +41,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = (args) => {
+const Template = (args: ActionButtonProps): 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'})}>
@@ -64,33 +67,33 @@ 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 />
   }
 };
 
-export const WithAvatar = {
-  render: Template,
+export const WithAvatar: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><Avatar src="https://i.imgur.com/xIe7Wlb.png" /><Text>Press me</Text></>
   }
 };
 
-export const AvatarOnly = {
-  render: Template,
+export const AvatarOnly: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
   }
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 2e612d13117..c5c4b17ade2 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 034a7bface4..363df70deb3 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 d0f2dee80de..76996eea018 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/test';
@@ -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 814e7b79941..de29ee3b0c8 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 c605ff3c7d3..17588a483db 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/test';
 
 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 20fcf525cea..3dc2136a254 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/test';
 
@@ -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 4911856b00e..302189b148e 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/test';
 
 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 99b7b3fa9ab..756cce5bdb6 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 76c04d86ae8..8693b852836 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';
@@ -28,9 +28,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>
@@ -57,8 +58,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>
@@ -78,8 +79,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 6291592f64b..bacc15de004 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..d297c5e911c 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<any>): 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) => (
             <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<TreeViewItemType>): ReactElement => (
   <div style={{width: '300px', height: '320px', display: 'flex', flexDirection: 'column'}}>
     <TreeView aria-label="test dynamic tree" items={rows} {...args}>
-      {(item: any) => (
+      {(item) => (
         <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/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 9c6062710a9..c6ec5fee9d9 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -30,7 +30,7 @@ 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, 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'};
@@ -48,7 +48,7 @@ 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>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
@@ -91,7 +91,7 @@ const tree = style({
   }
 }, getAllowedOverrides({height: true}));
 
-function TreeView(props: TreeViewProps, 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();
 
@@ -123,7 +123,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));
@@ -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: <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/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/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 9552774077e..4562931a31e 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -31,7 +31,7 @@ import EmptyIcon from '../spectrum-illustrations/gradient/generic1/Image';
 import ErrorIcon from '../spectrum-illustrations/linear/AlertNotice';
 import {fn} from '@storybook/test';
 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';
 
@@ -43,11 +43,14 @@ const meta: Meta<typeof CardView> = {
   tags: ['autodocs'],
   args: {
     onLoadMore: fn()
-  }
+  },
+  excludeStories: ['ExampleRender']
 };
 
 export default meta;
 
+type Story = StoryObj<typeof CardView>;
+
 const cardViewStyles = style({
   width: 'screen',
   maxWidth: 'full',
@@ -112,7 +115,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-export const Example = (args: CardViewProps<any>) => {
+export const ExampleRender = (args: CardViewProps<any>) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -162,14 +165,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}
@@ -183,7 +189,7 @@ export const Empty = (args: CardViewProps<any>) => {
       )}>
       {[]}
     </CardView>
-  );
+  )
 };
 
 interface Topic {
@@ -213,7 +219,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;
@@ -262,7 +268,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 abfa1ca0bff..1468946f562 100644
--- a/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SegmentedControl.stories.tsx
@@ -17,7 +17,7 @@ import {fn} from '@storybook/test';
 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'};
 
@@ -38,44 +38,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 cc17ebcbca8..06d02144de2 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, 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;
@@ -34,11 +34,9 @@ const meta: Meta<typeof TableView> = {
   tags: ['autodocs'],
   args: {
     // Make sure onLoadMore isn't autogenerated
-    // @ts-ignore
-    onLoadMore: null,
+    onLoadMore: undefined,
     // Make sure onAction isn't autogenerated
-    // @ts-ignore
-    onAction: null
+    onAction: undefined
   },
   argTypes: {
     ...categorizeArgTypes('Events', ['onAction', 'onLoadMore', 'onResizeStart', 'onResize', 'onResizeEnd', 'onSelectionChange', 'onSortChange']),
@@ -61,8 +59,6 @@ const meta: Meta<typeof TableView> = {
 
 export default meta;
 
-type Story = StoryObj<typeof TableView>;
-
 const StaticTable = (args: any) => (
   <TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
     <TableHeader>
@@ -98,7 +94,7 @@ const StaticTable = (args: any) => (
   </TableView>
 );
 
-export const Example: Story = {
+export const Example: StoryObj<typeof StaticTable> = {
   render: StaticTable,
   args: {
     selectionMode: 'multiple',
@@ -109,7 +105,7 @@ export const Example: Story = {
   }
 };
 
-export const DisabledRows: Story = {
+export const DisabledRows: StoryObj<typeof StaticTable> = {
   ...Example,
   args: {
     ...Example.args,
@@ -137,7 +133,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) => (
@@ -156,8 +152,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}}>
@@ -189,7 +185,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) => (
@@ -223,9 +219,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;
 
@@ -276,7 +272,7 @@ const DynamicSortableTableWithCustomMenus = (args: any) => {
   );
 };
 
-export const Dynamic: Story = {
+export const Dynamic: StoryObj<typeof DynamicTable> = {
   render: DynamicTable,
   args: {
     ...Example.args,
@@ -284,7 +280,7 @@ export const Dynamic: Story = {
   }
 };
 
-export const DynamicCustomMenus: Story = {
+export const DynamicCustomMenus: StoryObj<typeof DynamicTableWithCustomMenus> = {
   render: DynamicTableWithCustomMenus,
   args: {
     ...Example.args,
@@ -292,7 +288,7 @@ export const DynamicCustomMenus: Story = {
   }
 };
 
-export const DynamicSortableCustomMenus = {
+export const DynamicSortableCustomMenus: StoryObj<typeof DynamicSortableTableWithCustomMenus> = {
   render: DynamicSortableTableWithCustomMenus,
   args: {
     ...Example.args,
@@ -314,7 +310,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) => (
@@ -327,14 +323,14 @@ const EmptyStateTable = (args: any) => (
   </TableView>
 );
 
-export const EmptyState: Story = {
+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,
@@ -348,7 +344,7 @@ export const LoadingStateNoItems = {
   }
 };
 
-export const LoadingStateWithItems = {
+export const LoadingStateWithItems: StoryObj<typeof DynamicTable> = {
   render: DynamicTable,
   args: {
     ...Example.args,
@@ -362,7 +358,7 @@ export const LoadingStateWithItems = {
   }
 };
 
-export const LoadingStateWithItemsStatic = {
+export const LoadingStateWithItemsStatic: StoryObj<typeof StaticTable> = {
   render: StaticTable,
   args: {
     ...Example.args,
@@ -383,7 +379,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}>
@@ -404,7 +400,7 @@ const ShowDividers = (args: any) => {
   );
 };
 
-export const ShowDividersStory: Story = {
+export const ShowDividersStory: StoryObj<typeof ShowDividers> = {
   render: ShowDividers,
   args: {
     ...Example.args
@@ -419,7 +415,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}>
@@ -440,7 +436,7 @@ const TextAlign = (args: any) => {
   );
 };
 
-export const TextAlignStory: Story = {
+export const TextAlignStory: StoryObj<typeof TextAlign> = {
   render: TextAlign,
   args: {
     ...Example.args
@@ -455,7 +451,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) {
@@ -496,11 +492,10 @@ const OnLoadMoreTable = (args: any) => {
   );
 };
 
-export const OnLoadMoreTableStory: Story = {
+export const OnLoadMoreTableStory: StoryObj<typeof OnLoadMoreTable> = {
   render: OnLoadMoreTable,
   args: {
     ...Example.args,
-    // @ts-ignore
     delay: 50
   },
   name: 'async loading table'
@@ -535,9 +530,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;
 
@@ -573,28 +568,38 @@ const SortableTable = (args: any) => {
   );
 };
 
-export const Sorting: Story = {
+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;
 
@@ -611,7 +616,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>
@@ -630,19 +635,18 @@ const SortableResizableTable = (args: any) => {
   );
 };
 
-export const ResizingTable: Story = {
+export const ResizingTable: StoryObj<typeof SortableResizableTable> = {
   render: SortableResizableTable,
   args: {
     onResizeStart: action('onResizeStart'),
     onResizeEnd: action('onResizeEnd'),
-    // @ts-ignore
     columns: resizeColumn,
     isSortable: false
   },
   name: 'resizing only table'
 };
 
-export const ResizingSortableTable = {
+export const ResizingSortableTable: StoryObj<typeof SortableResizableTable> = {
   render: SortableResizableTable,
   args: {
     onResizeStart: action('onResizeStart'),
@@ -653,7 +657,7 @@ export const ResizingSortableTable = {
   name: 'resizing and sortable table'
 };
 
-function AsyncLoadingExample(props) {
+function AsyncLoadingExample(props: TableViewProps): ReactElement {
   interface Item {
     data: {
       id: string,
@@ -724,7 +728,7 @@ function AsyncLoadingExample(props) {
   );
 }
 
-export const ResizingUncontrolledSortableColumns = {
+export const ResizingUncontrolledSortableColumns: StoryObj<typeof AsyncLoadingExample> = {
   render: (args) => <AsyncLoadingExample {...args} />,
   args: {
     ...Example.args,
@@ -754,7 +758,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}>
@@ -784,7 +788,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>
@@ -819,7 +823,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>
@@ -854,7 +858,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}}>
@@ -895,8 +899,8 @@ function ColSpanExample(args: any) {
 }
 
 
-export const ColSpan = {
-  render: (args: any) => (
+export const ColSpan: StoryObj<typeof ColSpanExample> = {
+  render: (args) => (
     <ColSpanExample {...args} />
   ),
   parameters: {
@@ -947,7 +951,7 @@ Example.parameters = {
       <Cell>Long long long long long long long cell</Cell>
     </Row>
   </TableBody>
-</TableView> 
+</TableView>
         `;
       }
     }
@@ -990,7 +994,7 @@ DisabledRows.parameters = {
       <Cell>Long long long long long long long cell</Cell>
     </Row>
   </TableBody>
-</TableView> 
+</TableView>
         `;
       }
     }
@@ -1082,7 +1086,7 @@ DynamicCustomMenus.parameters = {
     </Row>
   )}
   </TableBody>
-</TableView> 
+</TableView>
       `;
       }
     }
@@ -1248,7 +1252,7 @@ const OnLoadMoreTable = () => {
       </TableBody>
     </TableView>
   );
-};      
+};
       `;
       }
     }
@@ -1325,7 +1329,7 @@ const SortableTable = (args: any) => {
       </TableBody>
     </TableView>
   );
-};      
+};
         `;
       }
     }
@@ -1362,7 +1366,7 @@ const ResizableTable = () => {
       </TableBody>
     </TableView>
   );
-};       
+};
         `;
       }
     }
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index cbaafff5384..84fd88d2b1b 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -15,9 +15,10 @@ import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import {fn} from '@storybook/test';
 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,
@@ -36,56 +37,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>
@@ -106,7 +113,7 @@ const IconsRender = (props) => (
   </div>
 );
 
-export const Icons = {
+export const Icons: Story = {
   render: (args) => <IconsRender {...args} />
 };
 
@@ -121,20 +128,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..156392d9e57 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -22,7 +22,9 @@ import {
   Text,
   TreeView,
   TreeViewItem,
-  TreeViewItemContent
+  TreeViewItemContent,
+  TreeViewItemProps,
+  TreeViewProps
 } from '../src';
 import {categorizeArgTypes} from './utils';
 import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
@@ -30,8 +32,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 +72,7 @@ const meta: Meta<typeof TreeView> = {
 
 export default meta;
 
-
-const TreeExampleStatic = (args) => (
+const TreeExampleStatic = (args: TreeViewProps<any>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -179,14 +180,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<any>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
@@ -234,15 +235,21 @@ const TreeExampleStaticNoActions = (args) => (
   </div>
 );
 
-export const ExampleNoActions = {
+export const ExampleNoActions: StoryObj<typeof TreeExampleStaticNoActions> = {
   render: TreeExampleStaticNoActions,
   args: {
     selectionMode: 'multiple'
   }
 };
 
+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: [
@@ -273,7 +280,7 @@ let rows = [
   ]}
 ];
 
-const DynamicTreeItem = (props) => {
+const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & TreeViewItemType): ReactElement => {
   let {childItems, name, icon} = props;
   return (
     <>
@@ -293,16 +300,14 @@ const DynamicTreeItem = (props) => {
           </ActionMenu>
         </TreeViewItemContent>
         <Collection items={childItems}>
-          {(item: any) => (
+          {(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>
@@ -310,10 +315,10 @@ const DynamicTreeItem = (props) => {
   );
 };
 
-const TreeExampleDynamic = (args) => (
+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: any) => (
+      {(item) => (
         <DynamicTreeItem
           id={item.id}
           icon={item.icon}
@@ -325,7 +330,7 @@ const TreeExampleDynamic = (args) => (
   </div>
 );
 
-export const Dynamic = {
+export const Dynamic: StoryObj<typeof TreeExampleDynamic> = {
   render: TreeExampleDynamic,
   args: {
     ...Example.args,
@@ -333,7 +338,7 @@ export const Dynamic = {
   }
 };
 
-function renderEmptyState() {
+function renderEmptyState(): ReactElement {
   return (
     <IllustratedMessage>
       <FolderOpen />
@@ -347,7 +352,7 @@ function renderEmptyState() {
   );
 }
 
-export const Empty = {
+export const Empty: StoryObj<typeof TreeExampleDynamic> = {
   render: TreeExampleDynamic,
   args: {
     renderEmptyState,
@@ -355,7 +360,7 @@ export const Empty = {
   }
 };
 
-const TreeExampleWithLinks = (args) => (
+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) => (
@@ -371,7 +376,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>
diff --git a/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx b/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx
index 65fe56be608..fcda7f98b34 100644
--- a/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx
@@ -1,9 +1,9 @@
 'use client';
-import {createElement} from 'react';
+import {createElement, ReactElement} from 'react';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
 import {useDragAndDrop} from 'react-aria-components';
 
-export function DraggableGridList() {
+export function DraggableGridList(): ReactElement {
   let items = new Map([
     ['ps', {name: 'Photoshop', style: 'strong'}],
     ['xd', {name: 'XD', style: 'strong'}],
diff --git a/packages/dev/s2-docs/pages/react-aria/DroppableGridList.tsx b/packages/dev/s2-docs/pages/react-aria/DroppableGridList.tsx
index e6e18c7060a..30e7313865a 100644
--- a/packages/dev/s2-docs/pages/react-aria/DroppableGridList.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/DroppableGridList.tsx
@@ -1,5 +1,5 @@
 'use client';
-import {createElement, useState} from 'react';
+import {createElement, ReactElement, useState} from 'react';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
 import {isTextDropItem, useDragAndDrop} from 'react-aria-components';
 
@@ -9,7 +9,7 @@ interface TextItem {
   style: string
 }
 
-export function DroppableGridList() {
+export function DroppableGridList(): ReactElement {
   let [items, setItems] = useState<TextItem[]>([]);
 
   let {dragAndDropHooks} = useDragAndDrop({
diff --git a/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx b/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
index 81450174297..d96aa0545b7 100644
--- a/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
@@ -1,7 +1,7 @@
 import type {CalendarDate} from '@internationalized/date';
 import {CalendarStateContext} from 'react-aria-components';
+import {ReactElement, useContext} from 'react';
 import {Select, SelectItem} from 'vanilla-starter/Select';
-import {useContext} from 'react';
 import {useDateFormatter} from 'react-aria';
 
 interface MonthItem {
@@ -10,13 +10,13 @@ interface MonthItem {
   formatted: string
 }
 
-export function MonthDropdown() {
+export function MonthDropdown(): ReactElement {
   let state = useContext(CalendarStateContext)!;
   let formatter = useDateFormatter({
     month: 'short',
     timeZone: state.timeZone
   });
-  
+
   // Format the name of each month in the year according to the
   // current locale and calendar system. Note that in some calendar
   // systems, such as the Hebrew, the number of months may differ
diff --git a/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx b/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
index 778c959c5d8..0e1aa6bb7c1 100644
--- a/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
@@ -1,7 +1,7 @@
 import type {CalendarDate} from '@internationalized/date';
 import {CalendarStateContext} from 'react-aria-components';
+import {ReactElement, useContext} from 'react';
 import {Select, SelectItem} from 'vanilla-starter/Select';
-import {useContext} from 'react';
 import {useDateFormatter} from 'react-aria';
 
 interface YearItem {
@@ -10,7 +10,7 @@ interface YearItem {
   formatted: string
 }
 
-export function YearDropdown() {
+export function YearDropdown(): ReactElement {
   let state = useContext(CalendarStateContext)!;
   let formatter = useDateFormatter({
     year: 'numeric',