diff --git a/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx b/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
index ebf823b8fa8..87ecaedb5ce 100644
--- a/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
 import {SpectrumAccordionProps} from '../src/Accordion';
 import {Template} from '../chromatic/Accordion.stories';
 
@@ -20,7 +21,9 @@ const meta: Meta<SpectrumAccordionProps> = {
 
 export default meta;
 
-export const Default = {
-  render: Template,
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };
diff --git a/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
index ade7611b366..e496e26a90c 100644
--- a/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle, SpectrumAccordionProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Accordion',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Template = (args: SpectrumAccordionProps): JSX.Element => (
   <Accordion {...args}>
     <Disclosure id="files">
       <DisclosureTitle>
@@ -51,16 +53,16 @@ export const Template = (args) => (
   </Accordion>
 );
 
-export const Default = {
-  render: Template
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithExpandedKeys = {
-  render: Template,
+export const WithExpandedKeys: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };
 
-export const WithDisabledDisclosure = {
+export const WithDisabledDisclosure: AccordionStory = {
   render: (args) => (
     <Accordion {...args}>
       <Disclosure id="files">
@@ -90,22 +92,22 @@ export const WithDisabledDisclosure = {
     </Accordion>)
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WithWrappingTitle = {
+export const WithWrappingTitle: AccordionStory = {
   render: (args) => (
     <Accordion maxWidth="size-3000" {...args}>
       <Disclosure id="files">
         <DisclosureTitle>
-          Long long long long long long long long long long long long long  long long long wrapping title 
+          Long long long long long long long long long long long long long  long long long wrapping title
         </DisclosureTitle>
         <DisclosurePanel>
           Files content
diff --git a/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
index 453b480428f..03849a8108f 100644
--- a/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Disclosure, DisclosurePanel, DisclosureTitle, SpectrumDisclosureProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Disclosure',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type DisclosureStory = StoryObj<SpectrumDisclosureProps>;
+
+export const Template = (args: SpectrumDisclosureProps): JSX.Element => (
   <Disclosure {...args}>
     <DisclosureTitle>
       Your files
@@ -33,27 +35,29 @@ export const Template = (args) => (
   </Disclosure>
 );
 
-export const Default = {
-  render: Template
+export const Default: DisclosureStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WrappingTitle = (args) => (
-  <Disclosure maxWidth="size-3000" {...args}>
-    <DisclosureTitle>
-      Long long long long long long long long long long long long long  long long long wrapping title 
-    </DisclosureTitle>
-    <DisclosurePanel>
-      Files content
-    </DisclosurePanel>
-  </Disclosure>
-);
+export const WrappingTitle: DisclosureStory = {
+  render: (args) => (
+    <Disclosure maxWidth="size-3000" {...args}>
+      <DisclosureTitle>
+        Long long long long long long long long long long long long long  long long long wrapping title
+      </DisclosureTitle>
+      <DisclosurePanel>
+        Files content
+      </DisclosurePanel>
+    </Disclosure>
+  )
+};
diff --git a/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx b/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
index 6828568cc3b..7cf2a06e9b0 100644
--- a/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
@@ -11,20 +11,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default, LargeWidth} from '../chromatic/ActionBar.stories';
+import {Example} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const All = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const All: ActionBarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Default</h2>
-    <Default />
+    <Flex gap="size-250">
+      <Example />
+      <Example defaultSelectedKeys={new Set(['Foo 1'])} />
+    </Flex>
     <h2>Large width</h2>
-    <LargeWidth />
+    <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx b/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
index 7861873f724..bbf2f592bd4 100644
--- a/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
@@ -13,12 +13,15 @@
 import {Example, Example2} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const Default = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const Default: ActionBarStory = () => (
   <Flex gap="size-250">
     <Example />
     <Example defaultSelectedKeys={new Set(['Foo 1'])} />
@@ -29,13 +32,13 @@ Default.story = {
   name: 'default'
 };
 
-export const IsEmphasized = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
+export const IsEmphasized: ActionBarStory = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const LargeWidth = () => (
+export const LargeWidth: ActionBarStory = () => (
   <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
@@ -43,7 +46,7 @@ LargeWidth.story = {
   name: 'large width'
 };
 
-export const CollapsedIcons = () => (
+export const CollapsedIcons: ActionBarStory = () => (
   <Example isEmphasized tableWidth={500} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
@@ -51,6 +54,6 @@ CollapsedIcons.story = {
   name: 'collapsed icons'
 };
 
-export const CollapseRounding = () => (
+export const CollapseRounding: ActionBarStory = () => (
   <Example2 tableWidth={800} defaultSelectedKeys={new Set(['Foo 1'])} />
 );
diff --git a/packages/@react-spectrum/actionbar/stories/Example.tsx b/packages/@react-spectrum/actionbar/stories/Example.tsx
index 1597f13a340..debc2e79f83 100644
--- a/packages/@react-spectrum/actionbar/stories/Example.tsx
+++ b/packages/@react-spectrum/actionbar/stories/Example.tsx
@@ -19,7 +19,7 @@ import Duplicate from '@spectrum-icons/workflow/Duplicate';
 import Edit from '@spectrum-icons/workflow/Edit';
 import {mergeProps} from '@react-aria/utils';
 import Move from '@spectrum-icons/workflow/Move';
-import React, {useRef, useState} from 'react';
+import React, {JSX, useRef, useState} from 'react';
 import {Selection} from '@react-types/shared';
 import {Text} from '@react-spectrum/text';
 
@@ -48,7 +48,7 @@ let defaultItems = [
   {test: 'Test 2', foo: 'Foo 16', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'}
 ];
 
-export function Example(props: any = {}) {
+export function Example(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 
@@ -118,7 +118,7 @@ export function Example(props: any = {}) {
   );
 }
 
-export function Example2(props: any = {}) {
+export function Example2(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 
diff --git a/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
index b7147c375fd..6f728f50cbf 100644
--- a/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
@@ -11,32 +11,41 @@
  */
 
 
-import {Compact, Default, IsDisabled, IsEmphasized, IsQuiet, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionGroup.stories';
+import {docItems, editItems, Render, viewItems} from '../chromatic/ActionGroup.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
+import {View} from '@react-spectrum/view';
 
 export default {
   title: 'ActionGroup'
 };
 
-export const All = () => (
+export type ActionGroupStory = StoryFn<typeof Render>;
+
+export const All: ActionGroupStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>default</h2>
-    <Default />
+    <Render items={docItems} />
     <h2>isDisabled</h2>
-    <IsDisabled />
+    <Render items={docItems} isDisabled defaultSelectedKeys={['1']} />
     <h2>compact</h2>
-    <Compact />
+    <Render items={viewItems} density="compact" defaultSelectedKeys={['1']} />
     <h2>isQuiet</h2>
-    <IsQuiet />
+    <Render items={editItems} isQuiet defaultSelectedKeys={['1']} />
     <h2>isEmphasized</h2>
-    <IsEmphasized />
+    <Render items={docItems} isEmphasized defaultSelectedKeys={['1']} />
     <h2>staticColor: black</h2>
-    <StaticColorBlack />
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render items={viewItems} staticColor="black" defaultSelectedKeys={['1']} />
+    </View>
     <h2>staticColor: white</h2>
-    <StaticColorWhite />
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render items={viewItems} staticColor="white" defaultSelectedKeys={['1']} />
+    </View>
   </Flex>
 );
+
 All.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
index aa988072e39..251a7c5de04 100644
--- a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionGroup} from '../';
+import {ActionGroup, SpectrumActionGroupProps} from '../';
 import BookIcon from '@spectrum-icons/workflow/Book';
 import CopyIcon from '@spectrum-icons/workflow/Copy';
 import DeleteIcon from '@spectrum-icons/workflow/Delete';
@@ -19,8 +19,9 @@ import DrawIcon from '@spectrum-icons/workflow/Draw';
 import {Flex} from '@react-spectrum/layout';
 import InfoIcon from '@spectrum-icons/workflow/Info';
 import {Item} from '@react-stately/collections';
+import {Meta, StoryObj} from '@storybook/react';
 import PropertiesIcon from '@spectrum-icons/workflow/Properties';
-import React from 'react';
+import React, {JSX} from 'react';
 import SettingsIcon from '@spectrum-icons/workflow/Settings';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -28,11 +29,11 @@ import ViewCardIcon from '@spectrum-icons/workflow/ViewCard';
 import ViewGridIcon from '@spectrum-icons/workflow/ViewGrid';
 import ViewListIcon from '@spectrum-icons/workflow/ViewList';
 
-const docItems = [{children: 'Document setup', name: '1'}, {children: 'Settings', name: '2'}];
-const editItems = [{children: 'Edit', name: '1'}, {children: 'Copy', name: '2'}, {children: 'Delete', name: '3'}];
-const viewItems2 = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}];
-const viewItems = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}, {children: 'Gallery view', name: '3'}];
-const dataItems = [{children: 'Properties', name: '1'}, {children: 'Info', name: '2'}, {children: 'Keywords', name: '3'}];
+export const docItems = [{children: 'Document setup', name: '1'}, {children: 'Settings', name: '2'}] as const;
+export const editItems = [{children: 'Edit', name: '1'}, {children: 'Copy', name: '2'}, {children: 'Delete', name: '3'}] as const;
+export const viewItems2 = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}] as const;
+export const viewItems = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}, {children: 'Gallery view', name: '3'}] as const;
+export const dataItems = [{children: 'Properties', name: '1'}, {children: 'Info', name: '2'}, {children: 'Keywords', name: '3'}] as const;
 
 let iconMap = {
   'Document setup': DocumentIcon,
@@ -49,289 +50,373 @@ let iconMap = {
 };
 
 export default {
-  title: 'ActionGroup'
-};
+  title: 'ActionGroup',
+  excludeStories: ['Render', 'RenderText', 'RenderBoth', 'RenderIcons', 'docItems', 'editItems', 'viewItems2', 'viewItems', 'dataItems']
+} as Meta<typeof ActionGroup>;
 
-export const Default = () => render({}, docItems);
+export type ActionGroupStory = StoryObj<typeof Render>;
 
-Default.story = {
+export const Default: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems
+  },
   name: 'default'
 };
 
-export const IsDisabled = () => render({isDisabled: true, defaultSelectedKeys: ['1']}, docItems);
-
-IsDisabled.story = {
+export const IsDisabled: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isDisabled: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isDisabled'
 };
 
-export const Compact = () => render({density: 'compact', defaultSelectedKeys: ['1']}, viewItems);
-
-Compact.story = {
+export const Compact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    density: 'compact',
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact'
 };
 
-export const IsJustified = () =>
-  render({isJustified: true, defaultSelectedKeys: ['1']}, viewItems2);
-
-IsJustified.story = {
+export const IsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems2,
+    isJustified: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isJustified'
 };
 
-export const CompactIsJustified = () =>
-  render({density: 'compact', isJustified: true, defaultSelectedKeys: ['1']}, viewItems2);
-
-CompactIsJustified.story = {
+export const CompactIsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems2,
+    density: 'compact',
+    isJustified: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isJustified'
 };
 
-export const IsQuiet = () => render({isQuiet: true, defaultSelectedKeys: ['1']}, editItems);
-
-IsQuiet.story = {
+export const IsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isQuiet'
 };
 
-export const CompactIsQuiet = () =>
-  render({density: 'compact', isQuiet: true, defaultSelectedKeys: ['1']}, editItems);
-
-CompactIsQuiet.story = {
+export const CompactIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    density: 'compact',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isQuiet'
 };
 
-export const IsEmphasized = () =>
-  render({isEmphasized: true, defaultSelectedKeys: ['1']}, docItems);
-
-IsEmphasized.story = {
+export const IsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isEmphasized: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isEmphasized'
 };
 
-export const CompactIsEmphasized = () =>
-  render({isEmphasized: true, density: 'compact', defaultSelectedKeys: ['1']}, viewItems);
-
-CompactIsEmphasized.story = {
+export const CompactIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isEmphasized: true,
+    density: 'compact',
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isEmphasized'
 };
 
-export const IsQuietIsEmphasized = () =>
-  render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1']}, viewItems);
-
-IsQuietIsEmphasized.story = {
+export const IsQuietIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isEmphasized: true,
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isQuiet, isEmphasized'
 };
 
-export const SelectionModeMultiple = () =>
-  render({selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems);
-
-SelectionModeMultiple.story = {
+export const SelectionModeMultiple: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple'
 };
 
-export const StaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorWhite.story = {
+export const StaticColorWhite: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'white',
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=white'
 };
 
-export const StaticColorWhiteIsQuiet = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorWhiteIsQuiet.story = {
+export const StaticColorWhiteIsQuiet: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'white',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=white, isQuiet'
 };
 
-export const StaticColorBlack = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    {render({staticColor: 'black', defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorBlack.story = {
+export const StaticColorBlack: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'black',
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=black'
 };
 
-export const StaticColorBlackIsQuiet = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    {render({staticColor: 'black', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorBlackIsQuiet.story = {
+export const StaticColorBlackIsQuiet: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'black',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=black, isQuiet'
 };
 
-export const SelectionModeSingleDisallowEmptySelection = () =>
-  render(
-    {selectionMode: 'single', disallowEmptySelection: true, defaultSelectedKeys: ['1']},
-    dataItems
-  );
-
-SelectionModeSingleDisallowEmptySelection.story = {
+export const SelectionModeSingleDisallowEmptySelection: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    selectionMode: 'single',
+    disallowEmptySelection: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'selectionMode: single, disallowEmptySelection'
 };
 
-export const SelectionModeMultipleIsQuiet = () =>
-  render({isQuiet: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems);
-
-SelectionModeMultipleIsQuiet.story = {
+export const SelectionModeMultipleIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isQuiet: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isQuiet'
 };
 
-export const SelectionModeMultipleIsQuietCompact = () =>
-  render(
-    {
-      isQuiet: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsQuietCompact.story = {
+export const SelectionModeMultipleIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isQuiet: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isQuiet, compact'
 };
 
-export const SelectionModeMultipleIsEmphasized = () =>
-  render(
-    {isEmphasized: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']},
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasized.story = {
+export const SelectionModeMultipleIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized'
 };
 
-export const SelectionModeMultipleIsEmphasizedCompact = () =>
-  render(
-    {
-      isEmphasized: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedCompact.story = {
+export const SelectionModeMultipleIsEmphasizedCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, compact'
 };
 
-export const SelectionModeMultipleIsEmphasizedIsQuiet = () =>
-  render(
-    {
-      isEmphasized: true,
-      isQuiet: true,
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedIsQuiet.story = {
+export const SelectionModeMultipleIsEmphasizedIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    isQuiet: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, isQuiet'
 };
 
-export const SelectionModeMultipleIsEmphasizedIsQuietCompact = () =>
-  render(
-    {
-      isEmphasized: true,
-      isQuiet: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedIsQuietCompact.story = {
+export const SelectionModeMultipleIsEmphasizedIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    isQuiet: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, isQuiet, compact'
 };
 
-export const SelectionModeNone = () => render({selectionMode: 'none'}, editItems);
-
-SelectionModeNone.story = {
+export const SelectionModeNone: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    selectionMode: 'none'
+  },
   name: 'selectionMode: none'
 };
 
-export const Vertical = () =>
-  render({orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems);
-
-Vertical.story = {
+export const Vertical: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical'
 };
 
-export const VerticalIsJustified = () =>
-  render({isJustified: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems);
-
-VerticalIsJustified.story = {
+export const VerticalIsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isJustified: true,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isJustified'
 };
 
-export const VerticalCompact = () =>
-  render({density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']}, viewItems);
-
-VerticalCompact.story = {
+export const VerticalCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, compact'
 };
 
-export const VerticalIsJustifiedCompact = () =>
-  render(
-    {isJustified: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']},
-    viewItems
-  );
-
-VerticalIsJustifiedCompact.story = {
+export const VerticalIsJustifiedCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isJustified: true,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isJustified, compact'
 };
 
-export const VerticalIsQuiet = () =>
-  render({isQuiet: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, editItems);
-
-VerticalIsQuiet.story = {
+export const VerticalIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    isQuiet: true,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isQuiet'
 };
 
-export const VerticalIsQuietCompact = () =>
-  render(
-    {isQuiet: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']},
-    viewItems
-  );
-
-VerticalIsQuietCompact.story = {
+export const VerticalIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isQuiet: true,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isQuiet, compact'
 };
 
-export const DisabledKeys = () =>
-  render({disabledKeys: ['1', '2'], selectionMode: 'multiple'}, dataItems);
-
-DisabledKeys.story = {
+export const DisabledKeys: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    disabledKeys: ['1', '2'],
+    selectionMode: 'multiple'
+  },
   name: 'disabledKeys'
 };
 
-export const OverflowAndHide = () =>
-  render({overflowMode: 'collapse', buttonLabelBehavior: 'hide', selectionMode: 'multiple'}, dataItems);
-
-OverflowAndHide.story = {
+export const OverflowAndHide: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    overflowMode: 'collapse',
+    buttonLabelBehavior: 'hide',
+    selectionMode: 'multiple'
+  },
   name: 'overflowMode: collapse, buttonLabelBehavior: hide'
 };
 
-function render(props, items) {
+export function Render(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
   return (
     <Flex rowGap="size-300" margin="size-100" width="100%" direction="column">
-      {renderText(props, items)}
-      {renderBoth(props, items)}
-      {renderIcons(props, items)}
+      <RenderText {...props} />
+      <RenderBoth {...props} />
+      <RenderIcons {...props} />
     </Flex>
   );
 }
 
-function renderText(props, items: any = docItems) {
+export function RenderText(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
@@ -343,7 +428,8 @@ function renderText(props, items: any = docItems) {
   );
 }
 
-function renderBoth(props, items: any = docItems) {
+export function RenderBoth(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items = docItems} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
@@ -361,7 +447,8 @@ function renderBoth(props, items: any = docItems) {
   );
 }
 
-function renderIcons(props, items: any = docItems) {
+export function RenderIcons(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items = docItems} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
diff --git a/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx b/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
index 7bd61a50564..d51799992d5 100644
--- a/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
@@ -41,7 +41,9 @@ export interface SpectrumToolbarProps extends AriaLabelingProps {
   orientation?: Orientation
 }
 
-export const Toolbar = forwardRef((props: SpectrumToolbarProps, ref: ForwardedRef<HTMLDivElement>) => {
+export const Toolbar:
+  React.ForwardRefExoticComponent<SpectrumToolbarProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef((props: SpectrumToolbarProps, ref: ForwardedRef<HTMLDivElement>) => {
   props = useProviderProps(props);
   props = useSlotProps(props, 'toolbar');
   let {
diff --git a/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
index 767d2916c34..ce5b907868c 100644
--- a/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
+++ b/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
@@ -10,14 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
+import React from 'react';
+import {StoryObj} from '@storybook/react';
 import {Template} from '../chromatic/SearchAutocomplete.stories';
 
 export default {
   title: 'SearchAutocomplete'
 };
 
-export const PropInputValue = {
-  render: Template,
+export type SearchAutocompleteStory = StoryObj<typeof Template>;
+
+export const PropInputValue: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
diff --git a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
index a6c2d62fcbb..32ae901e755 100644
--- a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
+++ b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
@@ -14,8 +14,8 @@ import Filter from '@spectrum-icons/workflow/Filter';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Item, SearchAutocomplete} from '../';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 
 // Skipping focus styles because don't have a way of applying it via classnames
@@ -70,13 +70,15 @@ const meta: Meta<SpectrumSearchAutocompleteProps<object>> = {
 
 export default meta;
 
+export type SearchAutocompleteStory = StoryObj<typeof Template>;
+
 let items = [
   {name: 'Aardvark', id: '1'},
   {name: 'Kangaroo', id: '2'},
   {name: 'Snake', id: '3'}
 ];
 
-export const Template: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args) => (
+export const Template = (args: SpectrumSearchAutocompleteProps<object>): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -94,7 +96,7 @@ export const Template: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args)
 );
 
 // Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
-const TemplateSideLabel: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args) => (
+const TemplateSideLabel = (args: SpectrumSearchAutocompleteProps<object>): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={800}>
     {combinations.filter(combo => !(combo.isReadOnly || combo.isDisabled)).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -111,38 +113,38 @@ const TemplateSideLabel: StoryFn<SpectrumSearchAutocompleteProps<object>> = (arg
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropInputValue = {
-  render: Template,
+export const PropInputValue: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSideLabel,
+export const PropLabelSide: SearchAutocompleteStory = {
+  render: (args) => <TemplateSideLabel {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-1600'},
 
@@ -153,14 +155,14 @@ export const PropCustomWidth = {
   }
 };
 
-export const PropIconFilter = {
-  render: Template,
+export const PropIconFilter: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'icon: Filter',
   args: {...PropDefaults.args, icon: <Filter />}
 };
 
-export const PropIconNull = {
-  render: Template,
+export const PropIconNull: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'icon: null',
   args: {...PropDefaults.args, icon: null}
 };
diff --git a/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
index 858ef304ed4..57776adfdc9 100644
--- a/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
@@ -13,6 +13,7 @@
 import {Avatar} from '..';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 const SRC_URL_1 =
   'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png';
@@ -22,7 +23,9 @@ export default {
   title: 'Avatar'
 };
 
-export const all = () => (
+export type AvatarStory = StoryFn<typeof Avatar>;
+
+export const all: AvatarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Default</h2>
     <Avatar src={SRC_URL_1} />
diff --git a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
index 91f788d431f..cabf4c21403 100644
--- a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
 
 const SRC_URL_1 =
@@ -25,17 +25,19 @@ const meta: Meta<SpectrumAvatarProps> = {
 
 export default meta;
 
-export const Default = {
+export type AvatarStory = StoryObj<typeof Avatar>;
+
+export const Default: AvatarStory = {
   args: {src: SRC_URL_1},
   name: 'default'
 };
 
-export const Disabled = {
+export const Disabled: AvatarStory = {
   args: {isDisabled: true, src: SRC_URL_1},
   name: 'isDisabled'
 };
 
-export const CustomSize = {
+export const CustomSize: AvatarStory = {
   args: {size: 'avatar-size-700', src: SRC_URL_2},
   name: 'with custom size'
 };
diff --git a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
index ec25e54bf3c..e4c5bc0273c 100644
--- a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
 
 const SRC_URL_1 =
@@ -25,22 +25,24 @@ const meta: Meta<SpectrumAvatarProps> = {
 
 export default meta;
 
-export const Default = {
+export type AvatarStory = StoryObj<typeof Avatar>;
+
+export const Default: AvatarStory = {
   args: {src: SRC_URL_1},
   name: 'default'
 };
 
-export const Disabled = {
+export const Disabled: AvatarStory = {
   args: {isDisabled: true, src: SRC_URL_1},
   name: 'isDisabled'
 };
 
-export const WithAltText = {
+export const WithAltText: AvatarStory = {
   args: {alt: 'Pensive', src: SRC_URL_2},
   name: 'with alt text'
 };
 
-export const CustomSize = {
+export const CustomSize: AvatarStory = {
   args: {...WithAltText.args, size: 'avatar-size-700'},
   name: 'with custom size'
 };
diff --git a/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx b/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
index 1494697c492..150ff783000 100644
--- a/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
@@ -12,12 +12,15 @@
 
 import {Breadcrumbs} from '../';
 import {Default as ChromaticDefault} from '../chromatic/Breadcrumbs.stories';
+import {Meta, StoryObj} from '@storybook/react';
 
 export default {
   title: 'Breadcrumbs',
   component: Breadcrumbs
-};
+} as Meta<typeof Breadcrumbs>;
+
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const Default = {
+export const Default: BreadcrumbsStory = {
   ...ChromaticDefault
 };
diff --git a/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
index 6b02aaf5615..42ea61e9c15 100644
--- a/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Breadcrumbs, Item} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<typeof Breadcrumbs> = {
@@ -21,8 +21,9 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const Default = {
+export const Default: BreadcrumbsStory = {
   args: {
     children: [
       <Item key="Folder 1">The quick brown fox jumps over</Item>,
@@ -36,19 +37,19 @@ export const Default = {
   }
 };
 
-export const IsMultiline = {
+export const IsMultiline: BreadcrumbsStory = {
   args: {...Default.args, isMultiline: true}
 };
 
-export const SizeS = {
+export const SizeS: BreadcrumbsStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const SizeM = {
+export const SizeM: BreadcrumbsStory = {
   args: {...Default.args, size: 'M'}
 };
 
-export const Truncated = {
+export const Truncated: BreadcrumbsStory = {
   decorators: [
     (Story) => (
       <div style={{width: '100px'}}>
@@ -59,6 +60,6 @@ export const Truncated = {
   args: {...Default.args}
 };
 
-export const ShowRoot = {
+export const ShowRoot: BreadcrumbsStory = {
   args: {...Default.args, showRoot: true}
 };
diff --git a/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
index 08a56837ab5..8f5188eb7d1 100644
--- a/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
@@ -10,24 +10,73 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton} from '../';
+import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
-import {IconText, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionButton.stories';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
+import {Text} from '@react-spectrum/text';
+import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Button/ActionButtons'
-};
+} as Meta<typeof ActionButton>;
+
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-export const All = () => (
-  <Flex gap="size-100" direction={'column'}>
-    <h2>icon + text</h2>
-    <IconText />
-    <h2>static color: white</h2>
-    <StaticColorWhite />
-    <h2>static color: black</h2>
-    <StaticColorBlack />
-  </Flex>
-);
-All.story = {
+export const All: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100" direction={'column'}>
+      <h2>icon + text</h2>
+      <Flex gap="size-100">
+        <ActionButton>
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+      <h2>static color: white</h2>
+      <View backgroundColor="static-blue-700" padding="size-1000">
+        <Flex direction="column" rowGap="size-150">
+          <ActionButton staticColor="white">
+            <Add />
+            <Text>Default</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isQuiet>
+            <Add />
+            <Text>Quiet</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isDisabled>
+            <Text>Disabled</Text>
+            <Add />
+          </ActionButton>
+        </Flex>
+      </View>
+      <h2>static color: black</h2>
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        <Flex direction="column" rowGap="size-150">
+          <ActionButton staticColor="black">
+            <Add />
+            <Text>Default</Text>
+          </ActionButton>
+          <ActionButton staticColor="black" isQuiet>
+            <Add />
+            <Text>Quiet</Text>
+          </ActionButton>
+          <ActionButton staticColor="black" isDisabled>
+            <Text>Disabled</Text>
+            <Add />
+          </ActionButton>
+        </Flex>
+      </View>
+    </Flex>
+  ),
   name: 'all'
 };
diff --git a/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
index 31118827d91..2848ff1fc58 100644
--- a/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
@@ -10,26 +10,43 @@
  * governing permissions and limitations under the License.
  */
 
-import {ElementA, VariantAccent, VariantNegative, VariantPrimary, WithIcon} from '../chromatic/Button.stories';
+import Bell from '@spectrum-icons/workflow/Bell';
+import {Button} from '../';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {Render} from '../chromatic/Button.stories';
+import {StoryFn} from '@storybook/react';
+import {Text} from '@react-spectrum/text';
 
 export default {
   title: 'Button'
 };
 
-export const All = () => (
+export type ButtonStory = StoryFn<typeof Render>;
+
+export const All: ButtonStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Accent</h2>
-    <VariantAccent />
+    <Render variant="accent" />
     <h2>Primary</h2>
-    <VariantPrimary />
+    <Render variant="primary" />
     <h2>Negative</h2>
-    <VariantNegative />
+    <Render variant="negative" />
     <h2>element a</h2>
-    <ElementA />
+    <Render elementType="a" variant="primary" />
     <h2>with icon</h2>
-    <WithIcon />
+    <Flex gap="size-200">
+      <Button variant="primary">
+        <Bell />
+        <Text>Default</Text>
+      </Button>
+      <Button
+        isDisabled
+        variant="primary">
+        <Text>Disabled</Text>
+        <Bell />
+      </Button>
+    </Flex>
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
index 03c326400f0..76b26cc6d82 100644
--- a/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
@@ -11,19 +11,22 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
-import {LogicVariantAnd, LogicVariantOr} from '../chromatic/LogicButton.stories';
 import React from 'react';
+import {Render} from '../chromatic/LogicButton.stories';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'Button/LogicButton'
 };
 
-export const All = () => (
+export type LogicButtonStory = StoryFn<typeof Render>;
+
+export const All: LogicButtonStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>And</h2>
-    <LogicVariantAnd />
+    <Render variant="and" />
     <h2>Or</h2>
-    <LogicVariantOr />
+    <Render variant="or" />
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
index 5aa6773a3d1..1aa5ba59b47 100644
--- a/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
@@ -10,22 +10,63 @@
  * governing permissions and limitations under the License.
  */
 
-import {AllPossibleStates, StaticColorBlack, StaticColorWhite} from '../chromatic/ToggleButton.stories';
-import {Flex} from '@react-spectrum/layout';
+import {classNames} from '@react-spectrum/utils';
+import {Flex, Grid, repeat, View} from '@adobe/react-spectrum';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {ToggleButton} from '../';
+
+let states = [
+  {isQuiet: true},
+  {isEmphasized: true},
+  {isSelected: true},
+  {isDisabled: true},
+  {UNSAFE_className: classNames(styles, 'is-active')},
+  {UNSAFE_className: classNames(styles, 'is-hovered')},
+  {UNSAFE_className: classNames(styles, 'focus-ring')}
+];
+
+let combinations = generatePowerset(
+  states,
+  (merged) => merged.isDisabled && merged.UNSAFE_className
+);
 
 export default {
   title: 'Button/ToggleButton'
-};
+} as Meta<typeof ToggleButton>;
+
+export type ToggleButtonStory = StoryFn<typeof ToggleButton>;
 
-export const ToggleButton = () => (
+export const AllPossibleStates: ToggleButtonStory = () => (
   <Flex direction={'column'} gap={'size-300'}>
-    <AllPossibleStates />
-    <StaticColorBlack />
-    <StaticColorWhite />
+    <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+      {combinations.map((c) => (
+        <ToggleButton {...c}>Button</ToggleButton>
+      ))}
+    </Grid>
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+        {combinations.map((c) => (
+          <ToggleButton {...c} staticColor="black">
+            Button
+          </ToggleButton>
+        ))}
+      </Grid>
+    </View>
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+        {combinations.map((c) => (
+          <ToggleButton {...c} staticColor="white">
+            Button
+          </ToggleButton>
+        ))}
+      </Grid>
+    </View>
   </Flex>
 );
 
-ToggleButton.story = {
+AllPossibleStates.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
index 29a722c1215..98d3614df9c 100644
--- a/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
@@ -13,6 +13,7 @@
 import {ActionButton} from '../';
 import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -22,107 +23,104 @@ export default {
   parameters: {
     chromaticProvider: {locales: ['en-US', 'ar-AE', 'ja-JP']}
   }
-};
+} as Meta<typeof ActionButton>;
 
-export const _Text = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      Default
-    </ActionButton>
-    <ActionButton isQuiet>
-      Quiet
-    </ActionButton>
-    <ActionButton isDisabled>
-      Disabled
-    </ActionButton>
-  </Flex>
-);
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-_Text.story = {
+export const _Text: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
+        Default
+      </ActionButton>
+      <ActionButton isQuiet>
+        Quiet
+      </ActionButton>
+      <ActionButton isDisabled>
+        Disabled
+      </ActionButton>
+    </Flex>
+  ),
   name: 'text'
 };
 
-export const IconText = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      <Add />
-      <Text>Default</Text>
-    </ActionButton>
-    <ActionButton isQuiet>
-      <Add />
-      <Text>Quiet</Text>
-    </ActionButton>
-    <ActionButton isDisabled>
-      <Text>Disabled</Text>
-      <Add />
-    </ActionButton>
-  </Flex>
-);
-
-IconText.story = {
-  name: 'icon + text'
-};
-
-export const IconOnly = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      <Add />
-    </ActionButton>
-    <ActionButton isQuiet>
-      <Add />
-    </ActionButton>
-    <ActionButton isDisabled>
-      <Add />
-    </ActionButton>
-  </Flex>
-);
-
-IconOnly.story = {
-  name: 'icon only'
-};
-
-export const StaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="white">
+export const IconText: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
         <Add />
         <Text>Default</Text>
       </ActionButton>
-      <ActionButton staticColor="white" isQuiet>
+      <ActionButton isQuiet>
         <Add />
         <Text>Quiet</Text>
       </ActionButton>
-      <ActionButton staticColor="white" isDisabled>
+      <ActionButton isDisabled>
         <Text>Disabled</Text>
         <Add />
       </ActionButton>
     </Flex>
-  </View>
-);
-
-StaticColorWhite.story = {
-  name: 'staticColor: white'
+  ),
+  name: 'icon + text'
 };
 
-export const StaticColorBlack = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="black">
+export const IconOnly: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
         <Add />
-        <Text>Default</Text>
       </ActionButton>
-      <ActionButton staticColor="black" isQuiet>
+      <ActionButton isQuiet>
         <Add />
-        <Text>Quiet</Text>
       </ActionButton>
-      <ActionButton staticColor="black" isDisabled>
-        <Text>Disabled</Text>
+      <ActionButton isDisabled>
         <Add />
       </ActionButton>
     </Flex>
-  </View>
-);
+  ),
+  name: 'icon only'
+};
+
+export const StaticColorWhite: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="white">
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
+  name: 'staticColor: white'
+};
 
-StaticColorBlack.story = {
+export const StaticColorBlack: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="black">
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton staticColor="black" isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton staticColor="black" isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
   name: 'staticColor: black'
 };
diff --git a/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx b/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
index 97b96339d35..360ed8572a2 100644
--- a/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
@@ -13,6 +13,7 @@
 import {ActionButton} from '../';
 import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -27,27 +28,28 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof ActionButton>;
 
-export const JapaneseIconTextStaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="white">
-        <Add />
-        <Text>ディフォルト</Text>
-      </ActionButton>
-      <ActionButton staticColor="white" isQuiet>
-        <Add />
-        <Text>静かな</Text>
-      </ActionButton>
-      <ActionButton staticColor="white" isDisabled>
-        <Text>無効</Text>
-        <Add />
-      </ActionButton>
-    </Flex>
-  </View>
-);
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-JapaneseIconTextStaticColorWhite.story = {
+export const JapaneseIconTextStaticColorWhite: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="white">
+          <Add />
+          <Text>ディフォルト</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isQuiet>
+          <Add />
+          <Text>静かな</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isDisabled>
+          <Text>無効</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
   name: 'Japanese, icon + text, staticColor: white'
 };
diff --git a/packages/@react-spectrum/button/chromatic/Button.stories.tsx b/packages/@react-spectrum/button/chromatic/Button.stories.tsx
index 962f8604758..56802c9674b 100644
--- a/packages/@react-spectrum/button/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/Button.stories.tsx
@@ -11,11 +11,12 @@
  */
 
 import Bell from '@spectrum-icons/workflow/Bell';
-import {Button} from '../';
+import {Button, SpectrumButtonProps} from '../';
 import {classNames} from '@react-spectrum/utils';
 import {Flex, Grid, repeat} from '@react-spectrum/layout';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {ElementType, JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -37,40 +38,43 @@ export default {
   title: 'Button',
   parameters: {
     chromaticProvider: {locales: ['en-US']}
-  }
-};
+  },
+  excludeStories: ['Render']
+} as Meta<typeof Button>;
+
+export type ButtonStory = StoryFn<typeof Button>;
 
-export const VariantAccent = () => render({variant: 'accent'});
+export const VariantAccent: ButtonStory = () => <Render variant="accent" />;
 
 VariantAccent.story = {
   name: 'variant: accent'
 };
 
-export const VariantPrimary = () => render({variant: 'primary'});
+export const VariantPrimary: ButtonStory = () => <Render variant="primary" />;
 
 VariantPrimary.story = {
   name: 'variant: primary'
 };
 
-export const VariantSecondary = () => render({variant: 'secondary'});
+export const VariantSecondary: ButtonStory = () => <Render variant="secondary" />;
 
 VariantSecondary.story = {
   name: 'variant: secondary'
 };
 
-export const VariantNegative = () => render({variant: 'negative'});
+export const VariantNegative: ButtonStory = () => <Render variant="negative" />;
 
 VariantNegative.story = {
   name: 'variant: negative'
 };
 
-export const ElementA = () => render({elementType: 'a', variant: 'primary'});
+export const ElementA: ButtonStory = () => <Render elementType="a" variant="primary" />;
 
 ElementA.story = {
   name: 'element: a'
 };
 
-export const WithIcon = () => (
+export const WithIcon: ButtonStory = () => (
   <Flex gap="size-200">
     <Button variant="primary">
       <Bell />
@@ -90,7 +94,7 @@ WithIcon.story = {
   parameters: {chromaticProvider: {locales: ['en-US', 'ar-AE']}}
 };
 
-export const IconOnly = () => (
+export const IconOnly: ButtonStory = () => (
   <Flex gap="size-200">
     <Button variant="primary" aria-label="Notifications">
       <Bell />
@@ -109,7 +113,7 @@ IconOnly.story = {
   parameters: {chromaticProvider: {locales: ['en-US', 'ar-AE']}}
 };
 
-export const DoubleTextNode = () => (
+export const DoubleTextNode: ButtonStory = () => (
   <Flex gap="size-200">
     <Button
       variant="primary">
@@ -127,7 +131,7 @@ DoubleTextNode.story = {
   name: 'double text node'
 };
 
-function render(props: any = {}) {
+export function Render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'accent'}): JSX.Element {
   return (
     <Grid columns={repeat(4, '1fr')} autoFlow="row" justifyItems="start" gap="size-300">
       {combinations.map(c => {
diff --git a/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx b/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
index 900276e66b5..482ffbd4e08 100644
--- a/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
@@ -11,26 +11,30 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
-import {LogicButton} from '../';
-import React from 'react';
+import {LogicButton, SpectrumLogicButtonProps} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'Button/LogicButton'
-};
+  title: 'Button/LogicButton',
+  excludeStories: ['Render']
+} as Meta<typeof LogicButton>;
+
+export type LogicButtonStory = StoryFn<typeof LogicButton>;
 
-export const LogicVariantAnd = () => render({variant: 'and', label: 'and'});
+export const LogicVariantAnd: LogicButtonStory = () => <Render variant="and" />;
 
 LogicVariantAnd.story = {
   name: 'logic variant: and'
 };
 
-export const LogicVariantOr = () => render({variant: 'or', label: 'or'});
+export const LogicVariantOr: LogicButtonStory = () => <Render variant="or" />;
 
 LogicVariantOr.story = {
   name: 'logic variant: or'
 };
 
-function render(props: any = {}) {
+export function Render(props: SpectrumLogicButtonProps = {variant: 'and'}): JSX.Element {
   return (
     <Flex gap="size-100">
       <LogicButton {...props}>
diff --git a/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
index dd74dd54270..41079ad2bf2 100644
--- a/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
@@ -13,6 +13,7 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat, View} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {ToggleButton} from '../';
@@ -38,9 +39,11 @@ export default {
     providerSwitcher: {status: 'positive'},
     chromatic: {delay: 300}
   }
-};
+} as Meta<typeof ToggleButton>;
+
+export type ToggleButtonStory = StoryFn<typeof ToggleButton>;
 
-export const AllPossibleStates = () => (
+export const AllPossibleStates: ToggleButtonStory = () => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map((c) => (
       <ToggleButton {...c}>Button</ToggleButton>
@@ -52,7 +55,7 @@ AllPossibleStates.story = {
   name: 'all possible states'
 };
 
-export const StaticColorWhite = () => (
+export const StaticColorWhite: ToggleButtonStory = () => (
   <View backgroundColor="static-blue-700" padding="size-1000">
     <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
       {combinations.map((c) => (
@@ -68,7 +71,7 @@ StaticColorWhite.story = {
   name: 'staticColor = white'
 };
 
-export const StaticColorBlack = () => (
+export const StaticColorBlack: ToggleButtonStory = () => (
   <View backgroundColor="static-yellow-400" padding="size-1000">
     <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
       {combinations.map((c) => (
@@ -84,7 +87,7 @@ StaticColorBlack.story = {
   name: 'staticColor = black'
 };
 
-export const Arabic = () => (
+export const Arabic: ToggleButtonStory = () => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map((c) => (
       <ToggleButton {...c}>زر</ToggleButton>
diff --git a/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
index ce2b1ab78ab..5310e3a729c 100644
--- a/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
@@ -11,52 +11,55 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {ButtonGroup} from '../';
-import React from 'react';
+import {ButtonGroup, SpectrumButtonGroupProps} from '../';
+import React, {JSX} from 'react';
+import {StoryFn} from '@storybook/react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'ButtonGroup'
 };
 
-export const Default = () => render({});
+export type ButtonGroupStory = StoryFn<typeof ButtonGroup>;
+
+export const Default: ButtonGroupStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const AlignCenter = () => render({align: 'center'});
+export const AlignCenter: ButtonGroupStory = () => render({align: 'center'});
 
 AlignCenter.story = {
   name: 'align: center'
 };
 
-export const AlignEnd = () => render({align: 'end'});
+export const AlignEnd: ButtonGroupStory = () => render({align: 'end'});
 
 AlignEnd.story = {
   name: 'align: end'
 };
 
-export const OrientationVertical = () => render({orientation: 'vertical'});
+export const OrientationVertical: ButtonGroupStory = () => render({orientation: 'vertical'});
 
 OrientationVertical.story = {
   name: 'orientation: vertical'
 };
 
-export const OrientationVerticalAlignCenter = () =>
+export const OrientationVerticalAlignCenter: ButtonGroupStory = () =>
   render({orientation: 'vertical', align: 'center'});
 
 OrientationVerticalAlignCenter.story = {
   name: 'orientation: vertical, align: center'
 };
 
-export const OrientationVerticalAlignEnd = () => render({orientation: 'vertical', align: 'end'});
+export const OrientationVerticalAlignEnd: ButtonGroupStory = () => render({orientation: 'vertical', align: 'end'});
 
 OrientationVerticalAlignEnd.story = {
   name: 'orientation: vertical, align: end'
 };
 
-function render(props) {
+function render(props: Omit<SpectrumButtonGroupProps, 'children'>): JSX.Element {
   return (
     <>
       <View borderColor="static-blue-400" borderWidth="thin">
diff --git a/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
index 4a254aba4a0..af504234153 100644
--- a/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
@@ -10,29 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disabled, DisabledInvalid, ErrorMessage, MinMax, Selected, Unavailable} from '../chromatic/Calendar.stories';
+import {Calendar} from '../';
+import {CalendarDate} from '@internationalized/date';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 export default {
   title: 'Calendar'
-};
+} as Meta<typeof Calendar>;
+
+export type CalendarStory = StoryFn<typeof Calendar>;
 
-export const All = () => (
+const date = new CalendarDate(2022, 2, 3);
+
+export const All: CalendarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Selected</h2>
-    <Selected />
+    <Calendar value={date} />
     <h2>Min Max</h2>
-    <MinMax />
+    <Calendar
+      minValue={new CalendarDate(2022, 2, 10)}
+      maxValue={new CalendarDate(2022, 2, 20)} />
     <h2>Disabled</h2>
-    <Disabled />
+    <Calendar isDisabled value={date} />
     <h2>Unavailable</h2>
-    <Unavailable />
+    <Calendar
+      focusedValue={date}
+      isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
     <h2>Error Message</h2>
-    <ErrorMessage />
+    <Calendar value={date} isInvalid errorMessage="Selection invalid." />
     <h2>Disabled Invalid</h2>
-    <DisabledInvalid />
+    <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />
   </Flex>
 );
+
 All.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx b/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
index 9cc5311102b..32b7b11c913 100644
--- a/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
@@ -12,13 +12,16 @@
 
 import {AllStates} from '../chromatic/CalendarCell.stories';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'CalendarCell'
-};
+} as Meta<typeof AllStates> ;
+
+export type AllStatesStory = StoryFn<typeof AllStates>;
 
-export const All = () => (
+export const All: AllStatesStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>All States</h2>
     <AllStates />
diff --git a/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
index e7b84703c2d..84f67496a92 100644
--- a/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
@@ -12,6 +12,7 @@
 
 import {Calendar} from '../';
 import {CalendarDate} from '@internationalized/date';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -21,29 +22,31 @@ export default {
       locales: ['en-US'/* , 'ar-EG', 'ja-JP' */]
     }
   }
-};
+} as Meta<typeof Calendar>;
+
+export type CalendarStory = StoryFn<typeof Calendar>;
 
 const date = new CalendarDate(2022, 2, 3);
 
-export const Default = () => <Calendar focusedValue={date} />;
-export const Selected = () => <Calendar value={date} />;
-export const MinMax = () => (
+export const Default: CalendarStory = () => <Calendar focusedValue={date} />;
+export const Selected: CalendarStory = () => <Calendar value={date} />;
+export const MinMax: CalendarStory = () => (
   <Calendar
     minValue={new CalendarDate(2022, 2, 10)}
     maxValue={new CalendarDate(2022, 2, 20)} />
 );
-export const Disabled = () => <Calendar isDisabled value={date} />;
-export const ReadOnly = () => <Calendar isReadOnly value={date} />;
-export const Unavailable = () => (
+export const Disabled: CalendarStory = () => <Calendar isDisabled value={date} />;
+export const ReadOnly: CalendarStory = () => <Calendar isReadOnly value={date} />;
+export const Unavailable: CalendarStory = () => (
   <Calendar
     focusedValue={date}
     isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
 );
-export const VisibleMonths2 = () => <Calendar value={date} visibleMonths={2} />;
-export const VisibleMonths3 = () => <Calendar value={date} visibleMonths={3} />;
-export const Invalid = () => <Calendar value={date} isInvalid />;
-export const ErrorMessage = () => <Calendar value={date} isInvalid errorMessage="Selection invalid." />;
-export const UnavailableInvalid = () => <Calendar value={date} isDateUnavailable={d => d.compare(date) === 0} />;
-export const DisabledInvalid = () => <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />;
-export const CustomWeekStartMonday = () => <Calendar value={date} firstDayOfWeek="mon" />;
-export const CustomWeekStartSaturday = () => <Calendar value={date} firstDayOfWeek="sat" />;
+export const VisibleMonths2: CalendarStory = () => <Calendar value={date} visibleMonths={2} />;
+export const VisibleMonths3: CalendarStory = () => <Calendar value={date} visibleMonths={3} />;
+export const Invalid: CalendarStory = () => <Calendar value={date} isInvalid />;
+export const ErrorMessage: CalendarStory = () => <Calendar value={date} isInvalid errorMessage="Selection invalid." />;
+export const UnavailableInvalid: CalendarStory = () => <Calendar value={date} isDateUnavailable={d => d.compare(date) === 0} />;
+export const DisabledInvalid: CalendarStory = () => <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />;
+export const CustomWeekStartMonday: CalendarStory = () => <Calendar value={date} firstDayOfWeek="mon" />;
+export const CustomWeekStartSaturday: CalendarStory = () => <Calendar value={date} firstDayOfWeek="sat" />;
diff --git a/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx b/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
index 5bf28ee17fa..a576e17dd9f 100644
--- a/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
@@ -13,14 +13,15 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useProvider} from '@react-spectrum/provider';
 
 export default {
   title: 'CalendarCall',
   excludeStories: ['AllStates']
-};
+} as Meta<typeof AllStates>;
 
 let states = [
   {isToday: true},
@@ -38,7 +39,9 @@ let states = [
   {isUnavailable: true}
 ];
 
-export const LightMedium = () => <AllStates />;
+export type AllStatesStory = StoryFn<typeof AllStates>;
+
+export const LightMedium: AllStatesStory = () => <AllStates />;
 LightMedium.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -47,7 +50,7 @@ LightMedium.parameters = {
   }
 };
 
-export const LightLarge = () => <AllStates />;
+export const LightLarge: AllStatesStory = () => <AllStates />;
 LightLarge.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -56,7 +59,7 @@ LightLarge.parameters = {
   }
 };
 
-export const DarkMedium = () => <AllStates />;
+export const DarkMedium: AllStatesStory = () => <AllStates />;
 DarkMedium.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -65,7 +68,7 @@ DarkMedium.parameters = {
   }
 };
 
-export const DarkLarge = () => <AllStates />;
+export const DarkLarge: AllStatesStory = () => <AllStates />;
 DarkLarge.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -74,7 +77,7 @@ DarkLarge.parameters = {
   }
 };
 
-export function AllStates() {
+export function AllStates(): JSX.Element {
   let {scale} = useProvider();
   let size = scale === 'medium' ? 40 : 50;
   return (
diff --git a/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
index 4e71d2b573f..1b264ff8833 100644
--- a/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {CalendarDate, isWeekend} from '@internationalized/date';
+import {Meta, StoryFn} from '@storybook/react';
 import {RangeCalendar} from '../';
 import React from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -22,34 +23,36 @@ export default {
       locales: ['en-US'/* , 'ar-EG', 'ja-JP' */]
     }
   }
-};
+} as Meta<typeof RangeCalendar>;
+
+export type RangeCalendarStory = StoryFn<typeof RangeCalendar>;
 
 const value = {
   start: new CalendarDate(2022, 2, 3),
   end: new CalendarDate(2022, 2, 8)
 };
 
-export const Default = () => <RangeCalendar focusedValue={value.start} />;
-export const Selected = () => <RangeCalendar value={value} />;
-export const MinMax = () => (
+export const Default: RangeCalendarStory = () => <RangeCalendar focusedValue={value.start} />;
+export const Selected: RangeCalendarStory = () => <RangeCalendar value={value} />;
+export const MinMax: RangeCalendarStory = () => (
   <RangeCalendar
     minValue={new CalendarDate(2022, 2, 10)}
     maxValue={new CalendarDate(2022, 2, 20)} />
 );
-export const Disabled = () => <RangeCalendar isDisabled value={value} />;
-export const ReadOnly = () => <RangeCalendar isReadOnly value={value} />;
-export const Unavailable = () => (
+export const Disabled: RangeCalendarStory = () => <RangeCalendar isDisabled value={value} />;
+export const ReadOnly: RangeCalendarStory = () => <RangeCalendar isReadOnly value={value} />;
+export const Unavailable: RangeCalendarStory = () => (
   <RangeCalendar
     focusedValue={value.start}
     isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
 );
-export const VisibleMonths2 = () => <RangeCalendar value={value} visibleMonths={2} />;
-export const VisibleMonths3 = () => <RangeCalendar value={value} visibleMonths={3} />;
-export const Invalid = () => <RangeCalendar value={value} isInvalid />;
-export const ErrorMessage = () => <RangeCalendar value={value} isInvalid errorMessage="Selection invalid." />;
-export const UnavailableInvalid = () => <RangeCalendar value={value} isDateUnavailable={date => date.day >= 1 && date.day <= 5} />;
-export const DisabledInvalid = () => <RangeCalendar value={value} minValue={new CalendarDate(2022, 2, 5)} />;
-export const NonContiguous = () => {
+export const VisibleMonths2: RangeCalendarStory = () => <RangeCalendar value={value} visibleMonths={2} />;
+export const VisibleMonths3: RangeCalendarStory = () => <RangeCalendar value={value} visibleMonths={3} />;
+export const Invalid: RangeCalendarStory = () => <RangeCalendar value={value} isInvalid />;
+export const ErrorMessage: RangeCalendarStory = () => <RangeCalendar value={value} isInvalid errorMessage="Selection invalid." />;
+export const UnavailableInvalid: RangeCalendarStory = () => <RangeCalendar value={value} isDateUnavailable={date => date.day >= 1 && date.day <= 5} />;
+export const DisabledInvalid: RangeCalendarStory = () => <RangeCalendar value={value} minValue={new CalendarDate(2022, 2, 5)} />;
+export const NonContiguous: RangeCalendarStory = () => {
   let {locale} = useLocale();
   return (
     <RangeCalendar
@@ -59,7 +62,7 @@ export const NonContiguous = () => {
   );
 };
 
-export const NonContiguousInvalid = () => {
+export const NonContiguousInvalid: RangeCalendarStory = () => {
   let {locale} = useLocale();
   return (
     <RangeCalendar
@@ -69,5 +72,5 @@ export const NonContiguousInvalid = () => {
   );
 };
 
-export const CustomWeekStartMonday = () => <RangeCalendar value={value} firstDayOfWeek="mon" />;
-export const CustomWeekStartSaturday = () => <RangeCalendar value={value} firstDayOfWeek="sat" />;
+export const CustomWeekStartMonday: RangeCalendarStory = () => <RangeCalendar value={value} firstDayOfWeek="mon" />;
+export const CustomWeekStartSaturday: RangeCalendarStory = () => <RangeCalendar value={value} firstDayOfWeek="sat" />;
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
index 15e8763b7ac..120f79faffd 100644
--- a/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
@@ -1,7 +1,8 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 
 let states = [
@@ -20,10 +21,36 @@ let states = [
 
 export default {
   title: 'Date and Time/RangeCalendar/cell'
-};
+} as Meta<typeof Cell>;
+
+export type CellStory = StoryObj<typeof Cell>;
 
 // Fake cell for testing css
-function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled, isRangeStart, isRangeEnd, isRangeSelection, isSelectionStart, isSelectionEnd}) {
+function Cell({
+  isToday,
+  isSelected,
+  isFocused,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isRangeStart,
+  isRangeEnd,
+  isRangeSelection,
+  isSelectionStart,
+  isSelectionEnd
+}: {
+  isToday: boolean,
+  isSelected: boolean,
+  isFocused: boolean,
+  isHovered: boolean,
+  isPressed: boolean,
+  isDisabled: boolean,
+  isRangeStart: boolean,
+  isRangeEnd: boolean,
+  isRangeSelection: boolean,
+  isSelectionStart: boolean,
+  isSelectionEnd: boolean
+}): JSX.Element {
   return (
     <span
       className={classNames(styles, 'spectrum-Calendar-date', {
@@ -44,7 +71,7 @@ function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled,
   );
 }
 
-export const Default = {
+export const Default: CellStory = {
   render: () => (
     <Grid columns={repeat(10, 100)}>
       {generatePowerset(states, (merged) =>
diff --git a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
index 394c4ad639e..d074fc8dd6a 100644
--- a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
@@ -11,8 +11,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {CardView} from '../';
 import {DefaultGrid as DefaultGridStory} from '../chromatic/CardView.stories';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumCardViewProps} from '@react-types/card';
 
 const meta: Meta<SpectrumCardViewProps<object>> = {
@@ -21,4 +22,6 @@ const meta: Meta<SpectrumCardViewProps<object>> = {
 
 export default meta;
 
-export const DefaultGrid = DefaultGridStory;
+export type CardViewStory = StoryObj<typeof CardView>;
+
+export const DefaultGrid: CardViewStory = DefaultGridStory;
diff --git a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
index 64cfc24543a..fd2d3643af6 100644
--- a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
@@ -31,7 +31,7 @@ export const Quiet: CardStory = {
   ...Default
 };
 
-export const QuietSelected = {
+export const QuietSelected: CardStory = {
   ...Selected,
   name: 'Selected'
 };
diff --git a/packages/@react-spectrum/card/chromatic/Card.stories.tsx b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
index ee618c50a71..c6e5f059365 100644
--- a/packages/@react-spectrum/card/chromatic/Card.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
@@ -30,7 +30,7 @@ export default {
 
 export type CardStory = StoryObj<typeof Card>;
 
-export const Default = DefaultCard;
+export const Default: CardStory = DefaultCard;
 
 export const DefaultSquare: CardStory = {
   ...Default,
@@ -257,7 +257,7 @@ export const Selected: CardStory = SelectedStory;
 
 // actually use Illustration???
 // where to get the three asset svgs to use with Illustration
-export function File(props) {
+export function File(props: any): JSX.Element {
   props = useSlotProps(props, 'asset');
   let {styleProps} = useStyleProps(props);
   return (
diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
index 804d825b1d3..50d06991528 100644
--- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
@@ -15,8 +15,8 @@ import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout} from '..';
 import {Content} from '@react-spectrum/view';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
-import {Meta} from '@storybook/react';
-import React, {useMemo} from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX, useMemo} from 'react';
 import {SpectrumCardViewProps} from '@react-types/card';
 import {useCollator} from '@react-aria/i18n';
 
@@ -26,6 +26,8 @@ const meta: Meta<SpectrumCardViewProps<object>> = {
 
 export default meta;
 
+export type CardViewStory = StoryObj<typeof CardView>;
+
 let itemsLowVariance = [
   {width: 1001, height: 381, src: 'https://i.imgur.com/Z7AzH2c.jpg', id: 1, title: 'Bob 1'},
   {width: 640, height: 640, src: 'https://i.imgur.com/DhygPot.jpg', id: 2, title: 'Joe 1'},
@@ -51,7 +53,7 @@ let itemsLowVariance = [
   {width: 314, height: 1009, src: 'https://i.imgur.com/3lzeoK7.jpg', id: 22, title: 'Bob 8'}
 ];
 
-function DynamicCardView(props: SpectrumCardViewProps<object>) {
+function DynamicCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let gridLayout = useMemo(() => new GridLayout({collator}), [collator]);
   let {
@@ -73,20 +75,17 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
   );
 }
 
-const Template = (props) =>
-  <DynamicCardView {...props} />;
-
-export const DefaultGrid = {
-  render: Template,
+export const DefaultGrid: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance}
 };
 
-export const DefaultGallery = {
-  render: Template,
+export const DefaultGallery: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance, layout: GalleryLayout}
 };
 
-export const DefaultWaterfall = {
-  render: Template,
+export const DefaultWaterfall: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance, layout: WaterfallLayout}
 };
diff --git a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
index 01d6ce68031..eca1a06b1fc 100644
--- a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
@@ -41,47 +41,47 @@ export const Quiet: CardStory = {
   ...Default
 };
 
-export const QuietSquare = {
+export const QuietSquare: CardStory = {
   ...DefaultSquare
 };
 
-export const QuietTall = {
+export const QuietTall: CardStory = {
   ...DefaultTall
 };
 
-export const QuietNoDescription = {
+export const QuietNoDescription: CardStory = {
   ...NoDescription
 };
 
-export const QuietNoDescriptionSquare = {
+export const QuietNoDescriptionSquare: CardStory = {
   ...NoDescriptionSquare
 };
 
-export const QuietWithIllustration = {
+export const QuietWithIllustration: CardStory = {
   ...WithIllustration
 };
 
-export const QuietLongTitle = {
+export const QuietLongTitle: CardStory = {
   ...LongTitle
 };
 
-export const QuietLongDescription = {
+export const QuietLongDescription: CardStory = {
   ...LongDescription
 };
 
-export const QuietLongContentPoorWordSize = {
+export const QuietLongContentPoorWordSize: CardStory = {
   ...LongContentPoorWordSize
 };
 
-export const QuietLongDetail = {
+export const QuietLongDetail: CardStory = {
   ...LongDetail
 };
 
-export const QuietLongEverything = {
+export const QuietLongEverything: CardStory = {
   ...LongEverything
 };
 
-export const QuietSelected = {
+export const QuietSelected: CardStory = {
   ...Selected,
   name: 'Selected'
 };
diff --git a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
index 3263e0377ad..6040270db5a 100644
--- a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
@@ -31,10 +31,10 @@ import {
 } from './GridCardView.stories';
 import {CardView, GalleryLayout} from '../';
 import {GalleryLayoutOptions} from '../src/GalleryLayout';
-import React, {useMemo} from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX, useMemo} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
-import {StoryObj} from '@storybook/react';
 import {useCollator} from '@react-aria/i18n';
 
 let itemsLowVariance = [
@@ -97,7 +97,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-};
+} as Meta<typeof CardView>;
 
 export const DefaultGalleryStatic: StaticCardViewStory = {
   ...StaticCards,
@@ -216,7 +216,7 @@ interface LayoutOptions {
   layoutOptions?: GalleryLayoutOptions
 }
 type CustomGalleryLayoutStory = StoryObj<typeof CustomGalleryLayout>;
-function CustomGalleryLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+function CustomGalleryLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {
     layoutOptions,
     ...otherProps
diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
index 647e26d74c4..bfc35331cba 100644
--- a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
@@ -21,12 +21,12 @@ import {GridLayoutOptions} from '../src/GridLayout';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
+import {JSX, Meta, StoryObj} from '@storybook/react';
 import {Key} from '@react-types/shared';
 import {Link} from '@react-spectrum/link';
 import React, {useMemo, useState} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
-import {StoryObj} from '@storybook/react';
 import {TextField} from '@react-spectrum/textfield';
 import {useAsyncList} from '@react-stately/data';
 import {useCollator} from '@react-aria/i18n';
@@ -61,7 +61,7 @@ export let falsyItems = [
   {id: 0, width: 1001, height: 381, src: 'https://i.imgur.com/Z7AzH2c.jpg', title: 'Bob 1'},
   {id: 1, width: 640, height: 640, src: 'https://i.imgur.com/DhygPot.jpg', title: 'Joe 1 really really really really really really really really really really really really long'},
   {id: 2, width: 182, height: 1009, src: 'https://i.imgur.com/L7RTlvI.png', title: 'Jane 1'}
-];
+] as const;
 
 function renderEmptyState() {
   return (
@@ -95,7 +95,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-} as StoryObj<typeof CardView>;
+} as Meta<typeof CardView>;
 
 let onSelectionChange = action('onSelectionChange');
 let actions = {
@@ -202,7 +202,7 @@ export const CustomLayoutOptions: CustomLayoutStory = {
 };
 
 export type CardViewIdKeysStory = StoryObj<typeof CardViewIdKeys>;
-function CardViewIdKeys(props: SpectrumCardViewProps<object>) {
+function CardViewIdKeys(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -236,7 +236,7 @@ function CardViewIdKeys(props: SpectrumCardViewProps<object>) {
 }
 
 export type DynamicCardViewStory = StoryObj<typeof DynamicCardView>;
-function DynamicCardView(props: SpectrumCardViewProps<object>) {
+function DynamicCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -283,7 +283,7 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type ControlledCardViewStory = StoryObj<typeof ControlledCardView>;
-function ControlledCardView(props: SpectrumCardViewProps<object>) {
+function ControlledCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -332,7 +332,7 @@ function ControlledCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type NoItemCardViewStory = StoryObj<typeof NoItemCardView>;
-function NoItemCardView(props: SpectrumCardViewProps<object>) {
+function NoItemCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -366,7 +366,7 @@ function NoItemCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type StaticCardViewStory = StoryObj<typeof StaticCardView>;
-function StaticCardView(props: SpectrumCardViewProps<object>) {
+function StaticCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -420,7 +420,7 @@ function StaticCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type AsyncLoadingCardViewStory = StoryObj<typeof AsyncLoadingCardView>;
-function AsyncLoadingCardView(props: SpectrumCardViewProps<object>) {
+function AsyncLoadingCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   interface StarWarsChar {
     name: string,
     url: string
@@ -478,7 +478,7 @@ interface LayoutOptions {
   layoutOptions?: GridLayoutOptions
 }
 export type CustomLayoutStory = StoryObj<typeof CustomLayout>;
-export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let layoutOptions = props.layoutOptions;
@@ -526,7 +526,7 @@ export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOption
   );
 }
 
-export function ResizeObserverCrash() {
+export function ResizeObserverCrash(): JSX.Element {
   const shots = [
     {id: 1, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'foo', label: 'foo'},
     {id: 2, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'bar', label: 'bar'},
diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
index 4253841ca04..efc990d05c9 100644
--- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
@@ -30,10 +30,10 @@ import {
   StaticCardViewStory
 } from './GridCardView.stories';
 import {CardView, WaterfallLayout} from '../';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useMemo} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
-import {StoryObj} from '@storybook/react';
 import {useCollator} from '@react-aria/i18n';
 import {WaterfallLayoutOptions} from '../src/WaterfallLayout';
 
@@ -86,7 +86,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-} as StoryObj<typeof CardView>;
+} as Meta<typeof CardView>;
 
 export const DefaultWaterfallStatic: StaticCardViewStory = {
   ...StaticCards,
@@ -215,7 +215,7 @@ interface LayoutOptions {
 }
 
 type CustomWaterfallLayoutStory = StoryObj<typeof CustomWaterfallLayout>;
-function CustomWaterfallLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+function CustomWaterfallLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {
     layoutOptions,
     ...otherProps
diff --git a/packages/@react-spectrum/card/stories/utils.ts b/packages/@react-spectrum/card/stories/utils.ts
index f6183c330d1..53d4c207fdb 100644
--- a/packages/@react-spectrum/card/stories/utils.ts
+++ b/packages/@react-spectrum/card/stories/utils.ts
@@ -16,14 +16,14 @@ let descriptions = [
   'Rechtsschutzversicherungsgesellschaften Nahrungsmittelunverträglichkeit Unabhängigkeitserklärungen Freundschaftsbeziehungen'
 ];
 
-export function getImage(index: number) {
+export function getImage(index: number): string {
   return images[index % images.length].src;
 }
 
-export function getImageFullData(index: number) {
+export function getImageFullData(index: number): {width: number, height: number, src: string} {
   return images[index % images.length];
 }
 
-export function getDescription(index: number) {
+export function getDescription(index: number): string {
   return descriptions[index % descriptions.length];
 }
diff --git a/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
index 37c6dca69bf..c5173392881 100644
--- a/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
@@ -11,32 +11,36 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default as DefaultStory, IsDisabledTrue, IsEmphasizedTrue, ValidationStateInvalid} from '../chromatic/Checkbox.stories';
+import {Checkbox} from '../';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {Render} from '../chromatic/Checkbox.stories';
+import {StoryFn} from '@storybook/react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Checkbox'
 };
 
-export const Default = () => (
+export type CheckboxStory = StoryFn<typeof Checkbox>;
+
+export const Default: CheckboxStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <View>
       <h2>Default</h2>
-      <DefaultStory />
+      <Render />
     </View>
     <View>
       <h2>Invalid</h2>
-      <ValidationStateInvalid />
+      <Render isInvalid />
     </View>
     <View>
       <h2>Disabled</h2>
-      <IsDisabledTrue />
+      <Render isDisabled />
     </View>
     <View>
       <h2>Emphasized</h2>
-      <IsEmphasizedTrue />
+      <Render isEmphasized />
     </View>
   </Flex>
 );
diff --git a/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
index 17f84e885f1..ccc9af6e68d 100644
--- a/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
@@ -10,60 +10,64 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox} from '../';
-import React from 'react';
+import {Checkbox, SpectrumCheckboxProps} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {View} from '@react-spectrum/view';
 
 export default {
-  title: 'Checkbox'
-};
+  title: 'Checkbox',
+  excludeStories: ['Render', 'RenderCustomLabel', 'RenderNoLabel']
+} as Meta<typeof Checkbox>;
+
+export type CheckboxStory = StoryFn<typeof Checkbox>;
 
-export const Default = () => render();
-export const ValidationStateInvalid = () => render({isInvalid: true});
+export const Default: CheckboxStory = () => <Render />;
+export const ValidationStateInvalid: CheckboxStory = () => <Render isInvalid />;
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const IsDisabledTrue = () => render({isDisabled: true});
+export const IsDisabledTrue: CheckboxStory = () => <Render isDisabled />;
 
 IsDisabledTrue.story = {
   name: 'isDisabled: true'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: CheckboxStory = () => <Render isEmphasized />;
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueValidationStateInvalid = () =>
-  render({isEmphasized: true, isInvalid: true});
+export const IsEmphasizedTrueValidationStateInvalid: CheckboxStory = () =>
+  <Render isEmphasized isInvalid />;
 
 IsEmphasizedTrueValidationStateInvalid.story = {
   name: 'isEmphasized: true, validationState: "invalid"'
 };
 
-export const IsEmphasizedTrueIsDisabledTrue = () =>
-  render({isEmphasized: true, isDisabled: true});
+export const IsEmphasizedTrueIsDisabledTrue: CheckboxStory = () =>
+  <Render isEmphasized isDisabled />;
 
 IsEmphasizedTrueIsDisabledTrue.story = {
   name: 'isEmphasized: true, isDisabled: true'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: CheckboxStory = () => <Render isReadOnly />;
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const CustomLabel = () => renderCustomLabel();
+export const CustomLabel: CheckboxStory = () => <RenderCustomLabel />;
 
 CustomLabel.story = {
   name: 'custom label'
 };
 
-export const LongLabel = () => (
+export const LongLabel: CheckboxStory = () => (
   <View width="size-2000">
     <Checkbox>
       Super long checkbox label. Sample text. Arma virumque cano, Troiae qui primus ab oris.
@@ -75,14 +79,14 @@ LongLabel.story = {
   name: 'long label'
 };
 
-export const NoLabel = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
+export const NoLabel: CheckboxStory = () => <RenderNoLabel aria-label="This checkbox has no visible label" />;
 
 NoLabel.story = {
   name: 'no label'
 };
 
 // need selected + indeterminate because there is a sibling selector `checked + ...` so being careful
-function render(props = {}) {
+export function Render(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props}>Label</Checkbox>
@@ -99,7 +103,7 @@ function render(props = {}) {
   );
 }
 
-function renderCustomLabel(props = {}) {
+export function RenderCustomLabel(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props}>
@@ -116,7 +120,7 @@ function renderCustomLabel(props = {}) {
   );
 }
 
-function renderNoLabel(props = {}) {
+export function RenderNoLabel(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props} />
diff --git a/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
index b58fbfa4171..166d20a06e8 100644
--- a/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
@@ -13,70 +13,73 @@
 import {Checkbox, CheckboxGroup, SpectrumCheckboxGroupProps} from '..';
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'CheckboxGroup'
 };
 
-export const Default = () => render();
-export const DefaultValueDragons = () => render({defaultValue: ['dragons']});
+export type CheckboxGroupStory = StoryFn<typeof CheckboxGroup>;
+
+export const Default: CheckboxGroupStory = () => render();
+export const DefaultValueDragons: CheckboxGroupStory = () => render({defaultValue: ['dragons']});
 
 DefaultValueDragons.story = {
   name: 'defaultValue: dragons'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: CheckboxGroupStory = () => render({labelPosition: 'side'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'});
+export const LabelAlignEnd: CheckboxGroupStory = () => render({labelAlign: 'end'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Horizontal = () => render({orientation: 'horizontal'});
+export const Horizontal: CheckboxGroupStory = () => render({orientation: 'horizontal'});
 
 Horizontal.story = {
   name: 'horizontal'
 };
 
-export const HorizontalLabelPositionSide = () =>
+export const HorizontalLabelPositionSide: CheckboxGroupStory = () =>
   render({orientation: 'horizontal', labelPosition: 'side'});
 
 HorizontalLabelPositionSide.story = {
   name: 'horizontal, labelPosition: side'
 };
 
-export const HorizontalLabelAlignEnd = () =>
+export const HorizontalLabelAlignEnd: CheckboxGroupStory = () =>
   render({orientation: 'horizontal', labelAlign: 'end'});
 
 HorizontalLabelAlignEnd.story = {
   name: 'horizontal, labelAlign: end'
 };
 
-export const IsDisabled = () => render({isDisabled: true});
+export const IsDisabled: CheckboxGroupStory = () => render({isDisabled: true});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsDisabledOnOneCheckbox = () => render({}, [{}, {isDisabled: true}, {}]);
+export const IsDisabledOnOneCheckbox: CheckboxGroupStory = () => render({}, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneCheckbox.story = {
   name: 'isDisabled on one checkbox'
 };
 
-export const IsDisabledTwoCheckboxesAndOneChecked = () =>
+export const IsDisabledTwoCheckboxesAndOneChecked: CheckboxGroupStory = () =>
   render({defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}]);
 
 IsDisabledTwoCheckboxesAndOneChecked.story = {
   name: 'isDisabled two checkboxes and one checked'
 };
 
-export const IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked = () =>
+export const IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked: CheckboxGroupStory = () =>
   render({isEmphasized: true, defaultValue: ['dragons']}, [
     {},
     {isDisabled: true},
@@ -87,65 +90,65 @@ IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked.story = {
   name: 'isEmphasized, isDisabled two checkboxes and one checked'
 };
 
-export const IsDisabledOnOneCheckboxHorizontal = () =>
+export const IsDisabledOnOneCheckboxHorizontal: CheckboxGroupStory = () =>
   render({orientation: 'horizontal'}, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneCheckboxHorizontal.story = {
   name: 'isDisabled on one checkbox horizontal'
 };
 
-export const IsRequired = () => render({isRequired: true});
+export const IsRequired: CheckboxGroupStory = () => render({isRequired: true});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const IsRequiredNecessityIndicatorLabel = () =>
+export const IsRequiredNecessityIndicatorLabel: CheckboxGroupStory = () =>
   render({isRequired: true, necessityIndicator: 'label'});
 
 IsRequiredNecessityIndicatorLabel.story = {
   name: 'isRequired, necessityIndicator: label'
 };
 
-export const NecessityIndicatorLabelLabelPositionSide = () =>
+export const NecessityIndicatorLabelLabelPositionSide: CheckboxGroupStory = () =>
   render({necessityIndicator: 'label', labelPosition: 'side'});
 
 NecessityIndicatorLabelLabelPositionSide.story = {
   name: 'necessityIndicator: label, labelPosition: side'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true});
+export const IsReadOnly: CheckboxGroupStory = () => render({isReadOnly: true});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true});
+export const IsEmphasized: CheckboxGroupStory = () => render({isEmphasized: true});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const ValidationStateInvalid = () => render({isInvalid: true});
+export const ValidationStateInvalid: CheckboxGroupStory = () => render({isInvalid: true});
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const ValidationStateInvalidOnOneCheckbox = () =>
+export const ValidationStateInvalidOnOneCheckbox: CheckboxGroupStory = () =>
   render({}, [{}, {isInvalid: true}, {}]);
 
 ValidationStateInvalidOnOneCheckbox.story = {
   name: 'validationState: "invalid" on one checkbox'
 };
 
-export const WithDescription = () => render({description: 'Please select some pets.'});
+export const WithDescription: CheckboxGroupStory = () => render({description: 'Please select some pets.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = () =>
+export const WithErrorMessage: CheckboxGroupStory = () =>
   render({
     errorMessage: 'Please select a valid combination of pets.',
     isInvalid: true
@@ -155,7 +158,7 @@ WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithErrorMessageAndErrorIcon = () =>
+export const WithErrorMessageAndErrorIcon: CheckboxGroupStory = () =>
   render({
     errorMessage: 'Please select a valid combination of pets.',
     isInvalid: true,
@@ -166,7 +169,7 @@ WithErrorMessageAndErrorIcon.story = {
   name: 'with error message and error icon'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: CheckboxGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -184,25 +187,25 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Pets'});
+export const NoVisibleLabel: CheckboxGroupStory = () => render({label: null, 'aria-label': 'Pets'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const AutoFocusOnOneCheckbox = () => render({}, [{}, {autoFocus: true}, {}]);
+export const AutoFocusOnOneCheckbox: CheckboxGroupStory = () => render({}, [{}, {autoFocus: true}, {}]);
 
 AutoFocusOnOneCheckbox.story = {
   name: 'autoFocus on one checkbox'
 };
 
-export const FormName = () => render({name: 'pets'});
+export const FormName: CheckboxGroupStory = () => render({name: 'pets'});
 
 FormName.story = {
   name: 'form name'
 };
 
-export const ShowErrorIcon = () =>
+export const ShowErrorIcon: CheckboxGroupStory = () =>
   render({isInvalid: true, errorMessage: 'Error message.', showErrorIcon: true});
 
 ShowErrorIcon.story = {
diff --git a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
index 30ec42d48ea..06b58c828f5 100644
--- a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
@@ -12,9 +12,9 @@
 
 import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../';
 import {Flex} from '@adobe/react-spectrum';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {parseColor} from '@react-stately/color';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {SpectrumColorAreaProps} from '@react-types/color';
 
 const meta: Meta<SpectrumColorAreaProps> = {
@@ -27,9 +27,9 @@ const meta: Meta<SpectrumColorAreaProps> = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorAreaProps> = (args) => <ColorAreaExample {...args} />;
+export type ColorAreaStory = StoryObj<typeof ColorArea>;
 
-function ColorAreaExample(props: SpectrumColorAreaProps) {
+function ColorAreaExample(props: SpectrumColorAreaProps): JSX.Element {
   let {xChannel, yChannel, isDisabled} = props;
   let defaultValue =
     typeof props.defaultValue === 'string' ? parseColor(props.defaultValue) : props.defaultValue;
@@ -92,62 +92,62 @@ function ColorAreaExample(props: SpectrumColorAreaProps) {
     </div>
   );
 }
-export const XBlueYGreen = {
-  render: Template,
+export const XBlueYGreen: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green"',
   args: {xChannel: 'blue', yChannel: 'green'}
 };
 
-export const XGreenYBlue = {
-  render: Template,
+export const XGreenYBlue: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="green", yChannel="blue"',
   args: {...XBlueYGreen.args, xChannel: 'green', yChannel: 'blue'}
 };
 
-export const XBlueYRed = {
-  render: Template,
+export const XBlueYRed: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="red"',
   args: {...XBlueYGreen.args, xChannel: 'blue', yChannel: 'red'}
 };
 
-export const XRedYBlue = {
-  render: Template,
+export const XRedYBlue: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="red", yChannel="blue"',
   args: {...XBlueYGreen.args, xChannel: 'red', yChannel: 'blue'}
 };
 
-export const XRedYGreen = {
-  render: Template,
+export const XRedYGreen: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="red", yChannel="green"',
   args: {...XBlueYGreen.args, xChannel: 'red', yChannel: 'green'}
 };
 
-export const XGreenYRed = {
-  render: Template,
+export const XGreenYRed: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="green", yChannel="red"',
   args: {...XBlueYGreen.args, xChannel: 'green', yChannel: 'red'}
 };
 
-export const XBlueYGreenisDisabled = {
-  render: Template,
+export const XBlueYGreenisDisabled: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", isDisabled',
   args: {...XBlueYGreen.args, isDisabled: true}
 };
 
-export const XBlueYGreenSize3000 = {
-  render: Template,
+export const XBlueYGreenSize3000: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", size="size-3000"',
   args: {...XBlueYGreen.args, size: 'size-3000'}
 };
 
-export const XBlueYGreenSize600 = {
-  render: Template,
+export const XBlueYGreenSize600: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", size="size-600"',
   args: {...XBlueYGreen.args, size: 'size-600'}
 };
 
-export const XSaturationYLightness = {
-  render: Template,
+export const XSaturationYLightness: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="saturation", yChannel="lightness"',
   args: {
     ...XBlueYGreen.args,
@@ -157,8 +157,8 @@ export const XSaturationYLightness = {
   }
 };
 
-export const XLightnessYSaturation = {
-  render: Template,
+export const XLightnessYSaturation: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="lightness", yChannel="saturation"',
   args: {
     ...XBlueYGreen.args,
@@ -168,8 +168,8 @@ export const XLightnessYSaturation = {
   }
 };
 
-export const XHueYSaturationHSL = {
-  render: Template,
+export const XHueYSaturationHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="hue", yChannel="saturation"',
   args: {
     ...XSaturationYLightness.args,
@@ -179,8 +179,8 @@ export const XHueYSaturationHSL = {
   }
 };
 
-export const XSaturationYHueHSL = {
-  render: Template,
+export const XSaturationYHueHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="saturation", yChannel="hue"',
   args: {
     ...XSaturationYLightness.args,
@@ -190,8 +190,8 @@ export const XSaturationYHueHSL = {
   }
 };
 
-export const XHueYLightnessHSL = {
-  render: Template,
+export const XHueYLightnessHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="hue", yChannel="lightness"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -201,8 +201,8 @@ export const XHueYLightnessHSL = {
   }
 };
 
-export const XLightnessYHueHSL = {
-  render: Template,
+export const XLightnessYHueHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="lightness", yChannel="hue"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -212,8 +212,8 @@ export const XLightnessYHueHSL = {
   }
 };
 
-export const XSaturationYBrightness = {
-  render: Template,
+export const XSaturationYBrightness: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="brightness"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -223,8 +223,8 @@ export const XSaturationYBrightness = {
   }
 };
 
-export const XBrightnessYSaturation = {
-  render: Template,
+export const XBrightnessYSaturation: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="brightness", yChannel="saturation"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -234,14 +234,14 @@ export const XBrightnessYSaturation = {
   }
 };
 
-export const XSaturationYBrightnessisDisabled = {
-  render: Template,
+export const XSaturationYBrightnessisDisabled: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="brightness", isDisabled',
   args: {...XSaturationYBrightness.args, isDisabled: true}
 };
 
-export const XHueYSaturationHSB = {
-  render: Template,
+export const XHueYSaturationHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="hue", yChannel="saturation"',
   args: {
     ...XSaturationYBrightness.args,
@@ -251,8 +251,8 @@ export const XHueYSaturationHSB = {
   }
 };
 
-export const XSaturationYHueHSB = {
-  render: Template,
+export const XSaturationYHueHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="hue"',
   args: {
     ...XSaturationYBrightness.args,
@@ -262,8 +262,8 @@ export const XSaturationYHueHSB = {
   }
 };
 
-export const XHueYBrightnessHSB = {
-  render: Template,
+export const XHueYBrightnessHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="hue", yChannel="brightness"',
   args: {
     ...XHueYSaturationHSB.args,
@@ -273,8 +273,8 @@ export const XHueYBrightnessHSB = {
   }
 };
 
-export const XBrightnessYHueHSB = {
-  render: Template,
+export const XBrightnessYHueHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="brightness", yChannel="hue"',
   args: {
     ...XHueYSaturationHSB.args,
diff --git a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
index fbd3c9c9d24..293f3c9ad1b 100644
--- a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumColorFieldProps} from '@react-types/color';
 
 // Ignore read only because it doesn't apply any distingishable visual features
@@ -70,7 +70,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorFieldProps> = (args) => (
+export type ColorFieldStory = StoryObj<typeof ColorField>;
+
+const Template = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -82,7 +84,7 @@ const Template: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateSmall: StoryFn<SpectrumColorFieldProps> = (args) => (
+const TemplateSmall = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -94,7 +96,7 @@ const TemplateSmall: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-const NoLabelTemplate: StoryFn<SpectrumColorFieldProps> = (args) => (
+const NoLabelTemplate = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combinations.filter(combo => combo.isRequired == null && combo.necessityIndicator == null).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -106,44 +108,44 @@ const NoLabelTemplate: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropDefaultValue = {
-  render: Template,
+export const PropDefaultValue: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default value',
   args: {...PropDefaults.args, defaultValue: '#abcdef'}
 };
 
-export const PropPlaceholder = {
-  render: Template,
+export const PropPlaceholder: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'placeholder',
   args: {...PropDefaults.args, placeholder: 'Enter a hex color'}
 };
 
-export const PropAriaLabelled = {
-  render: NoLabelTemplate,
+export const PropAriaLabelled: ColorFieldStory = {
+  render: (args) => <NoLabelTemplate {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end', defaultValue: '#abcdef'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSmall,
+export const PropLabelSide: ColorFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side', defaultValue: '#abcdef'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-3000'}
 };
diff --git a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
index 7973ce1f4c2..74b38a6f7c5 100644
--- a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumColorSliderProps} from '@react-types/color';
 
 let states = [
@@ -59,7 +59,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorSliderProps> = (args) => (
+export type ColorSliderStory = StoryObj<typeof ColorSlider>;
+
+const Template = (args: SpectrumColorSliderProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -71,7 +73,7 @@ const Template: StoryFn<SpectrumColorSliderProps> = (args) => (
   </Grid>
 );
 
-const VerticalTemplate: StoryFn<SpectrumColorSliderProps> = (args) => (
+const VerticalTemplate = (args: SpectrumColorSliderProps): JSX.Element => (
   <Grid columns={repeat(5, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -83,44 +85,44 @@ const VerticalTemplate: StoryFn<SpectrumColorSliderProps> = (args) => (
   </Grid>
 );
 
-export const PropChannelRed = {
-  render: Template,
+export const PropChannelRed: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: red',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropChannelAlpha = {
-  render: Template,
+export const PropChannelAlpha: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: alpha',
   args: {channel: 'alpha', defaultValue: '#7f0000'}
 };
 
-export const PropChannelLightness = {
-  render: Template,
+export const PropChannelLightness: ColorSliderStory = {
+  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: ColorSliderStory = {
+  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: ColorSliderStory = {
+  render: (args) => <VerticalTemplate {...args} />,
   name: 'orientation: vertical',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {channel: 'red', defaultValue: '#7f0000', width: 'size-3600'}
 };
 
-export const PropCustomHeight = {
-  render: VerticalTemplate,
+export const PropCustomHeight: ColorSliderStory = {
+  render: (args) => <VerticalTemplate {...args} />,
   name: 'custom height',
   args: {channel: 'red', defaultValue: '#7f0000', height: 'size-3600'}
 };
diff --git a/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx b/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
index 20e777b66bb..34b2dd48772 100644
--- a/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
@@ -11,8 +11,9 @@
  */
 
 import {ColorArea, ColorEditor, ColorSwatch, ColorSwatchPicker, ColorWheel} from '../src';
-import {ColorPicker} from '../src/ColorPicker';
+import {ColorPicker, SpectrumColorPickerProps} from '../src/ColorPicker';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -34,18 +35,20 @@ export default {
       options: ['XS', 'S', 'M', 'L']
     }
   }
-};
+} as Meta<SpectrumColorPickerProps>;
 
-export const Default = (args) => (
+export type ColorPickerStory = StoryFn<typeof ColorPicker>;
+
+export const Default: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#f00" {...args}>
     <ColorEditor />
   </ColorPicker>
 );
 
-export const Custom = (args) => (
+export const Custom: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#f00" {...args}>
     <ColorWheel />
-    <ColorArea 
+    <ColorArea
       colorSpace="hsb"
       xChannel="saturation"
       yChannel="brightness"
@@ -56,7 +59,7 @@ export const Custom = (args) => (
   </ColorPicker>
 );
 
-export const Swatches = (args) => (
+export const Swatches: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#A00" {...args}>
     <Flex direction="column" gap="size-300">
       <ColorEditor />
diff --git a/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx b/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
index 56fbade0f39..c914db57e59 100644
--- a/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatch} from '../src/ColorSwatch';
+import {ColorSwatch, SpectrumColorSwatchProps} from '../src/ColorSwatch';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -29,9 +30,11 @@ export default {
       options: ['XS', 'S', 'M', 'L']
     }
   }
-};
+} as Meta<SpectrumColorSwatchProps>;
+
+export type ColorSwatchStory = StoryFn<typeof ColorSwatch>;
 
-export const Default = (args) => (
+export const Default: ColorSwatchStory = (args) => (
   <ColorSwatch {...args} />
 );
 
@@ -39,7 +42,7 @@ Default.args = {
   color: 'rgb(255, 0, 0)'
 };
 
-export const NoValue = (args) => <ColorSwatch {...args} />;
+export const NoValue: ColorSwatchStory = (args) => <ColorSwatch {...args} />;
 
-export const CustomWidth = (args) => <ColorSwatch {...args} width="size-1000" />;
+export const CustomWidth: ColorSwatchStory = (args) => <ColorSwatch {...args} width="size-1000" />;
 CustomWidth.args = Default.args;
diff --git a/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
index 22fd8ed901d..d1d40c30719 100644
--- a/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
@@ -11,7 +11,8 @@
  */
 
 import {ColorSwatch} from '../src/ColorSwatch';
-import {ColorSwatchPicker} from '../src/ColorSwatchPicker';
+import {ColorSwatchPicker, SpectrumColorSwatchPickerProps} from '../src/ColorSwatchPicker';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -34,9 +35,11 @@ export default {
       options: ['compact', 'regular', 'spacious']
     }
   }
-};
+} as Meta<SpectrumColorSwatchPickerProps>;
 
-export const Default = (args) => (
+export type ColorSwatchPickerStory = StoryFn<typeof ColorSwatchPicker>;
+
+export const Default: ColorSwatchPickerStory = (args) => (
   <ColorSwatchPicker defaultValue="#f00" {...args}>
     <ColorSwatch color="#f00" />
     <ColorSwatch color="#0f0" />
@@ -45,7 +48,7 @@ export const Default = (args) => (
   </ColorSwatchPicker>
 );
 
-export const ManySwatches = (args) => (
+export const ManySwatches: ColorSwatchPickerStory = (args) => (
   <ColorSwatchPicker {...args} maxWidth="size-3000">
     {Array.from(Array(24)).map(() => {
       let color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
diff --git a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
index c605fade451..a5d2d34ccf9 100644
--- a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
@@ -12,17 +12,16 @@
 
 import {action} from '@storybook/addon-actions';
 import {ColorSwatch, ColorWheel} from '../';
-import {Flex, useLocale} from '@adobe/react-spectrum';
-import {Meta, StoryObj} from '@storybook/react';
+import {Flex, SpectrumColorWheelProps, useLocale} from '@adobe/react-spectrum';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {parseColor} from '@react-stately/color';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 
 export type ColorWheelStory = StoryObj<typeof ColorWheel>;
 
 export default {
   title: 'ColorWheel',
   component: ColorWheel,
-  excludeStories: ['ControlledHSL'],
   args: {
     onChange: action('onChange'),
     onChangeEnd: action('onChangeEnd')
@@ -55,14 +54,14 @@ export const Default: ColorWheelStory = {
 export const Controlled: ColorWheelStory = {
   render: (args) => (
     <Flex gap={'size-500'} direction="row" alignItems="center">
-      <ControlledHSL {...args} />
+      <ControlledHSLRender {...args} />
     </Flex>
   )
 };
 
-export function ControlledHSL(props) {
+export const ControlledHSLRender = (props: SpectrumColorWheelProps): JSX.Element => {
   let {locale} = useLocale();
-  let [color, setColor] = useState(props.defaultValue || parseColor('hsl(0, 100%, 50%)'));
+  let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
   let onChangeEnd = (color) => {
     props.onChangeEnd && props.onChangeEnd(color);
     setColor(color);
@@ -78,4 +77,6 @@ export function ControlledHSL(props) {
       <div>{color.getColorName(locale)}</div>
     </div>
   );
-}
+};
+
+export const ControlledHSL: StoryFn<typeof ColorWheel> = (props) => <ControlledHSLRender {...props} />;
diff --git a/packages/@react-spectrum/color/test/ColorWheel.test.tsx b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
index bdfdb1604c9..15ee47fb00a 100644
--- a/packages/@react-spectrum/color/test/ColorWheel.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
@@ -12,7 +12,7 @@
 
 import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {ColorWheel} from '../';
-import {ControlledHSL} from '../stories/ColorWheel.stories';
+import {ControlledHSLRender} from '../stories/ColorWheel.stories';
 import {parseColor} from '@react-stately/color';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
@@ -339,7 +339,7 @@ describe('ColorWheel', () => {
 
     it('clicking on the track works', () => {
       let defaultColor = parseColor('hsl(0, 100%, 50%)');
-      let {container: _container, getByRole} = render(<ControlledHSL defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
+      let {container: _container, getByRole} = render(<ControlledHSLRender defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
       let slider = getByRole('slider');
       let container = _container?.firstChild?.firstChild?.firstChild?.firstChild as HTMLElement;
       container.getBoundingClientRect = getBoundingClientRect;
diff --git a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
index 569001ea537..52e2e33b95a 100644
--- a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumComboBoxProps} from '@react-types/combobox';
 
 // Skipping focus styles because don't have a way of applying it via classnames
@@ -67,13 +67,15 @@ const meta: Meta<SpectrumComboBoxProps<object>> = {
 
 export default meta;
 
+export type ComboBoxStory = StoryObj<typeof ComboBox>;
+
 let items = [
   {name: 'Aardvark', id: '1'},
   {name: 'Kangaroo', id: '2'},
   {name: 'Snake', id: '3'}
 ];
 
-const Template: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
+const Template = (args: SpectrumComboBoxProps<unknown>): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -91,7 +93,7 @@ const Template: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
 );
 
 // Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
-const TemplateSideLabel: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
+const TemplateSideLabel = (args: SpectrumComboBoxProps<unknown>): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={800}>
     {combinations.filter(combo => !(combo.isReadOnly || combo.isDisabled)).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -108,44 +110,44 @@ const TemplateSideLabel: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropSelectedKey = {
-  render: Template,
+export const PropSelectedKey: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'selectedKey: 2',
   args: {selectedKey: '2'}
 };
 
-export const PropInputValue = {
-  render: Template,
+export const PropInputValue: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSideLabel,
+export const PropLabelSide: ComboBoxStory = {
+  render: (args) => <TemplateSideLabel {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-1600'},
 
@@ -156,8 +158,8 @@ export const PropCustomWidth = {
   }
 };
 
-export const PropContextualHelp = {
-  render: Template,
+export const PropContextualHelp: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'contextual help',
   args: {
     ...PropDefaults.args,
diff --git a/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
index 20b28a295dc..8f179c32b0d 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DateField} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 
@@ -25,14 +26,16 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DateField>;
+
+export type DateFieldStory = StoryFn<typeof DateField>;
 
 const date = new CalendarDate(2022, 2, 3);
 const dateTime = new CalendarDateTime(2022, 2, 3, 8, 45);
 const zonedDateTime = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <DateField label="Date" placeholderValue={date} />;
-export const PlaceholderFocus = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const Placeholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} {...args} />;
+export const PlaceholderFocus: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -42,7 +45,7 @@ PlaceholderFocus.parameters = {
   }
 };
 
-export const PlaceholderFocusRTL = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusRTL: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -52,19 +55,19 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusExpress: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DateField label="Date" placeholderValue={dateTime} />;
-export const PlaceholderZoned = () => <DateField label="Date" placeholderValue={zonedDateTime} />;
-export const Value = () => <DateField label="Date" value={date} />;
-export const ValueTime = () => <DateField label="Date" value={dateTime} />;
-export const ValueZoned = () => <DateField label="Date" value={zonedDateTime} />;
-export const ValueFocus = () => <DateField label="Date" value={date} autoFocus />;
+export const PlaceholderTime: DateFieldStory = (args) => <DateField label="Date" placeholderValue={dateTime} {...args} />;
+export const PlaceholderZoned: DateFieldStory = (args) => <DateField label="Date" placeholderValue={zonedDateTime} {...args} />;
+export const Value: DateFieldStory = (args) => <DateField label="Date" value={date} {...args} />;
+export const ValueTime: DateFieldStory = (args) => <DateField label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DateFieldStory = (args) => <DateField label="Date" value={zonedDateTime} {...args} />;
+export const ValueFocus: DateFieldStory = (args) => <DateField label="Date" value={date} autoFocus {...args} />;
 ValueFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -74,31 +77,31 @@ ValueFocus.parameters = {
   }
 };
 
-export const DisabledPlaceholder = () => <DateField label="Date" placeholderValue={date} isDisabled />;
-export const DisabledValue = () => <DateField label="Date" value={date} isDisabled />;
-export const ReadOnly = () => <DateField label="Date" value={date} isReadOnly />;
-export const QuietPlaceholder = () => <DateField label="Date" placeholderValue={date} isQuiet />;
-export const QuietValue = () => <DateField label="Date" value={date} isQuiet />;
-export const Invalid = () => <DateField label="Date" value={date} validationState="invalid" />;
-export const ErrorMessage = () => <DateField label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DateField label="Date" value={date} description="Enter a date" />;
-export const FormatHelpText = () => <DateField label="Date" value={date} showFormatHelpText />;
-export const LabelPositionSide = () => <DateField label="Date" value={date} labelPosition="side" />;
-export const LabelAlignEnd = () => <DateField label="Date" value={date} labelAlign="end" />;
-export const Required = () => <DateField label="Date" value={date} isRequired />;
-export const RequiredLabel = () => <DateField label="Date" value={date} isRequired necessityIndicator="label" />;
-export const Optional = () => <DateField label="Date" value={date} necessityIndicator="label" />;
-export const NoLabel = () => <DateField aria-label="Date" value={date} />;
-export const QuietNoLabel = () => <DateField aria-label="Date" isQuiet value={date} />;
-export const CustomWidth = () => <DateField label="Date" value={date} width={500} />;
-export const QuietCustomWidth = () => <DateField label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DateField aria-label="Date" value={date} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DateField aria-label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DateField label="Date" value={date} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DateField label="Date" value={date} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DateField label="Time" value={zonedDateTime} width={50} />;
-export const CustomWidthSmallInvalid = () => <DateField label="Time" value={zonedDateTime} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DateField aria-label="Time" value={zonedDateTime} width={50} />;
+export const DisabledPlaceholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} isDisabled {...args} />;
+export const DisabledValue: DateFieldStory = (args) => <DateField label="Date" value={date} isDisabled {...args} />;
+export const ReadOnly: DateFieldStory = (args) => <DateField label="Date" value={date} isReadOnly {...args} />;
+export const QuietPlaceholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} isQuiet {...args} />;
+export const QuietValue: DateFieldStory = (args) => <DateField label="Date" value={date} isQuiet {...args} />;
+export const Invalid: DateFieldStory = (args) => <DateField label="Date" value={date} validationState="invalid" {...args} />;
+export const ErrorMessage: DateFieldStory = (args) => <DateField label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DateFieldStory = (args) => <DateField label="Date" value={date} description="Enter a date" {...args} />;
+export const FormatHelpText: DateFieldStory = (args) => <DateField label="Date" value={date} showFormatHelpText {...args} />;
+export const LabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DateFieldStory = (args) => <DateField label="Date" value={date} labelAlign="end" {...args} />;
+export const Required: DateFieldStory = (args) => <DateField label="Date" value={date} isRequired {...args} />;
+export const RequiredLabel: DateFieldStory = (args) => <DateField label="Date" value={date} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DateFieldStory = (args) => <DateField label="Date" value={date} necessityIndicator="label" {...args} />;
+export const NoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} {...args} />;
+export const QuietNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" isQuiet value={date} {...args} />;
+export const CustomWidth: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidth: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DateFieldStory = (args) => <DateField label="Time" value={zonedDateTime} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DateFieldStory = (args) => <DateField label="Time" value={zonedDateTime} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DateFieldStory = (args) => <DateField aria-label="Time" value={zonedDateTime} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -107,10 +110,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DateField label="Date" contextualHelp={contextualHelp} value={date} />;
-export const ContextualHelpSideLabel = () => <DateField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} />;
+export const _ContextualHelp: DateFieldStory = (args) => <DateField label="Date" contextualHelp={contextualHelp} value={date} {...args} />;
+export const ContextualHelpSideLabel: DateFieldStory = (args) => <DateField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} {...args} />;
 
-export const ArabicAlgeriaPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicAlgeriaPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicAlgeriaPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-DZ-u-ca-gregory', 'ar-DZ-u-ca-islamic', 'ar-DZ-u-ca-islamic-civil', 'ar-DZ-u-ca-islamic-tbla'],
@@ -120,7 +123,7 @@ ArabicAlgeriaPreferences.parameters = {
   }
 };
 
-export const ArabicUAEPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicUAEPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicUAEPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-AE-u-ca-gregory', 'ar-AE-u-ca-islamic-umalqura', 'ar-AE-u-ca-islamic', 'ar-AE-u-ca-islamic-civil', 'ar-AE-u-ca-islamic-tbla'],
@@ -130,7 +133,7 @@ ArabicUAEPreferences.parameters = {
   }
 };
 
-export const ArabicEgyptPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicEgyptPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicEgyptPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-EG-u-ca-gregory', 'ar-EG-u-ca-coptic', 'ar-EG-u-ca-islamic', 'ar-EG-u-ca-islamic-civil', 'ar-EG-u-ca-islamic-tbla'],
@@ -140,7 +143,7 @@ ArabicEgyptPreferences.parameters = {
   }
 };
 
-export const ArabicSaudiPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicSaudiPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicSaudiPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-SA-u-ca-islamic-umalqura', 'ar-SA-u-ca-gregory', 'ar-SA-u-ca-islamic', 'ar-SA-u-ca-islamic-rgsa'],
@@ -151,7 +154,7 @@ ArabicSaudiPreferences.parameters = {
 };
 
 
-export const HebrewPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const HebrewPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 HebrewPreferences.parameters = {
   chromaticProvider: {
     locales: ['he-IL-u-ca-gregory', 'he-IL-u-ca-hebrew', 'he-IL-u-ca-islamic-civil', 'he-IL-u-ca-islamic-tbla'],
@@ -161,7 +164,7 @@ HebrewPreferences.parameters = {
   }
 };
 
-export const JapanesePreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const JapanesePreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 JapanesePreferences.parameters = {
   chromaticProvider: {
     locales: ['ja-JP-u-ca-gregory', 'ja-JP-u-ca-japanese'],
@@ -171,7 +174,7 @@ JapanesePreferences.parameters = {
   }
 };
 
-export const ThaiPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ThaiPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ThaiPreferences.parameters = {
   chromaticProvider: {
     locales: ['th-TH-u-ca-buddhist', 'th-TH-u-ca-gregory'],
@@ -181,7 +184,7 @@ ThaiPreferences.parameters = {
   }
 };
 
-export const PersianPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const PersianPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 PersianPreferences.parameters = {
   chromaticProvider: {
     locales: ['fa-AF-u-ca-persian', 'fa-AF-u-ca-gregory', 'fa-AF-u-ca-islamic-civil', 'fa-AF-u-ca-islamic-tbla'],
@@ -191,7 +194,7 @@ PersianPreferences.parameters = {
   }
 };
 
-export const IndianPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const IndianPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 IndianPreferences.parameters = {
   chromaticProvider: {
     locales: ['hi-IN-u-ca-gregory', 'hi-IN-u-ca-indian'],
@@ -201,7 +204,7 @@ IndianPreferences.parameters = {
   }
 };
 
-export const AmharicPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const AmharicPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 AmharicPreferences.parameters = {
   chromaticProvider: {
     locales: ['am-ET-u-ca-gregory', 'am-ET-u-ca-ethiopic', 'am-ET-u-ca-ethioaa'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
index b02a069d1b5..abb2a928b07 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DatePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {userEvent, within} from '@storybook/test';
 
@@ -25,7 +26,9 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DatePicker>;
+
+export type DatePickerStory = StoryFn<typeof DatePicker>;
 
 const focusParams = {
   chromaticProvider: {
@@ -62,11 +65,11 @@ const date = new CalendarDate(2022, 2, 3);
 const dateTime = new CalendarDateTime(2022, 2, 3, 8, 45);
 const zonedDateTime = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <DatePicker label="Date" placeholderValue={date} />;
-export const PlaceholderFocus = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const Placeholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} {...args} />;
+export const PlaceholderFocus: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocus.parameters = focusParams;
 
-export const PlaceholderFocusRTL = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusRTL: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -76,47 +79,47 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusExpress: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DatePicker label="Date" placeholderValue={dateTime} />;
-export const PlaceholderZoned = () => <DatePicker label="Date" placeholderValue={zonedDateTime} />;
-export const Value = () => <DatePicker label="Date" value={date} />;
-export const ValueTime = () => <DatePicker label="Date" value={dateTime} />;
-export const ValueZoned = () => <DatePicker label="Date" value={zonedDateTime} />;
-export const ValueFocus = () => <DatePicker label="Date" value={date} autoFocus />;
+export const PlaceholderTime: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={dateTime} {...args} />;
+export const PlaceholderZoned: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={zonedDateTime} {...args} />;
+export const Value: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
+export const ValueTime: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} {...args} />;
+export const ValueFocus: DatePickerStory = (args) => <DatePicker label="Date" value={date} autoFocus {...args} />;
 ValueFocus.parameters = focusParams;
 
-export const DisabledPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isDisabled />;
-export const DisabledValue = () => <DatePicker label="Date" value={date} isDisabled />;
-export const ReadOnly = () => <DatePicker label="Date" value={date} isReadOnly />;
-export const QuietPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isQuiet />;
-export const QuietValue = () => <DatePicker label="Date" value={date} isQuiet />;
-export const Invalid = () => <DatePicker label="Date" value={date} validationState="invalid" />;
-export const Unavailable = () => <DatePicker label="Date" value={date} isDateUnavailable={date => date.day <= 10} />;
-export const ErrorMessage = () => <DatePicker label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DatePicker label="Date" value={date} description="Enter a date" />;
-export const FormatHelpText = () => <DatePicker label="Date" value={date} showFormatHelpText />;
-export const LabelPositionSide = () => <DatePicker label="Date" value={date} labelPosition="side" />;
-export const LabelAlignEnd = () => <DatePicker label="Date" value={date} labelAlign="end" />;
-export const Required = () => <DatePicker label="Date" value={date} isRequired />;
-export const RequiredLabel = () => <DatePicker label="Date" value={date} isRequired necessityIndicator="label" />;
-export const Optional = () => <DatePicker label="Date" value={date} necessityIndicator="label" />;
-export const NoLabel = () => <DatePicker aria-label="Date" value={date} />;
-export const QuietNoLabel = () => <DatePicker aria-label="Date" isQuiet value={date} />;
-export const CustomWidth = () => <DatePicker label="Date" value={date} width={500} />;
-export const QuietCustomWidth = () => <DatePicker label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DatePicker aria-label="Date" value={date} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DatePicker aria-label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DatePicker label="Date" value={date} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DatePicker label="Date" value={date} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DatePicker label="Date" value={zonedDateTime} width={50} />;
-export const CustomWidthSmallInvalid = () => <DatePicker label="Date" value={zonedDateTime} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DatePicker aria-label="Date" value={zonedDateTime} width={50} />;
+export const DisabledPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isDisabled {...args} />;
+export const DisabledValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isDisabled {...args} />;
+export const ReadOnly: DatePickerStory = (args) => <DatePicker label="Date" value={date} isReadOnly {...args} />;
+export const QuietPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isQuiet {...args} />;
+export const QuietValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isQuiet {...args} />;
+export const Invalid: DatePickerStory = (args) => <DatePicker label="Date" value={date} validationState="invalid" {...args} />;
+export const Unavailable: DatePickerStory = (args) => <DatePicker label="Date" value={date} isDateUnavailable={date => date.day <= 10} {...args} />;
+export const ErrorMessage: DatePickerStory = (args) => <DatePicker label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DatePickerStory = (args) => <DatePicker label="Date" value={date} description="Enter a date" {...args} />;
+export const FormatHelpText: DatePickerStory = (args) => <DatePicker label="Date" value={date} showFormatHelpText {...args} />;
+export const LabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DatePickerStory = (args) => <DatePicker label="Date" value={date} labelAlign="end" {...args} />;
+export const Required: DatePickerStory = (args) => <DatePicker label="Date" value={date} isRequired {...args} />;
+export const RequiredLabel: DatePickerStory = (args) => <DatePicker label="Date" value={date} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DatePickerStory = (args) => <DatePicker label="Date" value={date} necessityIndicator="label" {...args} />;
+export const NoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} {...args} />;
+export const QuietNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" isQuiet value={date} {...args} />;
+export const CustomWidth: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidth: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={zonedDateTime} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -125,50 +128,50 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DatePicker label="Date" contextualHelp={contextualHelp} value={date} />;
-export const ContextualHelpSideLabel = () => <DatePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} />;
+export const _ContextualHelp: DatePickerStory = (args) => <DatePicker label="Date" contextualHelp={contextualHelp} value={date} {...args} />;
+export const ContextualHelpSideLabel: DatePickerStory = (args) => <DatePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} {...args} />;
 
-export const OpenPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} />;
+export const OpenPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} {...args} />;
 OpenPlaceholder.parameters = openParams;
 OpenPlaceholder.decorators = openDecorators;
 
-export const OpenPlaceholderRTL = () => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} />;
+export const OpenPlaceholderRTL: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} {...args} />;
 OpenPlaceholderRTL.parameters = openParamsRTL;
 OpenPlaceholderRTL.decorators = openDecorators;
 
-export const OpenValue = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} />;
+export const OpenValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} {...args} />;
 OpenValue.parameters = openParams;
 OpenValue.decorators = openDecorators;
 
-export const OpenValueRTL = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} />;
+export const OpenValueRTL: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} {...args} />;
 OpenValueRTL.parameters = openParamsRTL;
 OpenValueRTL.decorators = openDecorators;
 
-export const OpenTime = () => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} />;
+export const OpenTime: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} {...args} />;
 OpenTime.parameters = openParams;
 OpenTime.decorators = openDecorators;
 
-export const OpenZoned = () => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} />;
+export const OpenZoned: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} {...args} />;
 OpenZoned.parameters = openParams;
 OpenZoned.decorators = openDecorators;
 
-export const OpenInvalid = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" />;
+export const OpenInvalid: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" {...args} />;
 OpenInvalid.parameters = openParams;
 OpenInvalid.decorators = openDecorators;
 
-export const OpenErrorMessage = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" errorMessage="Invalid selection" />;
+export const OpenErrorMessage: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" errorMessage="Invalid selection" {...args} />;
 OpenErrorMessage.parameters = openParams;
 OpenErrorMessage.decorators = openDecorators;
 
-export const OpenInvalidTime = () => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} validationState="invalid" />;
+export const OpenInvalidTime: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} validationState="invalid" {...args} />;
 OpenInvalidTime.parameters = openParams;
 OpenInvalidTime.decorators = openDecorators;
 
-export const OpenUnavailable = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} isDateUnavailable={date => date.day <= 10} />;
+export const OpenUnavailable: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} isDateUnavailable={date => date.day <= 10} {...args} />;
 OpenUnavailable.parameters = openParams;
 OpenUnavailable.decorators = openDecorators;
 
-export const OpenExpress = () => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} />;
+export const OpenExpress: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} {...args} />;
 OpenExpress.parameters = {
   chromaticProvider: {
     express: true,
@@ -177,7 +180,7 @@ OpenExpress.parameters = {
 };
 OpenExpress.decorators = openDecorators;
 
-export const OpenLTRInteractions = () => <DatePicker label="Date" value={date} />;
+export const OpenLTRInteractions: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
 OpenLTRInteractions.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -199,7 +202,7 @@ OpenLTRInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowRight]');
 };
 
-export const OpenRTLInteractions = () => <DatePicker label="Date" value={date} />;
+export const OpenRTLInteractions: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
 OpenRTLInteractions.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -221,11 +224,11 @@ OpenRTLInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowLeft]');
 };
 
-export const MultipleMonths = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} maxVisibleMonths={3} />;
+export const MultipleMonths: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} maxVisibleMonths={3} {...args} />;
 MultipleMonths.parameters = openParams;
 MultipleMonths.decorators = [Story => <div style={{height: 550, width: 1000}}><Story /></div>];
 
-export const Tray = () => <DatePicker label="Date" value={date} isOpen />;
+export const Tray: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen {...args} />;
 Tray.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
@@ -239,7 +242,7 @@ Tray.parameters = {
   }
 };
 
-export const TrayExpress = () => <DatePicker label="Date" value={date} isOpen />;
+export const TrayExpress: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen {...args} />;
 TrayExpress.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
index 4f08a1043b1..5cd6d9a684e 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DateRangePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {userEvent, within} from '@storybook/test';
 
@@ -25,7 +26,9 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
 const focusParams = {
   chromaticProvider: {
@@ -73,11 +76,11 @@ const zoned = {
   end: parseZonedDateTime('2021-11-19T00:45-08:00[America/Los_Angeles]')
 };
 
-export const Placeholder = () => <DateRangePicker label="Date" placeholderValue={value.start} />;
-export const PlaceholderFocus = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const Placeholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} {...args} />;
+export const PlaceholderFocus: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocus.parameters = focusParams;
 
-export const PlaceholderFocusRTL = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const PlaceholderFocusRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -87,47 +90,47 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const PlaceholderFocusExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DateRangePicker label="Date" placeholderValue={dateTime.start} />;
-export const PlaceholderZoned = () => <DateRangePicker label="Date" placeholderValue={zoned.start} />;
-export const Value = () => <DateRangePicker label="Date" value={value} />;
-export const ValueTime = () => <DateRangePicker label="Date" value={dateTime} />;
-export const ValueZoned = () => <DateRangePicker label="Date" value={zoned} />;
-export const ValueFocus = () => <DateRangePicker label="Date" value={value} autoFocus />;
+export const PlaceholderTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={dateTime.start} {...args} />;
+export const PlaceholderZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={zoned.start} {...args} />;
+export const Value: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
+export const ValueTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} {...args} />;
+export const ValueFocus: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} autoFocus {...args} />;
 ValueFocus.parameters = focusParams;
 
-export const DisabledPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isDisabled />;
-export const DisabledValue = () => <DateRangePicker label="Date" value={value} isDisabled />;
-export const ReadOnly = () => <DateRangePicker label="Date" value={value} isReadOnly />;
-export const QuietPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isQuiet />;
-export const QuietValue = () => <DateRangePicker label="Date" value={value} isQuiet />;
-export const Invalid = () => <DateRangePicker label="Date" value={value} validationState="invalid" />;
-export const Unavailable = () => <DateRangePicker label="Date" value={value} isDateUnavailable={date => date.day <= 10} />;
-export const ErrorMessage = () => <DateRangePicker label="Date" value={value} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DateRangePicker label="Date" value={value} description="Enter a date" />;
-export const FormatHelpText = () => <DateRangePicker label="Date" value={value} showFormatHelpText />;
-export const LabelPositionSide = () => <DateRangePicker label="Date" value={value} labelPosition="side" />;
-export const LabelAlignEnd = () => <DateRangePicker label="Date" value={value} labelAlign="end" />;
-export const Required = () => <DateRangePicker label="Date" value={value} isRequired />;
-export const RequiredLabel = () => <DateRangePicker label="Date" value={value} isRequired necessityIndicator="label" />;
-export const Optional = () => <DateRangePicker label="Date" value={value} necessityIndicator="label" />;
-export const NoLabel = () => <DateRangePicker aria-label="Date" value={value} />;
-export const QuietNoLabel = () => <DateRangePicker aria-label="Date" isQuiet value={value} />;
-export const CustomWidth = () => <DateRangePicker label="Date" value={value} width={500} />;
-export const QuietCustomWidth = () => <DateRangePicker label="Date" value={value} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DateRangePicker aria-label="Date" value={value} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DateRangePicker aria-label="Date" value={value} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DateRangePicker label="Date" value={zoned} width={50} />;
-export const CustomWidthSmallInvalid = () => <DateRangePicker label="Date" value={zoned} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DateRangePicker aria-label="Date" value={zoned} width={50} />;
+export const DisabledPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isDisabled {...args} />;
+export const DisabledValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isDisabled {...args} />;
+export const ReadOnly: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isReadOnly {...args} />;
+export const QuietPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isQuiet {...args} />;
+export const QuietValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isQuiet {...args} />;
+export const Invalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} validationState="invalid" {...args} />;
+export const Unavailable: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isDateUnavailable={date => date.day <= 10} {...args} />;
+export const ErrorMessage: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} description="Enter a date" {...args} />;
+export const FormatHelpText: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} showFormatHelpText {...args} />;
+export const LabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} labelAlign="end" {...args} />;
+export const Required: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isRequired {...args} />;
+export const RequiredLabel: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} necessityIndicator="label" {...args} />;
+export const NoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} {...args} />;
+export const QuietNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" isQuiet value={value} {...args} />;
+export const CustomWidth: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} {...args} />;
+export const QuietCustomWidth: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={zoned} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -136,50 +139,50 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DateRangePicker label="Date" contextualHelp={contextualHelp} value={value} />;
-export const ContextualHelpSideLabel = () => <DateRangePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={value} />;
+export const _ContextualHelp: DateRangePickerStory = (args) => <DateRangePicker label="Date" contextualHelp={contextualHelp} value={value} {...args} />;
+export const ContextualHelpSideLabel: DateRangePickerStory = (args) => <DateRangePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={value} {...args} />;
 
-export const OpenPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isOpen />;
+export const OpenPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isOpen {...args} />;
 OpenPlaceholder.parameters = openParams;
 OpenPlaceholder.decorators = openDecorators;
 
-export const OpenPlaceholderRTL = () => <DateRangePicker label="Date" placeholderValue={value.start} isOpen />;
+export const OpenPlaceholderRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isOpen {...args} />;
 OpenPlaceholderRTL.parameters = openParamsRTL;
 OpenPlaceholderRTL.decorators = openDecorators;
 
-export const OpenValue = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const OpenValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 OpenValue.parameters = openParams;
 OpenValue.decorators = openDecorators;
 
-export const OpenValueRTL = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const OpenValueRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 OpenValueRTL.parameters = openParamsRTL;
 OpenValueRTL.decorators = openDecorators;
 
-export const OpenTime = () => <DateRangePicker label="Date" value={dateTime} isOpen />;
+export const OpenTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} isOpen {...args} />;
 OpenTime.parameters = openParams;
 OpenTime.decorators = openDecorators;
 
-export const OpenZoned = () => <DateRangePicker label="Date" value={zoned} isOpen />;
+export const OpenZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} isOpen {...args} />;
 OpenZoned.parameters = openParams;
 OpenZoned.decorators = openDecorators;
 
-export const OpenInvalid = () => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" />;
+export const OpenInvalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" {...args} />;
 OpenInvalid.parameters = openParams;
 OpenInvalid.decorators = openDecorators;
 
-export const OpenErrorMessage = () => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" errorMessage="Invalid selection" />;
+export const OpenErrorMessage: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" errorMessage="Invalid selection" {...args} />;
 OpenErrorMessage.parameters = openParams;
 OpenErrorMessage.decorators = openDecorators;
 
-export const OpenInvalidTime = () => <DateRangePicker label="Date" value={zoned} isOpen validationState="invalid" />;
+export const OpenInvalidTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} isOpen validationState="invalid" {...args} />;
 OpenInvalidTime.parameters = openParams;
 OpenInvalidTime.decorators = openDecorators;
 
-export const OpenUnavailable = () => <DateRangePicker label="Date" value={value} isOpen isDateUnavailable={date => date.day <= 10} />;
+export const OpenUnavailable: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen isDateUnavailable={date => date.day <= 10} {...args} />;
 OpenUnavailable.parameters = openParams;
 OpenUnavailable.decorators = openDecorators;
 
-export const OpenExpress = () => <DateRangePicker label="Date" value={dateTime} isOpen />;
+export const OpenExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} isOpen {...args} />;
 OpenExpress.parameters = {
   chromaticProvider: {
     express: true,
@@ -188,7 +191,7 @@ OpenExpress.parameters = {
 };
 OpenExpress.decorators = openDecorators;
 
-export const OpenFocusLTRInteractions = () => <DateRangePicker label="Date" value={value} />;
+export const OpenFocusLTRInteractions: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
 OpenFocusLTRInteractions.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -213,7 +216,7 @@ OpenFocusLTRInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowLeft]');
 };
 
-export const OpenFocusRTLInteractions = () => <DateRangePicker label="Date" value={value} />;
+export const OpenFocusRTLInteractions: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
 OpenFocusRTLInteractions.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -236,11 +239,11 @@ OpenFocusRTLInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowRight]');
 };
 
-export const MultipleMonths = () => <DateRangePicker label="Date" value={value} isOpen maxVisibleMonths={3} />;
+export const MultipleMonths: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen maxVisibleMonths={3} {...args} />;
 MultipleMonths.parameters = openParams;
 MultipleMonths.decorators = [Story => <div style={{height: 550, width: 1000}}><Story /></div>];
 
-export const Tray = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const Tray: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 Tray.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
@@ -254,7 +257,7 @@ Tray.parameters = {
   }
 };
 
-export const TrayExpress = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const TrayExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 TrayExpress.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
index 1c63080e598..f610c8d9ad2 100644
--- a/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
@@ -13,6 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {parseZonedDateTime, Time} from '@internationalized/date';
 import React from 'react';
 import {TimeField} from '../';
@@ -24,14 +25,16 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP']
     }
   }
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
 const time = new Time(8, 45);
 const zoned = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <TimeField label="Time" placeholderValue={time} />;
-export const PlaceholderZoned = () => <TimeField label="Time" placeholderValue={zoned} />;
-export const PlaceholderFocus = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const Placeholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} {...args} />;
+export const PlaceholderZoned: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={zoned} {...args} />;
+export const PlaceholderFocus: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -41,7 +44,7 @@ PlaceholderFocus.parameters = {
   }
 };
 
-export const PlaceholderFocusRTL = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const PlaceholderFocusRTL: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -51,16 +54,16 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const PlaceholderFocusExpress: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const Value = () => <TimeField label="Time" value={time} />;
-export const ValueZoned = () => <TimeField label="Time" value={zoned} />;
-export const ValueFocus = () => <TimeField label="Time" value={time} autoFocus />;
+export const Value: TimeFieldStory = (args) => <TimeField label="Time" value={time} {...args} />;
+export const ValueZoned: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} {...args} />;
+export const ValueFocus: TimeFieldStory = (args) => <TimeField label="Time" value={time} autoFocus {...args} />;
 ValueFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -70,30 +73,30 @@ ValueFocus.parameters = {
   }
 };
 
-export const DisabledPlaceholder = () => <TimeField label="Time" placeholderValue={time} isDisabled />;
-export const DisabledValue = () => <TimeField label="Time" value={time} isDisabled />;
-export const ReadOnly = () => <TimeField label="Time" value={time} isReadOnly />;
-export const QuietPlaceholder = () => <TimeField label="Time" placeholderValue={time} isQuiet />;
-export const QuietValue = () => <TimeField label="Time" value={time} isQuiet />;
-export const Invalid = () => <TimeField label="Time" value={time} validationState="invalid" />;
-export const ErrorMessage = () => <TimeField label="Time" value={time} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <TimeField label="Time" value={time} description="Enter a date" />;
-export const LabelPositionSide = () => <TimeField label="Time" value={time} labelPosition="side" />;
-export const LabelAlignEnd = () => <TimeField label="Time" value={time} labelAlign="end" />;
-export const Required = () => <TimeField label="Time" value={time} isRequired />;
-export const RequiredLabel = () => <TimeField label="Time" value={time} isRequired necessityIndicator="label" />;
-export const Optional = () => <TimeField label="Time" value={time} necessityIndicator="label" />;
-export const NoLabel = () => <TimeField aria-label="Time" value={time} />;
-export const QuietNoLabel = () => <TimeField aria-label="Time" isQuiet value={time} />;
-export const CustomWidth = () => <TimeField label="Time" value={time} width={500} />;
-export const QuietCustomWidth = () => <TimeField label="Time" value={time} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <TimeField aria-label="Time" value={time} width={500} />;
-export const QuietCustomWidthNoLabel = () => <TimeField aria-label="Time" value={time} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <TimeField label="Time" value={time} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <TimeField label="Time" value={time} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <TimeField label="Time" value={zoned} width={50} />;
-export const CustomWidthSmallInvalid = () => <TimeField label="Time" value={zoned} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <TimeField aria-label="Time" value={zoned} width={50} />;
+export const DisabledPlaceholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} isDisabled {...args} />;
+export const DisabledValue: TimeFieldStory = (args) => <TimeField label="Time" value={time} isDisabled {...args} />;
+export const ReadOnly: TimeFieldStory = (args) => <TimeField label="Time" value={time} isReadOnly {...args} />;
+export const QuietPlaceholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} isQuiet {...args} />;
+export const QuietValue: TimeFieldStory = (args) => <TimeField label="Time" value={time} isQuiet {...args} />;
+export const Invalid: TimeFieldStory = (args) => <TimeField label="Time" value={time} validationState="invalid" {...args} />;
+export const ErrorMessage: TimeFieldStory = (args) => <TimeField label="Time" value={time} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: TimeFieldStory = (args) => <TimeField label="Time" value={time} description="Enter a date" {...args} />;
+export const LabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} labelPosition="side" {...args} />;
+export const LabelAlignEnd: TimeFieldStory = (args) => <TimeField label="Time" value={time} labelAlign="end" {...args} />;
+export const Required: TimeFieldStory = (args) => <TimeField label="Time" value={time} isRequired {...args} />;
+export const RequiredLabel: TimeFieldStory = (args) => <TimeField label="Time" value={time} isRequired necessityIndicator="label" {...args} />;
+export const Optional: TimeFieldStory = (args) => <TimeField label="Time" value={time} necessityIndicator="label" {...args} />;
+export const NoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} {...args} />;
+export const QuietNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" isQuiet value={time} {...args} />;
+export const CustomWidth: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} {...args} />;
+export const QuietCustomWidth: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} width={50} {...args} />;
+export const CustomWidthSmallInvalid: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={zoned} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -102,5 +105,5 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <TimeField label="Date" contextualHelp={contextualHelp} value={time} />;
-export const ContextualHelpSideLabel = () => <TimeField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={time} />;
+export const _ContextualHelp: TimeFieldStory = (args) => <TimeField label="Date" contextualHelp={contextualHelp} value={time} {...args} />;
+export const ContextualHelpSideLabel: TimeFieldStory = (args) => <TimeField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={time} {...args} />;
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
index c142d595698..e89d49ea9be 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
@@ -21,8 +21,9 @@ import {DateValue} from '@react-types/calendar';
 import {Flex} from '@react-spectrum/layout';
 import {Item, Picker, Section} from '@react-spectrum/picker';
 import {Key} from '@react-types/shared';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@adobe/react-spectrum';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocale} from '@react-aria/i18n';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
@@ -31,105 +32,107 @@ export default {
   title: 'Date and Time/DateRangePicker',
   decorators: [BlockDecorator],
   excludeStories: ['render']
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
-export const Default = () => render();
+export const Default: DateRangePickerStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const DefaultValue: DateRangePickerStory = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 DefaultValue.story = {
   name: 'defaultValue'
 };
 
-export const ControlledValue = () => <ControlledExample />;
+export const ControlledValue: DateRangePickerStory = (args) => <ControlledExample {...args} />;
 
 ControlledValue.story = {
   name: 'controlled value'
 };
 
-export const DefaultValueZoned = () => render({defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}});
+export const DefaultValueZoned: DateRangePickerStory = () => render({defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}});
 
 DefaultValueZoned.story = {
   name: 'defaultValue, zoned'
 };
 
-export const GranularityMinute = () => render({granularity: 'minute'});
+export const GranularityMinute: DateRangePickerStory = () => render({granularity: 'minute'});
 
 GranularityMinute.story = {
   name: 'granularity: minute'
 };
 
-export const GranularitySecond = () => render({granularity: 'second'});
+export const GranularitySecond: DateRangePickerStory = () => render({granularity: 'second'});
 
 GranularitySecond.story = {
   name: 'granularity: second'
 };
 
-export const HourCycle12 = () => render({granularity: 'minute', hourCycle: 12});
+export const HourCycle12: DateRangePickerStory = () => render({granularity: 'minute', hourCycle: 12});
 
 HourCycle12.story = {
   name: 'hourCycle: 12'
 };
 
-export const HourCycle24 = () => render({granularity: 'minute', hourCycle: 24});
+export const HourCycle24: DateRangePickerStory = () => render({granularity: 'minute', hourCycle: 24});
 
 HourCycle24.story = {
   name: 'hourCycle: 24'
 };
 
-export const ForceLeadingZeros = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}, shouldForceLeadingZeros: true});
+export const ForceLeadingZeros: DateRangePickerStory = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}, shouldForceLeadingZeros: true});
 
 ForceLeadingZeros.story = {
   name: 'shouldForceLeadingZeros'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsDisabled: DateRangePickerStory = () => render({isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsQuietIsDisabled = () => render({isQuiet: true, isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsQuietIsDisabled: DateRangePickerStory = () => render({isQuiet: true, isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsQuietIsDisabled.story = {
   name: 'isQuiet, isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsReadOnly: DateRangePickerStory = () => render({isReadOnly: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: DateRangePickerStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const ValidationStateInvalid: DateRangePickerStory = () => render({validationState: 'invalid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const ValidationStateValid: DateRangePickerStory = () => render({validationState: 'valid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const MinDate201011MaxDate202011 = () => render({minValue: new CalendarDate(2010, 1, 1), maxValue: new CalendarDate(2020, 1, 1)});
+export const MinDate201011MaxDate202011: DateRangePickerStory = () => render({minValue: new CalendarDate(2010, 1, 1), maxValue: new CalendarDate(2020, 1, 1)});
 
 MinDate201011MaxDate202011.story = {
   name: 'minDate: 2010/1/1, maxDate: 2020/1/1'
 };
 
-export const IsDateUnavailable = () => {
+export const IsDateUnavailable: DateRangePickerStory = () => {
   const disabledRanges = [[today(getLocalTimeZone()), today(getLocalTimeZone()).add({weeks: 1})], [today(getLocalTimeZone()).add({weeks: 2}), today(getLocalTimeZone()).add({weeks: 3})]];
   let [value, setValue] = React.useState<DateRange | null>(null);
   let isInvalid = value && disabledRanges.some(interval => value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
@@ -147,48 +150,48 @@ IsDateUnavailable.story = {
   name: 'isDateUnavailable'
 };
 
-export const IsDateAvailableAllowsNonContiguousRanges = () => {
+export const IsDateAvailableAllowsNonContiguousRanges: DateRangePickerStory = (args) => {
   let {locale} = useLocale();
-  return render({isDateUnavailable: (date: DateValue) => isWeekend(date, locale), allowsNonContiguousRanges: true});
+  return render({isDateUnavailable: (date: DateValue) => isWeekend(date, locale), allowsNonContiguousRanges: true, ...args});
 };
 
 IsDateAvailableAllowsNonContiguousRanges.story = {
   name: 'isDateAvailable, allowsNonContiguousRanges'
 };
 
-export const PlaceholderValue198011 = () => render({placeholderValue: new CalendarDate(1980, 1, 1)});
+export const PlaceholderValue198011: DateRangePickerStory = (args) => render({placeholderValue: new CalendarDate(1980, 1, 1), ...args});
 
 PlaceholderValue198011.story = {
   name: 'placeholderValue: 1980/1/1'
 };
 
-export const MaxVisibleMonths2 = () => render({maxVisibleMonths: 2, granularity: 'minute'});
+export const MaxVisibleMonths2: DateRangePickerStory = (args) => render({maxVisibleMonths: 2, granularity: 'minute', ...args});
 
 MaxVisibleMonths2.story = {
   name: 'maxVisibleMonths: 2'
 };
 
-export const MaxVisibleMonths3 = () => render({maxVisibleMonths: 3, granularity: 'minute'});
+export const MaxVisibleMonths3: DateRangePickerStory = (args) => render({maxVisibleMonths: 3, granularity: 'minute', ...args});
 
 MaxVisibleMonths3.story = {
   name: 'maxVisibleMonths: 3'
 };
 
-export const ShowFormatHelpText = () => render({showFormatHelpText: true});
+export const ShowFormatHelpText: DateRangePickerStory = (args) => render({showFormatHelpText: true, ...args});
 
 ShowFormatHelpText.story = {
   name: 'showFormatHelpText'
 };
 
-export const AllTheEvents = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
+export const AllTheEvents: DateRangePickerStory = (args) => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange'), ...args});
 
 AllTheEvents.story = {
   name: 'all the events'
 };
 
-export const CustomCalendar = () => <CustomExample />;
+export const CustomCalendar: DateRangePickerStory = (args) => <CustomExample {...args} />;
 
-export function render(props = {}) {
+export function render(props = {}): JSX.Element {
   return (
     <div>
       <Example
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
index b80c3e7b217..da75c6b336d 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
@@ -12,7 +12,9 @@
 
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
+import {DateRangePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {parseDate, toZoned} from '@internationalized/date';
 import React from 'react';
 import {render} from './DateRangePicker.stories';
@@ -22,99 +24,101 @@ const BlockDecorator = storyFn => <div>{storyFn()}</div>;
 export default {
   title: 'Date and Time/DateRangePicker/styling',
   decorators: [BlockDecorator]
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: DateRangePickerStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: DateRangePickerStory = (args) => render({labelPosition: 'side', ...args});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelPosition: 'top', labelAlign: 'end'});
+export const LabelAlignEnd: DateRangePickerStory = (args) => render({labelPosition: 'top', labelAlign: 'end', ...args});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: DateRangePickerStory = (args) => render({isRequired: true, ...args});
 
 Required.story = {
   name: 'required'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: DateRangePickerStory = (args) => render({isRequired: true, necessityIndicator: 'label', ...args});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: DateRangePickerStory = (args) => render({necessityIndicator: 'label', ...args});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const NoVisibleLabel = () => render({'aria-label': 'Date range', label: null});
+export const NoVisibleLabel: DateRangePickerStory = (args) => render({'aria-label': 'Date range', label: null, ...args});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () => render({isQuiet: true, 'aria-label': 'Date range', label: null});
+export const QuietNoVisibleLabel: DateRangePickerStory = (args) => render({isQuiet: true, 'aria-label': 'Date range', label: null, ...args});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const CustomWidth = () => render({width: 'size-4600'});
+export const CustomWidth: DateRangePickerStory = (args) => render({width: 'size-4600', ...args});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-4600'});
+export const QuietCustomWidth: DateRangePickerStory = (args) => render({isQuiet: true, width: 'size-4600', ...args});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () => render({width: 'size-4600', label: null, 'aria-label': 'Date range'});
+export const CustomWidthNoVisibleLabel: DateRangePickerStory = (args) => render({width: 'size-4600', label: null, 'aria-label': 'Date range', ...args});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () => render({width: 'size-4600', labelPosition: 'side'});
+export const CustomWidthLabelPositionSide: DateRangePickerStory = (args) => render({width: 'size-4600', labelPosition: 'side', ...args});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Description = () => render({description: 'Help text'});
+export const Description: DateRangePickerStory = (args) => render({description: 'Help text', ...args});
 
 Description.story = {
   name: 'description'
 };
 
-export const ErrorMessage = () => render({errorMessage: 'Dates must be after today', validationState: 'invalid'});
+export const ErrorMessage: DateRangePickerStory = (args) => render({errorMessage: 'Dates must be after today', validationState: 'invalid', ...args});
 
 ErrorMessage.story = {
   name: 'errorMessage'
 };
 
-export const InvalidWithTime = () => render({validationState: 'invalid', granularity: 'minute', defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-12'), 'America/Los_Angeles')}});
+export const InvalidWithTime: DateRangePickerStory = (args) => render({validationState: 'invalid', granularity: 'minute', defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-12'), 'America/Los_Angeles')}, ...args});
 
 InvalidWithTime.story = {
   name: 'invalid with time'
 };
 
-export const _ContextualHelp = () => render({contextualHelp: (
+export const _ContextualHelp: DateRangePickerStory = () => render({contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -125,7 +129,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const InScrollableContainer = () => (
+export const InScrollableContainer: DateRangePickerStory = () => (
   <div style={{height: '200vh'}}>
     {render({granularity: 'second'})}
   </div>
@@ -135,7 +139,7 @@ InScrollableContainer.story = {
   name: 'in scrollable container'
 };
 
-export const ShouldFlipFalse = () => render({shouldFlip: false});
+export const ShouldFlipFalse: DateRangePickerStory = (args) => render({shouldFlip: false, ...args});
 
 ShouldFlipFalse.story = {
   name: 'shouldFlip: false'
diff --git a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
index a077df67a2d..943c92a0dd4 100644
--- a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
@@ -12,7 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {CalendarDateTime, parseTime, parseZonedDateTime, Time, toZoned} from '@internationalized/date';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TimeField} from '../';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
@@ -21,147 +22,149 @@ export default {
   title: 'Date and Time/TimeField',
   decorators: [BlockDecorator],
   excludeStories: ['render']
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
-export const Default = () => render();
+export const Default: TimeFieldStory = () => render();
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue = () => render({defaultValue: parseTime('20:24')});
+export const DefaultValue: TimeFieldStory = () => render({defaultValue: parseTime('20:24')});
 
 DefaultValue.story = {
   name: 'defaultValue'
 };
 
-export const ControlledValue = () => render({value: new Time(2, 35)});
+export const ControlledValue: TimeFieldStory = () => render({value: new Time(2, 35)});
 
 ControlledValue.story = {
   name: 'controlled value'
 };
 
-export const GranularitySecond = () => render({granularity: 'second'});
+export const GranularitySecond: TimeFieldStory = () => render({granularity: 'second'});
 
 GranularitySecond.story = {
   name: 'granularity: second'
 };
 
-export const HourCycle12 = () => render({hourCycle: 12, defaultValue: parseTime('00:00')});
+export const HourCycle12: TimeFieldStory = () => render({hourCycle: 12, defaultValue: parseTime('00:00')});
 
 HourCycle12.story = {
   name: 'hourCycle: 12'
 };
 
-export const HourCycle24 = () => render({hourCycle: 24, defaultValue: parseTime('00:00')});
+export const HourCycle24: TimeFieldStory = () => render({hourCycle: 24, defaultValue: parseTime('00:00')});
 
 HourCycle24.story = {
   name: 'hourCycle: 24'
 };
 
-export const HourCycle12GranularityHour = () => render({hourCycle: 12, granularity: 'hour'});
+export const HourCycle12GranularityHour: TimeFieldStory = () => render({hourCycle: 12, granularity: 'hour'});
 
 HourCycle12GranularityHour.story = {
   name: 'hourCycle: 12, granularity: hour'
 };
 
-export const HourCycle24GranularityHour = () => render({hourCycle: 24, granularity: 'hour'});
+export const HourCycle24GranularityHour: TimeFieldStory = () => render({hourCycle: 24, granularity: 'hour'});
 
 HourCycle24GranularityHour.story = {
   name: 'hourCycle: 24, granularity: hour'
 };
 
-export const Zoned = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')});
+export const Zoned: TimeFieldStory = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')});
 
 Zoned.story = {
   name: 'zoned'
 };
 
-export const HideTimeZone = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true});
+export const HideTimeZone: TimeFieldStory = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true});
 
 HideTimeZone.story = {
   name: 'hideTimeZone'
 };
 
-export const ForceLeadingZeros = () => render({defaultValue: parseTime('08:00'), shouldForceLeadingZeros: true});
+export const ForceLeadingZeros: TimeFieldStory = () => render({defaultValue: parseTime('08:00'), shouldForceLeadingZeros: true});
 
 ForceLeadingZeros.story = {
   name: 'shouldForceLeadingZeros'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: new Time(2, 35)});
+export const IsDisabled: TimeFieldStory = () => render({isDisabled: true, value: new Time(2, 35)});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsQuietIsDisabled = () => render({isQuiet: true, isDisabled: true, value: new Time(2, 35)});
+export const IsQuietIsDisabled: TimeFieldStory = () => render({isQuiet: true, isDisabled: true, value: new Time(2, 35)});
 
 IsQuietIsDisabled.story = {
   name: 'isQuiet, isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: new Time(2, 35)});
+export const IsReadOnly: TimeFieldStory = () => render({isReadOnly: true, value: new Time(2, 35)});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: TimeFieldStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid', value: new Time(2, 35)});
+export const ValidationStateInvalid: TimeFieldStory = () => render({validationState: 'invalid', value: new Time(2, 35)});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid', value: new Time(2, 35)});
+export const ValidationStateValid: TimeFieldStory = () => render({validationState: 'valid', value: new Time(2, 35)});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const PlaceholderValue8Am = () => render({placeholderValue: new Time(8)});
+export const PlaceholderValue8Am: TimeFieldStory = () => render({placeholderValue: new Time(8)});
 
 PlaceholderValue8Am.story = {
   name: 'placeholderValue: 8 AM'
 };
 
-export const PlaceholderValue1980118AmZoned = () => render({placeholderValue: toZoned(new CalendarDateTime(1980, 1, 1, 8), 'America/Los_Angeles')});
+export const PlaceholderValue1980118AmZoned: TimeFieldStory = () => render({placeholderValue: toZoned(new CalendarDateTime(1980, 1, 1, 8), 'America/Los_Angeles')});
 
 PlaceholderValue1980118AmZoned.story = {
   name: 'placeholderValue: 1980/1/1 8AM, zoned'
 };
 
-export const MinValue8Am = () => render({minValue: new Time(8)});
+export const MinValue8Am: TimeFieldStory = () => render({minValue: new Time(8)});
 
 MinValue8Am.story = {
   name: 'minValue: 8 AM'
 };
 
-export const MaxValue8Pm = () => render({maxValue: new Time(20)});
+export const MaxValue8Pm: TimeFieldStory = () => render({maxValue: new Time(20)});
 
 MaxValue8Pm.story = {
   name: 'maxValue: 8 PM'
 };
 
-export const MinValue8AmMaxValue8Pm = () => render({minValue: new Time(8), maxValue: new Time(20)});
+export const MinValue8AmMaxValue8Pm: TimeFieldStory = () => render({minValue: new Time(8), maxValue: new Time(20)});
 
 MinValue8AmMaxValue8Pm.story = {
   name: 'minValue: 8 AM, maxValue: 8 PM'
 };
 
-export const AllTheEvents = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
+export const AllTheEvents: TimeFieldStory = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
 
 AllTheEvents.story = {
   name: 'all the events'
 };
 
-export function render(props = {}) {
+export function render(props = {}): JSX.Element {
   return (
     <TimeField
       label="Time"
diff --git a/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx b/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
index 27e5a2742f9..21bdece7bf5 100644
--- a/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
@@ -13,101 +13,105 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './TimeField.stories';
+import {TimeField} from '../';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
 
 export default {
   title: 'Date and Time/TimeField/styling',
   decorators: [BlockDecorator]
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: TimeFieldStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: TimeFieldStory = () => render({labelPosition: 'side'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelPosition: 'top', labelAlign: 'end'});
+export const LabelAlignEnd: TimeFieldStory = () => render({labelPosition: 'top', labelAlign: 'end'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: TimeFieldStory = () => render({isRequired: true});
 
 Required.story = {
   name: 'required'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: TimeFieldStory = () => render({isRequired: true, necessityIndicator: 'label'});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: TimeFieldStory = () => render({necessityIndicator: 'label'});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const NoVisibleLabel = () => render({'aria-label': 'Time', label: null});
+export const NoVisibleLabel: TimeFieldStory = () => render({'aria-label': 'Time', label: null});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () => render({isQuiet: true, 'aria-label': 'Time', label: null});
+export const QuietNoVisibleLabel: TimeFieldStory = () => render({isQuiet: true, 'aria-label': 'Time', label: null});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const CustomWidth = () => render({width: 'size-3000'});
+export const CustomWidth: TimeFieldStory = () => render({width: 'size-3000'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-3000'});
+export const QuietCustomWidth: TimeFieldStory = () => render({isQuiet: true, width: 'size-3000'});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () => render({width: 'size-3000', label: null, 'aria-label': 'Time'});
+export const CustomWidthNoVisibleLabel: TimeFieldStory = () => render({width: 'size-3000', label: null, 'aria-label': 'Time'});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () => render({width: 'size-3000', labelPosition: 'side'});
+export const CustomWidthLabelPositionSide: TimeFieldStory = () => render({width: 'size-3000', labelPosition: 'side'});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Description = () => render({description: 'Help text'});
+export const Description: TimeFieldStory = () => render({description: 'Help text'});
 
 Description.story = {
   name: 'description'
 };
 
-export const ErrorMessage = () => render({errorMessage: 'Time must be between 9 AM and 5 PM', validationState: 'invalid'});
+export const ErrorMessage: TimeFieldStory = () => render({errorMessage: 'Time must be between 9 AM and 5 PM', validationState: 'invalid'});
 
 ErrorMessage.story = {
   name: 'errorMessage'
 };
 
-export const _ContextualHelp = () => render({contextualHelp: (
+export const _ContextualHelp: TimeFieldStory = () => render({contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
diff --git a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
index 20a9b9e7279..6ba04a79b62 100644
--- a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
@@ -12,7 +12,8 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import {AlertDialog, DialogTrigger} from '../';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {singleParagraph} from './Dialog.stories';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 
@@ -22,9 +23,11 @@ export default {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: false}
   },
   excludeStories: ['renderAlert']
-};
+} as Meta<typeof AlertDialog>;
+
+export type AlertDialogStory = StoryFn<typeof AlertDialog>;
 
-export const Destructive = () => renderAlert({
+export const Destructive: AlertDialogStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -36,7 +39,7 @@ Destructive.story = {
   name: 'destructive'
 };
 
-export const Confirmation = () => renderAlert({
+export const Confirmation: AlertDialogStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -48,7 +51,7 @@ Confirmation.story = {
   name: 'confirmation'
 };
 
-export const Information = () => renderAlert({
+export const Information: AlertDialogStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -60,7 +63,7 @@ Information.story = {
   name: 'information'
 };
 
-export const Error = () => renderAlert({
+export const Error: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -72,7 +75,7 @@ Error.story = {
   name: 'error'
 };
 
-export const Warning = () => renderAlert({
+export const Warning: AlertDialogStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -84,7 +87,7 @@ Warning.story = {
   name: 'warning'
 };
 
-export const PrimaryDisabled = () => renderAlert({
+export const PrimaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -97,7 +100,7 @@ PrimaryDisabled.story = {
   name: 'primary disabled'
 };
 
-export const AutoFocusPrimary = () => renderAlert({
+export const AutoFocusPrimary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -111,7 +114,7 @@ AutoFocusPrimary.story = {
   name: 'autoFocus primary'
 };
 
-export const SecondaryDisabled = () => renderAlert({
+export const SecondaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -125,7 +128,7 @@ SecondaryDisabled.story = {
   name: 'secondary disabled'
 };
 
-export const AutoFocusSecondary = () => renderAlert({
+export const AutoFocusSecondary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -139,7 +142,7 @@ AutoFocusSecondary.story = {
   name: 'autoFocus secondary'
 };
 
-export const AutoFocusCancel = () => renderAlert({
+export const AutoFocusCancel: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -153,7 +156,7 @@ AutoFocusCancel.story = {
   name: 'autoFocus cancel'
 };
 
-export function renderAlert({...props}: SpectrumAlertDialogProps) {
+export function renderAlert({...props}: SpectrumAlertDialogProps): JSX.Element {
   return (
     <div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
       <DialogTrigger defaultOpen>
diff --git a/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
index ac2a40eb416..aecba104b2f 100644
--- a/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
@@ -14,14 +14,15 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Content, Footer, Header} from '@react-spectrum/view';
-import {Dialog, DialogTrigger, SpectrumDialogProps} from '../';
+import {Dialog, DialogTrigger, SpectrumDialogProps, SpectrumDialogTriggerProps} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
 export default {
@@ -30,143 +31,147 @@ export default {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: false}
   },
   excludeStories: ['singleParagraph', 'renderTriggerProps']
-};
+} as Meta<typeof Dialog>;
+
+export type DialogStory = StoryFn<typeof Dialog>;
 
-export const Default = () => render({});
+export const Default: DialogStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const IsDismissable = () => render({isDismissable: true});
+export const IsDismissable: DialogStory = () => render({isDismissable: true});
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const LongContent = () => renderLongContent({});
+export const LongContent: DialogStory = () => renderLongContent({});
 
 LongContent.story = {
   name: 'long content'
 };
 
-export const LongContentMobileViewport = () => renderLongContent({});
+export const LongContentMobileViewport: DialogStory = () => renderLongContent({});
 
 LongContentMobileViewport.story = {
   name: 'long content, mobile viewport',
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const WithHero = () => renderHero({});
+export const WithHero: DialogStory = () => renderHero({});
 
 WithHero.story = {
   name: 'with hero'
 };
 
-export const WithHeroIsDimissable = () => renderHero({isDismissable: true});
+export const WithHeroIsDimissable: DialogStory = () => renderHero({isDismissable: true});
 
 WithHeroIsDimissable.story = {
   name: 'with hero, isDimissable'
 };
 
-export const WithFooter = () => renderFooter({});
+export const WithFooter: DialogStory = () => renderFooter({});
 
 WithFooter.story = {
   name: 'with footer'
 };
 
-export const Small = () => render({size: 'S'});
+export const Small: DialogStory = () => render({size: 'S'});
 
 Small.story = {
   name: 'small'
 };
 
-export const Medium = () => render({size: 'M'});
+export const Medium: DialogStory = () => render({size: 'M'});
 
 Medium.story = {
   name: 'medium'
 };
 
-export const Large = () => render({size: 'L'});
+export const Large: DialogStory = () => render({size: 'L'});
 
 Large.story = {
   name: 'large'
 };
 
-export const _Form = () => renderWithForm({});
+export const _Form: DialogStory = () => renderWithForm({});
 
 _Form.story = {
   name: 'form'
 };
 
-export const FullscreenTakeoverForm = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverForm: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverForm.story = {
   name: 'fullscreenTakeover form'
 };
 
-export const FullscreenTakeoverFormMobileViewport = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverFormMobileViewport: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverFormMobileViewport.story = {
   name: 'fullscreenTakeover form, mobile viewport',
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const ThreeButtons = () => renderWithThreeButtons({});
+export const ThreeButtons: DialogStory = () => renderWithThreeButtons({});
 
 ThreeButtons.story = {
   name: 'three buttons'
 };
 
-export const ThreeButtonsVerticalOrientation = () => renderWithThreeButtonsVertical({});
+export const ThreeButtonsVerticalOrientation: DialogStory = () => renderWithThreeButtonsVertical({});
 
 ThreeButtonsVerticalOrientation.story = {
   name: 'three buttons, vertical orientation'
 };
 
-export const ThreeButtonsFooter = () => renderWithThreeButtons({showFooter: true});
+export const ThreeButtonsFooter: DialogStory = () => renderWithThreeButtons({showFooter: true});
 
 ThreeButtonsFooter.story = {
   name: 'three buttons, footer'
 };
 
-export const ThreeButtonsFooterExtraLabel = () => renderWithThreeButtons({showFooter: true, extraLabel: ': This is the extra text'});
+export const ThreeButtonsFooterExtraLabel: DialogStory = () => renderWithThreeButtons({showFooter: true, extraLabel: ': This is the extra text'});
 
 ThreeButtonsFooterExtraLabel.story = {
   name: 'three buttons, footer, extraLabel'
 };
 
-export const ClearedContent = () => renderWithDividerInContent({});
+export const ClearedContent: DialogStory = () => renderWithDividerInContent({});
 
 ClearedContent.story = {
   name: 'cleared content'
 };
 
-export const ExtraLongFooter = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap'});
+export const ExtraLongFooter: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap'});
 
 ExtraLongFooter.story = {
   name: 'extra long footer'
 };
 
-export const ShowHeaderLongerHeadingAndHeader = () => renderWithOptions({showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
+export const ShowHeaderLongerHeadingAndHeader: DialogStory = () => renderWithOptions({showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
 
 ShowHeaderLongerHeadingAndHeader.story = {
   name: 'showHeader, longer heading and header'
 };
 
-export const ExtraLongFooterLongerHeadingAndHeader = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', extraHeadering: ' This is extra text for long heading that wraps to make sure it fills the width'});
+export const ExtraLongFooterLongerHeadingAndHeader: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', extraHeadering: ' This is extra text for long heading that wraps to make sure it fills the width'});
 
 ExtraLongFooterLongerHeadingAndHeader.story = {
   name: 'extra long footer, longer heading and header'
 };
 
-export const ExtraLongFooterShowHeaderLongerHeadingAndHeader = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
+export const ExtraLongFooterShowHeaderLongerHeadingAndHeader: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
 
 ExtraLongFooterShowHeaderLongerHeadingAndHeader.story = {
   name: 'extra long footer, showHeader, longer heading and header'
 };
 
-export const Tray = () => renderTriggerProps({type: 'tray'});
+export type DialogTriggerStory = StoryFn<typeof DialogTrigger>;
+
+export const Tray: DialogStory = () => renderTriggerProps({type: 'tray'});
 
 Tray.story = {
   name: 'tray',
@@ -176,7 +181,7 @@ Tray.story = {
   }
 };
 
-export const Popover = () => renderTriggerProps({type: 'popover'});
+export const Popover: DialogStory = () => renderTriggerProps({type: 'popover'});
 
 Popover.story = {
   name: 'popover',
@@ -186,7 +191,7 @@ Popover.story = {
   }
 };
 
-export const PopoverCrossOffset50 = () => renderTriggerProps({type: 'popover', crossOffset: 50});
+export const PopoverCrossOffset50: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 50});
 
 PopoverCrossOffset50.story = {
   name: 'popover: crossOffset50',
@@ -196,7 +201,7 @@ PopoverCrossOffset50.story = {
   }
 };
 
-export const PopoverCrossOffset200 = () => renderTriggerProps({type: 'popover', crossOffset: 200});
+export const PopoverCrossOffset200: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 200});
 
 PopoverCrossOffset200.story = {
   name: 'popover: crossOffset200',
@@ -206,7 +211,7 @@ PopoverCrossOffset200.story = {
   }
 };
 
-export const PopoverCrossOffset1000 = () => renderTriggerProps({type: 'popover', crossOffset: 1000});
+export const PopoverCrossOffset1000: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 1000});
 
 PopoverCrossOffset1000.story = {
   name: 'popover: crossOffset1000',
@@ -216,7 +221,7 @@ PopoverCrossOffset1000.story = {
   }
 };
 
-export const PopoverContainerPadding = () => renderTriggerProps({type: 'popover', containerPadding: 30, shouldFlip: false, placement: 'top'});
+export const PopoverContainerPadding: DialogStory = () => renderTriggerProps({type: 'popover', containerPadding: 30, shouldFlip: false, placement: 'top'});
 
 PopoverContainerPadding.story = {
   name: 'popover: containerPadding',
@@ -226,7 +231,7 @@ PopoverContainerPadding.story = {
   }
 };
 
-export const MobileTypeFullscreenTakeoverModal = () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'});
+export const MobileTypeFullscreenTakeoverModal: DialogStory = () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'});
 
 MobileTypeFullscreenTakeoverModal.story = {
   name: 'mobileType fullscreenTakeover, modal',
@@ -236,7 +241,7 @@ MobileTypeFullscreenTakeoverModal.story = {
   }
 };
 
-export const MobileTypeModalPopover = () => renderTriggerProps({type: 'popover', mobileType: 'modal'});
+export const MobileTypeModalPopover: DialogStory = () => renderTriggerProps({type: 'popover', mobileType: 'modal'});
 
 MobileTypeModalPopover.story = {
   name: 'mobileType: modal, popover',
@@ -246,7 +251,7 @@ MobileTypeModalPopover.story = {
   }
 };
 
-export const MobileTypeTrayPopover = () => renderTriggerProps({type: 'popover', mobileType: 'tray'});
+export const MobileTypeTrayPopover: DialogStory = () => renderTriggerProps({type: 'popover', mobileType: 'tray'});
 
 MobileTypeTrayPopover.story = {
   name: 'mobileType: tray, popover',
@@ -284,7 +289,12 @@ function render(props: RenderProps) {
   );
 }
 
-export function renderTriggerProps({width = 'auto', isDismissable = undefined, ...triggerProps}) {
+interface RenderTriggerProps extends Omit<SpectrumDialogTriggerProps, 'children'> {
+  width?: string,
+  isDismissable?: boolean
+}
+
+export function renderTriggerProps({width = 'auto', isDismissable = undefined, ...triggerProps}: RenderTriggerProps): JSX.Element {
   return (
     <div style={{display: 'flex', width, margin: '100px 0'}}>
       <DialogTrigger isDismissable={isDismissable} defaultOpen {...triggerProps}>
@@ -397,8 +407,8 @@ function renderWithForm({width = 'auto', ...props}) {
     </div>
   );
 }
-export let singleParagraph = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
-let fiveParagraphs = () => (
+export let singleParagraph = (): JSX.Element => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
+let fiveParagraphs = (): JSX.Element => (
   <React.Fragment>
     <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies.</Text>
     <Text>Eleifend quam adipiscing vitae proin sagittis nisl. Diam donec adipiscing tristique risus. In fermentum posuere urna nec tincidunt praesent semper. Suspendisse in est ante in. Egestas diam in arcu cursus euismod quis viverra nibh cras. Aliquam sem fringilla ut morbi tincidunt augue interdum. Lacus sed turpis tincidunt id aliquet risus feugiat. Praesent semper feugiat nibh sed pulvinar proin. In massa tempor nec feugiat nisl pretium fusce id velit. Non nisi est sit amet facilisis. Mi in nulla posuere sollicitudin aliquam ultrices. Morbi leo urna molestie at elementum. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Risus quis varius quam quisque id. Platea dictumst quisque sagittis purus. Etiam non quam lacus suspendisse faucibus interdum posuere. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus.</Text>
diff --git a/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx b/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
index df319c18606..9eb128b7731 100644
--- a/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Dialog} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import {renderAlert} from './AlertDialog.stories';
 import {renderTriggerProps, singleParagraph} from './Dialog.stories';
 
@@ -18,9 +20,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: true}
   }
-};
+} as Meta<typeof Dialog>;
+
+export type DialogExpressStory = StoryFn<typeof Dialog>;
 
-export const _Destructive = () => renderAlert({
+export const _Destructive: DialogExpressStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -32,7 +36,7 @@ _Destructive.story = {
   name: 'destructive'
 };
 
-export const _Confirmation = () => renderAlert({
+export const _Confirmation: DialogExpressStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -44,7 +48,7 @@ _Confirmation.story = {
   name: 'confirmation'
 };
 
-export const _Information = () => renderAlert({
+export const _Information: DialogExpressStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -56,7 +60,7 @@ _Information.story = {
   name: 'information'
 };
 
-export const _Error = () => renderAlert({
+export const _Error: DialogExpressStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -68,7 +72,7 @@ _Error.story = {
   name: 'error'
 };
 
-export const _Warning = () => renderAlert({
+export const _Warning: DialogExpressStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -80,7 +84,7 @@ _Warning.story = {
   name: 'warning'
 };
 
-export const _Tray = () => renderTriggerProps({type: 'tray'});
+export const _Tray: DialogExpressStory = () => renderTriggerProps({type: 'tray'});
 
 _Tray.story = {
   name: 'tray',
@@ -90,7 +94,7 @@ _Tray.story = {
   }
 };
 
-export const _Popover = () => renderTriggerProps({type: 'popover'});
+export const _Popover: DialogExpressStory = () => renderTriggerProps({type: 'popover'});
 
 _Popover.story = {
   name: 'popover',
diff --git a/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx b/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
index 6be6584cb7e..847a33f016c 100644
--- a/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
@@ -14,14 +14,15 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Content, Header} from '@react-spectrum/view';
-import {Dialog, DialogTrigger} from '../';
+import {Dialog, DialogTrigger, SpectrumDialogTriggerProps} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
 import {Item, TagGroup} from '@react-spectrum/tag';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export default {
@@ -34,10 +35,12 @@ export default {
       scales: ['medium']
     }
   },
-  excludeStories: ['TranslateDialog']
-};
+  excludeStories: ['TranslateDialogRender']
+} as Meta<typeof Dialog>;
+
+export type DialogLanguagesStory = StoryFn<typeof Dialog>;
 
-export let TranslateDialog = (dialogProps) => {
+export let TranslateDialogRender = (dialogProps: Omit<SpectrumDialogTriggerProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -97,38 +100,40 @@ export let TranslateDialog = (dialogProps) => {
   );
 };
 
-export const ArabicComplex = () => (
+export let TranslateDialog: DialogLanguagesStory = (args) => <TranslateDialogRender {...args} />;
+
+export const ArabicComplex: DialogLanguagesStory = () => (
   <Provider locale="ar-AE">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: DialogLanguagesStory = () => (
   <Provider locale="he-IL">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: DialogLanguagesStory = () => (
   <Provider locale="ja-JP">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: DialogLanguagesStory = () => (
   <Provider locale="ko-KR">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: DialogLanguagesStory = () => (
   <Provider locale="zh-CN">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: DialogLanguagesStory = () => (
   <Provider locale="zh-TW">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
diff --git a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
index 6f0b8994984..85ff73f35f2 100644
--- a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
@@ -12,15 +12,18 @@
 import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {AlertDialog, DialogTrigger} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {singleParagraph} from './Dialog.stories';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 
 export default {
   title: 'Dialog/Alert'
-};
+} as Meta<typeof AlertDialog>;
+
+export type AlertDialogStory = StoryFn<typeof AlertDialog>;
 
-export const Destructive = () => renderAlert({
+export const Destructive: AlertDialogStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -35,7 +38,7 @@ Destructive.story = {
   name: 'destructive'
 };
 
-export const Confirmation = () => renderAlert({
+export const Confirmation: AlertDialogStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -50,7 +53,7 @@ Confirmation.story = {
   name: 'confirmation'
 };
 
-export const Information = () => renderAlert({
+export const Information: AlertDialogStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -65,7 +68,7 @@ Information.story = {
   name: 'information'
 };
 
-export const Error = () => renderAlert({
+export const Error: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -80,7 +83,7 @@ Error.story = {
   name: 'error'
 };
 
-export const Warning = () => renderAlert({
+export const Warning: AlertDialogStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -95,7 +98,7 @@ Warning.story = {
   name: 'warning'
 };
 
-export const PrimaryDisabled = () => renderAlert({
+export const PrimaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -111,7 +114,7 @@ PrimaryDisabled.story = {
   name: 'primary disabled'
 };
 
-export const AutoFocusPrimary = () => renderAlert({
+export const AutoFocusPrimary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -128,7 +131,7 @@ AutoFocusPrimary.story = {
   name: 'autoFocus primary'
 };
 
-export const SecondaryDisabled = () => renderAlert({
+export const SecondaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -145,7 +148,7 @@ SecondaryDisabled.story = {
   name: 'secondary disabled'
 };
 
-export const AutoFocusSecondary = () => renderAlert({
+export const AutoFocusSecondary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -162,7 +165,7 @@ AutoFocusSecondary.story = {
   name: 'autoFocus secondary'
 };
 
-export const AutoFocusCancel = () => renderAlert({
+export const AutoFocusCancel: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
index 05fac03bfc5..079ad51344a 100644
--- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
@@ -21,113 +21,116 @@ import {Form} from '@react-spectrum/form';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
 export default {
   title: 'Dialog',
   providerSwitcher: {status: 'notice'},
   excludeStories: ['singleParagraph']
-};
+} as Meta<typeof Dialog>;
+
+export type DialogStory = StoryFn<typeof Dialog>;
 
-export const Default = () => render({});
+export const Default: DialogStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const IsDismissable = () => render({isDismissable: true});
+export const IsDismissable: DialogStory = () => render({isDismissable: true});
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const LongContent = () => renderLongContent({});
+export const LongContent: DialogStory = () => renderLongContent({});
 
 LongContent.story = {
   name: 'long content'
 };
 
-export const WithHero = () => renderHero({});
+export const WithHero: DialogStory = () => renderHero({});
 
 WithHero.story = {
   name: 'with hero'
 };
 
-export const WithHeroIsDimissable = () => renderHero({isDismissable: true});
+export const WithHeroIsDimissable: DialogStory = () => renderHero({isDismissable: true});
 
 WithHeroIsDimissable.story = {
   name: 'with hero, isDimissable'
 };
 
-export const WithFooter = () => renderFooter({});
+export const WithFooter: DialogStory = () => renderFooter({});
 
 WithFooter.story = {
   name: 'with footer'
 };
 
-export const Small = () => render({size: 'S'});
+export const Small: DialogStory = () => render({size: 'S'});
 
 Small.story = {
   name: 'small'
 };
 
-export const Medium = () => render({size: 'M'});
+export const Medium: DialogStory = () => render({size: 'M'});
 
 Medium.story = {
   name: 'medium'
 };
 
-export const Large = () => render({size: 'L'});
+export const Large: DialogStory = () => render({size: 'L'});
 
 Large.story = {
   name: 'large'
 };
 
-export const _Form = () => renderWithForm({});
+export const _Form: DialogStory = () => renderWithForm({});
 
 _Form.story = {
   name: 'form'
 };
 
-export const FullscreenTakeoverForm = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverForm: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverForm.story = {
   name: 'fullscreenTakeover form'
 };
 
-export const ThreeButtons = () => renderWithThreeButtons({});
+export const ThreeButtons: DialogStory = () => renderWithThreeButtons({});
 
 ThreeButtons.story = {
   name: 'three buttons'
 };
 
-export const ThreeButtonsVerticalOrientation = () => renderWithThreeButtonsVertical({});
+export const ThreeButtonsVerticalOrientation: DialogStory = () => renderWithThreeButtonsVertical({});
 
 ThreeButtonsVerticalOrientation.story = {
   name: 'three buttons, vertical orientation'
 };
 
-export const ThreeButtonsFooter = () => <RenderWithThreeButtonsAndFooter />;
+export const ThreeButtonsFooter: DialogStory = () => <RenderWithThreeButtonsAndFooter />;
 
 ThreeButtonsFooter.story = {
   name: 'three buttons, footer'
 };
 
-export const ClearedContent = () => renderWithDividerInContent({});
+export const ClearedContent: DialogStory = () => renderWithDividerInContent({});
 
 ClearedContent.story = {
   name: 'cleared content'
 };
 
-export const WithIframe = () => renderIframe({});
+export const WithIframe: DialogStory = () => renderIframe({});
 
 WithIframe.story = {
   name: 'with iframe'
 };
 
-export const HorizontalScrolling = () => renderHorizontalScrolling({});
+export const HorizontalScrolling: DialogStory = () => renderHorizontalScrolling({});
 
 
 type RenderProps = Omit<SpectrumDialogProps & {isDismissable?: boolean, width?: string}, 'children'>;
@@ -282,7 +285,7 @@ function renderWithForm({width = 'auto', ...props}) {
     </div>
   );
 }
-export let singleParagraph = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
+export let singleParagraph = (): JSX.Element => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
 let fiveParagraphs = () => (
   <React.Fragment>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies.</p>
diff --git a/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
index 58f2505ac90..83e9a27edcd 100644
--- a/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
@@ -10,52 +10,56 @@
  * governing permissions and limitations under the License.
  */
 
+import {DialogContainer} from '../';
 import {
   DialogContainerExample,
   MenuExample,
   NestedDialogContainerExample
 } from './DialogContainerExamples';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'DialogContainer',
   providerSwitcher: {status: 'notice'}
-};
+} as Meta<typeof DialogContainer>;
+
+export type DialogContainerStory = StoryFn<typeof DialogContainer>;
 
-export const Default = () => <DialogContainerExample />;
+export const Default: DialogContainerStory = () => <DialogContainerExample />;
 
 Default.story = {
   name: 'default'
 };
 
-export const InAMenu = () => <MenuExample />;
+export const InAMenu: DialogContainerStory = () => <MenuExample />;
 
 InAMenu.story = {
   name: 'in a menu'
 };
 
-export const TypeFullscreen = () => <MenuExample type="fullscreen" />;
+export const TypeFullscreen: DialogContainerStory = () => <MenuExample type="fullscreen" />;
 
 TypeFullscreen.story = {
   name: 'type: fullscreen'
 };
 
-export const TypeFullscreenTakeover = () => <MenuExample type="fullscreenTakeover" />;
+export const TypeFullscreenTakeover: DialogContainerStory = () => <MenuExample type="fullscreenTakeover" />;
 
 TypeFullscreenTakeover.story = {
   name: 'type: fullscreenTakeover'
 };
 
-export const IsDismissable = () => <MenuExample isDismissable />;
+export const IsDismissable: DialogContainerStory = () => <MenuExample isDismissable />;
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const IsKeyboardDismissDisabled = () => <MenuExample isKeyboardDismissDisabled />;
+export const IsKeyboardDismissDisabled: DialogContainerStory = () => <MenuExample isKeyboardDismissDisabled />;
 
 IsKeyboardDismissDisabled.story = {
   name: 'isKeyboardDismissDisabled'
 };
 
-export const NestedDialogContainers = () => <NestedDialogContainerExample />;
+export const NestedDialogContainers: DialogContainerStory = () => <NestedDialogContainerExample />;
diff --git a/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx b/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
index e2ef9bfe7cf..fed09913df9 100644
--- a/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
@@ -1,20 +1,20 @@
 import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Content, Header} from '@react-spectrum/view';
-import {Dialog, DialogContainer, useDialogContainer} from '../';
+import {Dialog, DialogContainer, SpectrumDialogContainerProps, SpectrumDialogProps, useDialogContainer} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Key} from '@react-types/shared';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export function DialogContainerExample(props) {
+export function DialogContainerExample(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let [isOpen, setOpen] = React.useState(false);
 
   return (
     <>
       <ActionButton onPress={() => setOpen(true)}>Open dialog</ActionButton>
-      <DialogContainer onDismiss={() => setOpen(false)} {...props}>
+      <DialogContainer {...props} onDismiss={() => setOpen(false)}>
         {isOpen &&
           <ExampleDialog {...props} />
         }
@@ -23,7 +23,7 @@ export function DialogContainerExample(props) {
   );
 }
 
-export function MenuExample(props) {
+export function MenuExample(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let [isOpen, setOpen] = React.useState(false);
 
   return (
@@ -43,7 +43,7 @@ export function MenuExample(props) {
   );
 }
 
-function ExampleDialog(props) {
+function ExampleDialog(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let container = useDialogContainer();
 
   return (
@@ -62,7 +62,7 @@ function ExampleDialog(props) {
   );
 }
 
-export function NestedDialogContainerExample() {
+export function NestedDialogContainerExample(): JSX.Element {
   let [dialog, setDialog] = React.useState<Key | null>(null);
   let dismiss = () => setDialog(null);
 
diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
index 1c0075a1df4..b3deded9efc 100644
--- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
@@ -23,10 +23,11 @@ import {Flex, Grid} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import React, {useState} from 'react';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
-import {TranslateDialog} from './../chromatic/DialogLanguages.stories';
+import {TranslateDialogRender} from './../chromatic/DialogLanguages.stories';
 
 export default {
   title: 'DialogTrigger',
@@ -43,7 +44,9 @@ export default {
       }
     },
     placement: {
-      type: 'select',
+      control: {
+        type: 'select'
+      },
       defaultValue: 'top',
       options: [
         'bottom',
@@ -92,80 +95,82 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof DialogTrigger>;
+
+export type DialogTriggerStory = StoryFn<typeof DialogTrigger>;
 
-export const Default = (args) => render(args);
+export const Default: DialogTriggerStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const TypePopover = (args) => renderPopover({type: 'popover', ...args});
+export const TypePopover: DialogTriggerStory = (args) => renderPopover({type: 'popover', ...args});
 
 TypePopover.story = {
   name: 'type: popover'
 };
 
-export const TypeModal = (args) => render({type: 'modal', ...args});
+export const TypeModal: DialogTriggerStory = (args) => render({type: 'modal', ...args});
 
 TypeModal.story = {
   name: 'type: modal'
 };
 
-export const TypeModalIsDismissable = (args) =>
+export const TypeModalIsDismissable: DialogTriggerStory = (args) =>
   render({type: 'modal', isDismissable: true, ...args});
 
 TypeModalIsDismissable.story = {
   name: 'type: modal isDismissable'
 };
 
-export const TypeFullscreen = (args) => render({type: 'fullscreen', ...args});
+export const TypeFullscreen: DialogTriggerStory = (args) => render({type: 'fullscreen', ...args});
 
 TypeFullscreen.story = {
   name: 'type: fullscreen'
 };
 
-export const TypeFullscreenTakeover = (args) => render({type: 'fullscreenTakeover', ...args});
+export const TypeFullscreenTakeover: DialogTriggerStory = (args) => render({type: 'fullscreenTakeover', ...args});
 
 TypeFullscreenTakeover.story = {
   name: 'type: fullscreenTakeover'
 };
 
-export const TypeTray = (args) => renderPopover({type: 'tray', ...args});
+export const TypeTray: DialogTriggerStory = (args) => renderPopover({type: 'tray', ...args});
 
 TypeTray.story = {
   name: 'type: tray'
 };
 
-export const MobileTypeFullscreen = (args) =>
+export const MobileTypeFullscreen: DialogTriggerStory = (args) =>
   render({type: 'modal', mobileType: 'fullscreen', ...args});
 
 MobileTypeFullscreen.story = {
   name: 'mobileType: fullscreen'
 };
 
-export const MobileTypeFullscreenTakeover = (args) =>
+export const MobileTypeFullscreenTakeover: DialogTriggerStory = (args) =>
   render({type: 'modal', mobileType: 'fullscreenTakeover', ...args});
 
 MobileTypeFullscreenTakeover.story = {
   name: 'mobileType: fullscreenTakeover'
 };
 
-export const PopoverWithMobileTypeModal = (args) =>
+export const PopoverWithMobileTypeModal: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', mobileType: 'modal', ...args});
 
 PopoverWithMobileTypeModal.story = {
   name: 'popover with mobileType: modal'
 };
 
-export const PopoverWithMobileTypeTray = (args) =>
+export const PopoverWithMobileTypeTray: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', mobileType: 'tray', ...args});
 
 PopoverWithMobileTypeTray.story = {
   name: 'popover with mobileType: tray'
 };
 
-export const NestedModals = () => (
+export const NestedModals: DialogTriggerStory = () => (
   <div style={{paddingTop: 100}}>
     <input aria-label="test input" />
     <Provider colorScheme="dark" UNSAFE_style={{padding: 40, marginTop: 10}}>
@@ -195,7 +200,7 @@ NestedModals.story = {
   name: 'nested modals'
 };
 
-export const NestedModalsFullscreentakeover = () => (
+export const NestedModalsFullscreentakeover: DialogTriggerStory = () => (
   <DialogTrigger type="fullscreenTakeover">
     <ActionButton>Trigger</ActionButton>
     {(close) => (
@@ -231,7 +236,7 @@ NestedModalsFullscreentakeover.story = {
   name: 'nested modals, fullscreentakeover'
 };
 
-export const WithMenuTrigger = () => (
+export const WithMenuTrigger: DialogTriggerStory = () => (
   <DialogTrigger type="popover">
     <ActionButton>Trigger</ActionButton>
     <Dialog>
@@ -254,7 +259,7 @@ WithMenuTrigger.story = {
   name: 'with menu trigger'
 };
 
-export const NestedPopovers = () => (
+export const NestedPopovers: DialogTriggerStory = () => (
   <div style={{paddingTop: 100}}>
     <DialogTrigger type="popover">
       <ActionButton>Trigger</ActionButton>
@@ -278,7 +283,7 @@ NestedPopovers.story = {
   name: 'nested popovers'
 };
 
-export const PopoverInsideScrollView = () => (
+export const PopoverInsideScrollView: DialogTriggerStory = () => (
   <div style={{height: 100, display: 'flex'}}>
     <div style={{paddingTop: 100, height: 100, overflow: 'auto'}}>
       <div style={{height: 200}}>
@@ -310,14 +315,14 @@ PopoverInsideScrollView.story = {
   }
 };
 
-export const ShouldFlipWithWidth = (args) =>
+export const ShouldFlipWithWidth: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', width: 'calc(100vh - 100px)', ...args});
 
 ShouldFlipWithWidth.story = {
   name: 'shouldFlip with width'
 };
 
-export const CloseFunctionWithButtonPopover = () => (
+export const CloseFunctionWithButtonPopover: DialogTriggerStory = () => (
   <div style={{display: 'flex', margin: '100px 0'}}>
     <DialogTrigger type="popover" onOpenChange={action('open change')}>
       <ActionButton>Trigger</ActionButton>
@@ -351,19 +356,19 @@ CloseFunctionWithButtonPopover.story = {
   name: 'Close function with button: popover'
 };
 
-export const TargetRef = (args) => <TriggerWithRef type="popover" {...args} />;
+export const TargetRef: DialogTriggerStory = (args) => <TriggerWithRef type="popover" {...args} />;
 
 TargetRef.story = {
   name: 'targetRef'
 };
 
-export const _AlertDialog = (args) => renderAlert(args);
+export const _AlertDialog: DialogTriggerStory = (args) => renderAlert(args);
 
 _AlertDialog.story = {
   name: 'alert dialog'
 };
 
-export const CrossoffsetExamples = () => (
+export const CrossoffsetExamples: DialogTriggerStory = () => (
   <Flex gap="size-200" alignSelf="center">
     <Flex gap="size-200" direction="column" alignItems="start">
       <span>Left Top</span>
@@ -417,13 +422,13 @@ CrossoffsetExamples.story = {
   name: 'crossoffset examples'
 };
 
-export const TriggerVisibleThroughUnderlay = (args) => renderTriggerNotCentered(args);
+export const TriggerVisibleThroughUnderlay: DialogTriggerStory = (args) => renderTriggerNotCentered(args);
 
 TriggerVisibleThroughUnderlay.story = {
   name: 'trigger visible through underlay'
 };
 
-export const _2Popovers = () => (
+export const _2Popovers: DialogTriggerStory = () => (
   <Flex gap="size-200">
     <DialogTrigger type="popover">
       <ActionButton>Trigger</ActionButton>
@@ -447,13 +452,13 @@ _2Popovers.story = {
   name: '2 popovers'
 };
 
-export const _AdjustableDialog = () => <AdjustableDialog />;
+export const _AdjustableDialog: DialogTriggerStory = () => <AdjustableDialog />;
 
 _AdjustableDialog.story = {
   name: 'adjustable dialog'
 };
 
-export const WithTooltip = () => (
+export const WithTooltip: DialogTriggerStory = () => (
   <div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
     <DialogTrigger isDismissable>
       <ActionButton>Trigger</ActionButton>
@@ -476,7 +481,7 @@ WithTooltip.story = {
   name: 'with tooltip inside'
 };
 
-export const WithTooltipTrigger = () => (
+export const WithTooltipTrigger: DialogTriggerStory = () => (
   <Flex direction="row" gap={10}>
     <DialogTrigger>
       <ActionButton>DialogTrigger only</ActionButton>
@@ -528,14 +533,14 @@ function CustomDialog({close}) {
   );
 }
 
-export const WithTranslations = () => <TranslateDialog />;
+export const WithTranslations: DialogTriggerStory = () => <TranslateDialogRender />;
 
 WithTranslations.story = {
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
 
-export const TriggersOnEdges = () => (
+export const TriggersOnEdges: DialogTriggerStory = () => (
   <View width="100%" overflow="auto">
     <Grid
       areas={[
diff --git a/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx b/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
index 7d4d11c21b5..5789c498b8d 100644
--- a/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
+++ b/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
@@ -14,15 +14,18 @@ import {ActionButton} from '@react-spectrum/button';
 import Copy from '@spectrum-icons/workflow/Copy';
 import {Divider} from '../';
 import Edit from '@spectrum-icons/workflow/Edit';
+import {Meta, StoryFn} from '@storybook/react';
 import Properties from '@spectrum-icons/workflow/Properties';
 import React from 'react';
 import Select from '@spectrum-icons/workflow/Select';
 
 export default {
   title: 'Divider'
-};
+} as Meta<typeof Divider>;
 
-export const Horizontal = () => (
+export type DividerStory = StoryFn<typeof Divider>;
+
+export const Horizontal: DividerStory = () => (
   <section>
     <h1>Large</h1>
     <Divider />
@@ -34,7 +37,7 @@ export const Horizontal = () => (
   </section>
 );
 
-export const Vertical = () => (
+export const Vertical: DividerStory = () => (
   <section style={{display: 'flex'}}>
     <ActionButton aria-label="Properties" isQuiet>
       <Properties />
diff --git a/packages/@react-spectrum/divider/stories/Divider.stories.tsx b/packages/@react-spectrum/divider/stories/Divider.stories.tsx
index 8ef33ae901a..63d942ea0c9 100644
--- a/packages/@react-spectrum/divider/stories/Divider.stories.tsx
+++ b/packages/@react-spectrum/divider/stories/Divider.stories.tsx
@@ -12,6 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import {Divider} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import Properties from '@spectrum-icons/workflow/Properties';
 import React from 'react';
 import Select from '@spectrum-icons/workflow/Select';
@@ -19,9 +20,11 @@ import Select from '@spectrum-icons/workflow/Select';
 export default {
   title: 'Divider',
   providerSwitcher: {status: 'positive'}
-};
+} as Meta<typeof Divider>;
+
+export type DividerStory = StoryFn<typeof Divider>;
 
-export const LargeDefault = () => (
+export const LargeDefault: DividerStory = () => (
   <section>
     <h1>Large</h1>
     <Divider />
@@ -33,7 +36,7 @@ LargeDefault.story = {
   name: 'Large (Default)'
 };
 
-export const Medium = () => (
+export const Medium: DividerStory = () => (
   <section>
     <h1>Medium</h1>
     <Divider size="M" />
@@ -41,7 +44,7 @@ export const Medium = () => (
   </section>
 );
 
-export const Small = () => (
+export const Small: DividerStory = () => (
   <section>
     <h1>Small</h1>
     <Divider size="S" />
@@ -49,19 +52,19 @@ export const Small = () => (
   </section>
 );
 
-export const VerticalLargeDefault = () => renderVertical();
+export const VerticalLargeDefault: DividerStory = () => renderVertical();
 
 VerticalLargeDefault.story = {
   name: 'Vertical, Large (Default)'
 };
 
-export const VerticalMedium = () => renderVertical({size: 'M'});
+export const VerticalMedium: DividerStory = () => renderVertical({size: 'M'});
 
 VerticalMedium.story = {
   name: 'Vertical, Medium'
 };
 
-export const VerticalSmall = () => renderVertical({size: 'S'});
+export const VerticalSmall: DividerStory = () => renderVertical({size: 'S'});
 
 VerticalSmall.story = {
   name: 'Vertical, Small'
diff --git a/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx b/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
index 9c7bd6a20af..2d07ba3ebcf 100644
--- a/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
+++ b/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
@@ -15,18 +15,20 @@ import {DropZone, SpectrumDropZoneProps} from '../';
 import {FileTrigger, Text} from 'react-aria-components';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import Upload from '@spectrum-icons/illustrations/Upload';
 
 const meta: Meta<SpectrumDropZoneProps> = {
   title: 'DropZone',
   component: DropZone
-};
+} as Meta<typeof DropZone>;
 
 export default meta;
 
-export const Default = {
+export type DropZoneStory = StoryObj<typeof DropZone>;
+
+export const Default: DropZoneStory = {
   args: {
     children: (
       <>
@@ -43,7 +45,7 @@ export const Default = {
   }
 };
 
-export const WithFileTrigger = {
+export const WithFileTrigger: DropZoneStory = {
   args: {
     children: (
       <>
diff --git a/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx b/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
index 5140b4b1069..413331d4990 100644
--- a/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
+++ b/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
@@ -22,7 +22,7 @@ import File from '@spectrum-icons/illustrations/File';
 import {FileTrigger} from 'react-aria-components';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import NotFound from '@spectrum-icons/illustrations/NotFound';
 import React, {useState} from 'react';
 import {SpectrumDropZoneProps} from '../src/DropZone';
@@ -41,17 +41,19 @@ type StoryArgs = SpectrumDropZoneProps;
 const meta: Meta<StoryArgs> = {
   title: 'DropZone',
   component: DropZone
-};
+} as Meta<typeof DropZone>;
 
 export default meta;
 
-export const withDraggable = {
+export type DropZoneStory = StoryObj<typeof DropZone>;
+
+export const withDraggable: DropZoneStory = {
   render: (args) => (
     <DropZoneWithDraggable {...args} />
   )
 };
 
-export const customAriaLabel = {
+export const customAriaLabel: DropZoneStory = {
   render: (args) => (
     <DropZoneWithDraggable
       {...args}
@@ -59,13 +61,13 @@ export const customAriaLabel = {
   )
 };
 
-export const withButton = {
+export const withButton: DropZoneStory = {
   render: (args) => (
     <DropZoneWithButton {...args} />
   )
 };
 
-export const customBannerMessage = {
+export const customBannerMessage: DropZoneStory = {
   render: (args) => (
     <Example
       {...args}
@@ -73,13 +75,13 @@ export const customBannerMessage = {
   )
 };
 
-export const acceptsMultiple = {
+export const acceptsMultiple: DropZoneStory = {
   render: (args) => (
     <Example {...args} />
   )
 };
 
-export const filledDropzone = {
+export const filledDropzone: DropZoneStory = {
   render: (args) => (
     <DropZoneFilled {...args} />
   )
diff --git a/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx b/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
index 4ae7b08e0cd..aab6540b542 100644
--- a/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
+++ b/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
@@ -13,7 +13,7 @@
 import {Button} from '@react-spectrum/button';
 import {FileTrigger, FileTriggerProps} from 'react-aria-components';
 import {Link} from '@react-spectrum/link';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 type StoryArgs = FileTriggerProps;
@@ -21,11 +21,13 @@ type StoryArgs = FileTriggerProps;
 const meta: Meta<StoryArgs> = {
   title: 'FileTrigger',
   component: FileTrigger
-};
+} as Meta<typeof FileTrigger>;
 
 export default meta;
 
-export const DefaultWithButton = {
+export type FileTriggerStory = StoryObj<typeof FileTrigger>;
+
+export const DefaultWithButton: FileTriggerStory = {
   render: (args) => (
     <FileTrigger {...args} >
       <Button variant={'accent'}>Upload</Button>
@@ -33,7 +35,7 @@ export const DefaultWithButton = {
   )
 };
 
-export const DefaultWithLink = {
+export const DefaultWithLink: FileTriggerStory = {
   render: (args) => (
     <FileTrigger {...args} >
       <Link>Upload</Link>
diff --git a/packages/@react-spectrum/form/chromatic/Form.stories.tsx b/packages/@react-spectrum/form/chromatic/Form.stories.tsx
index 055dc78a680..bfcc0247983 100644
--- a/packages/@react-spectrum/form/chromatic/Form.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.stories.tsx
@@ -17,10 +17,10 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Form} from '../';
 import {Heading} from '@react-spectrum/text';
 import {Item, Picker} from '@react-spectrum/picker';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -28,17 +28,19 @@ import {TextArea, TextField} from '@react-spectrum/textfield';
 const meta: Meta<SpectrumFormProps> = {
   title: 'Form',
   component: Form
-};
+} as Meta<typeof Form>;
 
 export default meta;
 
+export type FormStory = StoryObj<typeof Form>;
+
 let flatOptions = [
   {id: 1, name: 'Aardvark'},
   {id: 2, name: 'Kangaroo'},
   {id: 3, name: 'Snake'}
 ];
 
-const Template = (args) => (
+const Template = (args: SpectrumFormProps): JSX.Element => (
   <Form {...args}>
     <CheckboxGroup defaultValue={['dragons']} label="Pets">
       <Checkbox value="dogs">Dogs</Checkbox>
@@ -74,74 +76,74 @@ const Template = (args) => (
   </Form>
 );
 
-export const Default = {
-  render: Template,
+export const Default: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side',
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label align: end',
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const LabelAlignSideEnd = {
-  render: Template,
+export const LabelAlignSideEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, label align: end',
   args: {...Default.args, labelPosition: 'side', labelAlign: 'end'}
 };
 
-export const Required = {
-  render: Template,
+export const Required: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isRequired',
   args: {...Default.args, isRequired: true}
 };
 
-export const NecessityIndicatorLabel = {
-  render: Template,
+export const NecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'necessity indicator: label',
   args: {...Default.args, necessityIndicator: 'label'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {...Default.args, isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isEmphasized',
   args: {...Default.args, isEmphasized: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isDisabled',
   args: {...Default.args, isDisabled: true}
 };
 
-export const ReadOnly = {
-  render: Template,
+export const ReadOnly: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isReadOnly',
   args: {...Default.args, isReadOnly: true}
 };
 
-export const ValidationStateInvalid = {
-  render: Template,
+export const ValidationStateInvalid: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'validationState: invalid',
   args: {...Default.args, validationState: 'invalid'}
 };
 
-export const ValidationStateValid = {
-  render: Template,
+export const ValidationStateValid: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'validationState: valid',
   args: {...Default.args, validationState: 'valid'}
 };
diff --git a/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
index dd18436c00b..deb8c551d6a 100644
--- a/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
@@ -15,15 +15,16 @@ import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
-import {Form} from '@react-spectrum/form';
+import {Form, SpectrumFormProps} from '@react-spectrum/form';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
 import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, StoryFn} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import {RangeSlider, Slider} from '@react-spectrum/slider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Switch} from '@react-spectrum/switch';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -38,10 +39,13 @@ export default {
       locales: ['ar-AE', 'he-IL', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'],
       scales: ['large', 'medium']
     }
-  }
-};
+  },
+  excludeStories: ['TranslateForm']
+} as Meta<typeof Form>;
+
+export type FormStory = StoryFn<typeof Form>;
 
-let TranslateForm = (props) => {
+export let TranslateForm = (props: Omit<SpectrumFormProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -145,10 +149,10 @@ let TranslateForm = (props) => {
   );
 };
 
-export const FormTranslatedText = (props) => (
+export const FormTranslatedText: FormStory = (props) => (
   <TranslateForm {...props} />
 );
 
-export const FormTranslatedTextSideLabel = () => {
-  return <FormTranslatedText labelPosition="side" labelAlign="start" width="500px" />;
+export const FormTranslatedTextSideLabel: FormStory = () => {
+  return <TranslateForm labelPosition="side" labelAlign="start" width="500px" />;
 };
diff --git a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
index 95f222af306..07c754eec65 100644
--- a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
@@ -15,10 +15,10 @@ import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -26,17 +26,19 @@ import {TextArea, TextField} from '@react-spectrum/textfield';
 const meta: Meta<SpectrumFormProps> = {
   title: 'Form/LongLabel',
   component: Form
-};
+} as Meta<typeof Form>;
 
 export default meta;
 
+export type FormStory = StoryObj<typeof Form>;
+
 let flatOptions = [
   {id: 1, name: 'Aardvark'},
   {id: 2, name: 'Kangaroo'},
   {id: 3, name: 'Snake'}
 ];
 
-const Template = (args) => (
+const Template = (args: Omit<SpectrumFormProps, 'children'>): JSX.Element => (
   <Form {...args}>
     <CheckboxGroup defaultValue={['dragons']} label="Pets are family fun for all, two real and two fantasy">
       <Checkbox value="dogs">Dogs</Checkbox>
@@ -66,44 +68,44 @@ const Template = (args) => (
   </Form>
 );
 
-export const Default = {
-  render: Template,
+export const Default: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const DefaultNarrow = {
-  render: Template,
+export const DefaultNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default, width: 200px',
   args: {width: '200px'}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side',
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label align: end',
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const NecessityIndicatorLabel = {
-  render: Template,
+export const NecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'necessity indicator: label',
   args: {...Default.args, necessityIndicator: 'label'}
 };
 
-export const LabelPositionSideRequiredNecessityIndicatorLabel = {
-  render: Template,
+export const LabelPositionSideRequiredNecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, isRequired, necessity indicator: label',
   args: {...Default.args, labelPosition: 'side', necessityIndicator: 'label', isRequired: true}
 };
 
-export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow = {
-  render: Template,
+export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, isRequired, necessity indicator: label, width: 200px',
   args: {
     ...Default.args,
@@ -114,20 +116,20 @@ export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow = {
   }
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {...Default.args, isQuiet: true}
 };
 
-export const QuietLabelPositionSideAlignEnd = {
-  render: Template,
+export const QuietLabelPositionSideAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet, label position: side, label align: end',
   args: {...Default.args, isQuiet: true, labelPosition: 'side', labelAlign: 'end'}
 };
 
-export const QuietLabelPositionSideNarrow = {
-  render: Template,
+export const QuietLabelPositionSideNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet, label position: side, width: 200px',
   args: {...Default.args, isQuiet: true, labelPosition: 'side', width: '200px'}
 };
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index e9e63e5044f..9621517febf 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -24,7 +24,6 @@ import {countries, states} from './data';
 import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form, SpectrumFormProps} from '../';
-import {FormTranslatedText} from './../chromatic/FormLanguages.stories';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert} from '@react-spectrum/inlinealert';
 import {Item, Picker} from '@react-spectrum/picker';
@@ -40,6 +39,7 @@ import {StatusLight} from '@react-spectrum/statuslight';
 import {Switch} from '@react-spectrum/switch';
 import {TagGroup} from '@react-spectrum/tag';
 import {TextArea, TextField} from '@react-spectrum/textfield';
+import {TranslateForm} from './../chromatic/FormLanguages.stories';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
 import {Well} from '@react-spectrum/well';
 
@@ -433,7 +433,7 @@ export const FormWithNumberfieldAndLocaleArAe: FormStory = {
 };
 
 export const WithTranslations: FormStory = {
-  render: () => <FormTranslatedText />,
+  render: () => <TranslateForm />,
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
diff --git a/packages/@react-spectrum/icon/stories/Icon.stories.tsx b/packages/@react-spectrum/icon/stories/Icon.stories.tsx
index e90c6cd8258..24a824a534c 100644
--- a/packages/@react-spectrum/icon/stories/Icon.stories.tsx
+++ b/packages/@react-spectrum/icon/stories/Icon.stories.tsx
@@ -11,14 +11,17 @@
  */
 
 import {Icon} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'Icons/Custom',
   providerSwitcher: {status: 'positive'}
-};
+} as Meta<typeof Icon>;
+
+export type IconStory = StoryFn<typeof Icon>;
 
-export const ExcitingSquare = () => (
+export const ExcitingSquare: IconStory = () => (
   <Icon>
     <svg viewBox="0 0 25 25">
       <rect x="0" y="0" width="25" height="25" />
diff --git a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
index 028000a07d3..6c1b76d53d9 100644
--- a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert, SpectrumInlineAlertProps} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<SpectrumInlineAlertProps> = {
@@ -23,7 +23,9 @@ const meta: Meta<SpectrumInlineAlertProps> = {
 
 export default meta;
 
-export const Default = {
+export type InlineAlertStory = StoryObj<typeof InlineAlert>;
+
+export const Default: InlineAlertStory = {
   args: {
     children: (
       <>
@@ -34,7 +36,7 @@ export const Default = {
   }
 };
 
-export const Informative = {
+export const Informative: InlineAlertStory = {
   args: {
     variant: 'info',
     children: (
@@ -46,7 +48,7 @@ export const Informative = {
   }
 };
 
-export const Positive = {
+export const Positive: InlineAlertStory = {
   args: {
     variant: 'positive',
     children: (
@@ -58,7 +60,7 @@ export const Positive = {
   }
 };
 
-export const Notice = {
+export const Notice: InlineAlertStory = {
   args: {
     variant: 'notice',
     children: (
@@ -70,7 +72,7 @@ export const Notice = {
   }
 };
 
-export const Negative = {
+export const Negative: InlineAlertStory = {
   args: {
     variant: 'negative',
     children: (
@@ -82,7 +84,7 @@ export const Negative = {
   }
 };
 
-export const LongContent = {
+export const LongContent: InlineAlertStory = {
   args: {
     variant: 'info'
   },
diff --git a/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
index 1c70c459f3e..00c574d3dd6 100644
--- a/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
@@ -14,7 +14,7 @@ import {Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert, SpectrumInlineAlertProps} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 
 type StoryArgs = SpectrumInlineAlertProps & {title: string, content: string};
@@ -42,7 +42,9 @@ const meta: Meta<StoryArgs> = {
 
 export default meta;
 
-export const Default = {
+export type InlineAlertStory = StoryObj<StoryArgs>;
+
+export const Default: InlineAlertStory = {
   render: (args) => (
     <InlineAlert {...args}>
       <Heading>{args.title}</Heading>
@@ -51,7 +53,7 @@ export const Default = {
   )
 };
 
-export const Dynamic = {
+export const Dynamic: InlineAlertStory = {
   render: (args) => <DynamicExample {...args} />
 };
 
diff --git a/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx b/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
index 045cd61319f..cecab0c49ad 100644
--- a/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
+++ b/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
@@ -14,8 +14,6 @@ import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
-type HelpTextStory = StoryObj<typeof TextField>;
-
 export default {
   title: 'HelpText',
   component: TextField,
@@ -25,11 +23,13 @@ export default {
   }
 } as Meta<typeof TextField>;
 
-export let Default: HelpTextStory = {
+export type HelpTextStory = StoryObj<typeof TextField>;
+
+export const Default: HelpTextStory = {
   name: 'description'
 };
 
-export const ErrorMessage = {
+export const ErrorMessage: HelpTextStory = {
   ...Default,
   args: {
     errorMessage: 'Create a password with at least 8 characters.',
@@ -38,7 +38,7 @@ export const ErrorMessage = {
   name: 'error message'
 };
 
-export const Disabled = {
+export const Disabled: HelpTextStory = {
   ...Default,
   args: {
     isDisabled: true
@@ -46,7 +46,7 @@ export const Disabled = {
   name: 'disabled'
 };
 
-export const LabelAlignEnd = {
+export const LabelAlignEnd: HelpTextStory = {
   ...Default,
   args: {
     labelAlign: 'end'
@@ -54,7 +54,7 @@ export const LabelAlignEnd = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: HelpTextStory = {
   ...Default,
   args: {
     labelPosition: 'side'
@@ -62,7 +62,7 @@ export const LabelPositionSide = {
   name: 'labelPosition: side'
 };
 
-export const NoVisibleLabel = {
+export const NoVisibleLabel: HelpTextStory = {
   ...Default,
   args: {
     label: null,
@@ -71,7 +71,7 @@ export const NoVisibleLabel = {
   name: 'no visible label'
 };
 
-export const CustomWidth = {
+export const CustomWidth: HelpTextStory = {
   ...Default,
   args: {
     width: '100px'
@@ -79,7 +79,7 @@ export const CustomWidth = {
   name: 'custom width'
 };
 
-export const CustomWidthLabelPositionSide = {
+export const CustomWidthLabelPositionSide: HelpTextStory = {
   ...Default,
   args: {
     width: '440px',
@@ -88,7 +88,7 @@ export const CustomWidthLabelPositionSide = {
   name: 'custom width, labelPosition: side'
 };
 
-export const ContainerWithTextAlignmentSetDescription = {
+export const ContainerWithTextAlignmentSetDescription: HelpTextStory = {
   args: {
     label: 'Password',
     description: 'Enter a single digit number'
@@ -97,7 +97,7 @@ export const ContainerWithTextAlignmentSetDescription = {
   decorators: [TextAlignDecorator]
 };
 
-export const ContainerWithTextAlignmentSetError = {
+export const ContainerWithTextAlignmentSetError: HelpTextStory = {
   args: {
     label: 'Password',
     errorMessage: 'Create a password with at least 8 characters.',
@@ -107,7 +107,7 @@ export const ContainerWithTextAlignmentSetError = {
   decorators: [TextAlignDecorator]
 };
 
-export const ContainerWithTextAlignmentSetDescriptionAndSetError = {
+export const ContainerWithTextAlignmentSetDescriptionAndSetError: HelpTextStory = {
   args: {
     label: 'Password',
     errorMessage: 'Create a password with at least 8 characters.',
diff --git a/packages/@react-spectrum/label/stories/HelpText.stories.tsx b/packages/@react-spectrum/label/stories/HelpText.stories.tsx
index f4bd0bd622d..91d733168e6 100644
--- a/packages/@react-spectrum/label/stories/HelpText.stories.tsx
+++ b/packages/@react-spectrum/label/stories/HelpText.stories.tsx
@@ -16,8 +16,6 @@ import React, {useState} from 'react';
 import {SpectrumTextFieldProps} from '@react-types/textfield';
 import {TextField} from '@react-spectrum/textfield';
 
-type HelpTextStory = StoryObj<typeof TextField>;
-
 const argTypes = {
   label: {
     control: 'text'
@@ -59,9 +57,11 @@ export default {
   argTypes: argTypes
 } as Meta<typeof TextField>;
 
-export let Default: HelpTextStory = {};
+export type HelpTextStory = StoryObj<typeof TextField>;
+
+export const Default: HelpTextStory = {};
 
-export let WithState: HelpTextStory = {
+export const WithState: HelpTextStory = {
   args: {
     label: 'Empty field',
     description: 'This input is only valid when it\'s empty.',
@@ -86,7 +86,7 @@ export let AriaLabel: HelpTextStory = {
   }
 };
 
-export const DescriptionAndCustomDescription = {
+export const DescriptionAndCustomDescription: StoryObj<SpectrumTextFieldProps & {customDescription: string}> = {
   args: {
     customDescription: 'Custom description.',
     'aria-describedby': 'custom-description'
diff --git a/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx b/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
index d7d131eec41..be21686e6f7 100644
--- a/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
+++ b/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
@@ -16,7 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
 import {LabeledValue} from '..';
 import {Link} from '@react-spectrum/link';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<typeof LabeledValue> = {
@@ -43,86 +43,88 @@ const meta: Meta<typeof LabeledValue> = {
     }
   }
 };
- 
+
 export default meta;
 
-export let Default = {
+export type LabeledValueStory = StoryObj<typeof LabeledValue>;
+
+export const Default: LabeledValueStory = {
   args: {label: 'Test', value: 'foo '.repeat(20)},
   name: 'String'
 };
 
-export let StringArray = {
+export const StringArray: LabeledValueStory = {
   args: {label: 'Test', value: ['wow', 'cool', 'awesome']},
   name: 'String array'
 };
 
-export let CalendarDateType = {
+export const CalendarDateType: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDate(2019, 6, 5)},
   name: 'CalendarDate'
 };
 
-export let CalendarDateTimeType = {
+export const CalendarDateTimeType: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120)},
   name: 'CalendarDateTime'
 };
 
-export let CalendarDateTimeTypeFormatOptions = {
+export const CalendarDateTimeTypeFormatOptions: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), formatOptions: {dateStyle: 'short', timeStyle: 'short'}},
   name: 'CalendarDateTime with formatOptions'
 };
 
-export let ZonedDateTimeType = {
+export const ZonedDateTimeType: LabeledValueStory = {
   args: {label: 'Test', value: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000)},
   name: 'ZonedDateTime'
 };
 
-export let DateType = {
+export const DateType: LabeledValueStory = {
   args: {label: 'Test', value: new Date(2000, 5, 5)},
   name: 'Date'
 };
 
-export let TimeType = {
+export const TimeType: LabeledValueStory = {
   args: {label: 'Test', value: new Time(9, 45)},
   name: 'Time'
 };
 
-export let CalendarDateRange = {
+export const CalendarDateRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 7, 5)}},
   name: 'RangeValue<CalendarDate>'
 };
 
-export let CalendarDateTimeRange = {
+export const CalendarDateTimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), end: new CalendarDateTime(2020, 3, 3, 12, 23, 24, 120)}},
   name: 'RangeValue<CalendarDateTime>'
 };
 
-export let ZonedDateTimeRange = {
+export const ZonedDateTimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), end: new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}},
   name: 'RangeValue<ZonedDateTime>'
 };
 
-export let DateRange = {
+export const DateRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new Date(2019, 6, 5), end: new Date(2019, 6, 10)}},
   name: 'RangeValue<Date>'
 };
 
-export let TimeRange = {
+export const TimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new Time(9, 45), end: new Time(10, 50)}},
   name: 'RangeValue<Time>'
 };
 
-export let Number = {
+export const Number: LabeledValueStory = {
   args: {label: 'Test', value: 10},
   name: 'Number'
 };
 
-export let NumberRange = {
+export const NumberRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: 10, end: 20}},
   name: 'RangeValue<Number>'
 };
 
 
-export let CustomComponent = {
+export const CustomComponent: LabeledValueStory = {
   args: {
     label: 'Test',
     value: <Link href="https://www.adobe.com">Adobe</Link>
@@ -130,7 +132,7 @@ export let CustomComponent = {
   name: 'Custom component'
 };
 
-export let WithContextualHelp = {
+export const WithContextualHelp: LabeledValueStory = {
   args: {
     label: 'Test',
     value: 25,
diff --git a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
index 6fe16d710e5..84f2cc68db8 100644
--- a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -42,9 +43,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light']}
   }
-};
+} as Meta<typeof Flex>;
+
+export type FlexStory = StoryObj<typeof Flex>;
 
-export const VerticalStackWithGap = () => (
+export const VerticalStackWithGap: FlexStory = () => (
   <Flex direction="column" width="size-2000" gap="size-100">
     <View backgroundColor="celery-600" height="size-800" />
     <View backgroundColor="blue-600" height="size-800" />
@@ -56,7 +59,7 @@ VerticalStackWithGap.story = {
   name: 'Vertical stack with gap'
 };
 
-export const HorizontalStackWithGap = () => (
+export const HorizontalStackWithGap: FlexStory = () => (
   <Flex direction="row" height="size-800" gap="size-100">
     <View backgroundColor="celery-600" width="size-800" />
     <View backgroundColor="blue-600" width="size-800" />
@@ -68,7 +71,7 @@ HorizontalStackWithGap.story = {
   name: 'Horizontal stack with gap'
 };
 
-export const WrappingWithGap = () => (
+export const WrappingWithGap: FlexStory = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
@@ -82,7 +85,7 @@ WrappingWithGap.story = {
   name: 'Wrapping with gap'
 };
 
-export const NestedFlexWithGap = () => (
+export const NestedFlexWithGap: FlexStory = () => (
   <Flex direction="column" gap="size-150">
     <View backgroundColor="celery-600" height="size-800" />
     <Flex direction="row" height="size-800" gap="size-100">
@@ -98,7 +101,7 @@ NestedFlexWithGap.story = {
   name: 'Nested flex with gap'
 };
 
-export const AlignCenter = () => (
+export const AlignCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="center">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -110,7 +113,7 @@ AlignCenter.story = {
   name: 'Align center'
 };
 
-export const AlignEnd = () => (
+export const AlignEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="end">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -122,7 +125,7 @@ AlignEnd.story = {
   name: 'Align end'
 };
 
-export const JustifyStart = () => (
+export const JustifyStart: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="start" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -134,7 +137,7 @@ JustifyStart.story = {
   name: 'Justify start'
 };
 
-export const JustifyCenter = () => (
+export const JustifyCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="center" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -146,7 +149,7 @@ JustifyCenter.story = {
   name: 'Justify center'
 };
 
-export const JustifyEnd = () => (
+export const JustifyEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="end" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -158,7 +161,7 @@ JustifyEnd.story = {
   name: 'Justify end'
 };
 
-export const JustifySpaceAround = () => (
+export const JustifySpaceAround: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-around" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -170,7 +173,7 @@ JustifySpaceAround.story = {
   name: 'Justify space-around'
 };
 
-export const JustifySpaceBetween = () => (
+export const JustifySpaceBetween: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-between" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -182,7 +185,7 @@ JustifySpaceBetween.story = {
   name: 'Justify space-between'
 };
 
-export const JustifySpaceEvenly = () => (
+export const JustifySpaceEvenly: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -194,7 +197,7 @@ JustifySpaceEvenly.story = {
   name: 'Justify space-evenly'
 };
 
-export const Ordered = () => (
+export const Ordered: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" order={2} width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
diff --git a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
index ce1aee081fe..0e7ae45a652 100644
--- a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -42,9 +43,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light']}
   }
-};
+} as Meta<typeof Grid>;
+
+export type GridStory = StoryObj<typeof Grid>;
 
-export const ExplicitGrid = () => (
+export const ExplicitGrid: GridStory = () => (
   <Grid
     areas={['header  header', 'sidebar content', 'footer  footer']}
     columns={['size-3000', 'auto']}
@@ -71,7 +74,7 @@ ExplicitGrid.story = {
   name: 'Explicit grid'
 };
 
-export const ImplicitGrid = () => (
+export const ImplicitGrid: GridStory = () => (
   <Grid
     columns={repeat('auto-fit', 'size-800')}
     autoRows="size-800"
diff --git a/packages/@react-spectrum/layout/stories/Flex.stories.tsx b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
index 5c2316cabf5..f1cd197f4ae 100644
--- a/packages/@react-spectrum/layout/stories/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -38,9 +39,11 @@ for (let color of baseColors) {
 
 export default {
   title: 'Flex'
-};
+} as Meta<typeof Flex>;
+
+export type FlexStory = StoryFn<typeof Flex>;
 
-export const VerticalStackWithGap = () => (
+export const VerticalStackWithGap: FlexStory = () => (
   <Flex direction="column" width="size-2000" gap="size-100">
     <View backgroundColor="celery-600" height="size-800" />
     <View backgroundColor="blue-600" height="size-800" />
@@ -52,7 +55,7 @@ VerticalStackWithGap.story = {
   name: 'Vertical stack with gap'
 };
 
-export const HorizontalStackWithGap = () => (
+export const HorizontalStackWithGap: FlexStory = () => (
   <Flex direction="row" height="size-800" gap="size-100">
     <View backgroundColor="celery-600" width="size-800" />
     <View backgroundColor="blue-600" width="size-800" />
@@ -64,7 +67,7 @@ HorizontalStackWithGap.story = {
   name: 'Horizontal stack with gap'
 };
 
-export const WrappingWithGap = () => (
+export const WrappingWithGap: FlexStory = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
@@ -78,7 +81,7 @@ WrappingWithGap.story = {
   name: 'Wrapping with gap'
 };
 
-export const NestedFlexWithGap = () => (
+export const NestedFlexWithGap: FlexStory = () => (
   <Flex direction="column" gap="size-150">
     <View backgroundColor="celery-600" height="size-800" />
     <Flex direction="row" height="size-800" gap="size-100">
@@ -94,7 +97,7 @@ NestedFlexWithGap.story = {
   name: 'Nested flex with gap'
 };
 
-export const AlignCenter = () => (
+export const AlignCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="center">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -106,7 +109,7 @@ AlignCenter.story = {
   name: 'Align center'
 };
 
-export const AlignEnd = () => (
+export const AlignEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="end">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -118,7 +121,7 @@ AlignEnd.story = {
   name: 'Align end'
 };
 
-export const JustifyStart = () => (
+export const JustifyStart: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="start" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -130,7 +133,7 @@ JustifyStart.story = {
   name: 'Justify start'
 };
 
-export const JustifyCenter = () => (
+export const JustifyCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="center" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -142,7 +145,7 @@ JustifyCenter.story = {
   name: 'Justify center'
 };
 
-export const JustifyEnd = () => (
+export const JustifyEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="end" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -154,7 +157,7 @@ JustifyEnd.story = {
   name: 'Justify end'
 };
 
-export const JustifySpaceAround = () => (
+export const JustifySpaceAround: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-around" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -166,7 +169,7 @@ JustifySpaceAround.story = {
   name: 'Justify space-around'
 };
 
-export const JustifySpaceBetween = () => (
+export const JustifySpaceBetween: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-between" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -178,7 +181,7 @@ JustifySpaceBetween.story = {
   name: 'Justify space-between'
 };
 
-export const JustifySpaceEvenly = () => (
+export const JustifySpaceEvenly: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -190,7 +193,7 @@ JustifySpaceEvenly.story = {
   name: 'Justify space-evenly'
 };
 
-export const Ordered = () => (
+export const Ordered: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" order={2} width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -202,7 +205,7 @@ Ordered.story = {
   name: 'ordered'
 };
 
-export const Responsive = () => (
+export const Responsive: FlexStory = () => (
   <Flex
     direction={{base: 'column', L: 'row'}}
     gap={{base: 'size-100', M: 'size-250', L: 'size-350'}}>
diff --git a/packages/@react-spectrum/layout/stories/Grid.stories.tsx b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
index 4488255682a..0b6fadea5b9 100644
--- a/packages/@react-spectrum/layout/stories/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -38,9 +39,11 @@ for (let color of baseColors) {
 
 export default {
   title: 'Grid'
-};
+} as Meta<typeof Grid>;
+
+export type GridStory = StoryFn<typeof Grid>;
 
-export const ExplicitGrid = () => (
+export const ExplicitGrid: GridStory = () => (
   <Grid
     areas={['header  header', 'sidebar content', 'footer  footer']}
     columns={['size-3000', 'auto']}
@@ -67,7 +70,7 @@ ExplicitGrid.story = {
   name: 'Explicit grid'
 };
 
-export const ImplicitGrid = () => (
+export const ImplicitGrid: GridStory = () => (
   <Grid
     columns={repeat('auto-fit', 'size-800')}
     autoRows="size-800"
@@ -84,7 +87,7 @@ ImplicitGrid.story = {
   name: 'Implicit grid'
 };
 
-export const Responsive = () => (
+export const Responsive: GridStory = () => (
   <Grid
     columns={{
       base: repeat('auto-fit', 'size-800'),
diff --git a/packages/@react-spectrum/link/chromatic/Link.stories.tsx b/packages/@react-spectrum/link/chromatic/Link.stories.tsx
index ba4e9262916..b6f1b19bb7e 100644
--- a/packages/@react-spectrum/link/chromatic/Link.stories.tsx
+++ b/packages/@react-spectrum/link/chromatic/Link.stories.tsx
@@ -11,34 +11,34 @@
  */
 
 import {Link} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumLinkProps} from '@react-types/link';
 
 const meta: Meta<SpectrumLinkProps> = {
   title: 'Link',
   component: Link
-};
+} as Meta<SpectrumLinkProps>;
 
 export default meta;
 
-const Template = (args) => <Link {...args}>This is a React Spectrum Link</Link>;
+export type LinkStory = StoryObj<SpectrumLinkProps>;
 
-export const Default = {
-  render: Template
+export const Default: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>
 };
 
-export const Secondary = {
-  render: Template,
+export const Secondary: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {variant: 'secondary'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {isQuiet: true}
 };
 
-export const QuietSecondary = {
-  render: Template,
+export const QuietSecondary: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {...Secondary.args, ...Quiet.args}
 };
diff --git a/packages/@react-spectrum/list/chromatic/ListView.stories.tsx b/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
index 5301c55fb9a..f20477600df 100644
--- a/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
@@ -22,9 +22,9 @@ import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
 import Info from '@spectrum-icons/workflow/Info';
-import {Item, ListView} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Item, ListView, SpectrumListViewProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 let states = [
   {isQuiet: true},
@@ -64,7 +64,7 @@ const meta: Meta = {
     // noticed a small shifting before final layout, delaying so chromatic doesn't hit that
     chromatic: {delay: 10000}
   }
-};
+} as Meta<Omit<typeof ListView, 'children'>>;
 
 export default meta;
 
@@ -89,7 +89,7 @@ const renderActions = (
   </>
 );
 
-const Template = ({combos, ...args}) => (
+const Template = ({combos, ...args}: Omit<SpectrumListViewProps<any>, 'children'> & {combos: any[][]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -140,31 +140,33 @@ function renderEmptyState() {
   );
 }
 
-const TemplateEmptyState = () => (
-  <ListView width="size-3400" height="size-6000" renderEmptyState={renderEmptyState}>
+export type ListViewStory = StoryObj<Omit<typeof ListView, 'children'>>;
+
+const TemplateEmptyState = (props: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element => (
+  <ListView {...props} width="size-3400" height="size-6000" renderEmptyState={renderEmptyState}>
     {[]}
   </ListView>
 );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  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: StoryObj<typeof Template> = {
+  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: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
   name: 'all visual option combos 3 of 3'
 };
 
-export const Empty = {
-  render: TemplateEmptyState,
+export const Empty: ListViewStory = {
+  render: (args) => <TemplateEmptyState {...args} />,
   name: 'empty state'
 };
diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 9e85f318880..b42d9449eb9 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -16,11 +16,11 @@ import Folder from '@spectrum-icons/illustrations/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
-import {Item, ListView} from '../';
+import {Item, ListView, SpectrumListViewProps} from '../';
 import {Link} from '@react-spectrum/link';
 import {Meta, StoryObj} from '@storybook/react';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
-import React, {useEffect, useState} from 'react';
+import React, {JSX, useEffect, useState} from 'react';
 import {useAsyncList, useListData} from '@react-stately/data';
 
 export const items: any = [
@@ -64,7 +64,7 @@ const itemsWithThumbs = [
   {key: '9', title: 'file of great boi', illustration: <File />}
 ];
 
-export function renderEmptyState() {
+export function renderEmptyState(): JSX.Element {
   return (
     <IllustratedMessage>
       <svg width="150" height="103" viewBox="0 0 150 103">
@@ -461,13 +461,13 @@ function EmptyTest() {
   );
 }
 
-export const RemoveListItems = {
+export const RemoveListItems: StoryObj<typeof Demo> = {
   render: (args) => (
     <Demo {...args} />
   )
 };
 
-function Demo(props) {
+function Demo(props: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element {
   let [items, setItems] = useState<{key: number, label: string}[]>([
     {key: 1, label: 'utilities'}
   ]);
diff --git a/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx b/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
index 49683f70e5d..5bfa71862c5 100644
--- a/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
@@ -7,9 +7,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Delete from '@spectrum-icons/workflow/Delete';
 import Folder from '@spectrum-icons/illustrations/Folder';
 import Info from '@spectrum-icons/workflow/Info';
-import {Item, ListView} from '../';
+import {Item, ListView, SpectrumListViewProps} from '../';
 import {Meta, StoryObj} from '@storybook/react';
-import React from 'react';
+import React, {JSX} from 'react';
 import RemoveCircle from '@spectrum-icons/workflow/RemoveCircle';
 import {Text} from '@react-spectrum/text';
 import {useListData} from '@react-stately/data';
@@ -151,7 +151,7 @@ function renderActionsExample(renderActions, props?) {
   );
 }
 
-export const FocusExample = (args) => {
+export const FocusExample = (args: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element => {
   const items = [
     {id: 1, name: 'Adobe Photoshop'},
     {id: 2, name: 'Adobe XD'},
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
index 653af3d77a6..23f4227ac4c 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
@@ -2,19 +2,19 @@ import {action} from '@storybook/addon-actions';
 import {ActionMenu} from '@react-spectrum/menu';
 import {chain} from '@react-aria/utils';
 import Delete from '@spectrum-icons/workflow/Delete';
+import {DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import Edit from '@spectrum-icons/workflow/Edit';
 import File from '@spectrum-icons/illustrations/File';
 import {Flex} from '@react-spectrum/layout';
 import Folder from '@spectrum-icons/illustrations/Folder';
-import {Item, ListView} from '../';
+import {Item, ListView, SpectrumListViewProps} from '../';
 import {ItemDropTarget, Key} from '@react-types/shared';
 import {items} from './ListView.stories';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
-import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
 
-export function DragExample(props?) {
+export function DragExample(props: {listViewProps: SpectrumListViewProps<any>, dragHookOptions: DragAndDropOptions, getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {listViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.key === key);
@@ -84,10 +84,10 @@ let itemList2 = [
   {id: '12', type: 'item', textValue: 'Item Twelve'}
 ];
 
-export function ReorderExample(props) {
+export function ReorderExample(props: SpectrumListViewProps<any> & DragAndDropOptions & {getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {items, onDrop, onDragStart, onDragEnd, disabledKeys = ['2'], ...otherprops} = props;
   let list = useListData({
-    initialItems: items || itemList1
+    initialItems: items ? [...items] : itemList1
   });
 
   // Use a random drag type so the items can only be reordered within this list and not dragged elsewhere.
@@ -118,7 +118,7 @@ export function ReorderExample(props) {
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     async onDrop(e) {
-      onDrop(e);
+      onDrop?.(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
         let keys: Key[] = [];
         for (let item of e.items) {
@@ -167,7 +167,7 @@ export function ReorderExample(props) {
   );
 }
 
-export function DragIntoItemExample(props) {
+export function DragIntoItemExample(props: {listViewProps: SpectrumListViewProps<any>, dragHookOptions?: DragAndDropOptions, dropHookOptions?: DragAndDropOptions, getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {
     listViewProps = {},
     dragHookOptions = {},
@@ -275,18 +275,18 @@ export function DragIntoItemExample(props) {
   );
 }
 
-export function DragBetweenListsExample(props) {
+export function DragBetweenListsExample(props: SpectrumListViewProps<any> & DragAndDropOptions & {getAllowedDropOperationsAction?: () => void, items1?: any[], items2?: any[]}): JSX.Element {
   let {onDragStart, onDragEnd, onDrop} = props;
   let onDropAction = chain(action('onDrop'), onDrop);
   onDragStart = chain(action('dragStart'), onDragStart);
   onDragEnd = chain(action('dragEnd'), onDragEnd);
 
   let list1 = useListData({
-    initialItems: props.items1 || itemList1
+    initialItems: props.items1 ? [...props.items1] : itemList1
   });
 
   let list2 = useListData({
-    initialItems: props.items2 || itemList2
+    initialItems: props.items2 ? [...props.items2] : itemList2
   });
 
   let onMove = (keys: Key[], target: ItemDropTarget) => {
@@ -400,7 +400,7 @@ export function DragBetweenListsExample(props) {
   );
 }
 
-export function DragBetweenListsRootOnlyExample(props) {
+export function DragBetweenListsRootOnlyExample(props: any): JSX.Element {
   let {
     listViewProps = {},
     dragHookOptions = {},
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
index 50f93f58fd9..e41d2043a4a 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
@@ -1,11 +1,11 @@
 import {action} from '@storybook/addon-actions';
 import {DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
+import {DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import {Flex} from '@react-spectrum/layout';
 import Folder from '@spectrum-icons/illustrations/Folder';
-import {Item, ListView} from '../';
-import React from 'react';
+import {Item, ListView, SpectrumListViewProps} from '../';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
-import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
 
 let itemProcessor = async (items, acceptedDragTypes) => {
@@ -48,7 +48,7 @@ let folderList2 = [
   {identifier: '13', type: 'unique_type', name: 'invalid drag item'}
 ];
 
-export function DragExampleUtilHandlers(props) {
+export function DragExampleUtilHandlers(props: {listViewProps: SpectrumListViewProps<any>, dndOptions: DragAndDropOptions}): JSX.Element {
   let {listViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -92,7 +92,7 @@ export function DragExampleUtilHandlers(props) {
   );
 }
 
-export function ReorderExampleUtilHandlers(props) {
+export function ReorderExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, dndOptions?: DragAndDropOptions, items?: any[]}): JSX.Element {
   let {listViewProps, dndOptions, items} = props;
   let list = useListData({
     initialItems: (items as typeof folderList1) || folderList1,
@@ -167,7 +167,7 @@ export function ReorderExampleUtilHandlers(props) {
   );
 }
 
-export function ItemDropExampleUtilHandlers(props) {
+export function ItemDropExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -231,7 +231,7 @@ export function ItemDropExampleUtilHandlers(props) {
   );
 }
 
-export function RootDropExampleUtilHandlers(props) {
+export function RootDropExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -322,7 +322,7 @@ export function RootDropExampleUtilHandlers(props) {
   );
 }
 
-export function InsertExampleUtilHandlers(props) {
+export function InsertExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -422,7 +422,7 @@ export function InsertExampleUtilHandlers(props) {
   );
 }
 
-export function FinderDropUtilHandlers(props) {
+export function FinderDropUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -501,7 +501,7 @@ export function FinderDropUtilHandlers(props) {
   );
 }
 
-export function DragBetweenListsComplex(props) {
+export function DragBetweenListsComplex(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -725,7 +725,7 @@ export function DragBetweenListsComplex(props) {
   );
 }
 
-export function DragBetweenListsOverride(props) {
+export function DragBetweenListsOverride(props: {listViewProps?: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let list1 = useListData({
     initialItems: [
       {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
diff --git a/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx b/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
index 9850fe3ab27..b5c726de296 100644
--- a/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
@@ -7,7 +7,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 import Folder from '@spectrum-icons/illustrations/Folder';
 import {Item, ListView} from '../';
 import {items} from './ListView.stories';
-import {Meta, StoryObj} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import {Text} from '@react-spectrum/text';
 
@@ -105,7 +105,7 @@ export const DisableFolderSelection: ListViewStory = {
   name: 'disable folders selection'
 };
 
-export const Links = (args) => {
+export const Links: StoryFn<typeof ListView> = (args) => {
   return (
     <ListView aria-label="ListView with links" width="250px" height={400} onSelectionChange={action('onSelectionChange')} {...args}>
       <Item key="https://adobe.com/" href="https://adobe.com/">Adobe</Item>
diff --git a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
index 8bcbf2154f1..08873024fc8 100644
--- a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
+++ b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Item, ListBox, Section} from '../';
 import {Label} from '@react-spectrum/label';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumListBoxProps} from '@react-types/listbox';
 import {Text} from '@react-spectrum/text';
 
@@ -91,13 +91,13 @@ const meta: Meta<SpectrumListBoxProps<object>> = {
 
 export default meta;
 
-const Template = (args: SpectrumListBoxProps<object>) => (
+const Template = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={flatOptions}>
     {(item) => <Item key={item.name}>{item.name}</Item>}
   </ListBox>
 );
 
-const TemplateWithSections = (args: SpectrumListBoxProps<object>) => (
+const TemplateWithSections = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={withSection}>
     {item => (
       <Section key={item.name} items={item.children} title={item.name}>
@@ -107,7 +107,7 @@ const TemplateWithSections = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-const TemplateNoTitle = (args: SpectrumListBoxProps<object>) => (
+const TemplateNoTitle = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={withSection}>
     {item => (
       <Section key={item.name} items={item.children}>
@@ -117,7 +117,7 @@ const TemplateNoTitle = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-let customOption = (item) => {
+let customOption = (item): JSX.Element => {
   let Icon = iconMap[item.icon];
   return (
     <Item textValue={item.name} key={item.name}>
@@ -127,7 +127,7 @@ let customOption = (item) => {
   );
 };
 
-const TemplateComplex = (args: SpectrumListBoxProps<object>) => (
+const TemplateComplex = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={hardModeProgrammatic}>
     {item => (
       <Section key={item.name} items={item.children} title={item.name}>
@@ -137,7 +137,7 @@ const TemplateComplex = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-const TemplateAvatars = (args: SpectrumListBoxProps<object>) => (
+const TemplateAvatars = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={flatOptions}>
     {(item) => (
       <Item key={item.name}>
@@ -148,31 +148,31 @@ const TemplateAvatars = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'flat list with selection',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const Sections = {
-  render: TemplateWithSections,
+export const Sections: StoryObj<typeof TemplateWithSections> = {
+  render: (args) => <TemplateWithSections {...args} />,
   name: 'with sections',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const SectionsNoTitle = {
-  render: TemplateNoTitle,
+export const SectionsNoTitle: StoryObj<typeof TemplateNoTitle> = {
+  render: (args) => <TemplateNoTitle {...args} />,
   name: 'sections without titles',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const ComplexItems = {
-  render: TemplateComplex,
+export const ComplexItems: StoryObj<typeof TemplateComplex> = {
+  render: (args) => <TemplateComplex {...args} />,
   name: 'complex items',
   args: {selectedKeys: ['Puppy', 'Cut'], disabledKeys: ['Paste'], selectionMode: 'multiple'}
 };
 
-export const WithAvatar = {
-  render: TemplateAvatars,
+export const WithAvatar: StoryObj<typeof TemplateAvatars> = {
+  render: (args) => <TemplateAvatars {...args} />,
   name: 'with avatar'
 };
diff --git a/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
index 5f29e11e561..f47b61ea415 100644
--- a/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
+++ b/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
@@ -18,8 +18,9 @@ import Draw from '@spectrum-icons/workflow/Draw';
 import intlMessages from './intlMessages.json';
 import {Item, ListBox, Section} from '..';
 import {Label} from '@react-spectrum/label';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -34,9 +35,11 @@ export default {
     }
   },
   excludeStories: ['TranslateListBox']
-};
+} as Meta<typeof ListBox>;
+
+type ListBoxStory = StoryFn<typeof ListBox>;
 
-export let TranslateListBox = () => {
+export const TranslateListBox = (): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -85,37 +88,37 @@ export let TranslateListBox = () => {
   );
 };
 
-export const ArabicComplex = () => (
+export const ArabicComplex: ListBoxStory = () => (
   <Provider locale="ar-AE">
     <TranslateListBox />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: ListBoxStory = () => (
   <Provider locale="he-IL">
     <TranslateListBox />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: ListBoxStory = () => (
   <Provider locale="ja-JP">
     <TranslateListBox />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: ListBoxStory = () => (
   <Provider locale="ko-KR">
     <TranslateListBox />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: ListBoxStory = () => (
   <Provider locale="zh-CN">
     <TranslateListBox />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: ListBoxStory = () => (
   <Provider locale="zh-TW">
     <TranslateListBox />
   </Provider>
diff --git a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
index cc8e70ad895..abf01e1bad4 100644
--- a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
+++ b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text} from '@adobe/react-spectrum';
+import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, SpectrumListBoxProps, Text} from '@adobe/react-spectrum';
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
@@ -24,8 +24,9 @@ import {FocusScope} from '@react-aria/focus';
 import {Item, ListBox, Section} from '../';
 import {Key} from '@react-types/shared';
 import {Label} from '@react-spectrum/label';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React, {useRef, useState} from 'react';
+import React, {JSX, useRef, useState} from 'react';
 import {TranslateListBox} from './../chromatic/ListBoxLanguages.stories';
 import {useAsyncList, useTreeData} from '@react-stately/data';
 
@@ -104,7 +105,9 @@ for (let i = 0; i < 50; i++) {
 export default {
   title: 'ListBox',
   excludeStories: ['FocusExample']
-};
+} as Meta<typeof ListBox>;
+
+type ListBoxStory = StoryObj<typeof ListBox>;
 
 function StoryDecorator(props) {
   return (
@@ -124,7 +127,7 @@ function StoryDecorator(props) {
   );
 }
 
-export const DefaultListBox = {
+export const DefaultListBox: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={flatOptions}>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -138,7 +141,7 @@ export const DefaultListBox = {
   name: 'Default ListBox'
 };
 
-export const ListBoxWSections = {
+export const ListBoxWSections: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -156,7 +159,7 @@ export const ListBoxWSections = {
   name: 'ListBox w/ sections'
 };
 
-export const ListBoxWManySectionsAndSelection = {
+export const ListBoxWManySectionsAndSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -179,7 +182,7 @@ export const ListBoxWManySectionsAndSelection = {
   name: 'ListBox w/ many sections and selection'
 };
 
-export const ListBoxWSectionsAndFalsyIds = {
+export const ListBoxWSectionsAndFalsyIds: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -202,7 +205,7 @@ export const ListBoxWSectionsAndFalsyIds = {
   name: 'ListBox w/ sections and falsy ids'
 };
 
-export const ListBoxWSectionsAndNoTitle = {
+export const ListBoxWSectionsAndNoTitle: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -220,7 +223,7 @@ export const ListBoxWSectionsAndNoTitle = {
   name: 'ListBox w/ sections and no title'
 };
 
-export const Static = {
+export const Static: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Item>One</Item>
@@ -235,7 +238,7 @@ export const Static = {
   )]
 };
 
-export const StaticWithSectionsAndSelection = {
+export const StaticWithSectionsAndSelection: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" selectionMode="multiple">
       <Section title="Section 1">
@@ -258,7 +261,7 @@ export const StaticWithSectionsAndSelection = {
   name: 'Static with sections and selection'
 };
 
-export const StaticWithSectionsAndNoTitle = {
+export const StaticWithSectionsAndNoTitle: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Section aria-label="Section 1">
@@ -281,7 +284,7 @@ export const StaticWithSectionsAndNoTitle = {
   name: 'Static with sections and no title'
 };
 
-export const WithDefaultSelectedOption = {
+export const WithDefaultSelectedOption: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -305,7 +308,7 @@ export const WithDefaultSelectedOption = {
   name: 'with default selected option'
 };
 
-export const SingleSelectionWithDefaultSelectedOption = {
+export const SingleSelectionWithDefaultSelectedOption: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -325,7 +328,7 @@ export const SingleSelectionWithDefaultSelectedOption = {
   name: 'single selection with default selected option'
 };
 
-export const StaticWithDefaultSelectedOptions = {
+export const StaticWithDefaultSelectedOptions: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -354,7 +357,7 @@ export const StaticWithDefaultSelectedOptions = {
   name: 'static with default selected options'
 };
 
-export const WithSelectedOptionsControlled = {
+export const WithSelectedOptionsControlled: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -378,7 +381,7 @@ export const WithSelectedOptionsControlled = {
   name: 'with selected options (controlled)'
 };
 
-export const StaticWithSelectedOptionsControlled = {
+export const StaticWithSelectedOptionsControlled: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -407,7 +410,7 @@ export const StaticWithSelectedOptionsControlled = {
   name: 'static with selected options (controlled)'
 };
 
-export const WithDisabledOptions = {
+export const WithDisabledOptions: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -429,7 +432,7 @@ export const WithDisabledOptions = {
   name: 'with disabled options'
 };
 
-export const StaticWithDisabledOptions = {
+export const StaticWithDisabledOptions: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" disabledKeys={['3', '5']}>
       <Section title="Section 1">
@@ -453,7 +456,7 @@ export const StaticWithDisabledOptions = {
   name: 'static with disabled options'
 };
 
-export const MultipleSelection = {
+export const MultipleSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -478,7 +481,7 @@ export const MultipleSelection = {
   name: 'Multiple selection'
 };
 
-export const MultipleSelectionStatic = {
+export const MultipleSelectionStatic: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -507,7 +510,7 @@ export const MultipleSelectionStatic = {
   name: 'Multiple selection, static'
 };
 
-export const NoSelectionAllowed = {
+export const NoSelectionAllowed: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -525,7 +528,7 @@ export const NoSelectionAllowed = {
   name: 'No selection allowed'
 };
 
-export const NoSelectionAllowedStatic = {
+export const NoSelectionAllowedStatic: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Section title="Section 1">
@@ -548,7 +551,7 @@ export const NoSelectionAllowedStatic = {
   name: 'No selection allowed, static'
 };
 
-export const ListBoxWithAutoFocusTrue = {
+export const ListBoxWithAutoFocusTrue: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection} autoFocus>
       {(item) => (
@@ -566,7 +569,7 @@ export const ListBoxWithAutoFocusTrue = {
   name: 'ListBox with autoFocus=true'
 };
 
-export const ListBoxWithAutoFocusComplex = {
+export const ListBoxWithAutoFocusComplex: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -590,7 +593,7 @@ export const ListBoxWithAutoFocusComplex = {
   name: 'ListBox with autoFocus=true, selectionMode=single, default selected key (uncontrolled)'
 };
 
-export const ListBoxWithAutoFocusFirst = {
+export const ListBoxWithAutoFocusFirst: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -614,7 +617,7 @@ export const ListBoxWithAutoFocusFirst = {
   name: 'ListBox with autoFocus="first"'
 };
 
-export const ListBoxWithAutoFocusLast = {
+export const ListBoxWithAutoFocusLast: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -638,7 +641,7 @@ export const ListBoxWithAutoFocusLast = {
   name: 'ListBox with autoFocus="last"'
 };
 
-export const ListBoxWithKeyboardSelectionWrapping = {
+export const ListBoxWithKeyboardSelectionWrapping: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -662,7 +665,7 @@ export const ListBoxWithKeyboardSelectionWrapping = {
   name: 'ListBox with keyboard selection wrapping'
 };
 
-export const WithSemanticElementsStatic = {
+export const WithSemanticElementsStatic: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -711,7 +714,7 @@ export const WithSemanticElementsStatic = {
   name: 'with semantic elements (static)'
 };
 
-export const WithSemanticElementsGenerativeMultipleSelection = {
+export const WithSemanticElementsGenerativeMultipleSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -734,7 +737,7 @@ export const WithSemanticElementsGenerativeMultipleSelection = {
   name: 'with semantic elements (generative), multiple selection'
 };
 
-export const IsLoading = {
+export const IsLoading: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={[] as any[]} isLoading>
       {(item) => <Item>{item.name}</Item>}
@@ -748,7 +751,7 @@ export const IsLoading = {
   name: 'isLoading'
 };
 
-export const IsLoadingMore = {
+export const IsLoadingMore: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={flatOptions} isLoading>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -762,7 +765,7 @@ export const IsLoadingMore = {
   name: 'isLoading more'
 };
 
-export const AsyncLoading = {
+export const AsyncLoading: ListBoxStory = {
   render: () => (
     <AsyncLoadingExample />
   ),
@@ -774,7 +777,7 @@ export const AsyncLoading = {
   name: 'async loading'
 };
 
-export const AsyncLoadingResizable = {
+export const AsyncLoadingResizable: ListBoxStory = {
   render: () => (
     <div style={{display: 'flex', height: '200px', flexGrow: 1, minWidth: '200px', padding: '10px', resize: 'both', overflow: 'auto'}}>
       <AsyncLoadingExample />
@@ -791,21 +794,21 @@ export const AsyncLoadingResizable = {
   name: 'async loading, resizable'
 };
 
-export const ListboxContainers = {
+export const ListboxContainers: ListBoxStory = {
   render: () => <App />,
-  decorators: null,
+  decorators: undefined,
   name: 'listbox containers'
 };
 
-export const RestoreFocusExample = {
+export const RestoreFocusExample: ListBoxStory = {
   render: (args) => <FocusExample {...args} />,
-  decorators: null,
+  decorators: undefined,
   name: 'restore focus after deleting selected items'
 };
 
-export const WithTranslations = {
+export const WithTranslations: ListBoxStory = {
   render: () => <TranslateListBox />,
-  decorators: null,
+  decorators: undefined,
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
@@ -935,7 +938,7 @@ function App() {
   );
 }
 
-export function FocusExample(args = {}) {
+export let FocusExample = (args: Omit<SpectrumListBoxProps<any>, 'children'> = {}): JSX.Element => {
   let tree = useTreeData({
     initialItems: withSection,
     getKey: (item) => item.name,
@@ -973,7 +976,7 @@ export function FocusExample(args = {}) {
                 {...args}>
                 {item => item?.children?.length ? (
                   <Section key={item.value.name} items={item.children} title={item.value.name}>
-                    {item => <Item key={item.value.name}>{item.value.name}</Item>}
+                    {(item: any) => <Item key={item.value.name}>{item.value.name}</Item>}
                   </Section>
                 ) : null}
               </ListBox>
@@ -994,9 +997,9 @@ export function FocusExample(args = {}) {
       </Flex>
     </FocusScope>
   );
-}
+};
 
-export const Links = (args) => {
+export const Links: StoryFn<typeof ListBox> = (args: Omit<SpectrumListBoxProps<any>, 'children'>) => {
   return (
     <ListBox aria-label="ListBox with links" width="250px" height={400} onSelectionChange={action('onSelectionChange')} {...args}>
       <Item key="https://adobe.com/" href="https://adobe.com/">Adobe</Item>
@@ -1027,7 +1030,7 @@ Links.story = {
   }
 };
 
-export const WithAvatars = {
+export const WithAvatars: ListBoxStory = {
   render: () => (
     <ListBox aria-label="Listbox with avatars" width="350px">
       <Item textValue="Person 1">
@@ -1056,7 +1059,7 @@ interface ItemValue {
   items?: Array<ItemValue> | null
 }
 
-export function WithTreeData() {
+export let WithTreeData: StoryFn<typeof ListBox> = () => {
   let tree = useTreeData<ItemValue>({
     initialItems: [
       {
@@ -1114,4 +1117,4 @@ export function WithTreeData() {
       )}
     </ListBox>
   );
-}
+};
diff --git a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
index f69f55871b0..418edd08c9a 100644
--- a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Item, Menu, MenuTrigger, Section} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 
 const meta: Meta<SpectrumMenuTriggerProps> = {
@@ -97,7 +97,7 @@ let withArabic = [
   {name: 'لصق', icon: 'Paste', shortcut: '⌘V'}
 ];
 
-const Template = (args: SpectrumMenuTriggerProps) => (
+const Template = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -108,7 +108,7 @@ const Template = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const TemplateWithSections = (args: SpectrumMenuTriggerProps) => (
+const TemplateWithSections = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -123,7 +123,7 @@ const TemplateWithSections = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const customMenuItem = (item) => {
+const customMenuItem = (item): JSX.Element => {
   let Icon = iconMap[item.icon];
   return (
     <Item childItems={item.children} textValue={item.name} key={item.name}>
@@ -134,7 +134,7 @@ const customMenuItem = (item) => {
   );
 };
 
-const TemplateWithIcons = (args: SpectrumMenuTriggerProps) => (
+const TemplateWithIcons = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -149,7 +149,7 @@ const TemplateWithIcons = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps) => (
+const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -160,88 +160,90 @@ const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-export const Default = {
-  render: Template,
+export type MenuTriggerStory = StoryObj<typeof Template>;
+
+export const Default: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'flat list'
 };
 
-export const WithSections = {
-  render: TemplateWithSections,
+export const WithSections: MenuTriggerStory = {
+  render: (args) => <TemplateWithSections {...args} />,
   name: 'with sections'
 };
 
-export const Complex = {
-  render: TemplateWithIcons,
+export const Complex: MenuTriggerStory = {
+  render: (args) => <TemplateWithIcons {...args} />,
   name: 'complex items'
 };
 
-export const AlignEnd = {
-  render: Template,
+export const AlignEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'align="end"',
   args: {align: 'end'}
 };
 
-export const DirectionTop = {
-  render: Template,
+export const DirectionTop: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="top"',
   args: {direction: 'top'}
 };
 
-export const DirectionBottom = {
-  render: Template,
+export const DirectionBottom: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="bottom"',
   args: {direction: 'bottom'}
 };
 
-export const DirectionStart = {
-  render: Template,
+export const DirectionStart: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="start"',
   args: {direction: 'start'}
 };
 
-export const DirectionStartEnd = {
-  render: Template,
+export const DirectionStartEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="start", align="end"',
   args: {direction: 'start', align: 'end'}
 };
 
-export const DirectionEnd = {
-  render: Template,
+export const DirectionEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="end"',
   args: {direction: 'end'}
 };
 
-export const DirectionEndEnd = {
-  render: Template,
+export const DirectionEndEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="end" align="end"',
   args: {direction: 'end', align: 'end'}
 };
 
-export const DirectionLeft = {
-  render: Template,
+export const DirectionLeft: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="left"',
   args: {direction: 'left'}
 };
 
-export const DirectionLeftEnd = {
-  render: Template,
+export const DirectionLeftEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="left", align="end"',
   args: {direction: 'left', align: 'end'}
 };
 
-export const DirectionRight = {
-  render: Template,
+export const DirectionRight: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="right"',
   args: {direction: 'right'}
 };
 
-export const DirectionRightEnd = {
-  render: Template,
+export const DirectionRightEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="right", align="end"',
   args: {direction: 'right', align: 'end'}
 };
 
-export const ArabicComplex = {
-  render: TemplateArabicWithIcons,
+export const ArabicComplex: MenuTriggerStory = {
+  render: (args) => <TemplateArabicWithIcons {...args} />,
   name: 'Arabic complex items'
 };
diff --git a/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
index bd2b2d950d5..4b108bed6f0 100644
--- a/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
@@ -15,11 +15,12 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
-import {Item, Menu, MenuTrigger} from '../';
+import {Item, Menu, MenuTrigger, SpectrumMenuTriggerProps} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export default {
@@ -33,7 +34,7 @@ export default {
     }
   },
   excludeStories: ['TranslateMenu']
-};
+} as Meta<typeof MenuTrigger>;
 
 let iconMap = {
   Copy,
@@ -58,7 +59,7 @@ const customMenuItem = (item, strings) => {
   );
 };
 
-export let TranslateMenu = (props) => {
+export let TranslateMenu = (props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -73,37 +74,39 @@ export let TranslateMenu = (props) => {
   );
 };
 
-export const ArabicComplex = () => (
+export type MenuTriggerLanguagesStory = StoryFn<typeof MenuTrigger>;
+
+export const ArabicComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ar-AE">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="he-IL">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ja-JP">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ko-KR">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="zh-CN">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="zh-TW">
     <TranslateMenu isOpen />
   </Provider>
diff --git a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
index 3bdcd142198..096f91f23a3 100644
--- a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
@@ -18,7 +18,7 @@ import AnnotatePen from '@spectrum-icons/workflow/AnnotatePen';
 import {Item, Menu, MenuTrigger, Section, SubmenuTrigger} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
 import {Meta, StoryObj} from '@storybook/react';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
@@ -170,7 +170,7 @@ Mobile.play = async ({canvasElement}) => {
   await within(body).findByText('Baseline');
 };
 
-function DefaultSubmenu(props) {
+function DefaultSubmenu(props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element {
   return (
     <MenuTrigger {...props} isOpen>
       <ActionButton>
diff --git a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
index a0a1d3cf456..25c3760b314 100644
--- a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
@@ -16,9 +16,9 @@ import {Alignment} from '@react-types/shared';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Item} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {SpectrumActionMenuProps} from '@react-types/menu';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 
@@ -29,7 +29,7 @@ const meta: Meta<SpectrumActionMenuProps<object>> = {
 
 export default meta;
 
-const Template = (args) => (
+const Template = (args: Omit<SpectrumActionMenuProps<object>, 'children'>): JSX.Element => (
   <ActionMenu onAction={action('action')} {...args}>
     <Item key="one">One</Item>
     <Item key="two">Two</Item>
@@ -119,47 +119,50 @@ function DirectionAlignment() {
   </Flex>);
 }
 
-export const Default = {
-  render: Template,
+export type ActionMenuStoryFn = StoryFn<typeof Template>;
+export type ActionMenuStory = StoryObj<typeof Template>;
+
+export const Default: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {}
 };
 
-export const AriaLabel = {
-  render: Template,
+export const AriaLabel: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {'aria-label': 'Some more actions'}
 };
 
-export const DOMId = {
-  render: Template,
+export const DOMId: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {id: 'my-action-menu'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const DisabledKeys = {
-  render: Template,
+export const DisabledKeys: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {disabledKeys: ['two']}
 };
 
-export const AutoFocus = {
-  render: Template,
+export const AutoFocus: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {autoFocus: true}
 };
 
-export const DefaultOpen = {
-  render: Template,
+export const DefaultOpen: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {onOpenChange: action('openChange'), defaultOpen: true}
 };
 
-export const ControlledOpen = () => {
+export const ControlledOpen: ActionMenuStoryFn = () => {
   let [open, setOpen] = React.useState(false);
 
   return (
@@ -174,9 +177,9 @@ export const ControlledOpen = () => {
   );
 };
 
-export const DirectionAlignFlip = () => <DirectionAlignment />;
+export const DirectionAlignFlip: ActionMenuStoryFn = () => <DirectionAlignment />;
 
-export const WithTooltip = () => (
+export const WithTooltip: ActionMenuStoryFn = () => (
   <TooltipTrigger delay={0}>
     <ActionMenu>
       <Item key="cut">Cut</Item>
@@ -187,7 +190,7 @@ export const WithTooltip = () => (
   </TooltipTrigger>
 );
 
-export const Dynamic = () => {
+export const Dynamic: ActionMenuStoryFn = () => {
   const items = [
     {key: 'cut', label: 'Cut'},
     {key: 'copy', label: 'Copy'},
diff --git a/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
index b477921bd61..29f611fcc7a 100644
--- a/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
@@ -24,8 +24,9 @@ import Cut from '@spectrum-icons/workflow/Cut';
 import {Dialog} from '@react-spectrum/dialog';
 import {Heading, Keyboard, Text} from '@react-spectrum/text';
 import {Link} from '@react-spectrum/link';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {ToggleButton} from '@adobe/react-spectrum';
 import {TranslateMenu} from './../chromatic/MenuTriggerLanguages.stories';
 
@@ -110,9 +111,12 @@ let itemsWithFalsyId = [
 export default {
   title: 'MenuTrigger',
   excludeStories: ['render']
-};
+} as Meta<typeof MenuTrigger>;
+
+export type MenuTriggerStoryFn = StoryFn<typeof MenuTrigger>;
+export type MenuTriggerStory = StoryObj<typeof MenuTrigger>;
 
-export const DefaultMenuStatic = () =>
+export const DefaultMenuStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item>One</Item>
@@ -125,7 +129,7 @@ DefaultMenuStatic.story = {
   name: 'default menu (static)'
 };
 
-export const DefaultMenuGenerative = () =>
+export const DefaultMenuGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={flatMenu} onAction={action('onAction')}>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -136,7 +140,7 @@ DefaultMenuGenerative.story = {
   name: 'default menu (generative)'
 };
 
-export const DefaultMenuWSectionStatic = () =>
+export const DefaultMenuWSectionStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Section title="Section 1">
@@ -156,19 +160,19 @@ DefaultMenuWSectionStatic.story = {
   name: 'default menu w/ section (static)'
 };
 
-export const DefaultMenuWSectionGenerative = () => render(defaultMenu);
+export const DefaultMenuWSectionGenerative: MenuTriggerStoryFn = () => render(defaultMenu);
 
 DefaultMenuWSectionGenerative.story = {
   name: 'default menu w/ section (generative)'
 };
 
-export const DefaultMenuWSectionGenerativeManyItems = () => render(manyItemsMenu);
+export const DefaultMenuWSectionGenerativeManyItems: MenuTriggerStoryFn = () => render(manyItemsMenu);
 
 DefaultMenuWSectionGenerativeManyItems.story = {
   name: 'default menu w/ section (generative), many items per section'
 };
 
-export const DefaultMenuWTitlelessSectionsStatic = () =>
+export const DefaultMenuWTitlelessSectionsStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Section aria-label="Section 1">
@@ -188,7 +192,7 @@ DefaultMenuWTitlelessSectionsStatic.story = {
   name: 'default menu w/ titleless sections (static)'
 };
 
-export const DefaultMenuWTitlelessSectionsGenerative = () =>
+export const DefaultMenuWTitlelessSectionsGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={withSection} onAction={action('onAction')}>
       {(item) => (
@@ -203,7 +207,7 @@ DefaultMenuWTitlelessSectionsGenerative.story = {
   name: 'default menu w/ titleless sections (generative)'
 };
 
-export const WithFalsyItemKeys = () =>
+export const WithFalsyItemKeys: MenuTriggerStoryFn = () =>
   render(
     <Menu items={itemsWithFalsyId} onAction={action('onAction')}>
       {(item) => (
@@ -218,7 +222,7 @@ WithFalsyItemKeys.story = {
   name: 'with falsy item keys'
 };
 
-export const SingleSelectedKeyControlledStatic = () =>
+export const SingleSelectedKeyControlledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu selectionMode="single" onAction={action('onAction')} selectedKeys={['2']}>
       <Section title="Section 1">
@@ -239,14 +243,14 @@ SingleSelectedKeyControlledStatic.story = {
   name: 'single selected key (controlled, static)'
 };
 
-export const SingleSelectedKeyControlledGenerative = () =>
+export const SingleSelectedKeyControlledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {selectedKeys: ['Kangaroo'], selectionMode: 'single'});
 
 SingleSelectedKeyControlledGenerative.story = {
   name: 'single selected key (controlled, generative)'
 };
 
-export const SingleDefaultSelectedKeyUncontrolledStatic = () =>
+export const SingleDefaultSelectedKeyUncontrolledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu selectionMode="single" onAction={action('onAction')} defaultSelectedKeys={['2']}>
       <Section title="Section 1">
@@ -267,14 +271,14 @@ SingleDefaultSelectedKeyUncontrolledStatic.story = {
   name: 'single default selected key (uncontrolled, static)'
 };
 
-export const SingleDefaultSelectedKeyUncontrolledGenerative = () =>
+export const SingleDefaultSelectedKeyUncontrolledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {defaultSelectedKeys: ['Kangaroo'], selectionMode: 'single'});
 
 SingleDefaultSelectedKeyUncontrolledGenerative.story = {
   name: 'single default selected key (uncontrolled, generative)'
 };
 
-export const MultipleDefaultSelectedKeyControlledStatic = () =>
+export const MultipleDefaultSelectedKeyControlledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu
       onAction={action('onAction')}
@@ -298,14 +302,14 @@ MultipleDefaultSelectedKeyControlledStatic.story = {
   name: 'multiple default selected key (controlled, static)'
 };
 
-export const MultipleSelectedKeyControlledGenerative = () =>
+export const MultipleSelectedKeyControlledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {selectedKeys: ['Kangaroo', 'Devon'], selectionMode: 'multiple'});
 
 MultipleSelectedKeyControlledGenerative.story = {
   name: 'multiple selected key (controlled, generative)'
 };
 
-export const MultipleDefaultSelectedKeyUncontrolledStatic = () =>
+export const MultipleDefaultSelectedKeyUncontrolledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu
       onAction={action('onAction')}
@@ -329,7 +333,7 @@ MultipleDefaultSelectedKeyUncontrolledStatic.story = {
   name: 'multiple default selected key (uncontrolled, static)'
 };
 
-export const MultipleDefaultSelectedKeyUncontrolledGenerative = () =>
+export const MultipleDefaultSelectedKeyUncontrolledGenerative: MenuTriggerStoryFn = () =>
   render(
     defaultMenu,
     {},
@@ -340,19 +344,19 @@ MultipleDefaultSelectedKeyUncontrolledGenerative.story = {
   name: 'multiple default selected key (uncontrolled, generative)'
 };
 
-export const MenuWithAutoFocusTrue = () => render(defaultMenu, {}, {autoFocus: true});
+export const MenuWithAutoFocusTrue: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: true});
 
 MenuWithAutoFocusTrue.story = {
   name: 'Menu with autoFocus=true'
 };
 
-export const MenuWithAutoFocusFalse = () => render(defaultMenu, {}, {autoFocus: false});
+export const MenuWithAutoFocusFalse: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: false});
 
 MenuWithAutoFocusFalse.story = {
   name: 'Menu with autoFocus=false'
 };
 
-export const MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle = () =>
+export const MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle: MenuTriggerStoryFn = () =>
   render(
     defaultMenu,
     {},
@@ -363,26 +367,26 @@ MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle.story = {
   name: 'Menu with autoFocus=true, default selected key (uncontrolled), selectionMode single'
 };
 
-export const MenuWithAutoFocusFirst = () => render(defaultMenu, {}, {autoFocus: 'first'});
+export const MenuWithAutoFocusFirst: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: 'first'});
 
 MenuWithAutoFocusFirst.story = {
   name: 'Menu with autoFocus="first"'
 };
 
-export const MenuWithAutoFocusLast = () => render(defaultMenu, {}, {autoFocus: 'last'});
+export const MenuWithAutoFocusLast: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: 'last'});
 
 MenuWithAutoFocusLast.story = {
   name: 'Menu with autoFocus="last"'
 };
 
-export const MenuWithKeyboardSelectionWrappingFalse = () =>
+export const MenuWithKeyboardSelectionWrappingFalse: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {shouldFocusWrap: false});
 
 MenuWithKeyboardSelectionWrappingFalse.story = {
   name: 'Menu with keyboard selection wrapping false'
 };
 
-export const AlignEnd = () =>
+export const AlignEnd: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item>One</Item>
@@ -396,118 +400,118 @@ AlignEnd.story = {
   name: 'align="end"'
 };
 
-export const DirectionTop = () => render(defaultMenu, {direction: 'top'});
+export const DirectionTop: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'top'});
 
 DirectionTop.story = {
   name: 'direction="top"'
 };
 
-export const DirectionBottom = () => render(defaultMenu, {direction: 'bottom'});
+export const DirectionBottom: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'bottom'});
 
 DirectionBottom.story = {
   name: 'direction="bottom"'
 };
 
-export const DirectionStart = () => render(defaultMenu, {direction: 'start'});
+export const DirectionStart: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'start'});
 
 DirectionStart.story = {
   name: 'direction="start"'
 };
 
-export const DirectionStartAlignEnd = () =>
+export const DirectionStartAlignEnd: MenuTriggerStoryFn = () =>
   render(defaultMenu, {direction: 'start', align: 'end'});
 
 DirectionStartAlignEnd.story = {
   name: 'direction="start", align="end"'
 };
 
-export const DirectionEnd = () => render(defaultMenu, {direction: 'end'});
+export const DirectionEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'end'});
 
 DirectionEnd.story = {
   name: 'direction="end"'
 };
 
-export const DirectionEndAlignEnd = () => render(defaultMenu, {direction: 'end', align: 'end'});
+export const DirectionEndAlignEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'end', align: 'end'});
 
 DirectionEndAlignEnd.story = {
   name: 'direction="end", align="end"'
 };
 
-export const DirectionLeft = () => render(defaultMenu, {direction: 'left'});
+export const DirectionLeft: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'left'});
 
 DirectionLeft.story = {
   name: 'direction="left"'
 };
 
-export const DirectionLeftAlignEnd = () => render(defaultMenu, {direction: 'left', align: 'end'});
+export const DirectionLeftAlignEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'left', align: 'end'});
 
 DirectionLeftAlignEnd.story = {
   name: 'direction="left", align="end"'
 };
 
-export const DirectionRight = () => render(defaultMenu, {direction: 'right'});
+export const DirectionRight: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'right'});
 
 DirectionRight.story = {
   name: 'direction="right"'
 };
 
-export const DirectionRightAlignEnd = () =>
+export const DirectionRightAlignEnd: MenuTriggerStoryFn = () =>
   render(defaultMenu, {direction: 'right', align: 'end'});
 
 DirectionRightAlignEnd.story = {
   name: 'direction="right", align="end"'
 };
 
-export const ShouldFlip = () => render(defaultMenu, {shouldFlip: true});
+export const ShouldFlip: MenuTriggerStoryFn = () => render(defaultMenu, {shouldFlip: true});
 
 ShouldFlip.story = {
   name: 'shouldFlip'
 };
 
-export const IsOpen = () => render(defaultMenu, {isOpen: true});
+export const IsOpen: MenuTriggerStoryFn = () => render(defaultMenu, {isOpen: true});
 
 IsOpen.story = {
   name: 'isOpen'
 };
 
-export const DefaultOpen = () => render(defaultMenu, {defaultOpen: true});
+export const DefaultOpen: MenuTriggerStoryFn = () => render(defaultMenu, {defaultOpen: true});
 
 DefaultOpen.story = {
   name: 'defaultOpen'
 };
 
-export const DisabledButton = () => render(defaultMenu, {isDisabled: true});
+export const DisabledButton: MenuTriggerStoryFn = () => render(defaultMenu, {isDisabled: true});
 
 DisabledButton.story = {
   name: 'disabled button'
 };
 
-export const MultiselectMenu = () => render(defaultMenu, {}, {selectionMode: 'multiple'});
+export const MultiselectMenu: MenuTriggerStoryFn = () => render(defaultMenu, {}, {selectionMode: 'multiple'});
 
 MultiselectMenu.story = {
   name: 'multiselect menu'
 };
 
-export const NoSelectionAllowedMenu = () => render(defaultMenu, {}, {selectionMode: 'none'});
+export const NoSelectionAllowedMenu: MenuTriggerStoryFn = () => render(defaultMenu, {}, {selectionMode: 'none'});
 
 NoSelectionAllowedMenu.story = {
   name: 'no selection allowed menu'
 };
 
-export const CloseOnSelectFalse = () => render(defaultMenu, {closeOnSelect: false}, {});
+export const CloseOnSelectFalse: MenuTriggerStoryFn = () => render(defaultMenu, {closeOnSelect: false}, {});
 
 CloseOnSelectFalse.story = {
   name: 'closeOnSelect=false'
 };
 
-export const CloseOnSelectTrueMultiselectMenu = () =>
+export const CloseOnSelectTrueMultiselectMenu: MenuTriggerStoryFn = () =>
   render(defaultMenu, {closeOnSelect: true}, {selectionMode: 'multiple'});
 
 CloseOnSelectTrueMultiselectMenu.story = {
   name: 'closeOnSelect=true, multiselect menu'
 };
 
-export const MenuWithSemanticElementsStatic = () => (
+export const MenuWithSemanticElementsStatic: MenuTriggerStoryFn = () => (
   <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
     <MenuTrigger onOpenChange={action('onOpenChange')}>
       <ActionButton
@@ -560,7 +564,7 @@ MenuWithSemanticElementsStatic.story = {
   name: 'menu with semantic elements (static)'
 };
 
-export const MenuWithSemanticElementsGenerative = () =>
+export const MenuWithSemanticElementsGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={hardModeProgrammatic} onAction={action('onAction')}>
       {(item) => (
@@ -575,7 +579,7 @@ MenuWithSemanticElementsGenerative.story = {
   name: 'menu with semantic elements (generative)'
 };
 
-export const MenuShouldPreventScrolling = () => (
+export const MenuShouldPreventScrolling: MenuTriggerStoryFn = () => (
   <div style={{height: 100, display: 'flex'}}>
     <div style={{paddingTop: 100, height: 100, overflow: 'auto', background: 'antiquewhite'}}>
       <div style={{height: 200}}>
@@ -611,7 +615,7 @@ MenuShouldPreventScrolling.story = {
   name: 'menu should prevent scrolling'
 };
 
-export const MenuClosesOnBlur = () => (
+export const MenuClosesOnBlur: MenuTriggerStoryFn = () => (
   <>
     <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
       <label htmlFor="focus-before">Focus before</label>
@@ -645,7 +649,7 @@ MenuClosesOnBlur.story = {
   name: 'menu closes on blur'
 };
 
-export const WithFalsyKey = () =>
+export const WithFalsyKey: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item key="1">One</Item>
@@ -658,19 +662,19 @@ WithFalsyKey.story = {
   name: 'with falsy key'
 };
 
-export const MenuTriggerWithTriggerLongPress = () => render(defaultMenu, {trigger: 'longPress'});
+export const MenuTriggerWithTriggerLongPress: MenuTriggerStoryFn = () => render(defaultMenu, {trigger: 'longPress'});
 
 MenuTriggerWithTriggerLongPress.story = {
   name: 'MenuTrigger with trigger="longPress"'
 };
 
-export const ControlledIsOpen = () => <ControlledOpeningMenuTrigger />;
+export const ControlledIsOpen: MenuTriggerStoryFn = () => <ControlledOpeningMenuTrigger />;
 
 ControlledIsOpen.story = {
   name: 'controlled isOpen'
 };
 
-export const WithTranslations = () => <TranslateMenu />;
+export const WithTranslations: MenuTriggerStoryFn = () => <TranslateMenu />;
 
 WithTranslations.story = {
   name: 'with translations',
@@ -688,7 +692,7 @@ let customMenuItem = (item) => {
   );
 };
 
-export function render(menu, {isDisabled, ...props}: any = {}, menuProps = {}) {
+export function render(menu: React.ReactElement, {isDisabled, ...props}: any = {}, menuProps = {}): JSX.Element {
   let menuRender = React.cloneElement(menu, menuProps);
   return (
     <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
@@ -747,7 +751,7 @@ function ControlledOpeningMenuTrigger() {
   );
 }
 
-export let MenuItemUnavailable = {
+export let MenuItemUnavailable: StoryObj<typeof Menu> = {
   render: () => render(
     <Menu onAction={action('onAction')}>
       <Item key="1">One</Item>
@@ -782,7 +786,7 @@ export let MenuItemUnavailable = {
   )
 };
 
-export let MenuItemUnavailableDynamic = {
+export let MenuItemUnavailableDynamic: StoryObj<typeof Menu> = {
   render: () => render(
     <Menu items={flatMenu} onAction={action('onAction')}>
       {(item) => {
@@ -803,7 +807,7 @@ export let MenuItemUnavailableDynamic = {
   )
 };
 
-export let MenuItemUnavailableToggling = {
+export let MenuItemUnavailableToggling: StoryObj<typeof Menu> = {
   render: () => <MenuWithUnavailableSometimes />
 };
 
@@ -854,7 +858,7 @@ function MenuWithUnavailableSometimes(props) {
   );
 }
 
-export const MenuWithLinks = (props) =>
+export const MenuWithLinks: StoryFn<typeof Menu> = (props) =>
   render(
     <Menu {...props} onAction={action('onAction')}>
       <Item href="https://adobe.com">Adobe</Item>
diff --git a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
index 8e5c496360b..c78c8f17bb9 100644
--- a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
@@ -21,40 +21,48 @@ import {ContextualHelpTrigger, Item, Menu, MenuTrigger, Section, SubmenuTrigger}
 import defaultConfig, {render as renderMenuTrigger} from './MenuTrigger.stories';
 import {Dialog} from '@react-spectrum/dialog';
 import {Heading, Keyboard, Text} from '@react-spectrum/text';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
+import {SpectrumMenuProps, SpectrumMenuTriggerProps, ToggleButton} from '@adobe/react-spectrum';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
-import {ToggleButton} from '@adobe/react-spectrum';
 
 export default {
   ...defaultConfig,
-  title: 'MenuTrigger/Submenu'
+  title: 'MenuTrigger/Submenu',
+  excludeStories: ['SubmenuStaticRender', 'SubmenuDynamicRender', 'ComplexRender', 'TabBehaviorRender']
+} as Meta<typeof MenuTrigger>;
+
+export const SubmenuStaticRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  menuTriggerProps?: Omit<SpectrumMenuTriggerProps, 'children'>,
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu onAction={action('lvl 1 menu onAction')} {...args}>
+      <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
+      <SubmenuTrigger>
+        <Item key="Lvl 1 Item 2">Lvl 1 Item 2</Item>
+        <Menu onAction={action('lvl 2 menu onAction')} {...args.submenu1Props}>
+          <Item key="Lvl 2 Item 1">Lvl 2 Item 1</Item>
+          <Item key="Lvl 2 Item 2">Lvl 2 Item 2</Item>
+          <SubmenuTrigger>
+            <Item key="Lvl 2 Item 3">Lvl 2 Item 3</Item>
+            <Menu onAction={action('lvl 3 menu onAction')} {...args.submenu2Props}>
+              <Item key="Lvl 3 Item 1">Lvl 3 Item 1</Item>
+              <Item key="Lvl 3 Item 2">Lvl 3 Item 2</Item>
+              <Item key="Lvl 3 Item 3">Lvl 3 Item 3</Item>
+            </Menu>
+          </SubmenuTrigger>
+        </Menu>
+      </SubmenuTrigger>
+      <Item key="Lvl 1 Item 3">Lvl 1 Item 3</Item>
+    </Menu>
+  , args.menuTriggerProps);
 };
 
-export const SubmenuStatic = {
-  render: (args) => (
-    renderMenuTrigger(
-      <Menu onAction={action('lvl 1 menu onAction')} {...args}>
-        <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
-        <SubmenuTrigger>
-          <Item key="Lvl 1 Item 2">Lvl 1 Item 2</Item>
-          <Menu onAction={action('lvl 2 menu onAction')} {...args.submenu1Props}>
-            <Item key="Lvl 2 Item 1">Lvl 2 Item 1</Item>
-            <Item key="Lvl 2 Item 2">Lvl 2 Item 2</Item>
-            <SubmenuTrigger>
-              <Item key="Lvl 2 Item 3">Lvl 2 Item 3</Item>
-              <Menu onAction={action('lvl 3 menu onAction')} {...args.submenu2Props}>
-                <Item key="Lvl 3 Item 1">Lvl 3 Item 1</Item>
-                <Item key="Lvl 3 Item 2">Lvl 3 Item 2</Item>
-                <Item key="Lvl 3 Item 3">Lvl 3 Item 3</Item>
-              </Menu>
-            </SubmenuTrigger>
-          </Menu>
-        </SubmenuTrigger>
-        <Item key="Lvl 1 Item 3">Lvl 1 Item 3</Item>
-      </Menu>
-    , args.menuTriggerProps)
-  ),
+export const SubmenuStatic: StoryObj<typeof SubmenuStaticRender> = {
+  render: (args) => <SubmenuStaticRender {...args} />,
   name: 'static submenu items'
 };
 
@@ -105,18 +113,20 @@ let dynamicRenderFunc = (item) => {
   }
 };
 
-export const SubmenuDynamic = {
-  render: (args) => (
-    renderMenuTrigger(
-      <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
-        {(item) => dynamicRenderFunc(item)}
-      </Menu>
-    )
-  ),
+export const SubmenuDynamicRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
+      {(item) => dynamicRenderFunc(item)}
+    </Menu>
+  );
+};
+
+export const SubmenuDynamic: StoryObj<typeof SubmenuDynamicRender> = {
+  render: (args) => <SubmenuDynamicRender {...args} />,
   name: 'dynamic submenu items'
 };
 
-export const SubmenuManyItems = {
+export const SubmenuManyItems: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu items={manyItemsSubmenu} onAction={action('onAction')} {...args}>
@@ -127,7 +137,7 @@ export const SubmenuManyItems = {
   name: 'dynamic submenu with many items'
 };
 
-export const SubmenuStaticSections = {
+export const SubmenuStaticSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu onAction={action('onAction')}>
@@ -258,7 +268,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
   }
 };
 
-export const SubmenuDynamicSections = {
+export const SubmenuDynamicSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={dynamicSubmenuSections} onAction={action('onAction')}>
@@ -289,7 +299,7 @@ let submenuNoSection = [
   ]}
 ];
 
-export const MainSectionsSubNoSections = {
+export const MainSectionsSubNoSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={submenuNoSection} onAction={action('onAction')}>
@@ -324,7 +334,7 @@ let submenuSections = [
   {name: 'Lvl 1 Item 3'}
 ];
 
-export const MainNoSectionsSubSections = {
+export const MainNoSectionsSubSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={submenuSections} onAction={action('onAction')}>
@@ -357,7 +367,7 @@ let mixedSectionsAndNonSections = [
   {name: 'Lvl 1 Item 3'}
 ];
 
-export const MixedSections = {
+export const MixedSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={mixedSectionsAndNonSections} onAction={action('onAction')}>
@@ -401,18 +411,20 @@ let complex = [
   ]}
 ];
 
-export const Complex = {
-  render: () => (
-    renderMenuTrigger(
-      <Menu items={complex} onAction={action('onAction')}>
-        {(item) => dynamicRenderFuncSections(item)}
-      </Menu>
-    )
-  ),
+export const ComplexRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu items={complex} onAction={action('onAction')} {...args}>
+      {(item: any) => dynamicRenderFuncSections(item)}
+    </Menu>
+  );
+};
+
+export const Complex: StoryObj<typeof ComplexRender> = {
+  render: (args) => <ComplexRender {...args} />,
   name: 'complex'
 };
 
-export const SubmenuActions = {
+export const SubmenuActions: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onAction={action('onAction lvl 1 menu')} onClose={action('onClose lvl 1 menu')} {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -438,7 +450,7 @@ export const SubmenuActions = {
   parameters: {description: {data: 'Each menu has its own onAction and onClose that are triggered only if its direct menu option was acted upon.'}}
 };
 
-export const SubmenuSelection = {
+export const SubmenuSelection: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onSelectionChange={action('onSelectionChange lvl 1 menu')} selectionMode="multiple" defaultSelectedKeys="all" {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -464,7 +476,7 @@ export const SubmenuSelection = {
   parameters: {description: {data: 'Lvl 1 and Lvl 3 menus have multiple selection, Lvl 2 menu has single selection'}}
 };
 
-export const DisabledSubmenuTrigger = {
+export const DisabledSubmenuTrigger: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onSelectionChange={action('onSelectionChange lvl 1 menu')} selectionMode="multiple" {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -490,7 +502,11 @@ export const DisabledSubmenuTrigger = {
   parameters: {description: {data: 'Lvl 2 submenu trigger is disabled'}}
 };
 
-export const NoKeysProvided = {
+export const NoKeysProvided: StoryObj<Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  menuTriggerProps?: Omit<SpectrumMenuTriggerProps, 'children'>,
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu onAction={action('lvl 1 menu onAction')} {...args}>
@@ -518,12 +534,12 @@ export const NoKeysProvided = {
   parameters: {description: {data: 'No keys are provided so they should be autogenerated. It should allow for duplicated menu item keys across each submenu level, reflected in onAction'}}
 };
 
-export const ConditionalSubmenu = {
+export const ConditionalSubmenu: StoryObj<SpectrumMenuTriggerProps> = {
   render: (args) => <ConditionalSubmenuExample {...args} />,
   name: 'conditional submenu'
 };
 
-function ConditionalSubmenuExample(props) {
+function ConditionalSubmenuExample(props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element {
   let [disabled, setDisabled] = React.useState(false);
 
   return (
@@ -562,7 +578,10 @@ function ConditionalSubmenuExample(props) {
   );
 }
 
-export const UnavailableWithSubmenu = {
+export const UnavailableWithSubmenu: StoryObj<Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu onAction={action('lvl 1 menu onAction')} {...args}>
@@ -609,8 +628,8 @@ export const UnavailableWithSubmenu = {
   name: 'with unavailable menu item'
 };
 
-export const TabBehaviorStory = {
-  render: () => (
+export const TabBehaviorRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return (
     <>
       <input data-testid="inputleft" />
       <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
@@ -618,14 +637,18 @@ export const TabBehaviorStory = {
           <ActionButton>
             Menu Button
           </ActionButton>
-          <Menu items={dynamicSubmenu} onAction={action('onAction')}>
+          <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
             {(item) => dynamicRenderFunc(item)}
           </Menu>
         </MenuTrigger>
       </div>
       <input data-testid="inputright" />
     </>
-  ),
+  );
+};
+
+export const TabBehavior: StoryObj<typeof TabBehaviorRender> = {
+  render: (args) => <TabBehaviorRender {...args} />,
   name: 'tab behavior',
   parameters: {description: {data: 'Test tabbing and shift tabbing from within a submenu'}}
 };
diff --git a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
index f4dcef74377..6e14736e210 100644
--- a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
+++ b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
@@ -11,21 +11,13 @@
  */
 
 import {act, fireEvent, installPointerEvent, pointerMap, render as renderComponent, triggerTouch, within} from '@react-spectrum/test-utils-internal';
-import {composeStories} from '@storybook/react';
+import {ComplexRender as Complex, SubmenuDynamicRender as SubmenuDynamic, SubmenuStaticRender as SubmenuStatic, TabBehaviorRender as TabBehaviorStory} from '../stories/Submenu.stories';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import type {Scale} from '@react-types/provider';
-import * as stories from '../stories/Submenu.stories';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
-let {
-  SubmenuStatic,
-  SubmenuDynamic,
-  Complex,
-  TabBehaviorStory
-} = composeStories(stories);
-
 let render = (children, scale = 'medium' as Scale, locale = 'en-US') => {
   let tree = renderComponent(
     <Provider theme={theme} scale={scale} locale={locale}>
@@ -472,7 +464,7 @@ describe('Submenu', function () {
       await user.tab();
       await openSubMenus();
 
-      
+
       // Tab do nothing.
       await user.tab();
       let activeElement = document.activeElement;
diff --git a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
index 1f9994b0a87..10cc07f6dce 100644
--- a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
+++ b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {Meter} from '../';
 import {SpectrumMeterProps} from '@react-types/meter';
 
@@ -21,38 +21,40 @@ const meta: Meta<SpectrumMeterProps> = {
 
 export default meta;
 
-export const Default = {
+export type MeterStory = StoryObj<SpectrumMeterProps>;
+
+export const Default: MeterStory = {
   args: {label: 'Meter label', value: 50}
 };
 
-export const SizeS = {
+export const SizeS: MeterStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const ShowValueLabelFalse = {
+export const ShowValueLabelFalse: MeterStory = {
   args: {...Default.args, showValueLabel: false}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: MeterStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const Positive = {
+export const Positive: MeterStory = {
   args: {...Default.args, variant: 'positive'}
 };
 
-export const Critical = {
+export const Critical: MeterStory = {
   args: {...Default.args, variant: 'critical'}
 };
 
-export const Warning = {
+export const Warning: MeterStory = {
   args: {...Default.args, variant: 'warning'}
 };
 
-export const Value0 = {
+export const Value0: MeterStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: MeterStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
index 49d7b0f6681..bbf9e9b338c 100644
--- a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
+++ b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
@@ -17,9 +17,9 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {mergeProps} from '@react-aria/utils';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '../src';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import stepperStyles from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 
@@ -106,11 +106,11 @@ function shortName(key, value) {
 
 const meta: Meta = {
   title: 'NumberField'
-};
+} as Meta<SpectrumNumberFieldProps>;
 
 export default meta;
 
-const Template: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const Template = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -122,7 +122,7 @@ const Template: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateVertical: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateVertical = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -134,7 +134,7 @@ const TemplateVertical: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateSmall: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateSmall = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -146,7 +146,7 @@ const TemplateSmall: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateWithForcedStyles: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateWithForcedStyles = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinationsStyles.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -155,26 +155,28 @@ const TemplateWithForcedStyles: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export type NumberFieldStory = StoryObj<SpectrumNumberFieldProps>;
+
+export const PropDefaults: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropDefaultValue = {
-  render: Template,
+export const PropDefaultValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default value',
   args: {...PropDefaults.args, defaultValue: 10}
 };
 
-export const PropValue = {
-  render: Template,
+export const PropValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'value',
   args: {...PropDefaults.args, value: 10}
 };
 
-export const PropValueMobileViewport = {
-  render: TemplateVertical,
+export const PropValueMobileViewport: NumberFieldStory = {
+  render: (args) => <TemplateVertical {...args} />,
   name: 'value, mobile viewport',
   args: {...PropDefaults.args, value: 10},
 
@@ -189,50 +191,50 @@ export const PropValueMobileViewport = {
   }
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end', defaultValue: 10}
 };
 
-export const PropMinValue = {
-  render: Template,
+export const PropMinValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'min value',
   args: {...PropDefaults.args, minValue: 10, defaultValue: 10}
 };
 
-export const PropMaxValue = {
-  render: Template,
+export const PropMaxValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'max value',
   args: {...PropDefaults.args, maxValue: 10, defaultValue: 10}
 };
 
-export const PropLabelSide = {
-  render: TemplateSmall,
+export const PropLabelSide: NumberFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side', defaultValue: 10}
 };
 
-export const PropCustomWidth = {
-  render: TemplateSmall,
+export const PropCustomWidth: NumberFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-3000'}
 };
 
-export const PropInteractionStyles = {
-  render: TemplateWithForcedStyles,
+export const PropInteractionStyles: NumberFieldStory = {
+  render: (args) => <TemplateWithForcedStyles {...args} />,
   name: 'interaction styles',
   args: {...PropAriaLabelled.args}
 };
 
-export const PropInteractionStylesMinValue = {
-  render: TemplateWithForcedStyles,
+export const PropInteractionStylesMinValue: NumberFieldStory = {
+  render: (args) => <TemplateWithForcedStyles {...args} />,
   name: 'interaction styles min value',
   args: {...PropAriaLabelled.args, minValue: 10, defaultValue: 10}
 };
diff --git a/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
index 576cc43f920..455f05b6cf9 100644
--- a/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
@@ -19,60 +19,63 @@ import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import {Heading} from '@react-spectrum/text';
 import {Item, Picker} from '@react-spectrum/picker';
-import {NumberField} from '../src';
+import {Meta, StoryFn} from '@storybook/react';
+import {NumberField, SpectrumNumberFieldProps} from '../src';
 import React, {ReactNode, useState} from 'react';
 
 export default {
   title: 'NumberField',
   decorators: [(story) => <ErrorBoundary>{story()}</ErrorBoundary>],
   providerSwitcher: {status: 'notice'}
-};
+} as Meta<SpectrumNumberFieldProps>;
+
+export type NumberFieldStory = StoryFn<SpectrumNumberFieldProps>;
 
-export const Default = () => render({});
+export const Default: NumberFieldStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue10 = () => render({defaultValue: 10});
+export const DefaultValue10: NumberFieldStory = () => render({defaultValue: 10});
 
 DefaultValue10.story = {
   name: 'defaultValue: 10'
 };
 
-export const Value10 = () => render({value: 10});
+export const Value10: NumberFieldStory = () => render({value: 10});
 
 Value10.story = {
   name: 'value: 10'
 };
 
-export const MaximumFractionDigits0 = () => render({formatOptions: {maximumFractionDigits: 0}});
+export const MaximumFractionDigits0: NumberFieldStory = () => render({formatOptions: {maximumFractionDigits: 0}});
 
 MaximumFractionDigits0.story = {
   name: 'maximumFractionDigits = 0'
 };
 
-export const Currency = () =>
+export const Currency: NumberFieldStory = () =>
   render({formatOptions: {style: 'currency', currency: 'EUR'}, label: 'Price'});
 
 Currency.story = {
   name: 'currency'
 };
 
-export const Percent = () => render({formatOptions: {style: 'percent'}, label: 'Tax'});
+export const Percent: NumberFieldStory = () => render({formatOptions: {style: 'percent'}, label: 'Tax'});
 
 Percent.story = {
   name: 'percent'
 };
 
-export const PercentMaxFractionDigits2NoMinFractionDigits = () =>
+export const PercentMaxFractionDigits2NoMinFractionDigits: NumberFieldStory = () =>
   render({formatOptions: {style: 'percent', maximumFractionDigits: 2}, label: 'Tax'});
 
 PercentMaxFractionDigits2NoMinFractionDigits.story = {
   name: 'percent, max fraction digits: 2, no min fraction digits'
 };
 
-export const PercentMin2Max2FractionDigits = () =>
+export const PercentMin2Max2FractionDigits: NumberFieldStory = () =>
   render({
     formatOptions: {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2},
     label: 'Tax'
@@ -82,7 +85,7 @@ PercentMin2Max2FractionDigits.story = {
   name: 'percent min = 2 max = 2 fraction digits'
 };
 
-export const PercentMin2Max3FractionDigits = () =>
+export const PercentMin2Max3FractionDigits: NumberFieldStory = () =>
   render({
     formatOptions: {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 3},
     label: 'Tax'
@@ -92,188 +95,188 @@ PercentMin2Max3FractionDigits.story = {
   name: 'percent min = 2 max = 3 fraction digits'
 };
 
-export const MinValue00FractionDigits = () =>
+export const MinValue00FractionDigits: NumberFieldStory = () =>
   render({minValue: 0, formatOptions: {maximumFractionDigits: 0}});
 
 MinValue00FractionDigits.story = {
   name: 'minValue = 0, 0 fraction digits'
 };
 
-export const PercentUsingSign = () =>
+export const PercentUsingSign: NumberFieldStory = () =>
   render({formatOptions: {style: 'percent', signDisplay: 'always'}, label: 'Tax'});
 
 PercentUsingSign.story = {
   name: 'percent using sign'
 };
 
-export const Disabled = () => render({isDisabled: true});
+export const Disabled: NumberFieldStory = () => render({isDisabled: true});
 
 Disabled.story = {
   name: 'disabled'
 };
 
-export const Readonly = () => render({defaultValue: 10, isReadOnly: true});
+export const Readonly: NumberFieldStory = () => render({defaultValue: 10, isReadOnly: true});
 
 Readonly.story = {
   name: 'readonly'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: NumberFieldStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const QuietDisabled = () => render({isQuiet: true, isDisabled: true, defaultValue: 10});
+export const QuietDisabled: NumberFieldStory = () => render({isQuiet: true, isDisabled: true, defaultValue: 10});
 
 QuietDisabled.story = {
   name: 'quiet disabled'
 };
 
-export const QuietReadonly = () => render({isQuiet: true, isReadOnly: true, defaultValue: 10});
+export const QuietReadonly: NumberFieldStory = () => render({isQuiet: true, isReadOnly: true, defaultValue: 10});
 
 QuietReadonly.story = {
   name: 'quiet readonly'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: NumberFieldStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: NumberFieldStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const ValidationStateInvalidIsQuiet = () =>
+export const ValidationStateInvalidIsQuiet: NumberFieldStory = () =>
   render({validationState: 'invalid', isQuiet: true});
 
 ValidationStateInvalidIsQuiet.story = {
   name: 'validationState: invalid, isQuiet'
 };
 
-export const ValidationStateValidIsQuiet = () =>
+export const ValidationStateValidIsQuiet: NumberFieldStory = () =>
   render({validationState: 'valid', isQuiet: true});
 
 ValidationStateValidIsQuiet.story = {
   name: 'validationState: valid, isQuiet'
 };
 
-export const MinValue0MaxValue20 = () => render({minValue: 0, maxValue: 20});
+export const MinValue0MaxValue20: NumberFieldStory = () => render({minValue: 0, maxValue: 20});
 
 MinValue0MaxValue20.story = {
   name: 'minValue = 0, maxValue = 20'
 };
 
-export const MinValue0MaxValue20Quiet = () => render({isQuiet: true, minValue: 0, maxValue: 20});
+export const MinValue0MaxValue20Quiet: NumberFieldStory = () => render({isQuiet: true, minValue: 0, maxValue: 20});
 
 MinValue0MaxValue20Quiet.story = {
   name: 'minValue = 0, maxValue = 20, quiet'
 };
 
-export const MinValue50MaxValue20 = () => render({minValue: -50, maxValue: -20});
+export const MinValue50MaxValue20: NumberFieldStory = () => render({minValue: -50, maxValue: -20});
 
 MinValue50MaxValue20.story = {
   name: 'minValue = -50, maxValue = -20'
 };
 
-export const MinValue20MaxValue50 = () => render({minValue: 20, maxValue: 50});
+export const MinValue20MaxValue50: NumberFieldStory = () => render({minValue: 20, maxValue: 50});
 
 MinValue20MaxValue50.story = {
   name: 'minValue = 20, maxValue = 50'
 };
 
-export const MinValue0DefaultValue0 = () => render({minValue: 0, defaultValue: 0});
+export const MinValue0DefaultValue0: NumberFieldStory = () => render({minValue: 0, defaultValue: 0});
 
 MinValue0DefaultValue0.story = {
   name: 'minValue = 0, defaultValue = 0'
 };
 
-export const Step5 = () => render({step: 5});
+export const Step5: NumberFieldStory = () => render({step: 5});
 
 Step5.story = {
   name: 'step = 5'
 };
 
-export const Step3WithMin2Max21 = () => render({step: 3, minValue: 2, maxValue: 21});
+export const Step3WithMin2Max21: NumberFieldStory = () => render({step: 3, minValue: 2, maxValue: 21});
 
 Step3WithMin2Max21.story = {
   name: 'step = 3 with min = 2, max = 21'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: NumberFieldStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const HideStepper = () => render({hideStepper: true});
+export const HideStepper: NumberFieldStory = () => render({hideStepper: true});
 
 HideStepper.story = {
   name: 'hideStepper'
 };
 
-export const IsQuietHideStepper = () => render({isQuiet: true, hideStepper: true});
+export const IsQuietHideStepper: NumberFieldStory = () => render({isQuiet: true, hideStepper: true});
 
 IsQuietHideStepper.story = {
   name: 'isQuiet, hideStepper'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: NumberFieldStory = () => render({isRequired: true});
 
 Required.story = {
   name: 'required'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: NumberFieldStory = () => render({necessityIndicator: 'label'});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: NumberFieldStory = () => render({isRequired: true, necessityIndicator: 'label'});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const LabelTopEnd = () =>
+export const LabelTopEnd: NumberFieldStory = () =>
   render({isRequired: true, labelPosition: 'top', labelAlign: 'end'});
 
 LabelTopEnd.story = {
   name: 'label top end'
 };
 
-export const LabelSide = () => render({isRequired: true, labelPosition: 'side'});
+export const LabelSide: NumberFieldStory = () => render({isRequired: true, labelPosition: 'side'});
 
 LabelSide.story = {
   name: 'label side'
 };
 
-export const NoVisibleLabel = () => renderNoLabel({isRequired: true, 'aria-label': 'Width'});
+export const NoVisibleLabel: NumberFieldStory = () => renderNoLabel({isRequired: true, 'aria-label': 'Width'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () =>
+export const QuietNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({isQuiet: true, isRequired: true, 'aria-label': 'Width'});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const QuietNoVisibleLabelHidestepper = () =>
+export const QuietNoVisibleLabelHidestepper: NumberFieldStory = () =>
   renderNoLabel({hideStepper: true, isQuiet: true, isRequired: true, 'aria-label': 'Width'});
 
 QuietNoVisibleLabelHidestepper.story = {
   name: 'quiet no visible label hidestepper'
 };
 
-export const AriaLabelledby = () => (
+export const AriaLabelledby: NumberFieldStory = () => (
   <>
     <label htmlFor="numberfield" id="label">
       Width
@@ -286,14 +289,14 @@ AriaLabelledby.story = {
   name: 'aria-labelledby'
 };
 
-export const WithDescriptionNoVisibleLabel = () =>
+export const WithDescriptionNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({'aria-label': 'Age', description: 'Please select your age.'});
 
 WithDescriptionNoVisibleLabel.story = {
   name: 'with description, no visible label'
 };
 
-export const WithErrorMessageLabelPositionSide = () =>
+export const WithErrorMessageLabelPositionSide: NumberFieldStory = () =>
   render({
     labelPosition: 'side',
     errorMessage: 'Please enter a positive number.',
@@ -304,7 +307,7 @@ WithErrorMessageLabelPositionSide.story = {
   name: 'with error message, labelPosition: side'
 };
 
-export const _ContextualHelp = () =>
+export const _ContextualHelp: NumberFieldStory = () =>
   render({
     contextualHelp: (
       <ContextualHelp>
@@ -321,57 +324,57 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const CustomWidth = () => render({width: 'size-3000'});
+export const CustomWidth: NumberFieldStory = () => render({width: 'size-3000'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-3000'});
+export const QuietCustomWidth: NumberFieldStory = () => render({isQuiet: true, width: 'size-3000'});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () =>
+export const CustomWidthNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({width: 'size-3000', isRequired: true, 'aria-label': 'Width'});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () =>
+export const CustomWidthLabelPositionSide: NumberFieldStory = () =>
   render({width: 'size-3000', labelPosition: 'side'});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Controlled = () => <NumberFieldControlled />;
+export const Controlled: NumberFieldStory = () => <NumberFieldControlled />;
 
 Controlled.story = {
   name: 'controlled'
 };
 
-export const CurrencySwitcher = () => <NumberFieldWithCurrencySelect />;
+export const CurrencySwitcher: NumberFieldStory = () => <NumberFieldWithCurrencySelect />;
 
 CurrencySwitcher.story = {
   name: 'currency switcher'
 };
 
-export const Flexed = () => renderSet();
+export const Flexed: NumberFieldStory = () => renderSet();
 
 Flexed.story = {
   name: 'flexed'
 };
 
-export const MinWidth = () => render({width: 0});
+export const MinWidth: NumberFieldStory = () => render({width: 0});
 
 MinWidth.story = {
   name: 'min width'
 };
 
-export const FocusEvents = () =>
+export const FocusEvents: NumberFieldStory = () =>
   render({
     onBlur: action('onBlur'),
     onFocus: action('onFocus'),
@@ -384,7 +387,7 @@ FocusEvents.story = {
   name: 'focus events'
 };
 
-export const InputDomEvents = () =>
+export const InputDomEvents: NumberFieldStory = () =>
   render({
     onCopy: action('onCopy'),
     onCut: action('onCut'),
@@ -401,7 +404,7 @@ InputDomEvents.story = {
   name: 'input dom events'
 };
 
-export const ResetControlledStateToBlankWithNull = () => <NumberFieldControlledStateReset />;
+export const ResetControlledStateToBlankWithNull: NumberFieldStory = () => <NumberFieldControlledStateReset />;
 
 ResetControlledStateToBlankWithNull.story = {
   name: 'reset controlled state to blank with null'
diff --git a/packages/@react-spectrum/overlays/src/OpenTransition.tsx b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
index 72f3cf80089..ec3b66b33c5 100644
--- a/packages/@react-spectrum/overlays/src/OpenTransition.tsx
+++ b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
@@ -11,8 +11,7 @@
  */
 
 import React, {JSX, JSXElementConstructor, ReactElement} from 'react';
-import {Transition} from 'react-transition-group';
-// TODO install @types/react-transition-group
+import {Transition, TransitionProps} from 'react-transition-group';
 
 const OPEN_STATES = {
   entering: false,
@@ -33,8 +32,7 @@ const OPEN_STATES = {
  */
 
 export function OpenTransition(
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  props
+  props: TransitionProps
 ): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
   // Do not apply any transition if in chromatic.
   if (process.env.CHROMATIC) {
diff --git a/packages/@react-spectrum/overlays/stories/Modal.stories.tsx b/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
index 5614927f924..119db29b858 100644
--- a/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
+++ b/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
@@ -17,8 +17,9 @@ import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Divider} from '@react-spectrum/divider';
 import {Flex} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {Modal} from '../';
-import React, {Fragment} from 'react';
+import React, {Fragment, JSX} from 'react';
 import {useOverlayTriggerState} from '@react-stately/overlays';
 
 export default {
@@ -26,21 +27,23 @@ export default {
   parameters: {
     providerSwitcher: {status: 'notice'}
   }
-};
+} as Meta<typeof ModalExample>;
+
+export type ModalExampleStory = StoryFn<typeof ModalExample>;
 
-export const Default = () => <ModalExample />;
+export const Default: ModalExampleStory = () => <ModalExample />;
 
 Default.story = {
   name: 'default'
 };
 
-export const _UnmountingTrigger = () => <UnmountingTrigger />;
+export const _UnmountingTrigger: ModalExampleStory = () => <UnmountingTrigger />;
 
 _UnmountingTrigger.story = {
   name: 'unmounting trigger'
 };
 
-function ModalExample() {
+function ModalExample(): JSX.Element {
   let state = useOverlayTriggerState({});
 
   return (
diff --git a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
index 348ef277533..c15de9c692f 100644
--- a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
+++ b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
@@ -11,8 +11,8 @@
  */
 
 import {Item, Picker, Section} from '..';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 
 export default {
@@ -23,7 +23,9 @@ export default {
   }
 } as Meta<typeof Picker>;
 
-const Template = (args: SpectrumPickerProps<object>) => (
+export type PickerStory = StoryObj<SpectrumPickerProps<object>>;
+
+const Template = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Animals">
       <Item key="Aardvark">Aardvark</Item>
@@ -37,8 +39,9 @@ const Template = (args: SpectrumPickerProps<object>) => (
     </Section>
   </Picker>
 );
-export const ArabicPlaceholder = {
-  render: Template,
+
+export const ArabicPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: 'دولفين'},
 
   parameters: {
@@ -46,8 +49,8 @@ export const ArabicPlaceholder = {
   }
 };
 
-export const ChineseSimplifiedPlaceholder = {
-  render: Template,
+export const ChineseSimplifiedPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '海豚'},
 
   parameters: {
@@ -55,8 +58,8 @@ export const ChineseSimplifiedPlaceholder = {
   }
 };
 
-export const ChineseTraditionalPlaceholder = {
-  render: Template,
+export const ChineseTraditionalPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '海豚'},
 
   parameters: {
@@ -64,8 +67,8 @@ export const ChineseTraditionalPlaceholder = {
   }
 };
 
-export const JapanesePlaceholder = {
-  render: Template,
+export const JapanesePlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: 'イルカ'},
 
   parameters: {
@@ -73,8 +76,8 @@ export const JapanesePlaceholder = {
   }
 };
 
-export const KoreanPlaceholder = {
-  render: Template,
+export const KoreanPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '돌고래'},
 
   parameters: {
diff --git a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
index 2c263d9f5d9..ad3d9e3cdfb 100644
--- a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, Picker, Section} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 
 const meta: Meta<SpectrumPickerProps<object>> = {
@@ -38,8 +38,9 @@ const meta: Meta<SpectrumPickerProps<object>> = {
 
 export default meta;
 
+export type PickerStory = StoryObj<SpectrumPickerProps<object>>;
 
-const Template = (args: SpectrumPickerProps<object>) => (
+const Template = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Animals">
       <Item key="Aardvark">Aardvark</Item>
@@ -54,7 +55,7 @@ const Template = (args: SpectrumPickerProps<object>) => (
   </Picker>
 );
 
-const ComplexItemsTemplate = (args: SpectrumPickerProps<object>) => (
+const ComplexItemsTemplate = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Section 1">
       <Item textValue="Copy">
@@ -91,33 +92,33 @@ const ComplexItemsTemplate = (args: SpectrumPickerProps<object>) => (
     </Section>
   </Picker>
 );
-export const Default = {
-  render: Template,
+export const Default: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', isOpen: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isDisabled: true}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const ValidationStateInvalid = {
-  render: Template,
+export const ValidationStateInvalid: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isInvalid: true}
 };
 
-export const ComplexItems = {
-  render: ComplexItemsTemplate,
+export const ComplexItems: PickerStory = {
+  render: (args) => <ComplexItemsTemplate {...args} />,
   args: {...Default.args},
   parameters: {
     chromaticProvider: {
@@ -126,8 +127,8 @@ export const ComplexItems = {
   }
 };
 
-export const ComplexItemsExpress = {
-  render: ComplexItemsTemplate,
+export const ComplexItemsExpress: PickerStory = {
+  render: (args) => <ComplexItemsTemplate {...args} />,
   args: {...Default.args},
   parameters: {
     chromaticProvider: {
@@ -146,12 +147,12 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
-  render: Template,
+export const _ContextualHelp: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
-  render: Template,
+export const ContextualHelpSideLabel: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index 6225541b961..227fb890e58 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -25,7 +25,7 @@ import {Heading, Text} from '@react-spectrum/text';
 import {Item, Picker, Section, SpectrumPickerProps} from '../';
 import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React,  {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {useAsyncList} from '@react-stately/data';
 import {userEvent, within} from '@storybook/test';
 
@@ -449,7 +449,7 @@ export const Quiet: PickerStory = {
   )
 };
 
-function DefaultPicker(props: SpectrumPickerProps<object>) {
+function DefaultPicker(props: SpectrumPickerProps<object>): JSX.Element {
   return (
     <Picker {...props}>
       <Item key="Short">Short</Item>
@@ -459,7 +459,7 @@ function DefaultPicker(props: SpectrumPickerProps<object>) {
   );
 }
 
-function ComplexItemsPicker(props: SpectrumPickerProps<object>) {
+function ComplexItemsPicker(props: SpectrumPickerProps<object>): JSX.Element {
   return (
     <Picker {...props}>
       <Section title="Section 1">
@@ -495,7 +495,7 @@ function ComplexItemsPicker(props: SpectrumPickerProps<object>) {
   );
 }
 
-function AsyncLoadingExample(props) {
+function AsyncLoadingExample(props: SpectrumPickerProps<object>): JSX.Element {
   interface Pokemon {
     name: string,
     url: string
@@ -521,7 +521,7 @@ function AsyncLoadingExample(props) {
   );
 }
 
-function ResizePicker(props) {
+function ResizePicker(props: SpectrumPickerProps<object>): JSX.Element {
   const [state, setState] = useState(true);
 
   return (
diff --git a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
index 2f78d1617a0..59417e51b8e 100644
--- a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {ProgressBar} from '../';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressBarProps} from '@react-types/progress';
@@ -22,6 +22,8 @@ const meta: Meta<SpectrumProgressBarProps> = {
 
 export default meta;
 
+export type ProgressBarStory = StoryObj<SpectrumProgressBarProps>;
+
 const grayedBoxStyle: CSSProperties = {
   width: '250px',
   height: '60px',
@@ -31,23 +33,23 @@ const grayedBoxStyle: CSSProperties = {
   justifyContent: 'center'
 };
 
-export const Default = {
+export const Default: ProgressBarStory = {
   args: {label: 'Progress label', value: 50}
 };
 
-export const SizeS = {
+export const SizeS: ProgressBarStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const ShowValueLabelFalse = {
+export const ShowValueLabelFalse: ProgressBarStory = {
   args: {...Default.args, showValueLabel: false}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: ProgressBarStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const OverBackground = {
+export const OverBackground: ProgressBarStory = {
   args: {...Default.args, variant: 'overBackground'},
   decorators: [
     (Story) => (
@@ -58,7 +60,7 @@ export const OverBackground = {
   ]
 };
 
-export const StaticColorWhite = {
+export const StaticColorWhite: ProgressBarStory = {
   args: {...Default.args, staticColor: 'white'},
   decorators: [
     (Story) => (
@@ -69,7 +71,7 @@ export const StaticColorWhite = {
   ]
 };
 
-export const StaticColorBlack = {
+export const StaticColorBlack: ProgressBarStory = {
   args: {...Default.args, staticColor: 'black'},
   decorators: [
     (Story) => (
@@ -80,10 +82,10 @@ export const StaticColorBlack = {
   ]
 };
 
-export const Value0 = {
+export const Value0: ProgressBarStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: ProgressBarStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
index 692a1c5cd9a..dec906c6dc9 100644
--- a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {ProgressCircle} from '../';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressCircleProps} from '@react-types/progress';
@@ -22,6 +22,8 @@ const meta: Meta<SpectrumProgressCircleProps> = {
 
 export default meta;
 
+export type ProgressCircleStory = StoryObj<typeof ProgressCircle>;
+
 const grayedBoxStyle: CSSProperties = {
   width: '250px',
   height: '60px',
@@ -31,19 +33,19 @@ const grayedBoxStyle: CSSProperties = {
   justifyContent: 'center'
 };
 
-export const Default = {
-  args: {label: 'Progress label', value: 50}
+export const Default: ProgressCircleStory = {
+  args: {value: 50}
 };
 
-export const SizeS = {
+export const SizeS: ProgressCircleStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const SizeL = {
+export const SizeL: ProgressCircleStory = {
   args: {...Default.args, size: 'L'}
 };
 
-export const OverBackground = {
+export const OverBackground: ProgressCircleStory = {
   args: {...Default.args, variant: 'overBackground'},
   decorators: [
     (Story) => (
@@ -54,7 +56,7 @@ export const OverBackground = {
   ]
 };
 
-export const StaticColorWhite = {
+export const StaticColorWhite: ProgressCircleStory = {
   args: {...Default.args, staticColor: 'white'},
   decorators: [
     (Story) => (
@@ -65,7 +67,7 @@ export const StaticColorWhite = {
   ]
 };
 
-export const StaticColorBlack = {
+export const StaticColorBlack: ProgressCircleStory = {
   args: {...Default.args, staticColor: 'black'},
   decorators: [
     (Story) => (
@@ -76,10 +78,10 @@ export const StaticColorBlack = {
   ]
 };
 
-export const Value0 = {
+export const Value0: ProgressCircleStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: ProgressCircleStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
index 547159ed141..bd9f338eda6 100644
--- a/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ProgressBar} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import {ProgressBar, SpectrumProgressBarProps} from '../';
 import React, {CSSProperties} from 'react';
 
 const formatOptions = {
@@ -40,46 +41,48 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumProgressBarProps>;
+
+export type ProgressBarStory = StoryFn<SpectrumProgressBarProps>;
 
-export const Default = (args) => render(args);
-export const Value50 = () => render({value: 50});
+export const Default: ProgressBarStory = (args) => render(args);
+export const Value50: ProgressBarStory = () => render({value: 50});
 
 Value50.story = {
   name: 'value: 50'
 };
 
-export const Value100 = () => render({value: 100});
+export const Value100: ProgressBarStory = () => render({value: 100});
 
 Value100.story = {
   name: 'value: 100'
 };
 
-export const SizeS = (args) => render({size: 'S', ...args});
+export const SizeS: ProgressBarStory = (args) => render({size: 'S', ...args});
 
 SizeS.story = {
   name: 'size: S'
 };
 
-export const ShowValueLabelTrue = (args) => render({showValueLabel: true, ...args});
+export const ShowValueLabelTrue: ProgressBarStory = (args) => render({showValueLabel: true, ...args});
 
 ShowValueLabelTrue.story = {
   name: 'showValueLabel: true'
 };
 
-export const ShowValueLabelFalse = (args) => render({showValueLabel: false, ...args});
+export const ShowValueLabelFalse: ProgressBarStory = (args) => render({showValueLabel: false, ...args});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const ValueLabel1Of4 = () => render({value: 25, valueLabel: '1 of 4'});
+export const ValueLabel1Of4: ProgressBarStory = () => render({value: 25, valueLabel: '1 of 4'});
 
 ValueLabel1Of4.story = {
   name: 'valueLabel: 1 of 4'
 };
 
-export const UsingNumberFormatOptionsWithCurrencyStyle = (args) =>
+export const UsingNumberFormatOptionsWithCurrencyStyle: ProgressBarStory = (args) =>
   render({
     ...args,
     showValueLabel: true,
@@ -90,32 +93,32 @@ UsingNumberFormatOptionsWithCurrencyStyle.story = {
   name: 'Using number formatOptions with currency style'
 };
 
-export const NoVisibleLabel = (args) => render({label: null, 'aria-label': 'Loading…', ...args});
+export const NoVisibleLabel: ProgressBarStory = (args) => render({label: null, 'aria-label': 'Loading…', ...args});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LabelPositionSide = (args) => render({labelPosition: 'side', ...args});
+export const LabelPositionSide: ProgressBarStory = (args) => render({labelPosition: 'side', ...args});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelPositionTop = (args) => render({labelPosition: 'top', ...args});
+export const LabelPositionTop: ProgressBarStory = (args) => render({labelPosition: 'top', ...args});
 
 LabelPositionTop.story = {
   name: 'labelPosition: top'
 };
 
-export const LongLabel = (args) =>
+export const LongLabel: ProgressBarStory = (args) =>
   render({label: 'Super long progress bar label. Sample label copy. Loading...', ...args});
 
 LongLabel.story = {
   name: 'long label'
 };
 
-export const LongLabelLabelPositionSide = (args) =>
+export const LongLabelLabelPositionSide: ProgressBarStory = (args) =>
   render({
     labelPosition: 'side',
     label: 'Super long progress bar label. Sample label copy. Loading...',
@@ -126,19 +129,19 @@ LongLabelLabelPositionSide.story = {
   name: 'long label, labelPosition: side'
 };
 
-export const IsIndeterminateTrue = (args) => render({isIndeterminate: true, ...args});
+export const IsIndeterminateTrue: ProgressBarStory = (args) => render({isIndeterminate: true, ...args});
 
 IsIndeterminateTrue.story = {
   name: 'isIndeterminate: true'
 };
 
-export const IsIndeterminateTrueSizeS = () => render({isIndeterminate: true, size: 'S'});
+export const IsIndeterminateTrueSizeS: ProgressBarStory = () => render({isIndeterminate: true, size: 'S'});
 
 IsIndeterminateTrueSizeS.story = {
   name: 'isIndeterminate: true, size: S'
 };
 
-export const VariantOverBackground = (args) => (
+export const VariantOverBackground: ProgressBarStory = (args) => (
   <div style={grayedBoxStyle}>{render({variant: 'overBackground', ...args})}</div>
 );
 
@@ -146,7 +149,7 @@ VariantOverBackground.story = {
   name: 'variant: overBackground'
 };
 
-export const StaticColorWhite = (args) => (
+export const StaticColorWhite: ProgressBarStory = (args) => (
   <div style={grayedBoxStyle}>{render({staticColor: 'white', ...args})}</div>
 );
 
@@ -154,7 +157,7 @@ StaticColorWhite.story = {
   name: 'staticColor: white'
 };
 
-export const StaticColorBlack = (args) => (
+export const StaticColorBlack: ProgressBarStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(206, 247, 243)'}}>{render({staticColor: 'black', ...args})}</div>
 );
 
@@ -162,57 +165,57 @@ StaticColorBlack.story = {
   name: 'staticColor: black'
 };
 
-export const ParentWidth100 = () => <span style={{width: '100%'}}>{render()}</span>;
+export const ParentWidth100: ProgressBarStory = () => <span style={{width: '100%'}}>{render()}</span>;
 
 ParentWidth100.story = {
   name: 'parent width 100%'
 };
 
-export const ParentWidth100Px = () => <span style={{width: '100px'}}>{render()}</span>;
+export const ParentWidth100Px: ProgressBarStory = () => <span style={{width: '100px'}}>{render()}</span>;
 
 ParentWidth100Px.story = {
   name: 'parent width 100px'
 };
 
-export const Width300Px = () => render({width: '300px', value: 100});
+export const Width300Px: ProgressBarStory = () => render({width: '300px', value: 100});
 
 Width300Px.story = {
   name: 'width: 300px'
 };
 
-export const Width300PxIsIndeterminateTrue = () =>
+export const Width300PxIsIndeterminateTrue: ProgressBarStory = () =>
   render({width: '300px', isIndeterminate: true});
 
 Width300PxIsIndeterminateTrue.story = {
   name: 'width: 300px, isIndeterminate: true'
 };
 
-export const Width300PxLabelPositionSide = () => render({width: '300px', labelPosition: 'side'});
+export const Width300PxLabelPositionSide: ProgressBarStory = () => render({width: '300px', labelPosition: 'side'});
 
 Width300PxLabelPositionSide.story = {
   name: 'width: 300px, labelPosition: side'
 };
 
-export const Width300PxLabelPositionSideIsIndeterminateTrue = () =>
+export const Width300PxLabelPositionSideIsIndeterminateTrue: ProgressBarStory = () =>
   render({width: '300px', labelPosition: 'side', isIndeterminate: true});
 
 Width300PxLabelPositionSideIsIndeterminateTrue.story = {
   name: 'width: 300px, labelPosition: side, isIndeterminate: true'
 };
 
-export const Width30Px = () => render({width: '30px'});
+export const Width30Px: ProgressBarStory = () => render({width: '30px'});
 
 Width30Px.story = {
   name: 'width: 30px'
 };
 
-export const Width30PxSizeS = () => render({width: '30px', size: 'S'});
+export const Width30PxSizeS: ProgressBarStory = () => render({width: '30px', size: 'S'});
 
 Width30PxSizeS.story = {
   name: 'width: 30px, size: S'
 };
 
-export const Width30PxLabelPositionSideLongLabel = () =>
+export const Width30PxLabelPositionSideLongLabel: ProgressBarStory = () =>
   render({
     width: '30px',
     labelPosition: 'side',
@@ -223,7 +226,7 @@ Width30PxLabelPositionSideLongLabel.story = {
   name: 'width: 30px, labelPosition: side, long label'
 };
 
-export const Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight = () => (
+export const Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight: ProgressBarStory = () => (
   <>
     {render({
       width: '30px',
@@ -239,7 +242,7 @@ Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight.story = {
   name: 'width: 30px, labelPosition: side, isIndeterminate: true, long label, button on right'
 };
 
-export const UsingRawValuesForMinValueMaxValueAndValue = () =>
+export const UsingRawValuesForMinValueMaxValueAndValue: ProgressBarStory = () =>
   render({
     showValueLabel: true,
     labelPosition: 'top',
@@ -251,7 +254,7 @@ UsingRawValuesForMinValueMaxValueAndValue.story = {
   name: 'Using raw values for minValue, maxValue, and value'
 };
 
-export const UsingRawValuesWithNumberFormatter = () =>
+export const UsingRawValuesWithNumberFormatter: ProgressBarStory = () =>
   render({
     showValueLabel: true,
     labelPosition: 'top',
diff --git a/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
index 6774c923543..45f1363c592 100644
--- a/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ProgressCircle} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import {ProgressCircle, SpectrumProgressCircleProps} from '../';
 import React, {CSSProperties} from 'react';
 
 const grayedBoxStyle: CSSProperties = {
@@ -35,34 +36,36 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumProgressCircleProps>;
+
+export type ProgressCircleStory = StoryFn<SpectrumProgressCircleProps>;
 
-export const Default = (args) => render(args);
-export const Value50 = () => render({value: 50});
+export const Default: ProgressCircleStory = (args) => render(args);
+export const Value50: ProgressCircleStory = () => render({value: 50});
 
 Value50.story = {
   name: 'value: 50'
 };
 
-export const Value100 = () => render({value: 100});
+export const Value100: ProgressCircleStory = () => render({value: 100});
 
 Value100.story = {
   name: 'value: 100'
 };
 
-export const SizeS = (args) => render({...args, size: 'S'});
+export const SizeS: ProgressCircleStory = (args) => render({...args, size: 'S'});
 
 SizeS.story = {
   name: 'size: S'
 };
 
-export const SizeL = (args) => render({...args, size: 'L'});
+export const SizeL: ProgressCircleStory = (args) => render({...args, size: 'L'});
 
 SizeL.story = {
   name: 'size: L'
 };
 
-export const VariantOverBackground = (args) => (
+export const VariantOverBackground: ProgressCircleStory = (args) => (
   <div style={grayedBoxStyle}>{render({...args, variant: 'overBackground'})}</div>
 );
 
@@ -70,7 +73,7 @@ VariantOverBackground.story = {
   name: 'variant: overBackground'
 };
 
-export const StaticColorWhite = (args) => (
+export const StaticColorWhite: ProgressCircleStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(0, 119, 114)'}}>{render({...args, staticColor: 'white'})}</div>
 );
 
@@ -78,7 +81,7 @@ StaticColorWhite.story = {
   name: 'staticColor: white'
 };
 
-export const StaticColorBlack = (args) => (
+export const StaticColorBlack: ProgressCircleStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(206, 247, 243)'}}>{render({...args, staticColor: 'black'})}</div>
 );
 
@@ -86,7 +89,7 @@ StaticColorBlack.story = {
   name: 'staticColor: black'
 };
 
-export const UsingRawValuesForMinValueMaxValueAndValue = () =>
+export const UsingRawValuesForMinValueMaxValueAndValue: ProgressCircleStory = () =>
   render({
     labelPosition: 'top',
     maxValue: 2147483648,
@@ -97,25 +100,25 @@ UsingRawValuesForMinValueMaxValueAndValue.story = {
   name: 'Using raw values for minValue, maxValue, and value'
 };
 
-export const IsIndeterminateTrue = () => render({isIndeterminate: true});
+export const IsIndeterminateTrue: ProgressCircleStory = () => render({isIndeterminate: true});
 
 IsIndeterminateTrue.story = {
   name: 'isIndeterminate: true'
 };
 
-export const IsIndeterminateTrueSizeS = () => render({isIndeterminate: true, size: 'S'});
+export const IsIndeterminateTrueSizeS: ProgressCircleStory = () => render({isIndeterminate: true, size: 'S'});
 
 IsIndeterminateTrueSizeS.story = {
   name: 'isIndeterminate: true, size: S'
 };
 
-export const IsIndeterminateTrueSizeL = () => render({isIndeterminate: true, size: 'L'});
+export const IsIndeterminateTrueSizeL: ProgressCircleStory = () => render({isIndeterminate: true, size: 'L'});
 
 IsIndeterminateTrueSizeL.story = {
   name: 'isIndeterminate: true, size: L'
 };
 
-export const IsIndeterminateTrueVariantOverBackground = () => (
+export const IsIndeterminateTrueVariantOverBackground: ProgressCircleStory = () => (
   <div style={grayedBoxStyle}>{render({isIndeterminate: true, variant: 'overBackground'})}</div>
 );
 
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
index a5f20b61434..bd12e7c7184 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
@@ -16,12 +16,12 @@ import {ComboBox, Item} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import {Meta} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {ProviderProps} from '@react-types/provider';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
@@ -37,11 +37,13 @@ const THEME = {
 
 const meta: Meta<ProviderProps> = {
   title: 'Provider'
-};
+} as Meta<ProviderProps>;
 
 export default meta;
 
-const Template = (args: ProviderProps) => (
+export type ProviderStory = StoryFn<typeof Template>;
+
+const Template = (args: ProviderProps): JSX.Element => (
   <Provider {...args} UNSAFE_style={{padding: 50}}>
     <Form>
       <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
@@ -77,8 +79,8 @@ const Template = (args: ProviderProps) => (
   </Provider>
 );
 
-const NestedColorSchemeTemplate = () => (
-  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
+const NestedColorSchemeTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}} {...props}>
     <Button variant="primary">I am a dark button</Button>
     <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
       <Button variant="primary">I am a light button</Button>
@@ -86,8 +88,8 @@ const NestedColorSchemeTemplate = () => (
   </Provider>
 );
 
-const NestedPropTemplate = () => (
-  <Provider isDisabled>
+const NestedPropTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider isDisabled {...props}>
     <Button variant="primary">I am disabled</Button>
     <Provider isQuiet>
       <Button variant="primary">I am disabled and quiet</Button>
@@ -95,8 +97,8 @@ const NestedPropTemplate = () => (
   </Provider>
 );
 
-const ResponsiveStyleTemplate = () => (
-  <Provider>
+const ResponsiveStyleTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider {...props}>
     <div>
       <TextField
         label="A text field"
@@ -112,7 +114,7 @@ const ResponsiveStyleTemplate = () => (
   </Provider>
 );
 
-const CustomResponsivStylePropsTemplate = () => {
+const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -133,13 +135,14 @@ const CustomResponsivStylePropsTemplate = () => {
   return (
     <Provider
       breakpoints={{S: 480, M: 640, L: 1024}}
-      UNSAFE_style={{padding: 50}}>
+      UNSAFE_style={{padding: 50}}
+      {...props}>
       <Breakpoint />
     </Provider>
   );
 };
 
-const BreakpointOmittedTemplate = () => {
+const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -158,68 +161,70 @@ const BreakpointOmittedTemplate = () => {
     );
   };
   return (
-    <Provider UNSAFE_style={{padding: 50}}>
+    <Provider UNSAFE_style={{padding: 50}} {...props}>
       <Breakpoint />
     </Provider>
   );
 };
 
-export const Default = {
-  render: Template,
+export type ProviderStoryObj = StoryObj<typeof Template>;
+
+export const Default: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const CustomTheme = {
-  render: Template,
+export const CustomTheme: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'custom theme',
   args: {theme: THEME}
 };
 
-export const NestedColorScheme = {
-  render: NestedColorSchemeTemplate,
+export const NestedColorScheme: ProviderStoryObj = {
+  render: (args) => <NestedColorSchemeTemplate {...args} />,
   name: 'nested color schemes',
   args: {}
 };
 
-export const NestedProp = {
-  render: NestedPropTemplate,
+export const NestedProp: ProviderStoryObj = {
+  render: (args) => <NestedPropTemplate {...args} />,
   name: 'nested props',
   args: {}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isEmphasized',
   args: {isEmphasized: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isDisabled',
   args: {isDisabled: true}
 };
 
-export const ReadOnly = {
-  render: Template,
+export const ReadOnly: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isReadOnly',
   args: {isReadOnly: true}
 };
 
-export const Required = {
-  render: Template,
+export const Required: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isRequired',
   args: {isRequired: true}
 };
 
-export const ResponsiveStyle = {
-  render: ResponsiveStyleTemplate,
+export const ResponsiveStyle: ProviderStoryObj = {
+  render: (args) => <ResponsiveStyleTemplate {...args} />,
 
   parameters: {
     chromatic: {viewports: [320, 700, 1000, 1200, 1300]},
@@ -232,9 +237,9 @@ export const ResponsiveStyle = {
   }
 };
 
-export const CustomResponsivStyleProps = {
-  render: CustomResponsivStylePropsTemplate,
-  storyNname: 'custom responsive styleProps',
+export const CustomResponsivStyleProps: ProviderStoryObj = {
+  render: (args) => <CustomResponsivStylePropsTemplate {...args} />,
+  name: 'custom responsive styleProps',
 
   parameters: {
     chromatic: {viewports: [320, 600, 1000, 1200, 1300, 1600]},
@@ -247,8 +252,8 @@ export const CustomResponsivStyleProps = {
   }
 };
 
-export const BreakpointOmitted = {
-  render: BreakpointOmittedTemplate,
+export const BreakpointOmitted: ProviderStoryObj = {
+  render: (args) => <BreakpointOmittedTemplate {...args} />,
 
   parameters: {
     chromatic: {viewports: [320, 1000, 1200]},
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 931b9e0b014..732a2a9b4cd 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -17,8 +17,9 @@ import customTheme from './custom-theme.css';
 import {theme as expressTheme} from '@react-spectrum/theme-express';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Meta, StoryFn} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
-import {Provider} from '../';
+import {Provider, ProviderProps} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
@@ -39,22 +40,24 @@ export default {
   parameters: {
     providerSwitcher: {status: 'positive'}
   }
-};
+} as Meta<ProviderProps>;
+
+export type ProviderStory = StoryFn<typeof Provider>;
 
-export const ColorSchemeDark = () =>
+export const ColorSchemeDark: ProviderStory = () =>
   render({colorScheme: 'dark', style: {padding: 50, textAlign: 'center', width: 500}});
 
 ColorSchemeDark.story = {
   name: 'colorScheme: dark'
 };
 
-export const ScaleLarge = () => render({scale: 'large'});
+export const ScaleLarge: ProviderStory = () => render({scale: 'large'});
 
 ScaleLarge.story = {
   name: 'scale: large'
 };
 
-export const NestedColorSchemes = () => (
+export const NestedColorSchemes: ProviderStory = () => (
   <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
     <Button variant="primary">I am a dark button</Button>
     <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
@@ -67,7 +70,7 @@ NestedColorSchemes.story = {
   name: 'nested color schemes'
 };
 
-export const NestedProps = () => (
+export const NestedProps: ProviderStory = () => (
   <Provider isDisabled>
     <Button variant="primary">I am disabled</Button>
     <Provider isQuiet>
@@ -80,49 +83,49 @@ NestedProps.story = {
   name: 'nested props'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: ProviderStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true});
+export const IsEmphasized: ProviderStory = () => render({isEmphasized: true});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const IsDisabled = () => render({isDisabled: true});
+export const IsDisabled: ProviderStory = () => render({isDisabled: true});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true});
+export const IsReadOnly: ProviderStory = () => render({isReadOnly: true});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsRequired = () => render({isRequired: true});
+export const IsRequired: ProviderStory = () => render({isRequired: true});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const CustomTheme = () => render({theme: THEME});
+export const CustomTheme: ProviderStory = () => render({theme: THEME});
 
 CustomTheme.story = {
   name: 'custom theme'
 };
 
-export const ExpressTheme = () => render({theme: expressTheme});
+export const ExpressTheme: ProviderStory = () => render({theme: expressTheme});
 
 ExpressTheme.story = {
   name: 'express theme'
 };
 
-export const ResponsiveStyleProps = () => (
+export const ResponsiveStyleProps: ProviderStory = () => (
   <Provider UNSAFE_style={{padding: 50}}>
     <div>
       <TextField
@@ -142,7 +145,7 @@ ResponsiveStyleProps.story = {
   name: 'responsive styleProps'
 };
 
-export const CustomResponsiveStyleProps = () => {
+export const CustomResponsiveStyleProps: ProviderStory = () => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -175,7 +178,7 @@ CustomResponsiveStyleProps.story = {
   name: 'custom responsive styleProps'
 };
 
-export const BreakpointOmitted = () => {
+export const BreakpointOmitted: ProviderStory = () => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -200,7 +203,7 @@ BreakpointOmitted.story = {
   name: 'breakpoint omitted'
 };
 
-export const LocaleZhHant = () => (
+export const LocaleZhHant: ProviderStory = () => (
   <div>
     <div>Heaven and earth are mysterious and yellow, the universe is prehistoric</div>
     <Provider locale="zh-Hant">
diff --git a/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx b/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
index d9f3ffb83d1..eb3901841f5 100644
--- a/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
+++ b/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
@@ -11,92 +11,95 @@
  */
 
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '../src';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'RadioGroup'
-};
+} as Meta<typeof RadioGroup>;
+
+export type RadioGroupStory = StoryFn<typeof RadioGroup>;
 
-export const ControlledDragons = () => render({value: 'dragons'});
+export const ControlledDragons: RadioGroupStory = () => render({value: 'dragons'});
 
 ControlledDragons.story = {
   name: 'controlled: dragons'
 };
 
-export const LabelAlignEnd = () => renderLabelPositions({labelAlign: 'end', value: 'dragons'});
+export const LabelAlignEnd: RadioGroupStory = () => renderLabelPositions({labelAlign: 'end', value: 'dragons'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () =>
+export const LabelPositionSide: RadioGroupStory = () =>
   renderLabelPositions({labelPosition: 'side', value: 'dragons'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelPositionSideLabelAlignEnd = () =>
+export const LabelPositionSideLabelAlignEnd: RadioGroupStory = () =>
   renderLabelPositions({labelPosition: 'side', labelAlign: 'end', value: 'dragons'});
 
 LabelPositionSideLabelAlignEnd.story = {
   name: 'labelPosition: side, labelAlign: end'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: 'dragons'});
+export const IsDisabled: RadioGroupStory = () => render({isDisabled: true, value: 'dragons'});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsRequired = () => render({isRequired: true, value: 'dragons'});
+export const IsRequired: RadioGroupStory = () => render({isRequired: true, value: 'dragons'});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: 'dragons'});
+export const IsReadOnly: RadioGroupStory = () => render({isReadOnly: true, value: 'dragons'});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true, value: 'dragons'});
+export const IsEmphasized: RadioGroupStory = () => render({isEmphasized: true, value: 'dragons'});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const ValidationStateInvalid = () =>
+export const ValidationStateInvalid: RadioGroupStory = () =>
   render({isInvalid: true, value: 'dragons'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const NoVisibleLabel = () =>
+export const NoVisibleLabel: RadioGroupStory = () =>
   render({label: null, 'aria-label': 'Favorite pet', value: 'dragons'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LongRadioLabel = () => renderLongLabel({value: 'dragons'});
+export const LongRadioLabel: RadioGroupStory = () => renderLongLabel({value: 'dragons'});
 
 LongRadioLabel.story = {
   name: 'long radio label'
 };
 
-export const ShowErrorIcon = () =>
+export const ShowErrorIcon: RadioGroupStory = () =>
   render({isInvalid: true, errorMessage: 'Error message.', showErrorIcon: true});
 
 ShowErrorIcon.story = {
   name: 'show error icon'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RadioGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/radio/stories/Radio.stories.tsx b/packages/@react-spectrum/radio/stories/Radio.stories.tsx
index 0e7bd1522f4..0e11dc5e3be 100644
--- a/packages/@react-spectrum/radio/stories/Radio.stories.tsx
+++ b/packages/@react-spectrum/radio/stories/Radio.stories.tsx
@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import {Radio, RadioGroup} from '../src';
 import React, {useState} from 'react';
@@ -57,46 +58,48 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof RadioGroup>;
+
+export type RadioGroupStory = StoryFn<typeof RadioGroup>;
 
-export const Default = (args) => render(args);
+export const Default: RadioGroupStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValueDragons = (args) => render({...args, defaultValue: 'dragons'});
+export const DefaultValueDragons: RadioGroupStory = (args) => render({...args, defaultValue: 'dragons'});
 
 DefaultValueDragons.story = {
   name: 'defaultValue: dragons'
 };
 
-export const ControlledDragons = (args) => render({...args, value: 'dragons'});
+export const ControlledDragons: RadioGroupStory = (args) => render({...args, value: 'dragons'});
 
 ControlledDragons.story = {
   name: 'controlled: dragons'
 };
 
-export const IsDisabledOnOneRadio = (args) => render(args, [{}, {isDisabled: true}, {}]);
+export const IsDisabledOnOneRadio: RadioGroupStory = (args) => render(args, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneRadio.story = {
   name: 'isDisabled on one radio'
 };
 
-export const WithDescription = (args) => render({...args, description: 'Please select a pet.'});
+export const WithDescription: RadioGroupStory = (args) => render({...args, description: 'Please select a pet.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: RadioGroupStory = (args) =>
   render({...args, errorMessage: 'Please select a pet.', isInvalid: true});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithErrorMessageAndErrorIcon = (args) =>
+export const WithErrorMessageAndErrorIcon: RadioGroupStory = (args) =>
   render({
     ...args,
     errorMessage: 'Please select a pet.',
@@ -108,14 +111,14 @@ WithErrorMessageAndErrorIcon.story = {
   name: 'with error message and error icon'
 };
 
-export const WithDescriptionErrorMessageAndValidationFixedWidth = (args) =>
+export const WithDescriptionErrorMessageAndValidationFixedWidth: RadioGroupStory = (args) =>
   renderWithDescriptionErrorMessageAndValidation(args);
 
 WithDescriptionErrorMessageAndValidationFixedWidth.story = {
   name: 'with description, error message and validation, fixed width'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RadioGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -133,26 +136,26 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: RadioGroupStory = (args) =>
   render({...args, label: null, 'aria-label': 'Favorite pet'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LongRadioLabel = (args) => renderLongLabel(args);
+export const LongRadioLabel: RadioGroupStory = (args) => renderLongLabel(args);
 
 LongRadioLabel.story = {
   name: 'long radio label'
 };
 
-export const ProviderControlIsDisabled = () => renderFormControl();
+export const ProviderControlIsDisabled: RadioGroupStory = () => renderFormControl();
 
 ProviderControlIsDisabled.story = {
   name: 'provider control: isDisabled'
 };
 
-export const AutoFocusOnOneRadio = (args) => render(args, [{}, {autoFocus: true}, {}]);
+export const AutoFocusOnOneRadio: RadioGroupStory = (args) => render(args, [{}, {autoFocus: true}, {}]);
 
 AutoFocusOnOneRadio.story = {
   name: 'autoFocus on one radio'
@@ -254,7 +257,7 @@ function renderWithDescriptionErrorMessageAndValidation(props) {
   return <Example />;
 }
 
-export const ControlledRovingTab = () => {
+export const ControlledRovingTab: RadioGroupStory = () => {
   const [selected, setSelected] = useState('1');
 
   return (
diff --git a/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx b/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
index b2213098638..c523bfbb403 100644
--- a/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
+++ b/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
@@ -14,6 +14,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import Refresh from '@spectrum-icons/workflow/Refresh';
 import {SearchField} from '../';
@@ -23,36 +24,38 @@ const info =
 
 export default {
   title: 'SearchField'
-};
+} as Meta<typeof SearchField>;
+
+export type SearchFieldStory = StoryFn<typeof SearchField>;
 
-export const Default = () => renderSearchLandmark(render());
+export const Default: SearchFieldStory = () => renderSearchLandmark(render());
 
 Default.story = {
   parameters: {info}
 };
 
-export const Value = () => renderSearchLandmark(render({value: 'React'}));
+export const Value: SearchFieldStory = () => renderSearchLandmark(render({value: 'React'}));
 
 Value.story = {
   name: 'value',
   parameters: {info}
 };
 
-export const IsDisabled = () => renderSearchLandmark(render({value: 'React', isDisabled: true}));
+export const IsDisabled: SearchFieldStory = () => renderSearchLandmark(render({value: 'React', isDisabled: true}));
 
 IsDisabled.story = {
   name: 'isDisabled',
   parameters: {info}
 };
 
-export const IsReadOnly = () => renderSearchLandmark(render({value: 'React', isReadOnly: true}));
+export const IsReadOnly: SearchFieldStory = () => renderSearchLandmark(render({value: 'React', isReadOnly: true}));
 
 IsReadOnly.story = {
   name: 'isReadOnly',
   parameters: {info}
 };
 
-export const IconRefresh = () =>
+export const IconRefresh: SearchFieldStory = () =>
   renderSearchLandmark(render({defaultValue: 'React', icon: <Refresh />}));
 
 IconRefresh.story = {
@@ -60,20 +63,20 @@ IconRefresh.story = {
   parameters: {info}
 };
 
-export const IconNull = () => renderSearchLandmark(render({defaultValue: 'React', icon: null}));
+export const IconNull: SearchFieldStory = () => renderSearchLandmark(render({defaultValue: 'React', icon: null}));
 
 IconNull.story = {
   name: 'icon: null',
   parameters: {info}
 };
 
-export const CustomWidth = () => render({defaultValue: 'React', width: 275});
+export const CustomWidth: SearchFieldStory = () => render({defaultValue: 'React', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SearchFieldStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx b/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
index 3227530d8ae..7c8c81efd01 100644
--- a/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
@@ -17,6 +17,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import Refresh from '@spectrum-icons/workflow/Refresh';
 import {SearchField} from '../';
@@ -36,7 +37,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -64,15 +65,17 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof SearchField>;
+
+export type SearchFieldStory = StoryFn<typeof SearchField>;
 
-export const Default = (args) => renderSearchLandmark(render(args));
+export const Default: SearchFieldStory = (args) => renderSearchLandmark(render(args));
 
 Default.story = {
   parameters: {info}
 };
 
-export const DefaultValueUncontrolled = (args) =>
+export const DefaultValueUncontrolled: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React'}));
 
 DefaultValueUncontrolled.story = {
@@ -80,14 +83,14 @@ DefaultValueUncontrolled.story = {
   parameters: {info}
 };
 
-export const ValueControlled = (args) => renderSearchLandmark(render({...args, value: 'React'}));
+export const ValueControlled: SearchFieldStory = (args) => renderSearchLandmark(render({...args, value: 'React'}));
 
 ValueControlled.story = {
   name: 'value (controlled)',
   parameters: {info}
 };
 
-export const IconRefresh = (args) =>
+export const IconRefresh: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React', icon: <Refresh />}));
 
 IconRefresh.story = {
@@ -95,7 +98,7 @@ IconRefresh.story = {
   parameters: {info}
 };
 
-export const IconNull = (args) =>
+export const IconNull: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React', icon: null}));
 
 IconNull.story = {
@@ -103,7 +106,7 @@ IconNull.story = {
   parameters: {info}
 };
 
-export const OnClear = (args) =>
+export const OnClear: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, onClear: action('clear')}));
 
 OnClear.story = {
@@ -111,34 +114,34 @@ OnClear.story = {
   parameters: {info}
 };
 
-export const AutoFocus = (args) => renderSearchLandmark(render({...args, autoFocus: true}));
+export const AutoFocus: SearchFieldStory = (args) => renderSearchLandmark(render({...args, autoFocus: true}));
 
 AutoFocus.story = {
   name: 'autoFocus',
   parameters: {info}
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: SearchFieldStory = (args) =>
   render({...args, label: null, 'aria-label': 'Street address'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const WithDescription = (args) => render({...args, description: 'Enter a search term.'});
+export const WithDescription: SearchFieldStory = (args) => render({...args, description: 'Enter a search term.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: SearchFieldStory = (args) =>
   render({...args, errorMessage: 'Remove special characters.', validationState: 'invalid'});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SearchFieldStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -156,13 +159,13 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const CustomWidth = (args) => render({...args, width: 300});
+export const CustomWidth: SearchFieldStory = (args) => render({...args, width: 300});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthAndNarrowContainer = (args) => (
+export const CustomWidthAndNarrowContainer: SearchFieldStory = (args) => (
   <Flex direction="column" width="30px">
     {render({...args, defaultValue: 'React', validationState: 'valid'})}
     {render({...args, defaultValue: 'React', width: 30})}
@@ -174,7 +177,7 @@ CustomWidthAndNarrowContainer.story = {
   name: 'custom width and narrow container'
 };
 
-export const WithinAPopover = (args) => (
+export const WithinAPopover: SearchFieldStory = (args) => (
   <DialogTrigger type="popover">
     <ActionButton>Trigger</ActionButton>
     <Dialog>
diff --git a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
index 63eaff09e2f..c2de34fa927 100644
--- a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {RangeSlider} from '../';
 import React from 'react';
 import {SpectrumRangeSliderProps} from '@react-types/slider';
@@ -21,26 +21,24 @@ import {SpectrumRangeSliderProps} from '@react-types/slider';
 const meta: Meta<SpectrumRangeSliderProps> = {
   title: 'RangeSlider',
   component: RangeSlider
-};
+} as Meta<SpectrumRangeSliderProps>;
 
 export default meta;
 
-export const Default = {
+export type RangeSliderStory = StoryObj<typeof RangeSlider>;
+
+export const Default: RangeSliderStory = {
   args: {label: 'RangeSlider label'}
 };
 
-export const Disabled = {
+export const Disabled: RangeSliderStory = {
   args: {...Default.args, isDisabled: true}
 };
 
-export const SmallerRange = {
+export const SmallerRange: RangeSliderStory = {
   args: {...Default.args, defaultValue: {start: 30, end: 70}}
 };
 
-export const LabelAlignEnd = {
-  args: {...Default.args, labelAlign: 'end'}
-};
-
 let contextualHelp = (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
@@ -48,10 +46,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
+export const _ContextualHelp: RangeSliderStory = {
   args: {label: 'Slider label', contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
+export const ContextualHelpSideLabel: RangeSliderStory = {
   args: {label: 'Slider label', contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
index 8948e848379..d73825a7bef 100644
--- a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Slider} from '../';
 import {SpectrumSliderProps} from '@react-types/slider';
@@ -21,35 +21,37 @@ import {SpectrumSliderProps} from '@react-types/slider';
 const meta: Meta<SpectrumSliderProps> = {
   title: 'Slider',
   component: Slider
-};
+} as Meta<SpectrumSliderProps>;
 
 export default meta;
 
-export const Default = {
+export type SliderStory = StoryObj<typeof Slider>;
+
+export const Default: SliderStory = {
   args: {label: 'Slider label'}
 };
 
-export const Disabled = {
+export const Disabled: SliderStory = {
   args: {...Default.args, isDisabled: true}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: SliderStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const Value50 = {
+export const Value50: SliderStory = {
   args: {...Default.args, defaultValue: 50}
 };
 
-export const Filled = {
+export const Filled: SliderStory = {
   args: {...Value50.args, isFilled: true}
 };
 
-export const FillOffset = {
+export const FillOffset: SliderStory = {
   args: {...Filled.args, defaultValue: 80, fillOffset: 50}
 };
 
-export const TrackGradient = {
+export const TrackGradient: SliderStory = {
   args: {
     ...Default.args,
     isFilled: true,
@@ -65,10 +67,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
+export const _ContextualHelp: SliderStory = {
   args: {label: 'Slider label', contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
+export const ContextualHelpSideLabel: SliderStory = {
   args: {label: 'Slider label', contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
index a54e782f35f..7534099fd56 100644
--- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {RangeSlider} from '../';
 import React from 'react';
 import {SpectrumRangeSliderProps} from '@react-types/slider';
@@ -37,22 +38,24 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumRangeSliderProps>;
+
+export type RangeSliderStory = StoryFn<typeof RangeSlider>;
 
-export const Default = (args) => render({...args, 'aria-label': 'Label', label: undefined});
-export const Label = (args) => render(args);
+export const Default: RangeSliderStory = (args) => render({...args, 'aria-label': 'Label', label: undefined});
+export const Label: RangeSliderStory = (args) => render(args);
 
 Label.story = {
   name: 'label'
 };
 
-export const CustomWidth = (args) => render({...args, width: '300px'});
+export const CustomWidth: RangeSliderStory = (args) => render({...args, width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const LabelOverflow = (args) =>
+export const LabelOverflow: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -64,34 +67,34 @@ LabelOverflow.story = {
   name: 'label overflow'
 };
 
-export const ShowValueLabelFalse = (args) => render({...args, showValueLabel: false});
+export const ShowValueLabelFalse: RangeSliderStory = (args) => render({...args, showValueLabel: false});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const FormatOptionsPercent = (args) =>
+export const FormatOptionsPercent: RangeSliderStory = (args) =>
   render({...args, minValue: 0, maxValue: 1, step: 0.01, formatOptions: {style: 'percent'}});
 
 FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) =>
+export const FormatOptionsCentimeter: RangeSliderStory = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
   name: 'formatOptions centimeter'
 };
 
-export const CustomValueLabel = (args) =>
+export const CustomValueLabel: RangeSliderStory = (args) =>
   render({...args, getValueLabel: (value) => `${value.start} <-> ${value.end}`});
 
 CustomValueLabel.story = {
   name: 'custom valueLabel'
 };
 
-export const CustomValueLabelWithLabelOverflow = (args) =>
+export const CustomValueLabelWithLabelOverflow: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -102,13 +105,13 @@ CustomValueLabelWithLabelOverflow.story = {
   name: 'custom valueLabel with label overflow'
 };
 
-export const MinMax = (args) => render({...args, minValue: 30, maxValue: 70});
+export const MinMax: RangeSliderStory = (args) => render({...args, minValue: 30, maxValue: 70});
 
 MinMax.story = {
   name: 'min/max'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'Label',
diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
index 2cef002818e..eb484d3128f 100644
--- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
@@ -16,6 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {Slider} from '../';
 import {SpectrumSliderProps} from '@react-types/slider';
@@ -38,16 +39,18 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumSliderProps>;
+
+export type SliderStory = StoryFn<typeof Slider>;
 
-export const Default = (args) => render({...args, label: null, 'aria-label': 'Label'});
-export const Label = (args) => render(args);
+export const Default: SliderStory = (args) => render({...args, label: null, 'aria-label': 'Label'});
+export const Label: SliderStory = (args) => render(args);
 
 Label.story = {
   name: 'label'
 };
 
-export const Multitouch = (args) => (
+export const Multitouch: SliderStory = (args) => (
   <Flex direction="column" gap="size-1000">
     {render({...args, label: 'Label'})}
     {render({...args, label: 'Label'})}
@@ -58,19 +61,19 @@ Multitouch.story = {
   name: 'multitouch'
 };
 
-export const CustomWidth = (args) => render({...args, width: '300px'});
+export const CustomWidth: SliderStory = (args) => render({...args, width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthSmall = (args) => render({...args, width: '30px'});
+export const CustomWidthSmall: SliderStory = (args) => render({...args, width: '30px'});
 
 CustomWidthSmall.story = {
   name: 'custom width small'
 };
 
-export const LabelOverflow = (args) =>
+export const LabelOverflow: SliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -82,34 +85,34 @@ LabelOverflow.story = {
   name: 'label overflow'
 };
 
-export const ShowValueLabelFalse = (args) => render({...args, showValueLabel: false});
+export const ShowValueLabelFalse: SliderStory = (args) => render({...args, showValueLabel: false});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const FormatOptionsPercent = (args) =>
+export const FormatOptionsPercent: SliderStory = (args) =>
   render({...args, minValue: 0, maxValue: 1, step: 0.01, formatOptions: {style: 'percent'}});
 
 FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) =>
+export const FormatOptionsCentimeter: SliderStory = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
   name: 'formatOptions centimeter'
 };
 
-export const CustomValueLabel = (args) =>
+export const CustomValueLabel: SliderStory = (args) =>
   render({...args, getValueLabel: (state) => `A ${state} B`});
 
 CustomValueLabel.story = {
   name: 'custom valueLabel'
 };
 
-export const CustomValueLabelWithLabelOverflow = (args) =>
+export const CustomValueLabelWithLabelOverflow: SliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -120,25 +123,25 @@ CustomValueLabelWithLabelOverflow.story = {
   name: 'custom valueLabel with label overflow'
 };
 
-export const MinMax = (args) => render({...args, minValue: 30, maxValue: 70});
+export const MinMax: SliderStory = (args) => render({...args, minValue: 30, maxValue: 70});
 
 MinMax.story = {
   name: 'min/max'
 };
 
-export const Step = (args) => render({...args, minValue: 0, maxValue: 100, step: 5});
+export const Step: SliderStory = (args) => render({...args, minValue: 0, maxValue: 100, step: 5});
 
 Step.story = {
   name: 'step'
 };
 
-export const IsFilledTrue = (args) => render({...args, isFilled: true});
+export const IsFilledTrue: SliderStory = (args) => render({...args, isFilled: true});
 
 IsFilledTrue.story = {
   name: 'isFilled: true'
 };
 
-export const FillOffset = (args) =>
+export const FillOffset: SliderStory = (args) =>
   render({
     ...args,
     label: 'Exposure',
@@ -153,20 +156,20 @@ FillOffset.story = {
   name: 'fillOffset'
 };
 
-export const TrackGradient = (args) => render({...args, trackGradient: ['blue', 'red']});
+export const TrackGradient: SliderStory = (args) => render({...args, trackGradient: ['blue', 'red']});
 
 TrackGradient.story = {
   name: 'trackGradient'
 };
 
-export const TrackGradientWithFillOffset = (args) =>
+export const TrackGradientWithFillOffset: SliderStory = (args) =>
   render({...args, trackGradient: ['blue', 'red'], isFilled: true, fillOffset: 50});
 
 TrackGradientWithFillOffset.story = {
   name: 'trackGradient with fillOffset'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SliderStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/slider/test/Slider.test.tsx b/packages/@react-spectrum/slider/test/Slider.test.tsx
index c5bcba26e04..e30e16a17cf 100644
--- a/packages/@react-spectrum/slider/test/Slider.test.tsx
+++ b/packages/@react-spectrum/slider/test/Slider.test.tsx
@@ -284,7 +284,7 @@ describe('Slider', function () {
           <Slider label="Label" defaultValue={50} minValue={0} maxValue={100} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -305,7 +305,7 @@ describe('Slider', function () {
           <Slider label="Label" defaultValue={50} minValue={0} maxValue={100} orientation="vertical" />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -321,7 +321,7 @@ describe('Slider', function () {
           <Slider label="Label" step={20} defaultValue={40} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -338,7 +338,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 230/10 = 23 and then snapped to 20 so it is a multiple of the step
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -355,7 +355,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 25/10 = 2.5, snaps to 2
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -372,7 +372,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 35/10 = 3.5, snaps to 4
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -386,7 +386,7 @@ describe('Slider', function () {
           <Slider label="Label" minValue={-1} defaultValue={0} maxValue={1} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
   });
diff --git a/packages/@react-spectrum/slider/test/utils.ts b/packages/@react-spectrum/slider/test/utils.ts
index 2734c68af6c..74c98edace6 100644
--- a/packages/@react-spectrum/slider/test/utils.ts
+++ b/packages/@react-spectrum/slider/test/utils.ts
@@ -16,7 +16,16 @@ function pressKeyOnButton(key, button) {
   fireEvent.keyDown(button, {key});
   fireEvent.keyUp(button, {key});
 }
-export const press = {
+export const press: {
+  ArrowRight: (button: HTMLElement) => void,
+  ArrowLeft: (button: HTMLElement) => void,
+  ArrowUp: (button: HTMLElement) => void,
+  ArrowDown: (button: HTMLElement) => void,
+  Home: (button: HTMLElement) => void,
+  End: (button: HTMLElement) => void,
+  PageUp: (button: HTMLElement) => void,
+  PageDown: (button: HTMLElement) => void
+} = {
   ArrowRight: (button: HTMLElement) => pressKeyOnButton('ArrowRight', button),
   ArrowLeft: (button: HTMLElement) => pressKeyOnButton('ArrowLeft', button),
   ArrowUp: (button: HTMLElement) => pressKeyOnButton('ArrowUp', button),
@@ -25,9 +34,9 @@ export const press = {
   End: (button: HTMLElement) => pressKeyOnButton('End', button),
   PageUp: (button: HTMLElement) => pressKeyOnButton('PageUp', button),
   PageDown: (button: HTMLElement) => pressKeyOnButton('PageDown', button)
-};
+} as const;
 
-export function testKeypresses([sliderLeft, sliderRight], commands: any[]) {
+export function testKeypresses([sliderLeft, sliderRight]: [HTMLInputElement, HTMLInputElement], commands: any[]): void {
   for (let command of commands) {
     let c = command.left ?? command.right;
     let result = command.result;
diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
index 3425de43bda..83d53ed26d2 100644
--- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
+++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
 import {StatusLight} from '../';
@@ -20,15 +21,17 @@ let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse'
 
 export default {
   title: 'StatusLight'
-};
+} as Meta<SpectrumStatusLightProps>;
+
+export type StatusLightStory = StoryObj<typeof StatusLight>;
 
-export const AllVariants = () => render();
+export const AllVariants: StatusLightStory = () => render();
 
 AllVariants.story = {
   name: 'all variants'
 };
 
-export const Multiline = () => (
+export const Multiline: StatusLightStory = () => (
   <View width="size-3000">
     <StatusLight variant="celery">Super long status light label. Sample text. Arma virumque cano, Troiae qui primus ab oris.</StatusLight>
   </View>
diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
index 14f34ec9596..d9618d05baa 100644
--- a/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
+++ b/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
@@ -11,8 +11,9 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
-import {StatusLight} from '../';
+import {SpectrumStatusLightProps, StatusLight} from '../';
 
 export default {
   title: 'Languages/StatusLight',
@@ -24,9 +25,11 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<SpectrumStatusLightProps>;
+
+export type StatusLightLanguagesStory = StoryObj<typeof StatusLight>;
 
-export const NeutralNoItalicInCcjk = () => (
+export const NeutralNoItalicInCcjk: StatusLightLanguagesStory = () => (
   <Flex gap="size-200" direction="row" wrap>
     <StatusLight variant="neutral">Help</StatusLight>
     <StatusLight variant="neutral">مساعدة</StatusLight>
diff --git a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
index 7cef5f38a90..1faf597f20e 100644
--- a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
+++ b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
@@ -18,7 +18,7 @@ import {Item} from '@react-stately/collections';
 import {Key} from '@react-types/shared';
 import {Meta, StoryObj} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {JSX, useCallback, useMemo, useState} from 'react';
 import {SpectrumStepListProps, StepList} from '../';
 import {View} from '@react-spectrum/view';
 
@@ -76,7 +76,7 @@ export default {
   }
 } as Meta<typeof StepList>;
 
-function DefaultStepList(props: SpectrumStepListProps<object>) {
+function DefaultStepList(props: SpectrumStepListProps<object>): JSX.Element {
   return (
     <StepList {...props}>
       {options.map((o) => <Item key={o.key}>{o.value}</Item>)}
diff --git a/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx b/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
index bddebd01392..20d8cb35bed 100644
--- a/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
+++ b/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
@@ -10,47 +10,50 @@
  * governing permissions and limitations under the License.
  */
 
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
-import {Switch} from '../';
+import {SpectrumSwitchProps, Switch} from '../';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Switch'
-};
+} as Meta<SpectrumSwitchProps>;
+
+export type SwitchStory = StoryFn<typeof Switch>;
 
-export const Default = () => render();
-export const IsDisabledTrue = () => render({isDisabled: true});
+export const Default: SwitchStory = () => render();
+export const IsDisabledTrue: SwitchStory = () => render({isDisabled: true});
 
 IsDisabledTrue.story = {
   name: 'isDisabled: true'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: SwitchStory = () => render({isEmphasized: true});
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueIsDisabledTrue = () =>
+export const IsEmphasizedTrueIsDisabledTrue: SwitchStory = () =>
   render({isEmphasized: true, isDisabled: true});
 
 IsEmphasizedTrueIsDisabledTrue.story = {
   name: 'isEmphasized: true, isDisabled: true'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: SwitchStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const CustomLabel = () => renderCustomLabel();
+export const CustomLabel: SwitchStory = () => renderCustomLabel();
 
 CustomLabel.story = {
   name: 'custom label'
 };
 
-export const LongLabel = () => (
+export const LongLabel: SwitchStory = () => (
   <View width="size-2000">
     <Switch>
       Super long switch label. Sample text. Arma virumque cano, Troiae qui primus ab oris.
@@ -62,7 +65,7 @@ LongLabel.story = {
   name: 'long label'
 };
 
-export const NoLabel = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
+export const NoLabel: SwitchStory = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
 
 NoLabel.story = {
   name: 'no label'
diff --git a/packages/@react-spectrum/table/chromatic/TableView.stories.tsx b/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
index d8996665bc7..9b4f6352752 100644
--- a/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
+++ b/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
@@ -18,8 +18,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 let states = [
   {isQuiet: true},
@@ -111,7 +111,7 @@ let items = [
   {foo: 'Foo 5', bar: 'Baaaaaaaaaar 5', baz: 'Baz 1'}
 ];
 
-const Template = ({columns, items, ...args}) => (
+const Template = ({columns, items, ...args}: SpectrumTableProps<object> & {columns: any[], items: any[]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -175,43 +175,45 @@ const EmptyTemplate = (args) =>
     </TableView>
   );
 
-export const Default = {
-  render: Template,
+export type TableViewStory = StoryObj<typeof Template>;
+
+export const Default: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns',
   args: {columns, items}
 };
 
-export const ColumnAlign = {
-  render: Template,
+export const ColumnAlign: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment',
   args: {columns: alignColumns, items}
 };
 
-export const ColumnDividers = {
-  render: Template,
+export const ColumnDividers: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers',
   args: {columns: dividerColumns, items}
 };
 
-export const ColumnWidth = {
-  render: Template,
+export const ColumnWidth: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths',
   args: {columns: customWidth, items}
 };
 
-export const HiddenColumns = {
-  render: Template,
+export const HiddenColumns: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns',
   args: {columns: hiddenColumns, items}
 };
 
-export const NestedColumns = {
-  render: Template,
+export const NestedColumns: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns',
   args: {columns: nestedColumns, items}
 };
 
-export const MaxHeight = () => (
+export const MaxHeight: StoryFn<SpectrumTableProps<object>> = () => (
   <TableView maxHeight="size-1200">
     <TableHeader columns={columns}>
       {(column: any) => <Column key={column.key}>{column.name}</Column>}
@@ -222,8 +224,8 @@ export const MaxHeight = () => (
   </TableView>
 );
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: TableViewStory = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty table',
   args: {}
 };
diff --git a/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx b/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
index 885b03d5cf0..2c55e96363a 100644
--- a/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
+++ b/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
@@ -19,8 +19,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 enableTableNestedRows();
 
@@ -120,7 +120,7 @@ let nestedItems = [
   ]}
 ];
 
-const Template = ({combos, columns, items, ...args}) => (
+const Template = ({combos, columns, items, ...args}: SpectrumTableProps<object> & {combos: any[], columns: any[], items: any[]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -166,7 +166,7 @@ function renderEmptyState() {
   );
 }
 
-const EmptyTemplate = (args) =>
+const EmptyTemplate = (args: SpectrumTableProps<object>): JSX.Element =>
   (
     <TableView {...args} maxWidth={700} height={400} renderEmptyState={renderEmptyState} UNSTABLE_allowsExpandableRows>
       <TableHeader columns={columns}>
@@ -184,116 +184,118 @@ const EmptyTemplate = (args) =>
     </TableView>
   );
 
-export const Default = {
-  render: Template,
+export type TreeGridTableStory = StoryObj<typeof Template>;
+
+export const Default: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 1 of 3',
   args: {combos: combo1, columns, items: nestedItems}
 };
 
-export const DefaultPt2 = {
-  render: Template,
+export const DefaultPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 2 of 3',
   args: {combos: combo2, columns, items: nestedItems}
 };
 
-export const DefaultPt3 = {
-  render: Template,
+export const DefaultPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 3 of 3',
   args: {combos: combo3, columns, items: nestedItems}
 };
 
-export const ColumnAlign = {
-  render: Template,
+export const ColumnAlign: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 1 of 3',
   args: {combos: combo1, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnAlignPt2 = {
-  render: Template,
+export const ColumnAlignPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 2 of 3',
   args: {combos: combo2, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnAlignPt3 = {
-  render: Template,
+export const ColumnAlignPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 3 of 3',
   args: {combos: combo3, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnDividers = {
-  render: Template,
+export const ColumnDividers: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 1 of 3',
   args: {combos: combo1, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnDividersPt2 = {
-  render: Template,
+export const ColumnDividersPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 2 of 3',
   args: {combos: combo2, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnDividersPt3 = {
-  render: Template,
+export const ColumnDividersPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 3 of 3',
   args: {combos: combo3, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnWidth = {
-  render: Template,
+export const ColumnWidth: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 1 of 3',
   args: {combos: combo1, columns: customWidth, items: nestedItems}
 };
 
-export const ColumnWidthPt2 = {
-  render: Template,
+export const ColumnWidthPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 2 of 3',
   args: {combos: combo2, columns: customWidth, items: nestedItems}
 };
 
-export const ColumnWidthPt3 = {
-  render: Template,
+export const ColumnWidthPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 3 of 3',
   args: {combos: combo3, columns: customWidth, items: nestedItems}
 };
 
-export const HiddenColumns = {
-  render: Template,
+export const HiddenColumns: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 1 of 3',
   args: {combos: combo1, columns: hiddenColumns, items: nestedItems}
 };
 
-export const HiddenColumnsPt2 = {
-  render: Template,
+export const HiddenColumnsPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 2 of 3',
   args: {combos: combo2, columns: hiddenColumns, items: nestedItems}
 };
 
-export const HiddenColumnsPt3 = {
-  render: Template,
+export const HiddenColumnsPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 3 of 3',
   args: {combos: combo3, columns: hiddenColumns, items: nestedItems}
 };
 
-export const NestedColumns = {
-  render: Template,
+export const NestedColumns: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 1 of 3',
   args: {combos: combo1, columns: nestedColumns, items: nestedItems}
 };
 
-export const NestedColumnsPt2 = {
-  render: Template,
+export const NestedColumnsPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 2 of 3',
   args: {combos: combo2, columns: nestedColumns, items: nestedItems}
 };
 
-export const NestedColumnsPt3 = {
-  render: Template,
+export const NestedColumnsPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 3 of 3',
   args: {combos: combo3, columns: nestedColumns, items: nestedItems}
 };
 
 
-export const MaxHeight = () => (
+export const MaxHeight: StoryFn<SpectrumTableProps<object>> = () => (
   <TableView maxHeight="size-1200" UNSTABLE_allowsExpandableRows>
     <TableHeader columns={columns}>
       {(column: any) => <Column key={column.key}>{column.name}</Column>}
@@ -304,8 +306,8 @@ export const MaxHeight = () => (
   </TableView>
 );
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: TreeGridTableStory = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty table',
   args: {}
 };
diff --git a/packages/@react-spectrum/table/stories/CRUDExample.tsx b/packages/@react-spectrum/table/stories/CRUDExample.tsx
index 8fa0b32e694..2b319dc0290 100644
--- a/packages/@react-spectrum/table/stories/CRUDExample.tsx
+++ b/packages/@react-spectrum/table/stories/CRUDExample.tsx
@@ -15,7 +15,7 @@ import {ActionGroup} from '@react-spectrum/actiongroup';
 import Add from '@spectrum-icons/workflow/Add';
 import {AlertDialog, Dialog, DialogContainer, useDialogContainer} from '@react-spectrum/dialog';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Content} from '@react-spectrum/view';
 import Delete from '@spectrum-icons/workflow/Delete';
 import {Divider} from '@react-spectrum/divider';
@@ -27,11 +27,11 @@ import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Key} from '@react-types/shared';
 import More from '@spectrum-icons/workflow/More';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 import {useListData} from '@react-stately/data';
 
-export function CRUDExample(props) {
+export function CRUDExample(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let list = useListData({
     initialItems: [
       {id: 1, firstName: 'Sam', lastName: 'Smith', birthday: 'May 3'},
@@ -50,7 +50,7 @@ export function CRUDExample(props) {
     <Flex direction="column">
       <ActionGroup marginBottom={8} onAction={action => setDialog({action})}>
         <Item key="add" aria-label="Add item"><Add /></Item>
-        {selectedCount > 0 
+        {selectedCount > 0
           ? <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
           : null
         }
diff --git a/packages/@react-spectrum/table/stories/ControllingResize.tsx b/packages/@react-spectrum/table/stories/ControllingResize.tsx
index 0eb194beff6..4bcd4750a7e 100644
--- a/packages/@react-spectrum/table/stories/ControllingResize.tsx
+++ b/packages/@react-spectrum/table/stories/ControllingResize.tsx
@@ -14,7 +14,7 @@ import {Button} from '@react-spectrum/button';
 import {Cell, Column, Row, SpectrumColumnProps, TableBody, TableHeader, TableView} from '../';
 import {ColumnSize} from '@react-types/table';
 import {Key} from '@react-types/shared';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {JSX, useCallback, useMemo, useState} from 'react';
 
 export interface PokemonColumn extends Omit<SpectrumColumnProps<any>, 'children'> {
   name: string,
@@ -52,7 +52,7 @@ let defaultRows: PokemonData[] = [
   {id: 12, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'}
 ];
 
-export function ControllingResize(props: {columns?: PokemonColumn[], rows?: PokemonData[], onResize?: (sizes: Map<Key, ColumnSize>) => void, [name: string]: any}) {
+export function ControllingResize(props: {columns?: PokemonColumn[], rows?: PokemonData[], onResize?: (sizes: Map<Key, ColumnSize>) => void, [name: string]: any}): JSX.Element {
   let {columns = defaultColumns, rows = defaultRows, onResize, ...otherProps} = props;
   let [widths, _setWidths] = useState<Map<Key, ColumnSize | null>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width ?? null])));
 
diff --git a/packages/@react-spectrum/table/stories/HidingColumns.tsx b/packages/@react-spectrum/table/stories/HidingColumns.tsx
index 58a84582e2f..d44a85a49b7 100644
--- a/packages/@react-spectrum/table/stories/HidingColumns.tsx
+++ b/packages/@react-spectrum/table/stories/HidingColumns.tsx
@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import React from 'react';
+import React, {JSX} from 'react';
 
 let columns = [
   {key: 'planName', title: 'Plan Name'},
@@ -33,7 +33,7 @@ let data = [
   {id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
 ];
 
-export function HidingColumns(props) {
+export function HidingColumns(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
   let toggleColumn = (key) => {
     let columns = new Set(visibleColumns);
diff --git a/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx b/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
index d1264073b8a..7b042f4dcce 100644
--- a/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
+++ b/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import React from 'react';
+import React, {JSX} from 'react';
 
 let columns = [
   {key: 'planName', title: 'Plan Name'},
@@ -33,7 +33,7 @@ let data = [
   {id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
 ];
 
-export function HidingColumnsAllowsResizing(props) {
+export function HidingColumnsAllowsResizing(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
   let toggleColumn = (key) => {
     let columns = new Set(visibleColumns);
diff --git a/packages/@react-spectrum/table/stories/Performance.tsx b/packages/@react-spectrum/table/stories/Performance.tsx
index 8d49f629c70..2331ced338c 100644
--- a/packages/@react-spectrum/table/stories/Performance.tsx
+++ b/packages/@react-spectrum/table/stories/Performance.tsx
@@ -6,7 +6,7 @@ import {Icon} from '@react-spectrum/icon';
 import {Item, TagGroup} from '@react-spectrum/tag';
 import {Link} from '@react-spectrum/link';
 import {ProgressBar} from '@react-spectrum/progress';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
 import {Text} from '@react-spectrum/text';
 
@@ -94,7 +94,7 @@ const getData = (rowNumber: number, columnNumber: number) => {
   };
 };
 
-export function Performance() {
+export function Performance(): JSX.Element {
   const {data, columns} = getData(DATA_SIZE, COLUMN_SIZE);
   return (
     <TableView
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 0b75cdce143..26734f7f218 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -27,13 +27,13 @@ import {Heading} from '@react-spectrum/text';
 import {HidingColumns} from './HidingColumns';
 import {HidingColumnsAllowsResizing} from './HidingColumnsAllowsResizing';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Key, LoadingState} from '@react-types/shared';
+import {Key, LoadingState, SortDescriptor} from '@react-types/shared';
 import {Link} from '@react-spectrum/link';
-import {Meta, StoryObj} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import {Picker} from '@react-spectrum/picker';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {useCallback, useState} from 'react';
+import React, {JSX, useCallback, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -125,7 +125,7 @@ export default {
   }
 } as Meta<typeof TableView>;
 
-export type TableStory = StoryObj<typeof TableView>;
+export type TableStory = StoryObj<Omit<typeof TableView, 'children'>>;
 
 
 // Known accessibility issue that will be caught by aXe: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#tableview
@@ -163,7 +163,7 @@ export let columns = [
   {name: 'Foo', key: 'foo'},
   {name: 'Bar', key: 'bar'},
   {name: 'Baz', key: 'baz'}
-];
+] as any[];
 
 let items = [
   {test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
@@ -444,7 +444,9 @@ let timeTableRows = [
   {id: 6, time: '13:00 - 14:00', monday: 'History', tuesday: 'Math', wednesday: 'English', thursday: 'Science', friday: 'Art'}
 ];
 
-export const TableColSpanExample = () => {
+export type TableStoryFn = StoryFn<Omit<typeof TableView, 'children'>>;
+
+export const TableColSpanExample: TableStoryFn = () => {
   return (
     <TableView aria-label="Timetable">
       <TableHeader columns={timeTableColumns}>
@@ -474,7 +476,7 @@ export const TableColSpanExample = () => {
   );
 };
 
-export const TableCellColSpanWithVariousSpansExample = () => {
+export const TableCellColSpanWithVariousSpansExample: TableStoryFn = () => {
   return (
     <TableView aria-label="Table with various colspans">
       <TableHeader>
@@ -630,7 +632,7 @@ export const ManyColumnsAndRows: TableStory = {
   name: 'many columns and rows'
 };
 
-const TableViewFilledCellWidths = (props: SpectrumTableProps<unknown> & {allowsResizing: boolean}) => {
+const TableViewFilledCellWidths = (props: SpectrumTableProps<unknown> & {allowsResizing: boolean}): JSX.Element => {
   let {allowsResizing, ...otherProps} = props;
   return (
     <TableView {...otherProps}>
@@ -861,7 +863,7 @@ export const CRUD: TableStory = {
   name: 'CRUD'
 };
 
-function DeletableRowsTable(props: SpectrumTableProps<unknown>) {
+function DeletableRowsTable(props: Omit<SpectrumTableProps<unknown>, 'children'>) {
   let list = useListData({
     initialItems: [
       {id: 1, firstName: 'Sam', lastName: 'Smith', birthday: 'May 3'},
@@ -1005,10 +1007,10 @@ function renderEmptyState() {
   );
 }
 
-export function EmptyStateTable(props) {
+export let EmptyStateTable = (props: Omit<SpectrumTableProps<unknown>, 'children'> & {items: any[], columns: any[], allowsSorting: boolean}): JSX.Element => {
   let {items, columns, allowsSorting, ...otherProps} = props;
   let [show, setShow] = useState(false);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>();
   return (
     <Flex direction="column">
       <ActionButton width="100px" onPress={() => setShow(show => !show)}>Toggle items</ActionButton>
@@ -1028,9 +1030,9 @@ export function EmptyStateTable(props) {
       </TableView>
     </Flex>
   );
-}
+};
 
-export const EmptyStateStory: TableStory = {
+export const EmptyStateStory: StoryObj<typeof EmptyStateTable> = {
   render: (args) => <EmptyStateTable {...args} />,
   name: 'renderEmptyState'
 };
@@ -2118,7 +2120,7 @@ export const TypeaheadWithDialog: TableStory = {
   )
 };
 
-export const Links = (args) => {
+export const Links: TableStoryFn = (args) => {
   return (
     <TableView {...args} aria-label="Bookmarks table" onSelectionChange={action('onSelectionChange')}>
       <TableHeader>
@@ -2152,7 +2154,7 @@ export const Links = (args) => {
   );
 };
 
-export const ColumnHeaderFocusRingTable = {
+export const ColumnHeaderFocusRingTable: StoryObj<typeof LoadingTable> = {
   render: () => <LoadingTable />,
   name: 'column header focus after loading',
   parameters: {
@@ -2167,7 +2169,7 @@ const allItems = [
   {key: 'julia', name: 'Julia', height: 70, birthday: 'February 10'}
 ];
 
-function LoadingTable() {
+function LoadingTable(): JSX.Element {
   const [items, setItems] = useState(allItems);
   const [loadingState, setLoadingState] = useState<LoadingState>('idle');
   const onSortChange = () => {
diff --git a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
index 31d8cc25225..f8f3beb8440 100644
--- a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
@@ -91,7 +91,7 @@ export const DragWithinTable: TableStory = {
   name: 'Drag within table (Reorder)'
 };
 
-let manyItems: typeof items = [];
+let manyItems: Array<{id: string, first_name: string, last_name: string, email: string, ip_address: string, department: string, job_title: string}> = [];
 for (let i = 0; i < 100; i++) {
   manyItems.push({...items[i % 10], id: `${i}`});
 }
diff --git a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
index 668ad84463a..cde0101e701 100644
--- a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
@@ -1,10 +1,10 @@
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {chain} from '@react-aria/utils';
+import {DragEndEvent, DragStartEvent, DropEvent, ItemDropTarget, Key} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
-import {ItemDropTarget, Key} from '@react-types/shared';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
@@ -40,11 +40,11 @@ export let items = [
   {id: 'h', first_name: 'Cathy', last_name: 'Lishman', email: 'clishman7@constantcontact.com', ip_address: '181.158.213.202', department: 'Research and Development', job_title: 'Assistant Professor'},
   {id: 'i', first_name: 'Enrika', last_name: 'Soitoux', email: 'esoitoux8@google.com.hk', ip_address: '51.244.20.173', department: 'Support', job_title: 'Teacher'},
   {id: 'j', first_name: 'Aloise', last_name: 'Tuxsell', email: 'atuxsell9@jigsy.com', ip_address: '253.46.84.168', department: 'Training', job_title: 'Financial Advisor'}
-];
+] as const;
 
 let getAllowedDropOperationsAction = action('getAllowedDropOperationsAction');
 
-export function DragExample(props?) {
+export function DragExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any}): JSX.Element {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.id === key)!;
@@ -78,7 +78,7 @@ export function DragExample(props?) {
   );
 }
 
-export function DragWithoutRowHeaderExample(props?)  {
+export function DragWithoutRowHeaderExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any}): JSX.Element {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.id === key)!;
@@ -112,10 +112,10 @@ export function DragWithoutRowHeaderExample(props?)  {
   );
 }
 
-export function ReorderExample(props) {
+export function ReorderExample(props: {onDrop?: (e: DropEvent) => void, onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void, tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items?: any[]}): JSX.Element {
   let {onDrop, onDragStart, onDragEnd, tableViewProps} = props;
   let list = useListData({
-    initialItems: (props.items as typeof items) || items,
+    initialItems: props.items || (items as unknown as any[]),
     getKey: item => item.id
   });
 
@@ -147,7 +147,7 @@ export function ReorderExample(props) {
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     async onDrop(e) {
-      onDrop(e);
+      onDrop?.(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
         let keys: Key[] = [];
         for (let item of e.items) {
@@ -192,7 +192,7 @@ export function ReorderExample(props) {
   );
 }
 
-export function DragOntoRowExample(props) {
+export function DragOntoRowExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any, dropHookOptions?: {onDrop?: (e: DropEvent) => void}}): JSX.Element {
   let {
     tableViewProps = {},
     dragHookOptions = {},
@@ -328,7 +328,7 @@ let itemColumns = [
   {name: 'Name', key: 'name'}
 ];
 
-export function DragBetweenTablesExample(props) {
+export function DragBetweenTablesExample(props: {onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void, onDrop?: (e: DropEvent) => void, tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items1?: any[], items2?: any[]}): JSX.Element {
   let {onDragStart, onDragEnd, onDrop} = props;
   let onDropAction = chain(action('onDrop'), onDrop);
   onDragStart = chain(action('dragStart'), onDragStart);
@@ -449,7 +449,7 @@ export function DragBetweenTablesExample(props) {
   );
 }
 
-export function DragBetweenTablesRootOnlyExample(props) {
+export function DragBetweenTablesRootOnlyExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items1?: any[], items2?: any[], dragHookOptions?: {onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void}, dropHookOptions?: {onDrop?: (e: DropEvent) => void}}): JSX.Element {
   let {
     tableViewProps = {},
     dragHookOptions = {},
diff --git a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
index 62957cc62aa..dba902b9e1c 100644
--- a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
@@ -1,9 +1,9 @@
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '..';
-import {DIRECTORY_DRAG_TYPE, useDragAndDrop} from '@react-spectrum/dnd';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '..';
+import {DIRECTORY_DRAG_TYPE, DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import {Flex} from '@react-spectrum/layout';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useListData} from '@react-stately/data';
 
@@ -55,7 +55,7 @@ let columns = [
     {name: 'Type', key: 'type'}
 ];
 
-export function DragExampleUtilHandlers(props) {
+export function DragExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions} = {}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -91,7 +91,7 @@ export function DragExampleUtilHandlers(props) {
   );
 }
 
-export function ReorderExampleUtilHandlers(props) {
+export function ReorderExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -160,7 +160,7 @@ export function ReorderExampleUtilHandlers(props) {
   );
 }
 
-export function ItemDropExampleUtilHandlers(props) {
+export function ItemDropExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -216,7 +216,7 @@ export function ItemDropExampleUtilHandlers(props) {
   );
 }
 
-export function RootDropExampleUtilHandlers(props) {
+export function RootDropExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -297,7 +297,7 @@ export function RootDropExampleUtilHandlers(props) {
   );
 }
 
-export function InsertExampleUtilHandlers(props) {
+export function InsertExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -387,7 +387,7 @@ export function InsertExampleUtilHandlers(props) {
   );
 }
 
-export function FinderDropUtilHandlers(props) {
+export function FinderDropUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -456,7 +456,7 @@ export function FinderDropUtilHandlers(props) {
   );
 }
 
-export function DragBetweenTablesComplex(props) {
+export function DragBetweenTablesComplex(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -668,7 +668,7 @@ export function DragBetweenTablesComplex(props) {
   );
 }
 
-export function DragBetweenTablesOverride(props) {
+export function DragBetweenTablesOverride(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let list1 = useListData({
     initialItems: [
       {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
diff --git a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
index 8f0fb8418c6..35c077d1c75 100644
--- a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
@@ -19,15 +19,54 @@ import {enableTableNestedRows} from '@react-stately/flags';
 import {Flex} from '@react-spectrum/layout';
 import {Key} from '@react-types/shared';
 import {Meta, StoryObj} from '@storybook/react';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 
 enableTableNestedRows();
 
 export default {
   ...defaultConfig,
-  title: 'TableView/Expandable rows'
+  title: 'TableView/Expandable rows',
+  excludeStories: [
+    'StaticExpandableRowsRender',
+    'DynamicExpandableRowsStoryRender',
+    'UserSetRowHeaderRender',
+    'ManyExpandableRowsStoryRender',
+    'EmptyTreeGridStoryRender',
+    'LoadingTreeGridStoryRender'
+  ]
 } as Meta<typeof TableView>;
 
+export const StaticExpandableRowsRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <TableView aria-label="TableView with static expandable rows" width={500} height={200} UNSTABLE_defaultExpandedKeys={['row 1']} UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
+    <TableHeader>
+      <Column key="foo">Foo</Column>
+      <Column key="bar">Bar</Column>
+      <Column key="baz">Baz</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="row 1">
+        <Cell>Lvl 1 Foo 1</Cell>
+        <Cell>Lvl 1 Bar 1</Cell>
+        <Cell> Lvl 1 Baz 1</Cell>
+        <Row key="child row 1 level 2">
+          <Cell>Lvl 2 Foo 1</Cell>
+          <Cell>Lvl 2 Bar 1</Cell>
+          <Cell>Lvl 2 Baz 1</Cell>
+          <Row key="child row 1 level 3">
+            <Cell>Lvl 3 Foo 1</Cell>
+            <Cell>Lvl 3 Bar 1</Cell>
+            <Cell>Lvl 3 Baz 1</Cell>
+          </Row>
+        </Row>
+        <Row key="child row 2 level 2">
+          <Cell>Lvl 2 Foo 2</Cell>
+          <Cell>Lvl 2 Bar 2</Cell>
+          <Cell>Lvl 2 Baz 2</Cell>
+        </Row>
+      </Row>
+    </TableBody>
+  </TableView>
+);
 // Known accessibility issue that will be caught by aXe: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#tableview
 export const StaticExpandableRows: TableStory = {
   args: {
@@ -35,37 +74,7 @@ export const StaticExpandableRows: TableStory = {
     width: 500,
     height: 200
   },
-  render: (args) => (
-    <TableView UNSTABLE_defaultExpandedKeys={['row 1']} UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
-      <TableHeader>
-        <Column key="foo">Foo</Column>
-        <Column key="bar">Bar</Column>
-        <Column key="baz">Baz</Column>
-      </TableHeader>
-      <TableBody>
-        <Row key="row 1">
-          <Cell>Lvl 1 Foo 1</Cell>
-          <Cell>Lvl 1 Bar 1</Cell>
-          <Cell> Lvl 1 Baz 1</Cell>
-          <Row key="child row 1 level 2">
-            <Cell>Lvl 2 Foo 1</Cell>
-            <Cell>Lvl 2 Bar 1</Cell>
-            <Cell>Lvl 2 Baz 1</Cell>
-            <Row key="child row 1 level 3">
-              <Cell>Lvl 3 Foo 1</Cell>
-              <Cell>Lvl 3 Bar 1</Cell>
-              <Cell>Lvl 3 Baz 1</Cell>
-            </Row>
-          </Row>
-          <Row key="child row 2 level 2">
-            <Cell>Lvl 2 Foo 2</Cell>
-            <Cell>Lvl 2 Bar 2</Cell>
-            <Cell>Lvl 2 Baz 2</Cell>
-          </Row>
-        </Row>
-      </TableBody>
-    </TableView>
-  ),
+  render: (args) => <StaticExpandableRowsRender {...args} />,
   name: 'static with expandable rows'
 };
 
@@ -78,7 +87,7 @@ let nestedItems = [
   ]}
 ];
 
-function DynamicExpandableRows(props: SpectrumTableProps<unknown>) {
+function DynamicExpandableRows(props: Omit<SpectrumTableProps<unknown>, 'children'>) {
   let [expandedKeys, setExpandedKeys] = useState<'all' | Set<Key>>('all');
 
   return (
@@ -105,55 +114,65 @@ function DynamicExpandableRows(props: SpectrumTableProps<unknown>) {
   );
 }
 
+export const DynamicExpandableRowsStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <DynamicExpandableRows aria-label="TableView with dynamic expandable rows" width={500} height={400} {...args} />
+);
+
 export const DynamicExpandableRowsStory: TableStory = {
   args: {
     'aria-label': 'TableView with dynamic expandable rows',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <DynamicExpandableRows {...args} />
-  ),
+  render: (args) => <DynamicExpandableRowsStoryRender {...args} />,
   name: 'dynamic with expandable rows'
 };
 
+export const UserSetRowHeaderRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <TableView
+    UNSTABLE_allowsExpandableRows
+    UNSTABLE_onExpandedChange={action('onExpandedChange')}
+    aria-label="TableView with expandable rows and multiple row headers"
+    width={500}
+    height={400}
+    {...args}>
+    <TableHeader>
+      <Column key="foo" allowsResizing>Foo</Column>
+      <Column isRowHeader allowsResizing key="bar">Bar</Column>
+      <Column isRowHeader key="baz" allowsResizing>Baz</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="test">
+        <Cell>Lvl 1 Foo 1</Cell>
+        <Cell>Lvl 1 Bar 1</Cell>
+        <Cell>Lvl 1 Baz 1</Cell>
+        <Row>
+          <Cell>Lvl 2 Foo 1</Cell>
+          <Cell>Lvl 2 Bar 1</Cell>
+          <Cell>Lvl 2 Baz 1</Cell>
+          <Row>
+            <Cell>Lvl 3 Foo 1</Cell>
+            <Cell>Lvl 3 Bar 1</Cell>
+            <Cell>Lvl 3 Baz 1</Cell>
+          </Row>
+        </Row>
+        <Row>
+          <Cell>Lvl 2 Foo 2</Cell>
+          <Cell>Lvl 2 Bar 2</Cell>
+          <Cell>Lvl 2 Baz 2</Cell>
+        </Row>
+      </Row>
+    </TableBody>
+  </TableView>
+);
+
 export const UserSetRowHeader: TableStory = {
   args: {
     'aria-label': 'TableView with expandable rows and multiple row headers',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <TableView UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
-      <TableHeader>
-        <Column key="foo" allowsResizing>Foo</Column>
-        <Column isRowHeader allowsResizing key="bar">Bar</Column>
-        <Column isRowHeader key="baz" allowsResizing>Baz</Column>
-      </TableHeader>
-      <TableBody>
-        <Row key="test">
-          <Cell>Lvl 1 Foo 1</Cell>
-          <Cell>Lvl 1 Bar 1</Cell>
-          <Cell>Lvl 1 Baz 1</Cell>
-          <Row>
-            <Cell>Lvl 2 Foo 1</Cell>
-            <Cell>Lvl 2 Bar 1</Cell>
-            <Cell>Lvl 2 Baz 1</Cell>
-            <Row>
-              <Cell>Lvl 3 Foo 1</Cell>
-              <Cell>Lvl 3 Bar 1</Cell>
-              <Cell>Lvl 3 Baz 1</Cell>
-            </Row>
-          </Row>
-          <Row>
-            <Cell>Lvl 2 Foo 2</Cell>
-            <Cell>Lvl 2 Bar 2</Cell>
-            <Cell>Lvl 2 Baz 2</Cell>
-          </Row>
-        </Row>
-      </TableBody>
-    </TableView>
-  ),
+  render: (args) => <UserSetRowHeaderRender {...args} />,
   name: 'multiple user set row headers',
   parameters: {
     description: {
@@ -183,13 +202,17 @@ function generateRows(count = 5) {
   return manyRows;
 }
 
-interface ManyExpandableRowsProps extends SpectrumTableProps<unknown> {
+interface ManyExpandableRowsProps extends Omit<SpectrumTableProps<unknown>, 'children'> {
   allowsResizing?: boolean,
   showDivider?: boolean,
   rowCount?: number
 }
 
-function ManyExpandableRows(props: ManyExpandableRowsProps) {
+export const ManyExpandableRowsStoryRender = (args: ManyExpandableRowsProps): JSX.Element => (
+  <ManyExpandableRows aria-label="TableView with many dynamic expandable rows" width={500} height={400} rowCount={5} {...args} />
+);
+
+function ManyExpandableRows(props: ManyExpandableRowsProps): JSX.Element {
   let {allowsResizing, showDivider, ...otherProps} = props;
   let [expandedKeys, setExpandedKeys] = useState<'all' | Set<Key>>('all');
   let manyRows = generateRows(props.rowCount ?? 5);
@@ -224,20 +247,22 @@ export const ManyExpandableRowsStory: StoryObj<typeof ManyExpandableRows> = {
     rowCount: 5
   },
   render: (args) => (
-    <ManyExpandableRows {...args} />
+    <ManyExpandableRowsStoryRender {...args} />
   ),
   name: 'many expandable rows'
 };
 
+export const EmptyTreeGridStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={generateRows()} allowsSorting={false} width={500} height={400} {...args} />
+);
+
 export const EmptyTreeGridStory: TableStory = {
   args: {
     'aria-label': 'TableView with empty state',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={generateRows()} allowsSorting={false} onSortChange={null} sortDescriptor={null} {...args} />
-  ),
+  render: (args) => <EmptyTreeGridStoryRender {...args} />,
   name: 'empty state'
 };
 
@@ -263,15 +288,17 @@ function LoadingStateTable(props) {
   );
 }
 
+export const LoadingTreeGridStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <LoadingStateTable aria-label="TableView with loading" width={500} height={400} {...args} />
+);
+
 export const LoadingTreeGridStory: TableStory = {
   args: {
     'aria-label': 'TableView with loading',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <LoadingStateTable {...args} />
-  ),
+  render: (args) => <LoadingTreeGridStoryRender {...args} />,
   name: 'isLoading'
 };
 
diff --git a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
index 1788b3f1ede..7b5eb4b1914 100644
--- a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
+++ b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
@@ -21,25 +21,22 @@ import {
   within
 } from '@react-spectrum/test-utils-internal';
 import {announce} from '@react-aria/live-announcer';
-import {composeStories} from '@storybook/react';
+import {
+  DynamicExpandableRowsStoryRender as DynamicExpandableTable,
+  EmptyTreeGridStoryRender as EmptyStateTable,
+  LoadingTreeGridStoryRender as LoadingTable,
+  ManyExpandableRowsStoryRender as ManyRowsExpandableTable,
+  StaticExpandableRowsRender as StaticExpandableTable,
+  UserSetRowHeaderRender as UserSetRowHeaderTable
+} from '../stories/TreeGridTable.stories';
 import {enableTableNestedRows} from '@react-stately/flags';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {Scale} from '@react-types/provider';
 import {scrollIntoView} from '@react-aria/utils';
-import * as stories from '../stories/TreeGridTable.stories';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
-let {
-  StaticExpandableRows: StaticExpandableTable,
-  DynamicExpandableRowsStory: DynamicExpandableTable,
-  ManyExpandableRowsStory: ManyRowsExpandableTable,
-  EmptyTreeGridStory: EmptyStateTable,
-  LoadingTreeGridStory: LoadingTable,
-  UserSetRowHeader: UserSetRowHeaderTable
-} = composeStories(stories);
-
 let onSelectionChange = jest.fn();
 let onExpandedChange = jest.fn();
 let onAction = jest.fn();
diff --git a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
index 9a5496d7447..1671c2b2cdb 100644
--- a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
@@ -12,8 +12,8 @@
 
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, TabList, TabPanels, Tabs} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTabsProps} from '@react-types/tabs';
 
 const meta: Meta<SpectrumTabsProps<object>> = {
@@ -29,7 +29,9 @@ const meta: Meta<SpectrumTabsProps<object>> = {
 
 export default meta;
 
-const Template = (args: SpectrumTabsProps<object>) => (
+export type TabsStoryProps = StoryObj<SpectrumTabsProps<object>>;
+
+const Template = (args: SpectrumTabsProps<object>): JSX.Element => (
   <Tabs {...args} aria-label="Tab example" maxWidth={500}>
     <TabList>
       <Item key="val1">Tab 1</Item>
@@ -73,77 +75,77 @@ const Template = (args: SpectrumTabsProps<object>) => (
   </Tabs>
 );
 
-export const Default = {
-  render: Template,
+export const Default: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {}
 };
 
-export const DefaultMobileViewport = {
-  render: Template,
+export const DefaultMobileViewport: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isEmphasized: true}
 };
 
-export const Compact = {
-  render: Template,
+export const Compact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, density: 'compact'}
 };
 
-export const CompactQuiet = {
-  render: Template,
+export const CompactQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Quiet.args, ...Compact.args}
 };
 
-export const Vertical = {
-  render: Template,
+export const Vertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, orientation: 'vertical'}
 };
 
-export const VerticalQuiet = {
-  render: Template,
+export const VerticalQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...Quiet.args}
 };
 
-export const VerticalCompact = {
-  render: Template,
+export const VerticalCompact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...Compact.args}
 };
 
-export const VerticalCompactQuiet = {
-  render: Template,
+export const VerticalCompactQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...CompactQuiet.args}
 };
 
-export const EmphasizedQuiet = {
-  render: Template,
+export const EmphasizedQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Quiet.args}
 };
 
-export const EmphasizedVertical = {
-  render: Template,
+export const EmphasizedVertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Vertical.args}
 };
 
-export const EmphasizedVerticalQuiet = {
-  render: Template,
+export const EmphasizedVerticalQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Vertical.args, ...Quiet.args}
 };
 
-export const EmphasizedCompact = {
-  render: Template,
+export const EmphasizedCompact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Compact.args}
 };
 
-export const EmphasizedCompactVertical = {
-  render: Template,
+export const EmphasizedCompactVertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Compact.args, ...Vertical.args}
 };
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
index ebc359adeea..40ee193491a 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
@@ -19,6 +19,7 @@ import Calendar from '@spectrum-icons/workflow/Calendar';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
 import {Item, TabList, TabPanels, Tabs} from '..';
 import {Key} from '@react-types/shared';
+import {Meta, StoryFn} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
 import React, {ReactNode, useCallback, useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
@@ -27,128 +28,130 @@ import {TextField} from '@react-spectrum/textfield';
 
 export default {
   title: 'Tabs'
-};
+} as Meta<typeof Tabs>;
+
+export type TabsStory = StoryFn<typeof Tabs>;
 
-export const Default = () => render();
-export const WithFalsyItemKey = () => renderWithFalsyKey();
+export const Default: TabsStory = () => render();
+export const WithFalsyItemKey: TabsStory = () => renderWithFalsyKey();
 
 WithFalsyItemKey.story = {
   name: 'with falsy item key'
 };
 
-export const DefaultSelectedKeyVal2 = () => render({defaultSelectedKey: 'val2'});
+export const DefaultSelectedKeyVal2: TabsStory = () => render({defaultSelectedKey: 'val2'});
 
 DefaultSelectedKeyVal2.story = {
   name: 'defaultSelectedKey: val2'
 };
 
-export const ControlledSelectedKeyVal3 = () => render({selectedKey: 'val3'});
+export const ControlledSelectedKeyVal3: TabsStory = () => render({selectedKey: 'val3'});
 
 ControlledSelectedKeyVal3.story = {
   name: 'controlled: selectedKey: val3'
 };
 
-export const OrientationVertical = () => render({orientation: 'vertical'});
+export const OrientationVertical: TabsStory = () => render({orientation: 'vertical'});
 
 OrientationVertical.story = {
   name: 'orientation: vertical'
 };
 
-export const DensityCompact = () => render({density: 'compact'});
+export const DensityCompact: TabsStory = () => render({density: 'compact'});
 
 DensityCompact.story = {
   name: 'density: compact'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: TabsStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const IsQuietDensityCompact = () => render({isQuiet: true, density: 'compact'});
+export const IsQuietDensityCompact: TabsStory = () => render({isQuiet: true, density: 'compact'});
 
 IsQuietDensityCompact.story = {
   name: 'isQuiet, density: compact'
 };
 
-export const DensityCompactOrientationVertical = () =>
+export const DensityCompactOrientationVertical: TabsStory = () =>
   render({density: 'compact', orientation: 'vertical'});
 
 DensityCompactOrientationVertical.story = {
   name: 'density: compact, orientation: vertical'
 };
 
-export const Icons = () => renderWithIcons();
+export const Icons: TabsStory = () => renderWithIcons();
 
 Icons.story = {
   name: 'icons'
 };
 
-export const IconsDensityCompact = () => renderWithIcons({density: 'compact'});
+export const IconsDensityCompact: TabsStory = () => renderWithIcons({density: 'compact'});
 
 IconsDensityCompact.story = {
   name: 'icons, density: compact'
 };
 
-export const IconsOrientationVertical = () => renderWithIcons({orientation: 'vertical'});
+export const IconsOrientationVertical: TabsStory = () => renderWithIcons({orientation: 'vertical'});
 
 IconsOrientationVertical.story = {
   name: 'icons, orientation: vertical'
 };
 
-export const IconsDensityCompactOrientationVertical = () =>
+export const IconsDensityCompactOrientationVertical: TabsStory = () =>
   renderWithIcons({orientation: 'vertical', density: 'compact'});
 
 IconsDensityCompactOrientationVertical.story = {
   name: 'icons, density: compact, orientation: vertical'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: TabsStory = () => render({isEmphasized: true});
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueIconsIsQuietTrue = () =>
+export const IsEmphasizedTrueIconsIsQuietTrue: TabsStory = () =>
   renderWithIcons({isEmphasized: true, isQuiet: true});
 
 IsEmphasizedTrueIconsIsQuietTrue.story = {
   name: 'isEmphasized: true, icons, isQuiet: true'
 };
 
-export const IsEmphasizedTrueOrientationVertical = () =>
+export const IsEmphasizedTrueOrientationVertical: TabsStory = () =>
   render({isEmphasized: true, orientation: 'vertical'});
 
 IsEmphasizedTrueOrientationVertical.story = {
   name: 'isEmphasized: true, orientation: vertical'
 };
 
-export const DisableAllTabs = () => render({isDisabled: true});
+export const DisableAllTabs: TabsStory = () => render({isDisabled: true});
 
 DisableAllTabs.story = {
   name: 'disable all tabs'
 };
 
-export const KeyboardActivationManual = () => render({keyboardActivation: 'manual'});
+export const KeyboardActivationManual: TabsStory = () => render({keyboardActivation: 'manual'});
 
 KeyboardActivationManual.story = {
   name: 'keyboardActivation: manual'
 };
 
-export const MiddleDisabled = () => render({disabledKeys: ['val2']});
+export const MiddleDisabled: TabsStory = () => render({disabledKeys: ['val2']});
 
 MiddleDisabled.story = {
   name: 'middle disabled'
 };
 
-export const AllDisabled = () => render({disabledKeys: ['val1', 'val2', 'val3', 'val4', 'val5']});
+export const AllDisabled: TabsStory = () => render({disabledKeys: ['val1', 'val2', 'val3', 'val4', 'val5']});
 
 AllDisabled.story = {
   name: 'all disabled'
 };
 
-export const Resizeable = () => (
+export const Resizeable: TabsStory = () => (
   <div
     style={{
       minWidth: '100px',
@@ -167,25 +170,25 @@ Resizeable.story = {
   name: 'resizeable'
 };
 
-export const CollapseBehavior = () => <DynamicTabs />;
+export const CollapseBehavior: TabsStory = () => <DynamicTabs />;
 
 CollapseBehavior.story = {
   name: 'collapse behavior'
 };
 
-export const CollapseBehaviorIsQuiet = () => <DynamicTabs isQuiet />;
+export const CollapseBehaviorIsQuiet: TabsStory = () => <DynamicTabs isQuiet />;
 
 CollapseBehaviorIsQuiet.story = {
   name: 'collapse behavior, isQuiet'
 };
 
-export const CollapseBehaviorDensityCompact = () => <DynamicTabs density="compact" />;
+export const CollapseBehaviorDensityCompact: TabsStory = () => <DynamicTabs density="compact" />;
 
 CollapseBehaviorDensityCompact.story = {
   name: 'collapse behavior, density: compact'
 };
 
-export const CollapseBehaviorDensityCompactIsQuiet = () => (
+export const CollapseBehaviorDensityCompactIsQuiet: TabsStory = () => (
   <DynamicTabs isQuiet density="compact" />
 );
 
@@ -193,19 +196,19 @@ CollapseBehaviorDensityCompactIsQuiet.story = {
   name: 'collapse behavior, density: compact, isQuiet'
 };
 
-export const CollapseBehaviorIsEmphasizedTrue = () => <DynamicTabs isEmphasized />;
+export const CollapseBehaviorIsEmphasizedTrue: TabsStory = () => <DynamicTabs isEmphasized />;
 
 CollapseBehaviorIsEmphasizedTrue.story = {
   name: 'collapse behavior, isEmphasized: true'
 };
 
-export const _OrientationFlip = () => <OrientationFlip />;
+export const _OrientationFlip: TabsStory = () => <OrientationFlip />;
 
 _OrientationFlip.story = {
   name: 'orientation flip'
 };
 
-export const TestingTabsInFlex = () => (
+export const TestingTabsInFlex: TabsStory = () => (
   <Flex
     minHeight={400}
     minWidth={400}
@@ -232,7 +235,7 @@ TestingTabsInFlex.story = {
   name: 'testing: tabs in flex'
 };
 
-export const TransitionBetweenTabSizes = () => (
+export const TransitionBetweenTabSizes: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabList>
       <Item>
@@ -253,13 +256,13 @@ TransitionBetweenTabSizes.story = {
   name: 'transition between tab sizes'
 };
 
-export const TabWithFlexContainerInBetween = () => <DynamicTabsWithDecoration />;
+export const TabWithFlexContainerInBetween: TabsStory = () => <DynamicTabsWithDecoration />;
 
 TabWithFlexContainerInBetween.story = {
   name: 'Tab with flex container in between'
 };
 
-export const TabsAtTheBottom = () => (
+export const TabsAtTheBottom: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabPanels height="size-1000">
       <Item>Text 1</Item>
@@ -276,7 +279,7 @@ TabsAtTheBottom.story = {
   name: 'tabs at the bottom'
 };
 
-export const TabsOnTheRight = () => (
+export const TabsOnTheRight: TabsStory = () => (
   <Tabs maxWidth={500} orientation="vertical">
     <TabPanels>
       <Item>Text 1</Item>
@@ -293,7 +296,7 @@ TabsOnTheRight.story = {
   name: 'tabs on the right'
 };
 
-export const FocusableElementInTabPanel = () => (
+export const FocusableElementInTabPanel: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabList>
       <Item>Tab 1</Item>
@@ -314,7 +317,7 @@ FocusableElementInTabPanel.story = {
   name: 'focusable element in tab panel'
 };
 
-export const Tab1ControlledChild = () => {
+export const Tab1ControlledChild: TabsStory = () => {
   let [tab1Text, setTab1Text] = useState('');
 
   return (
@@ -339,7 +342,7 @@ Tab1ControlledChild.story = {
   name: 'Tab 1 controlled child'
 };
 
-export const ChangingTabTitles = () => {
+export const ChangingTabTitles: TabsStory = () => {
   let [tab1Text, setTab1Text] = useState('Tab 1');
   let [tab2Text, setTab2Text] = useState('Tab 2');
 
@@ -365,13 +368,13 @@ ChangingTabTitles.story = {
   name: 'changing tab titles'
 };
 
-export const ChangingSelectionProgramatically = () => <ControlledSelection />;
+export const ChangingSelectionProgramatically: TabsStory = () => <ControlledSelection />;
 
 ChangingSelectionProgramatically.story = {
   name: 'changing selection programatically'
 };
 
-export const Links = (args) => {
+export const Links: StoryFn<SpectrumTabsProps<unknown> & {collapsed?: boolean}> = (args) => {
   let [url, setUrl] = useState('/one');
 
   return (
@@ -402,7 +405,7 @@ Links.story = {
   }
 };
 
-export const Nested = (props) => {
+export const Nested: TabsStory = (props) => {
   return (
     <Tabs aria-label="Some tabs" width={'500px'} {...props} >
       <TabList>
diff --git a/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
index 51f47ed84f0..1953190ac29 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
@@ -13,7 +13,8 @@
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TextArea} from '../';
 
 export default {
@@ -22,106 +23,108 @@ export default {
     chromaticProvider: {locales: ['en-US', 'ar-AE']}
   },
   excludeStories: ['render']
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Default = () => render();
-export const ValueTestControlled = () => render({value: 'Test'});
+export const Default: TextAreaStory = () => render();
+export const ValueTestControlled: TextAreaStory = () => render({value: 'Test'});
 
 ValueTestControlled.story = {
   name: 'value: Test (controlled)'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: TextAreaStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: TextAreaStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: TextAreaStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const IsReadOnlyTrueValueReadOnlyValue = () => render({value: 'Read only value', isReadOnly: true});
+export const IsReadOnlyTrueValueReadOnlyValue: TextAreaStory = () => render({value: 'Read only value', isReadOnly: true});
 
 IsReadOnlyTrueValueReadOnlyValue.story = {
   name: 'isReadOnly: true, value: read only value'
 };
 
-export const IsRequiredTrue = () => render({isRequired: true});
+export const IsRequiredTrue: TextAreaStory = () => render({isRequired: true});
 
 IsRequiredTrue.story = {
   name: 'isRequired: true'
 };
 
-export const IsRequiredTrueNecessityIndicatorLabel = () => render({isRequired: true, necessityIndicator: 'label'}, false);
+export const IsRequiredTrueNecessityIndicatorLabel: TextAreaStory = () => render({isRequired: true, necessityIndicator: 'label'}, false);
 
 IsRequiredTrueNecessityIndicatorLabel.story = {
   name: 'isRequired: true, necessityIndicator: label'
 };
 
-export const IsRequiredFalseNecessityIndicatorLabel = () => render({isRequired: false, necessityIndicator: 'label'}, false);
+export const IsRequiredFalseNecessityIndicatorLabel: TextAreaStory = () => render({isRequired: false, necessityIndicator: 'label'}, false);
 
 IsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'isRequired: false, necessityIndicator: label'
 };
 
-export const IconInfo = () => render({icon: <Info />});
+export const IconInfo: TextAreaStory = () => render({icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const IconInfoValidationStateInvalid = () => render({icon: <Info />, validationState: 'invalid'});
+export const IconInfoValidationStateInvalid: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid'});
 
 IconInfoValidationStateInvalid.story = {
   name: 'icon: Info, validationState: invalid'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'}, false);
+export const LabelAlignEnd: TextAreaStory = () => render({labelAlign: 'end'}, false);
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'}, false);
+export const LabelPositionSide: TextAreaStory = () => render({labelPosition: 'side'}, false);
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEndLabelPositionSide = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
+export const LabelAlignEndLabelPositionSide: TextAreaStory = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
 
 LabelAlignEndLabelPositionSide.story = {
   name: 'labelAlign: end, labelPosition: side'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Street address'}, false);
+export const NoVisibleLabel: TextAreaStory = () => render({label: null, 'aria-label': 'Street address'}, false);
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const CustomWidth = () => render({icon: <Info />, validationState: 'invalid', width: 275});
+export const CustomWidth: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomHeight = () => render({icon: <Info />, validationState: 'invalid', height: 350});
+export const CustomHeight: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid', height: 350});
 
 CustomHeight.story = {
   name: 'custom height'
 };
 
-export const _ContextualHelp = args => render({...args, contextualHelp: (
+export const _ContextualHelp: TextAreaStory = (args) => render({...args, contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -132,7 +135,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const ContextualHelpLabelAlignEnd = args => render({...args, labelAlign: 'end', contextualHelp: (
+export const ContextualHelpLabelAlignEnd: TextAreaStory = (args) => render({...args, labelAlign: 'end', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -143,7 +146,7 @@ ContextualHelpLabelAlignEnd.story = {
   name: 'contextual help, labelAlign: end'
 };
 
-export const ContextualHelpLabelPositionSide = args => render({...args, labelPosition: 'side', contextualHelp: (
+export const ContextualHelpLabelPositionSide: TextAreaStory = (args) => render({...args, labelPosition: 'side', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -155,7 +158,7 @@ ContextualHelpLabelPositionSide.story = {
 };
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter
-export function render(props = {}, disabled = true) {
+export function render(props = {}, disabled = true): JSX.Element {
   return (
     <Flex gap="size-100" wrap>
       <TextArea
diff --git a/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
index 623ab0ef728..ea400348f34 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
@@ -11,8 +11,10 @@
  */
 
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './TextArea.stories';
+import {TextArea} from '../';
 
 export default {
   title: 'Languages/TextArea',
@@ -24,15 +26,17 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Value測試IconInfoLabelPositionSideValidationStateValid = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
+export const Value測試IconInfoLabelPositionSideValidationStateValid: TextAreaStory = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
 
 Value測試IconInfoLabelPositionSideValidationStateValid.story = {
   name: 'value: 測試, icon: Info, labelPosition: side, validationState: valid'
 };
 
-export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
+export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel: TextAreaStory = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
 
 ValueاختبارIsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'value: اختبار, isRequired: false, necessityIndicator: label'
diff --git a/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx b/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
index 7767806283f..8a2a8e62d51 100644
--- a/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
@@ -13,7 +13,8 @@
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TextField} from '../';
 
 export default {
@@ -22,100 +23,102 @@ export default {
     chromaticProvider: {locales: ['en-US', 'ar-AE']}
   },
   excludeStories: ['render']
-};
+} as Meta<typeof TextField>;
+
+export type TextFieldStory = StoryFn<typeof TextField>;
 
-export const Default = () => render();
-export const ValueTest = () => render({value: 'Test'});
+export const Default: TextFieldStory = () => render();
+export const ValueTest: TextFieldStory = () => render({value: 'Test'});
 
 ValueTest.story = {
   name: 'value: Test'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: TextFieldStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: TextFieldStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: TextFieldStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const IsReadOnlyTrueWithValue = () => render({value: 'Read only value', isReadOnly: true});
+export const IsReadOnlyTrueWithValue: TextFieldStory = () => render({value: 'Read only value', isReadOnly: true});
 
 IsReadOnlyTrueWithValue.story = {
   name: 'isReadOnly: true, with value'
 };
 
-export const IsRequiredTrue = () => render({isRequired: true});
+export const IsRequiredTrue: TextFieldStory = () => render({isRequired: true});
 
 IsRequiredTrue.story = {
   name: 'isRequired: true'
 };
 
-export const IsRequiredTrueNecessityIndicatorLabel = () => render({isRequired: true, necessityIndicator: 'label'}, false);
+export const IsRequiredTrueNecessityIndicatorLabel: TextFieldStory = () => render({isRequired: true, necessityIndicator: 'label'}, false);
 
 IsRequiredTrueNecessityIndicatorLabel.story = {
   name: 'isRequired: true, necessityIndicator: label'
 };
 
-export const IsRequiredFalseNecessityIndicatorLabel = () => render({isRequired: false, necessityIndicator: 'label'}, false);
+export const IsRequiredFalseNecessityIndicatorLabel: TextFieldStory = () => render({isRequired: false, necessityIndicator: 'label'}, false);
 
 IsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'isRequired: false, necessityIndicator: label'
 };
 
-export const IconInfo = () => render({icon: <Info />});
+export const IconInfo: TextFieldStory = () => render({icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const IconInfoValidationStateInvalid = () => render({icon: <Info />, validationState: 'invalid'});
+export const IconInfoValidationStateInvalid: TextFieldStory = () => render({icon: <Info />, validationState: 'invalid'});
 
 IconInfoValidationStateInvalid.story = {
   name: 'icon: Info, validationState: invalid'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'}, false);
+export const LabelAlignEnd: TextFieldStory = () => render({labelAlign: 'end'}, false);
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'}, false);
+export const LabelPositionSide: TextFieldStory = () => render({labelPosition: 'side'}, false);
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEndLabelPositionSide = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
+export const LabelAlignEndLabelPositionSide: TextFieldStory = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
 
 LabelAlignEndLabelPositionSide.story = {
   name: 'labelAlign: end, labelPosition: side'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Street address'}, false);
+export const NoVisibleLabel: TextFieldStory = () => render({label: null, 'aria-label': 'Street address'}, false);
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const CustomWidth = () => render({icon: <Info />, validationState: 'invalid', width: 275});
+export const CustomWidth: TextFieldStory = () => render({icon: <Info />, validationState: 'invalid', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const _ContextualHelp = args => render({...args, contextualHelp: (
+export const _ContextualHelp: TextFieldStory = (args) => render({...args, contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -126,7 +129,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const ContextualHelpLabelAlignEnd = args => render({...args, labelAlign: 'end', contextualHelp: (
+export const ContextualHelpLabelAlignEnd: TextFieldStory = (args) => render({...args, labelAlign: 'end', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -137,7 +140,7 @@ ContextualHelpLabelAlignEnd.story = {
   name: 'contextual help, labelAlign: end'
 };
 
-export const ContextualHelpLabelPositionSide = args => render({...args, labelPosition: 'side', contextualHelp: (
+export const ContextualHelpLabelPositionSide: TextFieldStory = (args) => render({...args, labelPosition: 'side', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -149,7 +152,7 @@ ContextualHelpLabelPositionSide.story = {
 };
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter
-export function render(props = {}, disabled = true) {
+export function render(props = {}, disabled = true): JSX.Element {
   return (
     <Flex gap="size-100" wrap>
       <TextField
diff --git a/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
index ab5939c45b5..554840918d5 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
@@ -12,6 +12,7 @@
 
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './Textfield.stories';
 import {TextField} from '../';
@@ -27,9 +28,11 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof TextField>;
+
+export type TextFieldStory = StoryFn<typeof TextField>;
 
-export const Diacritics = () => (
+export const Diacritics: TextFieldStory = () => (
   <Flex gap="size-200" direction="row" wrap>
     <TextField label="Label" value="value" />
     <TextField label="رِفِتـــانٍ خانٍِ" value="رِفِتـــانٍ خانٍِ" />
@@ -42,13 +45,13 @@ Diacritics.story = {
   name: 'diacritics'
 };
 
-export const Value測試IconInfoLabelPositionSideValidationStateValid = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
+export const Value測試IconInfoLabelPositionSideValidationStateValid: TextFieldStory = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
 
 Value測試IconInfoLabelPositionSideValidationStateValid.story = {
   name: 'value: 測試, icon: Info, labelPosition: side, validationState: valid'
 };
 
-export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
+export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel: TextFieldStory = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
 
 ValueاختبارIsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'value: اختبار, isRequired: false, necessityIndicator: label'
diff --git a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
index 5ae0332a53e..b7d5a0bf7b9 100644
--- a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
+++ b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
@@ -16,6 +16,7 @@ import {Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import {TextArea} from '../';
 
@@ -31,7 +32,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -59,55 +60,57 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Default = (args) => render(args);
-export const ValueTestControlled = (args) => render({...args, value: 'Test'});
+export const Default: TextAreaStory = (args) => render(args);
+export const ValueTestControlled: TextAreaStory = (args) => render({...args, value: 'Test'});
 
 ValueTestControlled.story = {
   name: 'value: Test (controlled)'
 };
 
-export const DefaultValueTestUncontrolled = (args) => render({...args, defaultValue: 'Test'});
+export const DefaultValueTestUncontrolled: TextAreaStory = (args) => render({...args, defaultValue: 'Test'});
 
 DefaultValueTestUncontrolled.story = {
   name: 'defaultValue: Test (uncontrolled)'
 };
 
-export const AutoFocusTrue = (args) => render({...args, autoFocus: true});
+export const AutoFocusTrue: TextAreaStory = (args) => render({...args, autoFocus: true});
 
 AutoFocusTrue.story = {
   name: 'autoFocus: true'
 };
 
-export const IconInfo = (args) => render({...args, icon: <Info />});
+export const IconInfo: TextAreaStory = (args) => render({...args, icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: TextAreaStory = (args) =>
   render({...args, label: null, 'aria-label': 'Street address'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const WithDescription = (args) =>
+export const WithDescription: TextAreaStory = (args) =>
   render({...args, description: 'Enter product feedback.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: TextAreaStory = (args) =>
   render({...args, errorMessage: 'Enter at least 250 characters.', validationState: 'invalid'});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithContextualHelp = (args) =>
+export const WithContextualHelp: TextAreaStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -125,21 +128,21 @@ WithContextualHelp.story = {
   name: 'with contextual help'
 };
 
-export const CustomWidth = (args) =>
+export const CustomWidth: TextAreaStory = (args) =>
   render({...args, icon: <Info />, validationState: 'invalid', width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthSmall = (args) =>
+export const CustomWidthSmall: TextAreaStory = (args) =>
   render({...args, icon: <Info />, validationState: 'invalid', width: '30px'});
 
 CustomWidthSmall.story = {
   name: 'custom width small'
 };
 
-export const CustomHeightWithLabel = (args) => (
+export const CustomHeightWithLabel: TextAreaStory = (args) => (
   <Form>
     <TextArea {...args} label="Custom height" description="height: size-2000" height="size-2000" />
     <TextArea
@@ -168,7 +171,7 @@ CustomHeightWithLabel.story = {
   name: 'custom height with label'
 };
 
-export const ChangeableHelptext = (args) => <ValidationExample {...args} />;
+export const ChangeableHelptext: TextAreaStory = (args) => <ValidationExample {...args} />;
 
 ChangeableHelptext.story = {
   name: 'changeable helptext',
@@ -179,7 +182,7 @@ ChangeableHelptext.story = {
   }
 };
 
-export const ChangeableHelptextCustomHeight = (args) => (
+export const ChangeableHelptextCustomHeight: TextAreaStory = (args) => (
   <ValidationExample {...args} height="175px" minHeight="100px" maxHeight="50vh" />
 );
 
@@ -192,19 +195,19 @@ ChangeableHelptextCustomHeight.story = {
   }
 };
 
-export const ControlledInteractive = (args) => <ControlledTextArea {...args} />;
+export const ControlledInteractive: TextAreaStory = (args) => <ControlledTextArea {...args} />;
 
 ControlledInteractive.story = {
   name: 'controlled interactive'
 };
 
-export const InFlex = (args) => renderInFlexRowAndBlock(args);
+export const InFlex: TextAreaStory = (args) => renderInFlexRowAndBlock(args);
 
 InFlex.story = {
   name: 'in flex'
 };
 
-export const InFlexValidationState = (args) =>
+export const InFlexValidationState: TextAreaStory = (args) =>
   renderInFlexRowAndBlock({...args, validationState: 'invalid'});
 
 InFlexValidationState.story = {
@@ -352,6 +355,6 @@ function DefaultLocaleStrings(props) {
   );
 }
 
-export const WithDifferentLocaleText = {
+export const WithDifferentLocaleText: StoryObj<typeof TextArea> = {
   render: (args) => <DefaultLocaleStrings {...args} />
 };
diff --git a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
index 0f532ed3b10..ec96c75d8f8 100644
--- a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
+++ b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
@@ -13,8 +13,8 @@
 import {action} from '@storybook/addon-actions';
 import {ActionButton, Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
-import {StoryObj} from '@storybook/react';
 import {TextField} from '../';
 
 export default {
@@ -30,7 +30,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -58,7 +58,7 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TextField>;
 
 export type TextFieldStory = StoryObj<typeof TextField>;
 
diff --git a/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx b/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
index 7050499b0e5..5d2650f59ce 100644
--- a/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
+++ b/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
-import {Toast} from '../src/Toast';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
+import {SpectrumToastValue, Toast} from '../src/Toast';
 import {useToastState} from '@react-stately/toast';
 
-function FakeToast(props) {
+function FakeToast(props: SpectrumToastValue): JSX.Element {
   let state = useToastState<any>();
   return <Toast toast={{content: props, key: 'toast'}} state={state} />;
 }
@@ -22,32 +23,34 @@ function FakeToast(props) {
 export default {
   title: 'Toast',
   component: FakeToast
-};
+} as Meta<typeof FakeToast>;
+
+export type ToastStory = StoryObj<typeof FakeToast>;
 
-export const Default = {
+export const Default: ToastStory = {
   args: {children: 'Neutral toast'}
 };
 
-export const Info = {
+export const Info: ToastStory = {
   args: {variant: 'info', children: 'Neutral toast'}
 };
 
-export const Positive = {
+export const Positive: ToastStory = {
   args: {variant: 'positive', children: 'Neutral toast'}
 };
 
-export const Negative = {
+export const Negative: ToastStory = {
   args: {variant: 'negative', children: 'Neutral toast'}
 };
 
-export const Action = {
+export const Action: ToastStory = {
   args: {variant: 'positive', children: 'Neutral toast', actionLabel: 'Undo'}
 };
 
-export const LongContent = {
+export const LongContent: ToastStory = {
   args: {variant: 'positive', children: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.'}
 };
 
-export const LongContentAction = {
+export const LongContentAction: ToastStory = {
   args: {variant: 'positive', children: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.', actionLabel: 'Undo'}
 };
diff --git a/packages/@react-spectrum/toast/stories/Toast.stories.tsx b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
index a4e1e697151..6dafe00fea8 100644
--- a/packages/@react-spectrum/toast/stories/Toast.stories.tsx
+++ b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
@@ -18,7 +18,8 @@ import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import React, {SyntheticEvent, useEffect, useMemo, useRef, useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, SyntheticEvent, useEffect, useMemo, useRef, useState} from 'react';
 import {SpectrumToastOptions, ToastPlacement} from '../src/ToastContainer';
 import {ToastContainer, ToastQueue} from '../';
 import {UNSAFE_PortalProvider} from '@react-aria/overlays';
@@ -29,29 +30,31 @@ export default {
   decorators: [
     (story, {parameters, args}) => (
       <>
-        {!parameters.disableToastContainer && <ToastContainer placement={args.placement} />}
+        {!parameters.disableToastContainer && <ToastContainer placement={(args as any).placement} />}
         <MainLandmark>{story()}</MainLandmark>
       </>
     )
   ],
   args: {
     shouldCloseOnAction: false,
-    timeout: null,
+    timeout: undefined,
     placement: undefined
   },
   argTypes: {
     timeout: {
       control: 'radio',
-      options: [null, 5000]
+      options: [undefined, 5000]
     },
     placement: {
       control: 'select',
       options: [undefined, 'top', 'top end', 'bottom', 'bottom end']
     }
   }
-};
+} as Meta<typeof RenderProvider>;
+
+export type ToastStory = StoryFn<typeof RenderProvider>;
 
-export const Default = (args) => <RenderProvider {...args} />;
+export const Default: ToastStory = (args) => <RenderProvider {...args} />;
 Default.story = {
   parameters: {
     a11y: {
@@ -69,7 +72,7 @@ Default.story = {
 };
 
 
-export const WithAction = (args) => (
+export const WithAction: ToastStory = (args) => (
   <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} />
 );
 
@@ -89,7 +92,7 @@ WithAction.story = {
 };
 
 
-export const WithTestId = (args) => (
+export const WithTestId: ToastStory = (args) => (
   <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} data-testid="hello i am a test id" />
 );
 
@@ -108,7 +111,7 @@ WithTestId.story = {
   }
 };
 
-export const WithDialog = (args) => (
+export const WithDialog: ToastStory = (args) => (
   <DialogTrigger isDismissable>
     <Button variant="accent">Open dialog</Button>
     <Dialog>
@@ -135,7 +138,7 @@ WithDialog.story = {
   }
 };
 
-export const MultipleToastContainers = (args) => <Multiple {...args} />;
+export const MultipleToastContainers: StoryFn<typeof Multiple> = (args) => <Multiple {...args} />;
 
 MultipleToastContainers.story = {
   name: 'multiple ToastContainers',
@@ -153,7 +156,7 @@ MultipleToastContainers.story = {
   }
 };
 
-export const ProgrammaticallyClosing = (args) => <ToastToggle {...args} />;
+export const ProgrammaticallyClosing: ToastStory = (args) => <ToastToggle {...args} />;
 
 ProgrammaticallyClosing.story = {
   name: 'programmatically closing',
@@ -170,7 +173,7 @@ ProgrammaticallyClosing.story = {
   }
 };
 
-export const WithIframe = () => <IframeExample />;
+export const WithIframe: ToastStory = () => <IframeExample />;
 
 WithIframe.story = {
   name: 'with iframe',
@@ -188,7 +191,7 @@ WithIframe.story = {
   }
 };
 
-function RenderProvider(options: SpectrumToastOptions) {
+function RenderProvider(options: SpectrumToastOptions): JSX.Element {
   return (
     <ButtonGroup>
       <Button
@@ -235,7 +238,7 @@ function ToastToggle(options: SpectrumToastOptions) {
   );
 }
 
-function Multiple(options: SpectrumToastOptions & {placement: ToastPlacement}) {
+function Multiple(options: SpectrumToastOptions & {placement: ToastPlacement}): JSX.Element {
   let [isMounted1, setMounted1] = useState(true);
 
   return (
@@ -360,14 +363,14 @@ function MainLandmark(props) {
   return <main aria-label="Danni's unicorn corral" ref={ref} {...props} {...landmarkProps} style={{padding: 40, background: 'white'}}>{props.children}</main>;
 }
 
-export const withFullscreen = {
+export const withFullscreen: StoryObj<typeof FullscreenApp> = {
   render: (args) => <FullscreenApp {...args} />,
   parameters: {
     disableToastContainer: true
   }
 };
 
-function FullscreenApp(props) {
+function FullscreenApp(props: SpectrumToastOptions & {placement: ToastPlacement}): JSX.Element {
   let ref = useRef<HTMLDivElement | null>(null);
   let [isFullscreen, setFullscreen] = useState(false);
   let fullscreenPress = () => {
diff --git a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
index 00cec78bf0e..135fc8021dc 100644
--- a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
@@ -18,8 +18,9 @@ import Edit from '@spectrum-icons/workflow/Edit';
 import FileTxt from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 import React from 'react';
+import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
+import {StoryFn} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
-import {TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 export default {
   title: 'TreeView'
@@ -120,18 +121,20 @@ function TestTree(props) {
   );
 }
 
-export const Default = () => (
+type TreeViewStoryProps = StoryFn<SpectrumTreeViewProps<unknown>>;
+
+export const Default: TreeViewStoryProps = () => (
   <TestTree />
 );
 
-export const SelectionMode = () => (
+export const SelectionMode: TreeViewStoryProps = () => (
   <TestTree selectionMode="multiple" />
 );
 
-export const DisabledBehaviorAll = () => (
+export const DisabledBehaviorAll: TreeViewStoryProps = () => (
   <TestTree disabledBehavior="all" selectionMode="multiple" />
 );
 
-export const HiglightSelectionWithDisabledBehaviorAll = () => (
+export const HiglightSelectionWithDisabledBehaviorAll: TreeViewStoryProps = () => (
   <TestTree selectionStyle="highlight" selectionMode="multiple" disabledBehavior="all" />
 );
diff --git a/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
index df3441545c9..bca65f67f0a 100644
--- a/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
@@ -22,8 +22,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 let states = [
@@ -66,7 +66,7 @@ const meta: Meta<SpectrumTreeViewProps<object>> = {
 
 export default meta;
 
-const Template = ({combos}) => (
+const Template = ({combos}: {combos: any}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -182,9 +182,10 @@ function renderEmptyState() {
   );
 }
 
-const EmptyTemplate = () =>
+const EmptyTemplate = (props: SpectrumTreeViewProps<object>): JSX.Element =>
   (
     <TreeView
+      {...props}
       aria-label="test empty tree"
       items={[]}
       renderEmptyState={renderEmptyState}>
@@ -198,26 +199,26 @@ const EmptyTemplate = () =>
     </TreeView>
   );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '1 of 3',
   args: {combos: combo1}
 };
 
-export const DefaultPt2 = {
-  render: Template,
+export const DefaultPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '2 of 3',
   args: {combos: combo2}
 };
 
-export const DefaultPt3 = {
-  render: Template,
+export const DefaultPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '3 of 3',
   args: {combos: combo3}
 };
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: StoryObj<typeof EmptyTemplate> = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty tree',
   args: {}
 };
diff --git a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
index 40646928174..b678f3fc406 100644
--- a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
@@ -21,7 +21,8 @@ import Folder from '@spectrum-icons/workflow/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Link} from '@react-spectrum/link';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 export default {
@@ -41,46 +42,18 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TreeView>;
+
+type TreeStory = StoryFn<typeof TreeView>;
 
 // TODO: This story crashes on save and story switch, not sure why or if only local...
-export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
-  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
-    <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
-      <TreeViewItem id="Photos" textValue="Photos">
-        <TreeViewItemContent>
-          <Text>Photos</Text>
-          <Folder />
-          <ActionGroup onAction={action('onActionGroup action')}>
-            <Item key="edit">
-              <Edit />
-              <Text>Edit</Text>
-            </Item>
-            <Item key="delete">
-              <Delete />
-              <Text>Delete</Text>
-            </Item>
-          </ActionGroup>
-        </TreeViewItemContent>
-      </TreeViewItem>
-      <TreeViewItem id="projects" textValue="Projects">
-        <TreeViewItemContent>
-          <Text>Projects</Text>
-          <Folder />
-          <ActionGroup onAction={action('onActionGroup action')}>
-            <Item key="edit">
-              <Edit />
-              <Text>Edit</Text>
-            </Item>
-            <Item key="delete">
-              <Delete />
-              <Text>Delete</Text>
-            </Item>
-          </ActionGroup>
-        </TreeViewItemContent>
-        <TreeViewItem id="projects-1" textValue="Projects-1">
+export const TreeExampleStatic: StoryObj<typeof TreeView> = {
+  render: (args) => (
+    <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
+      <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
+        <TreeViewItem id="Photos" textValue="Photos">
           <TreeViewItemContent>
-            <Text>Projects-1</Text>
+            <Text>Photos</Text>
             <Folder />
             <ActionGroup onAction={action('onActionGroup action')}>
               <Item key="edit">
@@ -93,9 +66,73 @@ export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
               </Item>
             </ActionGroup>
           </TreeViewItemContent>
-          <TreeViewItem id="projects-1A" textValue="Projects-1A">
+        </TreeViewItem>
+        <TreeViewItem id="projects" textValue="Projects">
+          <TreeViewItemContent>
+            <Text>Projects</Text>
+            <Folder />
+            <ActionGroup onAction={action('onActionGroup action')}>
+              <Item key="edit">
+                <Edit />
+                <Text>Edit</Text>
+              </Item>
+              <Item key="delete">
+                <Delete />
+                <Text>Delete</Text>
+              </Item>
+            </ActionGroup>
+          </TreeViewItemContent>
+          <TreeViewItem id="projects-1" textValue="Projects-1">
             <TreeViewItemContent>
-              <Text>Projects-1A</Text>
+              <Text>Projects-1</Text>
+              <Folder />
+              <ActionGroup onAction={action('onActionGroup action')}>
+                <Item key="edit">
+                  <Edit />
+                  <Text>Edit</Text>
+                </Item>
+                <Item key="delete">
+                  <Delete />
+                  <Text>Delete</Text>
+                </Item>
+              </ActionGroup>
+            </TreeViewItemContent>
+            <TreeViewItem id="projects-1A" textValue="Projects-1A">
+              <TreeViewItemContent>
+                <Text>Projects-1A</Text>
+                <FileTxt />
+                <ActionGroup onAction={action('onActionGroup action')}>
+                  <Item key="edit">
+                    <Edit />
+                    <Text>Edit</Text>
+                  </Item>
+                  <Item key="delete">
+                    <Delete />
+                    <Text>Delete</Text>
+                  </Item>
+                </ActionGroup>
+              </TreeViewItemContent>
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem id="projects-2" textValue="Projects-2">
+            <TreeViewItemContent>
+              <Text>Projects-2</Text>
+              <FileTxt />
+              <ActionGroup onAction={action('onActionGroup action')}>
+                <Item key="edit">
+                  <Edit />
+                  <Text>Edit</Text>
+                </Item>
+                <Item key="delete">
+                  <Delete />
+                  <Text>Delete</Text>
+                </Item>
+              </ActionGroup>
+            </TreeViewItemContent>
+          </TreeViewItem>
+          <TreeViewItem id="projects-3" textValue="Projects-3">
+            <TreeViewItemContent>
+              <Text>Projects-3</Text>
               <FileTxt />
               <ActionGroup onAction={action('onActionGroup action')}>
                 <Item key="edit">
@@ -110,44 +147,9 @@ export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
             </TreeViewItemContent>
           </TreeViewItem>
         </TreeViewItem>
-        <TreeViewItem id="projects-2" textValue="Projects-2">
-          <TreeViewItemContent>
-            <Text>Projects-2</Text>
-            <FileTxt />
-            <ActionGroup onAction={action('onActionGroup action')}>
-              <Item key="edit">
-                <Edit />
-                <Text>Edit</Text>
-              </Item>
-              <Item key="delete">
-                <Delete />
-                <Text>Delete</Text>
-              </Item>
-            </ActionGroup>
-          </TreeViewItemContent>
-        </TreeViewItem>
-        <TreeViewItem id="projects-3" textValue="Projects-3">
-          <TreeViewItemContent>
-            <Text>Projects-3</Text>
-            <FileTxt />
-            <ActionGroup onAction={action('onActionGroup action')}>
-              <Item key="edit">
-                <Edit />
-                <Text>Edit</Text>
-              </Item>
-              <Item key="delete">
-                <Delete />
-                <Text>Delete</Text>
-              </Item>
-            </ActionGroup>
-          </TreeViewItemContent>
-        </TreeViewItem>
-      </TreeViewItem>
-    </TreeView>
-  </div>
-);
-
-TreeExampleStatic.story = {
+      </TreeView>
+    </div>
+  ),
   args: {
     selectionMode: 'none',
     selectionStyle: 'checkbox',
@@ -174,7 +176,7 @@ TreeExampleStatic.story = {
   }
 };
 
-export const TreeExampleStaticNoActions = (args: SpectrumTreeViewProps<unknown>) => (
+let TreeExampleStaticNoActionsRender = (args: SpectrumTreeViewProps<unknown>): JSX.Element => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       <TreeViewItem id="Photos" textValue="Photos">
@@ -217,8 +219,10 @@ export const TreeExampleStaticNoActions = (args: SpectrumTreeViewProps<unknown>)
   </div>
 );
 
-export const ExampleNoActions = {
-  render: TreeExampleStaticNoActions,
+export const TreeExampleStaticNoActions: TreeStory = (args: SpectrumTreeViewProps<unknown>) => <TreeExampleStaticNoActionsRender {...args} />;
+
+export const ExampleNoActions: StoryObj<typeof TreeExampleStaticNoActionsRender> = {
+  render: (args) => <TreeExampleStaticNoActionsRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionStyle: 'checkbox',
@@ -312,38 +316,36 @@ const DynamicTreeItem = (props) => {
   );
 };
 
-export const TreeExampleDynamic = (args: SpectrumTreeViewProps<unknown>) => (
-  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
-    <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
-      {(item: any) => (
-        <DynamicTreeItem
-          id={item.id}
-          icon={item.icon}
-          childItems={item.childItems}
-          textValue={item.name}
-          name={item.name} />
-      )}
-    </TreeView>
-  </div>
-);
-
-TreeExampleDynamic.story = {
-  ...TreeExampleStatic.story,
-  parameters: null
+export const TreeExampleDynamic: StoryObj<typeof TreeView> = {
+  render: (args: SpectrumTreeViewProps<unknown>) => (
+    <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
+      <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
+        {(item: any) => (
+          <DynamicTreeItem
+            id={item.id}
+            icon={item.icon}
+            childItems={item.childItems}
+            textValue={item.name}
+            name={item.name} />
+        )}
+      </TreeView>
+    </div>
+  ),
+  ...TreeExampleStatic,
+  parameters: undefined
 };
 
 
-export const WithActions = {
-  render: TreeExampleDynamic,
+export const WithActions: StoryObj<typeof TreeExampleDynamic> = {
   ...TreeExampleDynamic,
   args: {
     onAction: action('onAction'),
-    ...TreeExampleDynamic.story.args
+    ...TreeExampleDynamic.args
   },
   name: 'Tree with actions'
 };
 
-export const WithLinks = (args: SpectrumTreeViewProps<unknown>) => (
+export const WithLinks: TreeStory = (args: SpectrumTreeViewProps<unknown>) => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (
@@ -369,7 +371,7 @@ WithLinks.story = {
   }
 };
 
-export function renderEmptyState() {
+export function renderEmptyState(): JSX.Element {
   return (
     <IllustratedMessage>
       <svg width="150" height="103" viewBox="0 0 150 103">
@@ -381,18 +383,17 @@ export function renderEmptyState() {
   );
 }
 
-export const EmptyTree = {
-  render: TreeExampleDynamic,
+export const EmptyTree: StoryObj<typeof TreeExampleDynamic> = {
   ...TreeExampleDynamic,
   args: {
-    ...TreeExampleDynamic.story.args,
+    ...TreeExampleDynamic.args,
     items: [],
     renderEmptyState
   },
   name: 'Empty Tree'
 };
 
-export const WithActionMenu = (args: SpectrumTreeViewProps<unknown>) => (
+export const WithActionMenu: TreeStory = (args: SpectrumTreeViewProps<unknown>) => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (
diff --git a/packages/@react-spectrum/view/stories/View.stories.tsx b/packages/@react-spectrum/view/stories/View.stories.tsx
index 23931d27e94..986c0ef6f33 100644
--- a/packages/@react-spectrum/view/stories/View.stories.tsx
+++ b/packages/@react-spectrum/view/stories/View.stories.tsx
@@ -9,6 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '../';
 
@@ -19,11 +20,11 @@ let meta = {
     colorVersion: 5,
     backgroundColor: 'blue-400'
   }
-};
+} as Meta<typeof View>;
 
 export default meta;
 
-export const Default = args => (
+export const Default: StoryFn<typeof View> = (args) => (
   <View
     {...args}
     width="single-line-width"
diff --git a/packages/@react-spectrum/well/chromatic/Well.stories.tsx b/packages/@react-spectrum/well/chromatic/Well.stories.tsx
index 18597ba4303..2c52bc55579 100644
--- a/packages/@react-spectrum/well/chromatic/Well.stories.tsx
+++ b/packages/@react-spectrum/well/chromatic/Well.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumWellProps} from '@react-types/well';
 import {Well} from '../';
@@ -22,9 +22,6 @@ const meta: Meta<SpectrumWellProps> = {
 
 export default meta;
 
-const Template = (args) =>
-  <Well {...args}>This is a React Spectrum Well</Well>;
-
-export const Default = {
-  render: Template
+export const Default: StoryObj<typeof Well> = {
+  render: (args) => <Well {...args}>This is a React Spectrum Well</Well>
 };