diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js
index 4d58f82e03742..7031b4e36c28d 100644
--- a/apps/vr-tests-react-components/.storybook/preview.js
+++ b/apps/vr-tests-react-components/.storybook/preview.js
@@ -1,72 +1,4 @@
 // @ts-check
 
-import * as React from 'react';
-import { setAddon } from '@storybook/react';
-import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
-import { FluentProvider } from '@fluentui/react-provider';
-
-/**
- * @deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon
- *
- * TODO: rework this to be conformant with Component Story Format
- *
- * Via this addon, we INVENT a new API that automatically adds several
- * stories for you when you call addStory() that adds variants (like RTL)
- *
- * addStory() is not an official Storybook API
- *
- * Adds a story with different configuration options.
- * By default, only adds a story in LTR.
- * The config parameter can be used to add the story RTL in addition to LTR.
- * In future, this can add a story with additional configurations such as theming.
- */
-setAddon({
-  /**
-   * @type {import('../src/utilities/types').ExtendedStoryApi['addStory']}
-   * @this {import('../src/utilities/types').ExtendedStoryApi}
-   */
-  addStory(storyName, storyFn, config = {}) {
-    this.add(storyName, (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-      return (
-        <FluentProvider applyStylesToPortals={false} theme={webLightTheme}>
-          {storyFn(context)}
-        </FluentProvider>
-      );
-    });
-    if (config.includeRtl) {
-      this.add(storyName + ' - RTL', (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-        return (
-          <FluentProvider applyStylesToPortals={false} theme={webLightTheme} dir="rtl">
-            {storyFn(context)}
-          </FluentProvider>
-        );
-      });
-    }
-    if (config.includeDarkMode) {
-      this.add(storyName + ' - Dark Mode', (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-        return (
-          <FluentProvider applyStylesToPortals={false} theme={webDarkTheme}>
-            {storyFn(context)}
-          </FluentProvider>
-        );
-      });
-    }
-    if (config.includeHighContrast) {
-      this.add(
-        storyName + ' - High Contrast',
-        (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-          return (
-            <FluentProvider applyStylesToPortals={false} theme={teamsHighContrastTheme}>
-              {storyFn(context)}
-            </FluentProvider>
-          );
-        },
-      );
-    }
-
-    return this;
-  },
-});
-
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
 export const parameters = { layout: 'none', mode: 'vr-test' };
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
index 08c1e884d4430..3f7cae7148a43 100644
--- a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 import { CircleRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
@@ -17,7 +17,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>;
 
 export const Size = () => (
   <Accordion openItems={[0, 1, 2, 3]}>
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
index 450dcd268df27..7189562e5e7dd 100644
--- a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
@@ -24,7 +24,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>;
 
 export const VisibilityFocus = () => (
   <Accordion openItems={[0]}>
diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
index 81ad178a35a16..f626e35b0a348 100644
--- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Avatar, AvatarProps } from '@fluentui/react-avatar';
@@ -203,9 +203,7 @@ export default {
   ],
 } satisfies Meta<typeof Avatar>;
 
-type Story = StoryFn<typeof Avatar>;
-
-export const Basic: Story = () => (
+export const Basic = () => (
   <div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
     <Avatar />
     <Avatar name="First Last" />
@@ -224,21 +222,21 @@ export const BasicRTL = getStoryVariant(Basic, RTL);
 export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
 export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
 
-export const SizeName: Story = () => <AvatarList names={examples.name} />;
+export const SizeName = () => <AvatarList names={examples.name} />;
 SizeName.storyName = 'size+name';
 
-export const SizeIconBadgeSquare: Story = () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />;
+export const SizeIconBadgeSquare = () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />;
 SizeIconBadgeSquare.storyName = 'size+icon+badge+square';
 
-export const SizeImageBadge: Story = () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />;
+export const SizeImageBadge = () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />;
 SizeImageBadge.storyName = 'size+image+badge';
 
-export const SizeInactiveBadge: Story = () => (
+export const SizeInactiveBadge = () => (
   <AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
 );
 SizeInactiveBadge.storyName = 'size+inactive+badge';
 
-export const BadgeMask: Story = () => (
+export const BadgeMask = () => (
   <div
     style={{
       backgroundSize: '32px 32px',
@@ -252,35 +250,29 @@ BadgeMask.storyName = 'badgeMask';
 
 export const BadgeMaskRTL = getStoryVariant(BadgeMask, RTL);
 
-export const CustomSizeImage: Story = () => <AvatarCustomSizeList images={examples.image} />;
+export const CustomSizeImage = () => <AvatarCustomSizeList images={examples.image} />;
 CustomSizeImage.storyName = 'customSize+image';
 
-export const CustomSizeNameBadge: Story = () => (
-  <AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
-);
+export const CustomSizeNameBadge = () => <AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />;
 CustomSizeNameBadge.storyName = 'customSize+name+badge';
 
-export const CustomSizeIconActive: Story = () => (
-  <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />
-);
+export const CustomSizeIconActive = () => <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />;
 CustomSizeIconActive.storyName = 'customSize+icon+active';
 
-export const Color: Story = () => <AvatarColors />;
+export const Color = () => <AvatarColors />;
 Color.storyName = 'color';
 
 export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST);
 export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
 
-export const ColorActive: Story = () => <AvatarColors active="active" />;
+export const ColorActive = () => <AvatarColors active="active" />;
 ColorActive.storyName = 'color+active';
 
 export const ColorActiveHighContrast = getStoryVariant(ColorActive, HIGH_CONTRAST);
 export const ColorActiveDarkMode = getStoryVariant(ColorActive, DARK_MODE);
 
-export const ImageBadUrl: Story = () => (
-  <Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />
-);
+export const ImageBadUrl = () => <Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
 ImageBadUrl.storyName = 'image-bad-url';
 
-export const ImageBadUrlIcon: Story = () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
+export const ImageBadUrlIcon = () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
 ImageBadUrlIcon.storyName = 'image-bad-url+icon';
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx
index 5187a6208910d..f63cf540523ad 100644
--- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx
@@ -1,38 +1,41 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-avatar';
 
-import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant, TestWrapperDecorator } from '../../utilities';
+import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../../utilities';
 import { names, AvatarGroupList } from './utils';
 
 export default {
   title: 'AvatarGroup Converged',
   component: AvatarGroup,
   decorators: [
-    TestWrapperDecorator,
     story => (
-      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
+      </StoryWright>
     ),
   ],
 } satisfies Meta<typeof AvatarGroup>;
 
-type Story = StoryFn<typeof AvatarGroup>;
-
-export const Basic: Story = () => <AvatarGroupList />;
+export const Basic = () => <AvatarGroupList />;
 Basic.storyName = 'basic';
 
 export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
 
 export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
 
-export const LayoutStack: Story = () => <AvatarGroupList layout="stack" />;
+export const LayoutStack = () => <AvatarGroupList layout="stack" />;
 
 export const LayoutStackDarkMode = getStoryVariant(LayoutStack, DARK_MODE);
 
 export const LayoutStackHighContrast = getStoryVariant(LayoutStack, HIGH_CONTRAST);
 
-export const LayoutPie1: Story = () => (
+export const LayoutPie1 = () => (
   <div style={{ padding: '10px' }}>
     <AvatarGroupList layout="pie">
       <AvatarGroupItem name={names[0]} />
@@ -50,7 +53,7 @@ export const LayoutPie1HighContrast = getStoryVariant(LayoutPie1, HIGH_CONTRAST)
 
 export const LayoutPie1RTL = getStoryVariant(LayoutPie1, RTL);
 
-export const LayoutPie2: Story = () => (
+export const LayoutPie2 = () => (
   <div style={{ padding: '10px' }}>
     <AvatarGroupList layout="pie">
       <AvatarGroupItem name={names[0]} />
@@ -70,7 +73,7 @@ export const LayoutPie2HighContrast = getStoryVariant(LayoutPie2, HIGH_CONTRAST)
 
 export const LayoutPie2RTL = getStoryVariant(LayoutPie2, RTL);
 
-export const LayoutPie: Story = () => <AvatarGroupList layout="pie" />;
+export const LayoutPie = () => <AvatarGroupList layout="pie" />;
 LayoutPie.storyName = 'layoutPie';
 
 export const LayoutPieDarkMode = getStoryVariant(LayoutPie, DARK_MODE);
@@ -79,7 +82,7 @@ export const LayoutPieHighContrast = getStoryVariant(LayoutPie, HIGH_CONTRAST);
 
 export const LayoutPieRTL = getStoryVariant(LayoutPie, RTL);
 
-export const OverflowIndicator: Story = () => <AvatarGroupList overflowIndicator="icon" />;
+export const OverflowIndicator = () => <AvatarGroupList overflowIndicator="icon" />;
 OverflowIndicator.storyName = 'overflowIndicator';
 
 export const OverflowIndicatorDarkMode = getStoryVariant(OverflowIndicator, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx
similarity index 76%
rename from apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx
rename to apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx
index c9fd6ed843791..7c1781887b992 100644
--- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx
@@ -1,31 +1,32 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar';
 
 import { names } from './utils';
-import { DARK_MODE, HIGH_CONTRAST, getStoryVariant, TestWrapperDecorator } from '../../utilities';
+import { DARK_MODE, HIGH_CONTRAST, getStoryVariant } from '../../utilities';
 
 export default {
   title: 'AvatarGroup Converged',
   component: AvatarGroup,
   decorators: [
-    TestWrapperDecorator,
     story => (
       <StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
-        {story()}
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
       </StoryWright>
     ),
   ],
 } satisfies Meta<typeof AvatarGroup>;
 
-type Story = StoryFn<typeof AvatarGroup>;
-
-export const OverflowContent: Story = () => {
+export const OverflowContent = () => {
   const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
 
   return (
-    <div style={{ padding: '10px' }}>
+    <div style={{ padding: '20px' }}>
       <AvatarGroup>
         {inlineItems.map(name => (
           <AvatarGroupItem key={name} name={name} />
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx
index 3c4ca42f4257c..a7dd4139c0e4b 100644
--- a/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx
@@ -48,7 +48,7 @@ export const AvatarGroupList: React.FC<
   const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout });
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px', padding: '10px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px', padding: '20px' }}>
       {sizes.map(size => (
         <AvatarGroup key={size} size={size as AvatarGroupProps['size']} {...props}>
           {inlineItems.map(name => (
diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
index e782b07cce547..a35570023abd8 100644
--- a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
@@ -3,7 +3,7 @@ import { Badge, BadgeProps } from '@fluentui/react-badge';
 import { CircleRegular } from '@fluentui/react-icons';
 import { mergeClasses } from '@griffel/react';
 import { propValues, useStyles } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
 
 const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appearance'] }> = ({ appearance }) => {
@@ -77,7 +77,7 @@ const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appe
 
 export default {
   title: 'Badge Converged',
-} as ComponentMeta<typeof Badge>;
+} satisfies Meta<typeof Badge>;
 
 export const Filled = () => <BadgeAppearanceTemplate appearance={'filled'} />;
 
diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
index 2d674953cb923..cd4ab86c7163a 100644
--- a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Badge, BadgeProps } from '@fluentui/react-badge';
 import { CircleRegular } from '@fluentui/react-icons';
 import { propValues, useStyles } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, RTL } from '../../utilities';
 
 const BadgeSampleRow: React.FC<BadgeProps> = props => {
@@ -35,7 +35,7 @@ const BadgeSampleRow: React.FC<BadgeProps> = props => {
 
 export default {
   title: 'Badge Converged',
-} as ComponentMeta<typeof Badge>;
+} satisfies Meta<typeof Badge>;
 
 export const SizeTiny = () => {
   const styles = useStyles();
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
index b137455623965..dc56f5b8b1be1 100644
--- a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Breadcrumb } from '@fluentui/react-breadcrumb';
 import { SampleBreadcrumbButtons, steps } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
 
 export default {
   title: 'Breadcrumb Converged',
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Breadcrumb>;
+} satisfies Meta<typeof Breadcrumb>;
 
 export const Appearance = () => (
   <>
diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
index 53bb727299c9a..d98f85f270bf1 100644
--- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
@@ -9,9 +9,9 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'Button Converged',
-  Component: Button,
+  component: Button,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
 export const Default = () => <Button id={buttonId}>Hello, world</Button>;
 
diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
index 01daae64e160a..462e417f920c0 100644
--- a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
@@ -11,7 +11,7 @@ export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof CompoundButton>;
+} satisfies Meta<typeof CompoundButton>;
 
 export const Outline = () => (
   <CompoundButton id={buttonId} secondaryContent="This is some secondary text" appearance="outline">
diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
index cce9b57adaa9c..95881ec32b35f 100644
--- a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Steps } from 'storywright';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId } from './utils';
 
@@ -21,7 +21,7 @@ export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof CompoundButton>;
+} satisfies Meta<typeof CompoundButton>;
 
 export const Default = () => (
   <CompoundButton id={buttonId} secondaryContent="This is some secondary text">
diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
index 811a358b2c386..4282cd9f07717 100644
--- a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MenuButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
@@ -11,7 +11,7 @@ export default {
   title: 'MenuButton Converged',
   component: MenuButton,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof MenuButton>;
+} satisfies Meta<typeof MenuButton>;
 
 export const Default = () => <MenuButton id={buttonId}>Hello, world</MenuButton>;
 
diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
index bbf967d53bb44..83e90046d8d0d 100644
--- a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ToggleButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
@@ -11,7 +11,7 @@ export default {
   title: 'ToggleButton Converged',
   component: ToggleButton,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof ToggleButton>;
+} satisfies Meta<typeof ToggleButton>;
 
 export const Default = () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>;
 
diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
index 3c0fd36d2a758..c1cce76fcf639 100644
--- a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat';
 import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons';
@@ -23,11 +23,9 @@ export default {
   ],
 } satisfies Meta<typeof CalendarBase>;
 
-type Story = StoryFn<typeof CalendarBase>;
+export const Default = () => <Calendar />;
 
-export const Default: Story = () => <Calendar />;
-
-export const CustomIcons: Story = () => (
+export const CustomIcons = () => (
   <Calendar
     calendarDayProps={{
       navigationIcons: {
diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
index a2432075c1d8c..0c68da607e0e3 100644
--- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -5,7 +5,7 @@ import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-
 import { Body1, Caption1, Text } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
 import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent, appLogoUrl } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
@@ -22,7 +22,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Card>;
+} satisfies Meta<typeof Card>;
 
 export const CardTemplates = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
index 953270ef12da4..4e7e40b1652ea 100644
--- a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
@@ -3,7 +3,7 @@ import { Steps, StoryWright } from 'storywright';
 import { Card } from '@fluentui/react-card';
 import { action } from '@storybook/addon-actions';
 import { SampleCardContent } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
 
 export default {
@@ -26,7 +26,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Card>;
+} satisfies Meta<typeof Card>;
 
 export const AppearanceInteractiveFilled = () => (
   <Card onClick={action('filled card clicked')} appearance="filled">
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
index c05755f3317c9..3969779d991de 100644
--- a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Card } from '@fluentui/react-card';
 import { SampleCardContent } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
@@ -27,7 +27,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Card>;
+} satisfies Meta<typeof Card>;
 
 export const AppearanceSelectableFilled = () => (
   <Card defaultSelected={false} appearance="filled">
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
index c634620275734..1c20a1b0fb867 100644
--- a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities';
 
@@ -15,23 +15,21 @@ export default {
   ],
 } satisfies Meta<typeof Checkbox>;
 
-type Story = StoryFn<typeof Checkbox>;
-
-export const DisabledChecked: Story = () => <Checkbox disabled checked label="Disabled checked" />;
+export const DisabledChecked = () => <Checkbox disabled checked label="Disabled checked" />;
 DisabledChecked.storyName = 'disabled+checked';
 
-export const DisabledMixed: Story = () => <Checkbox disabled checked="mixed" label="Disabled mixed" />;
+export const DisabledMixed = () => <Checkbox disabled checked="mixed" label="Disabled mixed" />;
 DisabledMixed.storyName = 'disabled+mixed';
 
-export const NoLabel: Story = () => <Checkbox />;
+export const NoLabel = () => <Checkbox />;
 NoLabel.storyName = 'no-label';
 
-export const LabelBefore: Story = () => <Checkbox labelPosition="before" label="Label before" />;
+export const LabelBefore = () => <Checkbox labelPosition="before" label="Label before" />;
 LabelBefore.storyName = 'label-before';
 
 export const LabelBeforeRTL = getStoryVariant(LabelBefore, RTL);
 
-export const LabelWrapping: Story = () => (
+export const LabelWrapping = () => (
   <Checkbox
     label={
       <>
@@ -45,51 +43,51 @@ LabelWrapping.storyName = 'label-wrapping';
 
 export const LabelWrappingRTL = getStoryVariant(LabelWrapping, RTL);
 
-export const Required: Story = () => <Checkbox required label="Required" />;
+export const Required = () => <Checkbox required label="Required" />;
 Required.storyName = 'required';
 
-export const RequiredLabelBefore: Story = () => (
+export const RequiredLabelBefore = () => (
   <Checkbox required labelPosition="before" label="Required with label before" />
 );
 RequiredLabelBefore.storyName = 'required+label-before';
 
-export const Circular: Story = () => <Checkbox shape="circular" label="Circular" />;
+export const Circular = () => <Checkbox shape="circular" label="Circular" />;
 Circular.storyName = 'circular';
 
-export const CircularChecked: Story = () => <Checkbox shape="circular" checked label="Circular checked" />;
+export const CircularChecked = () => <Checkbox shape="circular" checked label="Circular checked" />;
 CircularChecked.storyName = 'circular+checked';
 
-export const CircularMixed: Story = () => <Checkbox shape="circular" checked="mixed" label="Circular mixed" />;
+export const CircularMixed = () => <Checkbox shape="circular" checked="mixed" label="Circular mixed" />;
 CircularMixed.storyName = 'circular+mixed';
 
 //
 // large variants
 //
-export const Large: Story = () => <Checkbox size="large" label="Large" />;
+export const Large = () => <Checkbox size="large" label="Large" />;
 Large.storyName = 'large';
 
 export const LargeRTL = getStoryVariant(Large, RTL);
 
-export const LargeChecked: Story = () => <Checkbox size="large" checked label="Large checked" />;
+export const LargeChecked = () => <Checkbox size="large" checked label="Large checked" />;
 LargeChecked.storyName = 'large+checked';
 
-export const LargeMixed: Story = () => <Checkbox size="large" checked="mixed" label="Large mixed" />;
+export const LargeMixed = () => <Checkbox size="large" checked="mixed" label="Large mixed" />;
 LargeMixed.storyName = 'large+mixed';
 
-export const LargeCircular: Story = () => <Checkbox size="large" shape="circular" label="Large circular" />;
+export const LargeCircular = () => <Checkbox size="large" shape="circular" label="Large circular" />;
 LargeCircular.storyName = 'large+circular';
 
-export const LargeCircularChecked: Story = () => (
+export const LargeCircularChecked = () => (
   <Checkbox size="large" shape="circular" checked label="Large circular checked" />
 );
 LargeCircularChecked.storyName = 'large+circular+checked';
 
-export const LargeCircularMixed: Story = () => (
+export const LargeCircularMixed = () => (
   <Checkbox size="large" shape="circular" checked="mixed" label="Large circular mixed" />
 );
 LargeCircularMixed.storyName = 'large+circular+mixed';
 
-export const LargeLabelWrapping: Story = () => (
+export const LargeLabelWrapping = () => (
   <Checkbox
     size="large"
     label={
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
index 3897a890df69f..07c4a70f1c56e 100644
--- a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities';
 
@@ -25,18 +25,16 @@ export default {
   ],
 } satisfies Meta<typeof Checkbox>;
 
-type Story = StoryFn<typeof Checkbox>;
-
-export const Unchecked: Story = () => <Checkbox label="Unchecked" />;
+export const Unchecked = () => <Checkbox label="Unchecked" />;
 Unchecked.storyName = 'unchecked';
 
 export const UncheckedRTL = getStoryVariant(Unchecked, RTL);
 
-export const Checked: Story = () => <Checkbox checked label="Checked" />;
+export const Checked = () => <Checkbox checked label="Checked" />;
 Checked.storyName = 'checked';
 
-export const Mixed: Story = () => <Checkbox checked="mixed" label="Mixed" />;
+export const Mixed = () => <Checkbox checked="mixed" label="Mixed" />;
 Mixed.storyName = 'mixed';
 
-export const Disabled: Story = () => <Checkbox disabled label="Disabled" />;
+export const Disabled = () => <Checkbox disabled label="Disabled" />;
 Disabled.storyName = 'disabled';
diff --git a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
index fc2e9e8c19314..1bedebf4a8493 100644
--- a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Combobox, Option } from '@fluentui/react-combobox';
 import { TestWrapperDecoratorFixedWidth } from '../../utilities';
 
@@ -26,9 +26,7 @@ export default {
   ],
 } satisfies Meta<typeof Combobox>;
 
-type Story = StoryFn<typeof Combobox>;
-
-export const AppearanceOutlineDefault: Story = () => (
+export const AppearanceOutlineDefault = () => (
   <Combobox>
     <Option>text</Option>
   </Combobox>
@@ -36,7 +34,7 @@ export const AppearanceOutlineDefault: Story = () => (
 
 AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
 
-export const AppearanceUnderline: Story = () => (
+export const AppearanceUnderline = () => (
   <Combobox appearance="underline">
     <Option>text</Option>
   </Combobox>
@@ -44,7 +42,7 @@ export const AppearanceUnderline: Story = () => (
 
 AppearanceUnderline.storyName = 'Appearance: underline';
 
-export const AppearanceFilledDarker: Story = () => (
+export const AppearanceFilledDarker = () => (
   <div style={{ background: '#00335c', padding: '10px' }}>
     <Combobox appearance="filled-darker">
       <Option>text</Option>
@@ -54,7 +52,7 @@ export const AppearanceFilledDarker: Story = () => (
 
 AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
 
-export const AppearanceFilledLighter: Story = () => (
+export const AppearanceFilledLighter = () => (
   <div style={{ background: '#00335c', padding: '10px' }}>
     <Combobox appearance="filled-lighter">
       <Option>text</Option>
@@ -64,13 +62,13 @@ export const AppearanceFilledLighter: Story = () => (
 
 AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
 
-export const Disabled: Story = () => (
+export const Disabled = () => (
   <Combobox disabled>
     <Option>text</Option>
   </Combobox>
 );
 
-export const DisabledWithValue: Story = () => (
+export const DisabledWithValue = () => (
   <Combobox disabled value="text">
     <Option>text</Option>
   </Combobox>
@@ -78,7 +76,7 @@ export const DisabledWithValue: Story = () => (
 
 DisabledWithValue.storyName = 'Disabled with value';
 
-export const InvalidOutline: Story = () => (
+export const InvalidOutline = () => (
   <Combobox aria-invalid>
     <Option>text</Option>
   </Combobox>
@@ -86,7 +84,7 @@ export const InvalidOutline: Story = () => (
 
 InvalidOutline.storyName = 'Invalid: outline';
 
-export const InvalidUnderline: Story = () => (
+export const InvalidUnderline = () => (
   <Combobox aria-invalid appearance="underline">
     <Option>text</Option>
   </Combobox>
@@ -94,7 +92,7 @@ export const InvalidUnderline: Story = () => (
 
 InvalidUnderline.storyName = 'Invalid: underline';
 
-export const InvalidFilledDarker: Story = () => (
+export const InvalidFilledDarker = () => (
   <div style={{ background: '#00335c', padding: '10px' }}>
     <Combobox aria-invalid appearance="filled-darker">
       <Option>text</Option>
@@ -104,7 +102,7 @@ export const InvalidFilledDarker: Story = () => (
 
 InvalidFilledDarker.storyName = 'Invalid: filled-darker';
 
-export const InvalidFilledLighter: Story = () => (
+export const InvalidFilledLighter = () => (
   <div style={{ background: '#00335c', padding: '10px' }}>
     <Combobox aria-invalid appearance="filled-lighter">
       <Option>text</Option>
@@ -114,7 +112,7 @@ export const InvalidFilledLighter: Story = () => (
 
 InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
 
-export const WithPlaceholder: Story = () => (
+export const WithPlaceholder = () => (
   <Combobox placeholder="Color">
     <Option>text</Option>
   </Combobox>
@@ -122,7 +120,7 @@ export const WithPlaceholder: Story = () => (
 
 WithPlaceholder.storyName = 'With placeholder';
 
-export const WithValue: Story = () => (
+export const WithValue = () => (
   <Combobox value="Text text">
     <Option>text</Option>
   </Combobox>
@@ -130,7 +128,7 @@ export const WithValue: Story = () => (
 
 WithValue.storyName = 'With value';
 
-export const SizeSmall: Story = () => (
+export const SizeSmall = () => (
   <Combobox size="small">
     <Option>text</Option>
   </Combobox>
@@ -138,7 +136,7 @@ export const SizeSmall: Story = () => (
 
 SizeSmall.storyName = 'Size: small';
 
-export const SizeLarge: Story = () => (
+export const SizeLarge = () => (
   <Combobox size="large">
     <Option>text</Option>
   </Combobox>
diff --git a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
index 9bd7f05de3e60..af4e328b47e3e 100644
--- a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
 import { TestWrapperDecoratorFixedWidth } from '../../utilities';
 
@@ -25,9 +25,7 @@ export default {
   ],
 } satisfies Meta<typeof Combobox>;
 
-type Story = StoryFn<typeof Combobox>;
-
-export const Open: Story = () => (
+export const Open = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox open>
       <Option>Red</Option>
@@ -37,7 +35,7 @@ export const Open: Story = () => (
   </div>
 );
 
-export const OpenWithInlinePopup: Story = () => (
+export const OpenWithInlinePopup = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox open inlinePopup>
       <Option>Red</Option>
@@ -49,7 +47,7 @@ export const OpenWithInlinePopup: Story = () => (
 
 OpenWithInlinePopup.storyName = 'Open with inlinePopup';
 
-export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements: Story = () => (
+export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox open inlinePopup>
       <Option>Red</Option>
@@ -63,7 +61,7 @@ export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElement
 WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements.storyName =
   'When rendering inline, it should render on top of relatively positioned elements';
 
-export const OptionWithLongContent: Story = () => (
+export const OptionWithLongContent = () => (
   <div style={{ paddingBottom: '240px' }}>
     <Combobox open>
       <Option>
@@ -78,7 +76,7 @@ export const OptionWithLongContent: Story = () => (
 
 OptionWithLongContent.storyName = 'Option with long content';
 
-export const WithSelection: Story = () => (
+export const WithSelection = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox selectedOptions={['Red']} open>
       <Option>Red</Option>
@@ -90,7 +88,7 @@ export const WithSelection: Story = () => (
 
 WithSelection.storyName = 'With selection';
 
-export const WithMultiselectSelection: Story = () => (
+export const WithMultiselectSelection = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox multiselect selectedOptions={['Green', 'Red']} open>
       <Option>Red</Option>
@@ -102,7 +100,7 @@ export const WithMultiselectSelection: Story = () => (
 
 WithMultiselectSelection.storyName = 'With multiselect selection';
 
-export const DisabledOption: Story = () => (
+export const DisabledOption = () => (
   <div style={{ paddingBottom: '120px' }}>
     <Combobox open>
       <Option disabled>Red</Option>
@@ -114,7 +112,7 @@ export const DisabledOption: Story = () => (
 
 DisabledOption.storyName = 'Disabled option';
 
-export const OpenWithGroupedOptions: Story = () => (
+export const OpenWithGroupedOptions = () => (
   <div style={{ paddingBottom: '300px' }}>
     <Combobox open>
       <OptionGroup label="Colors">
diff --git a/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx
index 9af7b16afc253..3e313d7cf32a1 100644
--- a/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { CounterBadge } from '@fluentui/react-badge';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, RTL } from '../../utilities';
 
 export default {
   title: 'CounterBadge Converged - colors',
-} as ComponentMeta<typeof CounterBadge>;
+} satisfies Meta<typeof CounterBadge>;
 
 export const Default = () => (
   <div style={{ display: 'flex', gap: 10 }}>
diff --git a/apps/vr-tests-react-components/src/stories/CustomStyleHooks.stories.tsx b/apps/vr-tests-react-components/src/stories/CustomStyleHooks.stories.tsx
index befcf00959b8b..15dbe4999ba3c 100644
--- a/apps/vr-tests-react-components/src/stories/CustomStyleHooks.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/CustomStyleHooks.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Button, CompoundButton, MenuButton, SplitButton, ToggleButton } from '@fluentui/react-button';
 import type {
   ButtonState,
@@ -13,8 +13,8 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 
 export default {
   title: 'FluentProvider CustomStyleHooks',
-  Component: FluentProvider,
-} as ComponentMeta<typeof Button>;
+  component: FluentProvider,
+} satisfies Meta<typeof Button>;
 
 export const Default = () => <FluentProvider>Hello, world</FluentProvider>;
 
@@ -32,7 +32,6 @@ export const ButtonCustomStyles = () => {
   const styles = useCustomStyles();
 
   const customStyleHooks: FluentProviderCustomStyleHooks = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     useButtonStyles_unstable: (state: unknown) => {
       const componentState = state as ButtonState;
       componentState.root.className = mergeClasses(componentState.root.className, styles.button);
@@ -52,7 +51,6 @@ export const CompoundButtonCustomStyles = () => {
   const styles = useCustomStyles();
 
   const customStyleHooks: FluentProviderCustomStyleHooks = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     useCompoundButtonStyles_unstable: (state: unknown) => {
       const componentState = state as CompoundButtonState;
       componentState.root.className = mergeClasses(componentState.root.className, styles.button);
@@ -72,7 +70,6 @@ export const MenuButtonCustomStyles = () => {
   const styles = useCustomStyles();
 
   const customStyleHooks: FluentProviderCustomStyleHooks = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     useMenuButtonStyles_unstable: (state: unknown) => {
       const componentState = state as MenuButtonState;
       componentState.root.className = mergeClasses(componentState.root.className, styles.button);
@@ -92,7 +89,6 @@ export const SplitButtonCustomStyles = () => {
   const styles = useCustomStyles();
 
   const customStyleHooks: FluentProviderCustomStyleHooks = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     useSplitButtonStyles_unstable: (state: unknown) => {
       const componentState = state as SplitButtonState;
       if (componentState.menuButton) {
@@ -120,7 +116,6 @@ export const ToggleButtonCustomStyles = () => {
   const styles = useCustomStyles();
 
   const customStyleHooks: FluentProviderCustomStyleHooks = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     useToggleButtonStyles_unstable: (state: unknown) => {
       const componentState = state as ToggleButtonState;
       componentState.root.className = mergeClasses(componentState.root.className, styles.button);
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx
index dcfa20b20d2df..b6b4ea50467ba 100644
--- a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx
@@ -1,117 +1,39 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
-import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat';
-import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
-import { DateRangeType } from '@fluentui/react-calendar-compat';
-import { Field } from '@fluentui/react-field';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
 
-const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean }) => {
-  const today = new Date('3/15/2023');
-  const { renderRelativeElement, ...restProps } = props;
-  return (
-    <div style={{ width: '500px', height: '330px', padding: '10px' }}>
-      <DatePickerBase value={today} today={today} {...restProps} />
-      {renderRelativeElement && <input style={{ position: 'relative', display: 'block', width: '100%' }} />}
-    </div>
-  );
-};
-
 export default {
   title: 'DatePicker Compat',
   component: DatePicker,
   decorators: [
     TestWrapperDecorator,
     story => (
-      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+      <StoryWright
+        steps={new Steps()
+          .snapshot('rest', { cropTo: '.testWrapper' })
+          .click('.datepicker-input')
+          .snapshot('opened', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
+      </StoryWright>
     ),
   ],
 } satisfies Meta<typeof DatePicker>;
 
-type Story = StoryFn<typeof DatePicker>;
-
-export const DateRangeDay: Story = () => (
-  <DatePicker calendar={{ dateRangeType: DateRangeType.Day }} defaultOpen={true} />
-);
-
-DateRangeDay.storyName = 'DateRange: day';
-
-export const DateRangeWeek: Story = () => (
-  <DatePicker calendar={{ dateRangeType: DateRangeType.Week }} defaultOpen={true} />
-);
-
-DateRangeWeek.storyName = 'DateRange: week';
-
-export const DateRangeWorkWeek: Story = () => (
-  <DatePicker calendar={{ dateRangeType: DateRangeType.WorkWeek }} defaultOpen={true} />
-);
-
-DateRangeWorkWeek.storyName = 'DateRange: work week';
-
-export const DateRangeMonth: Story = () => (
-  <DatePicker calendar={{ dateRangeType: DateRangeType.Month }} defaultOpen={true} />
-);
-DateRangeMonth.storyName = 'DateRange: month';
-
-export const DateRangeDayDarkMode = getStoryVariant(DateRangeDay, DARK_MODE);
-
-export const DateRangeMonthHightContrast = getStoryVariant(DateRangeMonth, HIGH_CONTRAST);
-
-export const MarkedDates: Story = () => (
-  <DatePicker
-    calendar={{
-      calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] },
-    }}
-    defaultOpen={true}
-  />
-);
-MarkedDates.storyName = 'marked dates';
-
-export const MarkedDatesDarkMode = getStoryVariant(MarkedDates, DARK_MODE);
-
-export const MarkedDatesHightContrast = getStoryVariant(MarkedDates, HIGH_CONTRAST);
-
-export const ShowWeekNumbers: Story = () => <DatePicker showWeekNumbers defaultOpen={true} />;
-ShowWeekNumbers.storyName = 'showWeekNumbers';
-
-export const ShowWeekNumbersDarkMode = getStoryVariant(ShowWeekNumbers, DARK_MODE);
-
-export const ShowWeekNumbersHightContrast = getStoryVariant(ShowWeekNumbers, HIGH_CONTRAST);
-
-export const AllowTextInput: Story = () => <DatePicker allowTextInput />;
-
-AllowTextInput.storyName = 'allowTextInput';
-
-export const Required: Story = () => (
-  <Field label="Select a date" required>
-    <DatePicker />
-  </Field>
+export const Default = () => (
+  <div style={{ padding: '10px' }}>
+    <DatePicker input={{ className: 'datepicker-input' }} />
+  </div>
 );
+Default.storyName = 'default';
 
-export const Underlined: Story = () => <DatePicker underlined />;
-
-export const UnderlinedAndRequired: Story = () => (
-  <Field required>
-    <DatePicker underlined />
-  </Field>
-);
-
-UnderlinedAndRequired.storyName = 'Underlined and required';
-
-export const WithLabel: Story = () => (
-  <Field label="Select a date">
-    <DatePicker />
-  </Field>
-);
-
-WithLabel.storyName = 'With label';
-
-export const WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements: Story = () => (
-  <Field label="Select a date">
-    <DatePicker open inlinePopup renderRelativeElement />
-  </Field>
-);
+export const DefaultHightContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
-WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements.storyName =
-  'when rendering inline, it should not render behind relatively positioned elements';
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx
deleted file mode 100644
index 4bcf4a77c867b..0000000000000
--- a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
-import { Steps, StoryWright } from 'storywright';
-import { DatePicker } from '@fluentui/react-datepicker-compat';
-import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
-
-export default {
-  title: 'DatePicker Compat',
-  component: DatePicker,
-  decorators: [
-    TestWrapperDecorator,
-    story => (
-      <StoryWright
-        steps={new Steps()
-          .snapshot('rest', { cropTo: '.testWrapper' })
-          .click('.datepicker-input')
-          .snapshot('opened', { cropTo: '.testWrapper' })
-          .end()}
-      >
-        {story()}
-      </StoryWright>
-    ),
-  ],
-} satisfies Meta<typeof DatePicker>;
-
-type Story = StoryFn<typeof DatePicker>;
-
-export const Default: Story = () => <DatePicker input={{ className: 'datepicker-input' }} />;
-Default.storyName = 'default';
-
-export const DefaultHightContrast = getStoryVariant(Default, HIGH_CONTRAST);
-
-export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx
new file mode 100644
index 0000000000000..cdce9168bb1bf
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat';
+import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { DateRangeType } from '@fluentui/react-calendar-compat';
+import { Field } from '@fluentui/react-field';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST } from '../../utilities';
+
+const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean }) => {
+  const today = new Date('3/15/2023');
+  const { renderRelativeElement, ...restProps } = props;
+  return (
+    <div style={{ width: '500px', height: '330px', padding: '20px' }}>
+      <DatePickerBase value={today} today={today} {...restProps} />
+      {renderRelativeElement && <input style={{ position: 'relative', display: 'block', width: '100%' }} />}
+    </div>
+  );
+};
+
+export default {
+  title: 'DatePicker Compat',
+  component: DatePicker,
+  decorators: [
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+export const DateRangeDay = () => <DatePicker calendar={{ dateRangeType: DateRangeType.Day }} defaultOpen={true} />;
+
+DateRangeDay.storyName = 'DateRange: day';
+
+export const DateRangeWeek = () => <DatePicker calendar={{ dateRangeType: DateRangeType.Week }} defaultOpen={true} />;
+
+DateRangeWeek.storyName = 'DateRange: week';
+
+export const DateRangeWorkWeek = () => (
+  <DatePicker calendar={{ dateRangeType: DateRangeType.WorkWeek }} defaultOpen={true} />
+);
+
+DateRangeWorkWeek.storyName = 'DateRange: work week';
+
+export const DateRangeMonth = () => <DatePicker calendar={{ dateRangeType: DateRangeType.Month }} defaultOpen={true} />;
+DateRangeMonth.storyName = 'DateRange: month';
+
+export const DateRangeDayDarkMode = getStoryVariant(DateRangeDay, DARK_MODE);
+
+export const DateRangeMonthHightContrast = getStoryVariant(DateRangeMonth, HIGH_CONTRAST);
+
+export const MarkedDates = () => (
+  <DatePicker
+    calendar={{
+      calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] },
+    }}
+    defaultOpen={true}
+  />
+);
+MarkedDates.storyName = 'marked dates';
+
+export const MarkedDatesDarkMode = getStoryVariant(MarkedDates, DARK_MODE);
+
+export const MarkedDatesHightContrast = getStoryVariant(MarkedDates, HIGH_CONTRAST);
+
+export const ShowWeekNumbers = () => <DatePicker showWeekNumbers defaultOpen={true} />;
+ShowWeekNumbers.storyName = 'showWeekNumbers';
+
+export const ShowWeekNumbersDarkMode = getStoryVariant(ShowWeekNumbers, DARK_MODE);
+
+export const ShowWeekNumbersHightContrast = getStoryVariant(ShowWeekNumbers, HIGH_CONTRAST);
+
+export const AllowTextInput = () => <DatePicker allowTextInput />;
+
+AllowTextInput.storyName = 'allowTextInput';
+
+export const Underlined = () => <DatePicker underlined />;
+
+export const UnderlinedAndRequired = () => (
+  <Field required>
+    <DatePicker underlined />
+  </Field>
+);
+
+UnderlinedAndRequired.storyName = 'Underlined and required';
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx
new file mode 100644
index 0000000000000..bc9da357c25c2
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat';
+import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { Field } from '@fluentui/react-field';
+import { TestWrapperDecorator } from '../../utilities';
+
+const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean }) => {
+  const today = new Date('3/15/2023');
+  const { renderRelativeElement, ...restProps } = props;
+  return (
+    <div style={{ width: '500px', height: '330px', padding: '10px' }}>
+      <DatePickerBase value={today} today={today} {...restProps} />
+      {renderRelativeElement && <input style={{ position: 'relative', display: 'block', width: '100%' }} />}
+    </div>
+  );
+};
+
+export default {
+  title: 'DatePicker Compat',
+  component: DatePicker,
+  decorators: [
+    TestWrapperDecorator,
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+export const Required = () => (
+  <Field label="Select a date" required>
+    <DatePicker />
+  </Field>
+);
+
+export const WithLabel = () => (
+  <Field label="Select a date">
+    <DatePicker />
+  </Field>
+);
+
+WithLabel.storyName = 'With label';
+
+export const WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements = () => (
+  <Field label="Select a date">
+    <DatePicker open inlinePopup renderRelativeElement />
+  </Field>
+);
+
+WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements.storyName =
+  'when rendering inline, it should not render behind relatively positioned elements';
diff --git a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
index e7859e4a205ec..97bc338b8710b 100644
--- a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
@@ -11,12 +11,12 @@ import {
 import { Button } from '@fluentui/react-button';
 import { Combobox, Option } from '@fluentui/react-combobox';
 import { Rocket24Regular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
   title: 'Dialog',
-} as ComponentMeta<typeof Dialog>;
+} satisfies Meta<typeof Dialog>;
 
 export const Default = () => (
   <Dialog open>
diff --git a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
deleted file mode 100644
index 28cbc16ac0efb..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Divider } from '@fluentui/react-divider';
-import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
-
-storiesOf('Divider Converged - Horizontal', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('without content', () => <Divider />, { includeRtl: true })
-  .addStory('with content', () => <Divider>Today</Divider>, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Start Aligned', () => <Divider alignContent="start">Today</Divider>, {
-    includeRtl: true,
-  })
-  .addStory('End Aligned', () => <Divider alignContent="end">Today</Divider>, { includeRtl: true })
-  .addStory('Appearance subtle', () => <Divider appearance="subtle">Today</Divider>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Appearance strong', () => <Divider appearance="strong">Today</Divider>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Appearance brand', () => <Divider appearance="brand">Today</Divider>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inset', () => <Divider inset>Today</Divider>);
-
-storiesOf('Divider Converged - Vertical', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <div style={{ height: '200px' }}>
-      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-    </div>
-  ))
-  .addStory('Center Aligned', () => <Divider vertical>Today</Divider>)
-  .addStory('Start Aligned', () => (
-    <Divider vertical alignContent="start">
-      Today
-    </Divider>
-  ))
-  .addStory('End Aligned', () => (
-    <Divider vertical alignContent="end">
-      Today
-    </Divider>
-  ))
-  .addStory('inset', () => (
-    <Divider inset vertical>
-      Today
-    </Divider>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx
new file mode 100644
index 0000000000000..2e1fd90f3fde5
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { Divider } from '@fluentui/react-divider';
+
+import { getStoryVariant, TestWrapperDecoratorFixedWidth, RTL, HIGH_CONTRAST, DARK_MODE } from '../../utilities';
+
+export default {
+  title: 'Divider Converged - Horizontal',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Divider>;
+
+export const WithoutContent = () => <Divider />;
+WithoutContent.storyName = 'without content';
+
+export const WithoutContentRTL = getStoryVariant(WithoutContent, RTL);
+
+export const WithContent = () => <Divider>Today</Divider>;
+WithContent.storyName = 'with content';
+
+export const WithContentRTL = getStoryVariant(WithContent, RTL);
+
+export const WithContentHighContrast = getStoryVariant(WithContent, HIGH_CONTRAST);
+
+export const WithContentDarkMode = getStoryVariant(WithContent, DARK_MODE);
+
+export const StartAligned = () => <Divider alignContent="start">Today</Divider>;
+
+export const StartAlignedRTL = getStoryVariant(StartAligned, RTL);
+
+export const EndAligned = () => <Divider alignContent="end">Today</Divider>;
+
+export const EndAlignedRTL = getStoryVariant(EndAligned, RTL);
+
+export const AppearanceSubtle = () => <Divider appearance="subtle">Today</Divider>;
+AppearanceSubtle.storyName = 'Appearance subtle';
+
+export const AppearanceSubtleHighContrast = getStoryVariant(AppearanceSubtle, HIGH_CONTRAST);
+
+export const AppearanceSubtleDarkMode = getStoryVariant(AppearanceSubtle, DARK_MODE);
+
+export const AppearanceStrong = () => <Divider appearance="strong">Today</Divider>;
+AppearanceStrong.storyName = 'Appearance strong';
+
+export const AppearanceStrongHighContrast = getStoryVariant(AppearanceStrong, HIGH_CONTRAST);
+
+export const AppearanceStrongDarkMode = getStoryVariant(AppearanceStrong, DARK_MODE);
+
+export const AppearanceBrand = () => <Divider appearance="brand">Today</Divider>;
+AppearanceBrand.storyName = 'Appearance brand';
+
+export const AppearanceBrandHighContrast = getStoryVariant(AppearanceBrand, HIGH_CONTRAST);
+
+export const AppearanceBrandDarkMode = getStoryVariant(AppearanceBrand, DARK_MODE);
+
+export const Inset = () => <Divider inset>Today</Divider>;
diff --git a/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx
new file mode 100644
index 0000000000000..c4f2fc9e99c4d
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Divider } from '@fluentui/react-divider';
+import { Steps, StoryWright } from 'storywright';
+
+import { TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'Divider Converged - Vertical',
+
+  decorators: [
+    TestWrapperDecorator,
+    story => (
+      <div style={{ height: '200px' }}>
+        <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Divider>;
+
+export const CenterAligned = () => <Divider vertical>Today</Divider>;
+
+export const StartAligned = () => (
+  <Divider vertical alignContent="start">
+    Today
+  </Divider>
+);
+
+export const EndAligned = () => (
+  <Divider vertical alignContent="end">
+    Today
+  </Divider>
+);
+
+export const Inset = () => (
+  <Divider inset vertical>
+    Today
+  </Divider>
+);
+Inset.storyName = 'inset';
diff --git a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
index d688dd9079d48..80490dec94959 100644
--- a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import {
   Drawer,
@@ -26,7 +26,7 @@ import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'
 
 export default {
   title: 'Drawer',
-} as ComponentMeta<typeof Drawer>;
+} satisfies Meta<typeof Drawer>;
 
 const ExampleDrawerHeader = () => (
   <DrawerHeader>
diff --git a/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx
deleted file mode 100644
index 8b49ccff11923..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Dropdown, Option, OptionGroup } from '@fluentui/react-combobox';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Dropdown Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .focus('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => (
-    <Dropdown>
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Appearance: underline', () => (
-    <Dropdown appearance="underline">
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Appearance: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Dropdown appearance="filled-darker">
-        <Option>text</Option>
-      </Dropdown>
-    </div>
-  ))
-  .addStory('Appearance: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Dropdown appearance="filled-lighter">
-        <Option>text</Option>
-      </Dropdown>
-    </div>
-  ))
-  .addStory('Disabled', () => (
-    <Dropdown disabled>
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Disabled with value', () => (
-    <Dropdown disabled value="text">
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Invalid: outline', () => (
-    <Dropdown aria-invalid>
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Invalid: underline', () => (
-    <Dropdown aria-invalid appearance="underline">
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Invalid: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Dropdown aria-invalid appearance="filled-darker">
-        <Option>text</Option>
-      </Dropdown>
-    </div>
-  ))
-  .addStory('Invalid: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Dropdown aria-invalid appearance="filled-lighter">
-        <Option>text</Option>
-      </Dropdown>
-    </div>
-  ))
-  .addStory('With placeholder', () => (
-    <Dropdown placeholder="Select a Color">
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('With value', () => (
-    <Dropdown value="Text text">
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('With multiselect value', () => (
-    <Dropdown multiselect value="Green, Red" selectedOptions={['Green', 'Red']}>
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('Size: small', () => (
-    <Dropdown size="small">
-      <Option>text</Option>
-    </Dropdown>
-  ))
-  .addStory('Size: large', () => (
-    <Dropdown size="large">
-      <Option>text</Option>
-    </Dropdown>
-  ));
-
-// Option interaction stories
-storiesOf('Dropdown Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('[role=option]')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .keys('input', 'ArrowDown')
-        .snapshot('active option', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Open', () => (
-    <Dropdown open>
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('Open with inlinePopup', () => (
-    <Dropdown open inlinePopup>
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('When rendering inline, it should render on top of relatively positioned elements', () => (
-    <>
-      <Dropdown open inlinePopup>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Dropdown>
-      <button style={{ position: 'relative' }}>sample button</button>
-    </>
-  ))
-  .addStory('Option with long content', () => (
-    <Dropdown open>
-      <Option>
-        Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
-        periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
-      </Option>
-      <Option>Red</Option>
-      <Option>Green</Option>
-    </Dropdown>
-  ))
-  .addStory('With selection', () => (
-    <Dropdown selectedOptions={['Red']} open>
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('With multiselect selection', () => (
-    <Dropdown multiselect selectedOptions={['Green', 'Red']} open>
-      <Option>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('Disabled option', () => (
-    <Dropdown open>
-      <Option disabled>Red</Option>
-      <Option>Green</Option>
-      <Option>Blue</Option>
-    </Dropdown>
-  ))
-  .addStory('Open with grouped options', () => (
-    <Dropdown open>
-      <OptionGroup label="Colors">
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </OptionGroup>
-      <OptionGroup label="Shapes">
-        <Option>Circle</Option>
-        <Option>Square</Option>
-        <Option>Oval</Option>
-      </OptionGroup>
-    </Dropdown>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000000000..d4e784db4a474
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,143 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { Dropdown, Option } from '@fluentui/react-combobox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Dropdown Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .focus('input')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Dropdown>;
+
+export const AppearanceOutlineDefault = () => (
+  <Dropdown>
+    <Option>text</Option>
+  </Dropdown>
+);
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline = () => (
+  <Dropdown appearance="underline">
+    <Option>text</Option>
+  </Dropdown>
+);
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Dropdown appearance="filled-darker">
+      <Option>text</Option>
+    </Dropdown>
+  </div>
+);
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Dropdown appearance="filled-lighter">
+      <Option>text</Option>
+    </Dropdown>
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const Disabled = () => (
+  <Dropdown disabled>
+    <Option>text</Option>
+  </Dropdown>
+);
+
+export const DisabledWithValue = () => (
+  <Dropdown disabled value="text">
+    <Option>text</Option>
+  </Dropdown>
+);
+DisabledWithValue.storyName = 'Disabled with value';
+
+export const InvalidOutline = () => (
+  <Dropdown aria-invalid>
+    <Option>text</Option>
+  </Dropdown>
+);
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidUnderline = () => (
+  <Dropdown aria-invalid appearance="underline">
+    <Option>text</Option>
+  </Dropdown>
+);
+InvalidUnderline.storyName = 'Invalid: underline';
+
+export const InvalidFilledDarker = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Dropdown aria-invalid appearance="filled-darker">
+      <Option>text</Option>
+    </Dropdown>
+  </div>
+);
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Dropdown aria-invalid appearance="filled-lighter">
+      <Option>text</Option>
+    </Dropdown>
+  </div>
+);
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
+
+export const WithPlaceholder = () => (
+  <Dropdown placeholder="Select a Color">
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+WithPlaceholder.storyName = 'With placeholder';
+
+export const WithValue = () => (
+  <Dropdown value="Text text">
+    <Option>text</Option>
+  </Dropdown>
+);
+WithValue.storyName = 'With value';
+
+export const WithMultiselectValue = () => (
+  <Dropdown multiselect value="Green, Red" selectedOptions={['Green', 'Red']}>
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+WithMultiselectValue.storyName = 'With multiselect value';
+
+export const SizeSmall = () => (
+  <Dropdown size="small">
+    <Option>text</Option>
+  </Dropdown>
+);
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge = () => (
+  <Dropdown size="large">
+    <Option>text</Option>
+  </Dropdown>
+);
+SizeLarge.storyName = 'Size: large';
diff --git a/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx
new file mode 100644
index 0000000000000..17d2f567165d6
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Dropdown, Option, OptionGroup } from '@fluentui/react-combobox';
+import { Steps, StoryWright } from 'storywright';
+
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Dropdown Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('[role=option]')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .keys('input', 'ArrowDown')
+          .snapshot('active option', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Dropdown>;
+
+export const Open = () => (
+  <Dropdown open>
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+
+export const OpenWithInlinePopup = () => (
+  <Dropdown open inlinePopup>
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+OpenWithInlinePopup.storyName = 'Open with inlinePopup';
+
+export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements = () => (
+  <>
+    <Dropdown open inlinePopup>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Dropdown>
+    <button style={{ position: 'relative' }}>sample button</button>
+  </>
+);
+
+WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements.storyName =
+  'When rendering inline, it should render on top of relatively positioned elements';
+
+export const OptionWithLongContent = () => (
+  <Dropdown open>
+    <Option>
+      Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo periwinkle
+      azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
+    </Option>
+    <Option>Red</Option>
+    <Option>Green</Option>
+  </Dropdown>
+);
+OptionWithLongContent.storyName = 'Option with long content';
+
+export const WithSelection = () => (
+  <Dropdown selectedOptions={['Red']} open>
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+WithSelection.storyName = 'With selection';
+
+export const WithMultiselectSelection = () => (
+  <Dropdown multiselect selectedOptions={['Green', 'Red']} open>
+    <Option>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+WithMultiselectSelection.storyName = 'With multiselect selection';
+
+export const DisabledOption = () => (
+  <Dropdown open>
+    <Option disabled>Red</Option>
+    <Option>Green</Option>
+    <Option>Blue</Option>
+  </Dropdown>
+);
+DisabledOption.storyName = 'Disabled option';
+
+export const OpenWithGroupedOptions = () => (
+  <Dropdown open>
+    <OptionGroup label="Colors">
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </OptionGroup>
+    <OptionGroup label="Shapes">
+      <Option>Circle</Option>
+      <Option>Square</Option>
+      <Option>Oval</Option>
+    </OptionGroup>
+  </Dropdown>
+);
+OpenWithGroupedOptions.storyName = 'Open with grouped options';
diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index 01d18d8d36e33..6bbdbbde5fc4c 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Combobox, Dropdown } from '@fluentui/react-combobox';
 import { Field } from '@fluentui/react-field';
@@ -12,12 +11,12 @@ import { Slider } from '@fluentui/react-slider';
 import { SpinButton } from '@fluentui/react-spinbutton';
 import { Switch } from '@fluentui/react-switch';
 import { Textarea } from '@fluentui/react-textarea';
-import { DecoratorFunction } from '@storybook/addons';
-import { storiesOf } from '@storybook/react';
-import { Steps, StoryWright } from 'storywright';
-import { ExtendedStoryFnReturnType } from '../utilities/types';
+import type { Meta, DecoratorFn } from '@storybook/react';
+import { Steps } from 'storywright';
+
+import { withStoryWrightSteps } from '../utilities';
 
-const TestWrapperDecoratorFixedWidth400: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+const TestWrapperDecoratorFixedWidth400: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px', width: '400px' }}>
       {story()}
@@ -25,332 +24,390 @@ const TestWrapperDecoratorFixedWidth400: DecoratorFunction<ExtendedStoryFnReturn
   </div>
 );
 
-storiesOf('Field', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth400)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('base', () => (
-    <Field label="Example field">
-      <Input />
-    </Field>
-  ))
-  .addStory('required', () => (
-    <Field label="Required field" required>
-      <Input />
-    </Field>
-  ))
-  .addStory('size:small', () => (
-    <Field label="Small field" size="small">
-      <Input />
-    </Field>
-  ))
-  .addStory('size:large', () => (
-    <Field label="Large field" size="large">
-      <Input />
-    </Field>
-  ))
-  .addStory('validation:error', () => (
-    <Field label="Validation error" validationMessage="Error message">
-      <Input />
-    </Field>
-  ))
-  .addStory('validation:warning', () => (
-    <Field label="Validation warning" validationState="warning" validationMessage="Warning message">
-      <Input />
-    </Field>
-  ))
-  .addStory('validation:success', () => (
-    <Field
-      label="Validation success"
-      validationState="success"
-      validationMessage={`This success message wraps to multiple lines. All lines of this message should be left aligned
+export default {
+  title: 'Field',
+  decorators: [
+    TestWrapperDecoratorFixedWidth400,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Field>;
+
+export const Base = () => (
+  <Field label="Example field">
+    <Input />
+  </Field>
+);
+Base.storyName = 'base';
+
+export const Required = () => (
+  <Field label="Required field" required>
+    <Input />
+  </Field>
+);
+Required.storyName = 'required';
+
+export const SizeSmall = () => (
+  <Field label="Small field" size="small">
+    <Input />
+  </Field>
+);
+SizeSmall.storyName = 'size:small';
+
+export const SizeLarge = () => (
+  <Field label="Large field" size="large">
+    <Input />
+  </Field>
+);
+SizeLarge.storyName = 'size:large';
+
+export const ValidationError = () => (
+  <Field label="Validation error" validationMessage="Error message">
+    <Input />
+  </Field>
+);
+ValidationError.storyName = 'validation:error';
+
+export const ValidationWarning = () => (
+  <Field label="Validation warning" validationState="warning" validationMessage="Warning message">
+    <Input />
+  </Field>
+);
+ValidationWarning.storyName = 'validation:warning';
+
+export const ValidationSuccess = () => (
+  <Field
+    label="Validation success"
+    validationState="success"
+    validationMessage={`This success message wraps to multiple lines. All lines of this message should be left aligned
         with each other, and the icon should be in its own column to the left of the message. None of the text of the
         message should be directly below the icon.`}
-    >
-      <Input />
-    </Field>
-  ))
-  .addStory('validation:none', () => (
-    <Field label="Validation none" validationState="none" validationMessage="Custom validation message">
-      <Input />
-    </Field>
-  ))
-  .addStory('validationMessageIcon', () => (
-    <Field
-      label="Custom validation icon"
-      validationMessage="Error message with custom icon"
-      validationMessageIcon={<Dismiss12Filled />}
-    >
-      <Input />
-    </Field>
-  ))
-  .addStory('hint', () => (
-    <Field
-      label="Field with Hint"
-      hint={'This hint message wraps to multiple lines. It should all be left-aligned without an extra indentation.'}
-    >
-      <Input />
-    </Field>
-  ))
-  .addStory('horizontal', () => (
-    <Field orientation="horizontal" label="Horizontal field">
-      <Input />
-    </Field>
-  ))
-  .addStory('horizontal+longLabel', () => (
-    <Field
-      orientation="horizontal"
-      label="A long label should wrap around to multiple lines without affecting the layout of the control"
-      validationState="warning"
-      validationMessage="Warning message"
-      hint="Hint text"
-    >
-      <Input />
-    </Field>
-  ))
-  .addStory('horizontal+noLabel', () => (
-    <Field
-      orientation="horizontal"
-      hint={`The gap to the left is expected. With no Field label, the control is indented to vertically align with
+  >
+    <Input />
+  </Field>
+);
+ValidationSuccess.storyName = 'validation:success';
+
+export const ValidationNone = () => (
+  <Field label="Validation none" validationState="none" validationMessage="Custom validation message">
+    <Input />
+  </Field>
+);
+ValidationNone.storyName = 'validation:none';
+
+export const ValidationMessageIcon = () => (
+  <Field
+    label="Custom validation icon"
+    validationMessage="Error message with custom icon"
+    validationMessageIcon={<Dismiss12Filled />}
+  >
+    <Input />
+  </Field>
+);
+ValidationMessageIcon.storyName = 'validationMessageIcon';
+
+export const Hint = () => (
+  <Field
+    label="Field with Hint"
+    hint={'This hint message wraps to multiple lines. It should all be left-aligned without an extra indentation.'}
+  >
+    <Input />
+  </Field>
+);
+Hint.storyName = 'hint';
+
+export const Horizontal = () => (
+  <Field orientation="horizontal" label="Horizontal field">
+    <Input />
+  </Field>
+);
+Horizontal.storyName = 'horizontal';
+
+export const HorizontalLongLabel = () => (
+  <Field
+    orientation="horizontal"
+    label="A long label should wrap around to multiple lines without affecting the layout of the control"
+    validationState="warning"
+    validationMessage="Warning message"
+    hint="Hint text"
+  >
+    <Input />
+  </Field>
+);
+HorizontalLongLabel.storyName = 'horizontal+longLabel';
+
+export const HorizontalNoLabel = () => (
+  <Field
+    orientation="horizontal"
+    hint={`The gap to the left is expected. With no Field label, the control is indented to vertically align with
         other horizontal fields.`}
-    >
-      <Checkbox label="Checkbox in a horizontal field" />
-    </Field>
-  ))
-  .addStory('Input+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Small Field" size="small" orientation="horizontal">
-        <Input placeholder="Input" />
-      </Field>
-      <Field label="Medium Field" size="medium" orientation="horizontal">
-        <Input placeholder="Input" />
-      </Field>
-      <Field label="Large Field" size="large" orientation="horizontal">
-        <Input placeholder="Input" />
-      </Field>
-    </div>
-  ))
-  .addStory('Checkbox', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Checkbox in a Field with a label">
-        <Checkbox />
-      </Field>
-      <Field validationMessage="Error message">
-        <Checkbox label="Checkbox in a Field with an error" />
-      </Field>
-    </div>
-  ))
-  .addStory('Combobox', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Combobox in a small Field" size="small">
-        <Combobox />
-      </Field>
-      <Field label="Combobox in a medium Field" size="medium">
-        <Combobox />
-      </Field>
-      <Field label="Combobox in a large Field" size="large">
-        <Combobox />
-      </Field>
-      <Field label="Combobox in a Field with an error" validationMessage="Error message">
-        <Combobox />
-      </Field>
-    </div>
-  ))
-  .addStory('Combobox+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Small Field" size="small" orientation="horizontal">
-        <Combobox placeholder="Combobox" />
-      </Field>
-      <Field label="Medium Field" size="medium" orientation="horizontal">
-        <Combobox placeholder="Combobox" />
-      </Field>
-      <Field label="Large Field" size="large" orientation="horizontal">
-        <Combobox placeholder="Combobox" />
-      </Field>
-    </div>
-  ))
-  .addStory('Dropdown', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Dropdown in a small Field" size="small">
-        <Dropdown />
-      </Field>
-      <Field label="Dropdown in a medium Field" size="medium">
-        <Dropdown />
-      </Field>
-      <Field label="Dropdown in a large Field" size="large">
-        <Dropdown />
-      </Field>
-      <Field label="Dropdown in a Field with an error" validationMessage="Error message">
-        <Dropdown />
-      </Field>
-    </div>
-  ))
-  .addStory('Dropdown+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Small Field" size="small" orientation="horizontal">
-        <Dropdown placeholder="Dropdown" />
-      </Field>
-      <Field label="Medium Field" size="medium" orientation="horizontal">
-        <Dropdown placeholder="Dropdown" />
-      </Field>
-      <Field label="Large Field" size="large" orientation="horizontal">
-        <Dropdown placeholder="Dropdown" />
-      </Field>
-    </div>
-  ))
-  .addStory('ProgressBar', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="ProgressBar in a Field with a hint" hint="Hint message">
-        <ProgressBar value={0.5} />
-      </Field>
-      <Field label="ProgressBar in a Field with success" validationMessage="Success message" validationState="success">
-        <ProgressBar value={0.5} />
-      </Field>
-      <Field
-        label="ProgressBar in a Field with a warning"
-        validationMessage="Warning message"
-        validationState="warning"
-      >
-        <ProgressBar value={0.5} />
-      </Field>
-      <Field label="ProgressBar in a Field with an error" validationMessage="Error message">
-        <ProgressBar value={0.5} />
-      </Field>
-    </div>
-  ))
-  .addStory('RadioGroup', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="RadioGroup in a Field">
-        <RadioGroup>
-          <Radio label="Option one" />
-          <Radio label="Option two" />
-          <Radio label="Option three" />
-        </RadioGroup>
-      </Field>
-      <Field label="RadioGroup in a Field with an error" validationMessage="Error message">
-        <RadioGroup>
-          <Radio label="Option one" />
-          <Radio label="Option two" />
-          <Radio label="Option three" />
-        </RadioGroup>
-      </Field>
-    </div>
-  ))
-  .addStory('RadioGroup+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Horizontal Field" orientation="horizontal">
-        <RadioGroup layout="horizontal">
-          <Radio label="Option one" />
-          <Radio label="Option two" />
-        </RadioGroup>
-      </Field>
-    </div>
-  ))
-  .addStory('Select', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Select in a small Field" size="small">
-        <Select />
-      </Field>
-      <Field label="Select in a medium Field" size="medium">
-        <Select />
-      </Field>
-      <Field label="Select in a large Field" size="large">
-        <Select />
-      </Field>
-      <Field label="Select in a Field with an error" validationMessage="Error message">
-        <Select />
-      </Field>
-    </div>
-  ))
-  .addStory('Select+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Small Field" size="small" orientation="horizontal">
-        <Select value="Select">
-          <option>Select</option>
-        </Select>
-      </Field>
-      <Field label="Medium Field" size="medium" orientation="horizontal">
-        <Select value="Select">
-          <option>Select</option>
-        </Select>
-      </Field>
-      <Field label="Large Field" size="large" orientation="horizontal">
-        <Select value="Select">
-          <option>Select</option>
-        </Select>
-      </Field>
-    </div>
-  ))
-  .addStory('Slider', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Slider in a Field">
-        <Slider />
-      </Field>
-      <Field label="Slider in a Field with an error" validationMessage="Error message">
-        <Slider />
-      </Field>
-    </div>
-  ))
-  .addStory('SpinButton', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="SpinButton in a small Field" size="small">
-        <SpinButton />
-      </Field>
-      <Field label="SpinButton in a medium Field" size="medium">
-        <SpinButton />
-      </Field>
-      <Field label="SpinButton in a large Field" size="large">
-        <SpinButton />
-      </Field>
-      <Field label="SpinButton in a Field with an error" validationMessage="Error message">
-        <SpinButton />
-      </Field>
-    </div>
-  ))
-  .addStory('SpinButton+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Horizontal Field" size="medium" orientation="horizontal">
-        <SpinButton />
-      </Field>
-    </div>
-  ))
-  .addStory('Switch', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Switch in a Field">
-        <Switch />
-      </Field>
-      <Field label="Switch in a Field with an error" validationMessage="Error message">
-        <Switch />
-      </Field>
-    </div>
-  ))
-  .addStory('Textarea', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Textarea in a small Field" size="small">
-        <Textarea />
-      </Field>
-      <Field label="Textarea in a medium Field" size="medium">
-        <Textarea />
-      </Field>
-      <Field label="Textarea in a large Field" size="large">
-        <Textarea />
-      </Field>
-      <Field label="Textarea in a Field with an error" validationMessage="Error message">
-        <Textarea />
-      </Field>
-    </div>
-  ))
-  .addStory('Textarea+horizontal', () => (
-    <div style={{ display: 'grid', gap: '10px' }}>
-      <Field label="Small Field" size="small" orientation="horizontal">
-        <Textarea placeholder="Textarea" />
-      </Field>
-      <Field label="Medium Field" size="medium" orientation="horizontal">
-        <Textarea placeholder="Textarea" />
-      </Field>
-      <Field label="Large Field" size="large" orientation="horizontal">
-        <Textarea placeholder="Textarea" />
-      </Field>
-    </div>
-  ));
+  >
+    <Checkbox label="Checkbox in a horizontal field" />
+  </Field>
+);
+HorizontalNoLabel.storyName = 'horizontal+noLabel';
+
+export const InputHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Small Field" size="small" orientation="horizontal">
+      <Input placeholder="Input" />
+    </Field>
+    <Field label="Medium Field" size="medium" orientation="horizontal">
+      <Input placeholder="Input" />
+    </Field>
+    <Field label="Large Field" size="large" orientation="horizontal">
+      <Input placeholder="Input" />
+    </Field>
+  </div>
+);
+InputHorizontal.storyName = 'Input+horizontal';
+
+export const WithCheckbox = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Checkbox in a Field with a label">
+      <Checkbox />
+    </Field>
+    <Field validationMessage="Error message">
+      <Checkbox label="Checkbox in a Field with an error" />
+    </Field>
+  </div>
+);
+WithCheckbox.storyName = 'Checkbox';
+
+export const WithCombobox = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Combobox in a small Field" size="small">
+      <Combobox />
+    </Field>
+    <Field label="Combobox in a medium Field" size="medium">
+      <Combobox />
+    </Field>
+    <Field label="Combobox in a large Field" size="large">
+      <Combobox />
+    </Field>
+    <Field label="Combobox in a Field with an error" validationMessage="Error message">
+      <Combobox />
+    </Field>
+  </div>
+);
+WithCombobox.storyName = 'Combobox';
+
+export const ComboboxHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Small Field" size="small" orientation="horizontal">
+      <Combobox placeholder="Combobox" />
+    </Field>
+    <Field label="Medium Field" size="medium" orientation="horizontal">
+      <Combobox placeholder="Combobox" />
+    </Field>
+    <Field label="Large Field" size="large" orientation="horizontal">
+      <Combobox placeholder="Combobox" />
+    </Field>
+  </div>
+);
+ComboboxHorizontal.storyName = 'Combobox+horizontal';
+
+export const WithDropdown = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Dropdown in a small Field" size="small">
+      <Dropdown />
+    </Field>
+    <Field label="Dropdown in a medium Field" size="medium">
+      <Dropdown />
+    </Field>
+    <Field label="Dropdown in a large Field" size="large">
+      <Dropdown />
+    </Field>
+    <Field label="Dropdown in a Field with an error" validationMessage="Error message">
+      <Dropdown />
+    </Field>
+  </div>
+);
+WithDropdown.storyName = 'Dropdown';
+
+export const DropdownHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Small Field" size="small" orientation="horizontal">
+      <Dropdown placeholder="Dropdown" />
+    </Field>
+    <Field label="Medium Field" size="medium" orientation="horizontal">
+      <Dropdown placeholder="Dropdown" />
+    </Field>
+    <Field label="Large Field" size="large" orientation="horizontal">
+      <Dropdown placeholder="Dropdown" />
+    </Field>
+  </div>
+);
+DropdownHorizontal.storyName = 'Dropdown+horizontal';
+
+export const WithProgressBar = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="ProgressBar in a Field with a hint" hint="Hint message">
+      <ProgressBar value={0.5} />
+    </Field>
+    <Field label="ProgressBar in a Field with success" validationMessage="Success message" validationState="success">
+      <ProgressBar value={0.5} />
+    </Field>
+    <Field label="ProgressBar in a Field with a warning" validationMessage="Warning message" validationState="warning">
+      <ProgressBar value={0.5} />
+    </Field>
+    <Field label="ProgressBar in a Field with an error" validationMessage="Error message">
+      <ProgressBar value={0.5} />
+    </Field>
+  </div>
+);
+WithProgressBar.storyName = 'ProgressBar';
+
+export const WithRadioGroup = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="RadioGroup in a Field">
+      <RadioGroup>
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+        <Radio label="Option three" />
+      </RadioGroup>
+    </Field>
+    <Field label="RadioGroup in a Field with an error" validationMessage="Error message">
+      <RadioGroup>
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+        <Radio label="Option three" />
+      </RadioGroup>
+    </Field>
+  </div>
+);
+WithRadioGroup.storyName = 'RadioGroup';
+
+export const RadioGroupHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Horizontal Field" orientation="horizontal">
+      <RadioGroup layout="horizontal">
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+      </RadioGroup>
+    </Field>
+  </div>
+);
+RadioGroupHorizontal.storyName = 'RadioGroup+horizontal';
+
+export const WithSelect = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Select in a small Field" size="small">
+      <Select />
+    </Field>
+    <Field label="Select in a medium Field" size="medium">
+      <Select />
+    </Field>
+    <Field label="Select in a large Field" size="large">
+      <Select />
+    </Field>
+    <Field label="Select in a Field with an error" validationMessage="Error message">
+      <Select />
+    </Field>
+  </div>
+);
+WithSelect.storyName = 'Select';
+
+export const SelectHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Small Field" size="small" orientation="horizontal">
+      <Select value="Select">
+        <option>Select</option>
+      </Select>
+    </Field>
+    <Field label="Medium Field" size="medium" orientation="horizontal">
+      <Select value="Select">
+        <option>Select</option>
+      </Select>
+    </Field>
+    <Field label="Large Field" size="large" orientation="horizontal">
+      <Select value="Select">
+        <option>Select</option>
+      </Select>
+    </Field>
+  </div>
+);
+SelectHorizontal.storyName = 'Select+horizontal';
+
+export const WithSlider = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Slider in a Field">
+      <Slider />
+    </Field>
+    <Field label="Slider in a Field with an error" validationMessage="Error message">
+      <Slider />
+    </Field>
+  </div>
+);
+WithSlider.storyName = 'Slider';
+
+export const WithSpinButton = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="SpinButton in a small Field" size="small">
+      <SpinButton />
+    </Field>
+    <Field label="SpinButton in a medium Field" size="medium">
+      <SpinButton />
+    </Field>
+    <Field label="SpinButton in a large Field" size="large">
+      <SpinButton />
+    </Field>
+    <Field label="SpinButton in a Field with an error" validationMessage="Error message">
+      <SpinButton />
+    </Field>
+  </div>
+);
+WithSpinButton.storyName = 'SpinButton';
+
+export const SpinButtonHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Horizontal Field" size="medium" orientation="horizontal">
+      <SpinButton />
+    </Field>
+  </div>
+);
+SpinButtonHorizontal.storyName = 'SpinButton+horizontal';
+
+export const WithSwitch = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Switch in a Field">
+      <Switch />
+    </Field>
+    <Field label="Switch in a Field with an error" validationMessage="Error message">
+      <Switch />
+    </Field>
+  </div>
+);
+WithSwitch.storyName = 'Switch';
+
+export const WithTextarea = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Textarea in a small Field" size="small">
+      <Textarea />
+    </Field>
+    <Field label="Textarea in a medium Field" size="medium">
+      <Textarea />
+    </Field>
+    <Field label="Textarea in a large Field" size="large">
+      <Textarea />
+    </Field>
+    <Field label="Textarea in a Field with an error" validationMessage="Error message">
+      <Textarea />
+    </Field>
+  </div>
+);
+WithTextarea.storyName = 'Textarea';
+
+export const TextareaHorizontal = () => (
+  <div style={{ display: 'grid', gap: '10px' }}>
+    <Field label="Small Field" size="small" orientation="horizontal">
+      <Textarea placeholder="Textarea" />
+    </Field>
+    <Field label="Medium Field" size="medium" orientation="horizontal">
+      <Textarea placeholder="Textarea" />
+    </Field>
+    <Field label="Large Field" size="large" orientation="horizontal">
+      <Textarea placeholder="Textarea" />
+    </Field>
+  </div>
+);
+TextareaHorizontal.storyName = 'Textarea+horizontal';
diff --git a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
index e8f0e9953a255..ea795f5994ba8 100644
--- a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Image } from '@fluentui/react-image';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 const imageUrl = 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg';
 
@@ -13,7 +13,7 @@ export default {
       <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Image>;
+} satisfies Meta<typeof Image>;
 
 export const Default = () => (
   <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/300x300.png" alt="Placeholder image" />
diff --git a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
index 17cb7e5a9b526..0658dcf9257cd 100644
--- a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx
@@ -1,60 +1,80 @@
 import * as React from 'react';
-
-import { Steps, StoryWright } from 'storywright';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { InfoLabel } from '@fluentui/react-infolabel';
-import { storiesOf } from '@storybook/react';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('InfoLabel', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('default', () => <InfoLabel info="Test">This is an info label</InfoLabel>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-    includeRtl: true,
-  })
-  .addStory('wrap', () => (
-    <InfoLabel info="Test">
-      This is a very long info label that should wrap to multiple lines and put the info button on the last line
-    </InfoLabel>
-  ))
-  .addStory('size:small', () => (
-    <InfoLabel size="small" info="Test">
-      This is a small info label
-    </InfoLabel>
-  ))
-  .addStory('size:large', () => (
-    <InfoLabel size="large" info="Test">
-      This is a large info label
-    </InfoLabel>
-  ))
-  .addStory(
-    'required',
-    () => (
-      <InfoLabel required info="Test">
-        This is a required info label
-      </InfoLabel>
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory('sizes -- open', () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        paddingTop: '60px',
-        paddingLeft: '10px',
-        paddingBottom: '10px',
-        gap: '80px',
-        alignItems: 'start',
-      }}
-    >
-      <InfoLabel size="small" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
-      <InfoLabel size="medium" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
-      <InfoLabel size="large" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
-    </div>
-  ));
+
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  RTL,
+  TestWrapperDecoratorFixedWidth,
+  withStoryWrightSteps,
+} from '../utilities';
+
+export default {
+  title: 'InfoLabel',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof InfoLabel>;
+
+export const Default = () => <InfoLabel info="Test">This is an info label</InfoLabel>;
+Default.storyName = 'default';
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Wrap = () => (
+  <InfoLabel info="Test">
+    This is a very long info label that should wrap to multiple lines and put the info button on the last line
+  </InfoLabel>
+);
+Wrap.storyName = 'wrap';
+
+export const SizeSmall = () => (
+  <InfoLabel size="small" info="Test">
+    This is a small info label
+  </InfoLabel>
+);
+SizeSmall.storyName = 'size:small';
+
+export const SizeLarge = () => (
+  <InfoLabel size="large" info="Test">
+    This is a large info label
+  </InfoLabel>
+);
+SizeLarge.storyName = 'size:large';
+
+export const Required = () => (
+  <InfoLabel required info="Test">
+    This is a required info label
+  </InfoLabel>
+);
+Required.storyName = 'required';
+
+export const RequiredRTL = getStoryVariant(Required, RTL);
+
+export const SizesOpen = () => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      paddingTop: '60px',
+      paddingLeft: '10px',
+      paddingBottom: '10px',
+      gap: '80px',
+      alignItems: 'start',
+    }}
+  >
+    <InfoLabel size="small" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+    <InfoLabel size="medium" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+    <InfoLabel size="large" info="This is the content of an InfoButton." infoButton={{ popover: { open: true } }} />
+  </div>
+);
+SizesOpen.storyName = 'sizes -- open';
diff --git a/apps/vr-tests-react-components/src/stories/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input.stories.tsx
deleted file mode 100644
index 66dba5b304ccc..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Input.stories.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Input } from '@fluentui/react-input';
-import { SearchRegular, DismissRegular } from '@fluentui/react-icons';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { FluentProvider } from '@fluentui/react-provider';
-
-storiesOf('Input Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .click('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => <Input placeholder="Placeholder" />)
-  .addStory('Appearance: underline', () => <Input appearance="underline" placeholder="Placeholder" />)
-  .addStory('Appearance: filled-darker', () => <Input appearance="filled-darker" placeholder="Placeholder" />)
-  .addStory('Appearance: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Input appearance="filled-lighter" placeholder="Placeholder" />
-    </div>
-  ))
-  .addStory('Invalid, appearance: outline', () => <Input aria-invalid placeholder="Placeholder" />)
-  .addStory('Invalid, appearance: underline', () => (
-    <Input aria-invalid appearance="underline" placeholder="Placeholder" />
-  ))
-  .addStory('Invalid, appearance: filled-darker', () => (
-    <Input aria-invalid appearance="filled-darker" placeholder="Placeholder" />
-  ))
-  .addStory('Invalid, appearance: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Input aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
-    </div>
-  ))
-  .addStory('Disabled, appearance: outline', () => <Input disabled value="Disabled" />)
-  .addStory('Disabled, appearance: underline', () => <Input disabled appearance="underline" value="Disabled" />)
-  .addStory('Disabled, appearance: filled-darker', () => <Input disabled appearance="filled-darker" value="Disabled" />)
-  .addStory('Disabled, appearance: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Input disabled appearance="filled-lighter" value="Disabled" />
-    </div>
-  ))
-  .addStory('With value', () => <Input defaultValue="Value!" />);
-
-// Non-interactive stories
-storiesOf('Input Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  // note: due to reused "Input Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Size: small', () => <Input size="small" placeholder="Placeholder" />)
-  .addStory('Size: large', () => <Input size="large" placeholder="Placeholder" />)
-  .addStory('Inline', () => (
-    <p>
-      Some text with <Input placeholder="hello" style={{ width: '75px' }} /> inline input
-    </p>
-  ))
-  .addStory(
-    'contentBefore',
-    () => <Input contentBefore={<SearchRegular style={{ fontSize: '20px' }} />} placeholder="Placeholder" />,
-    { includeRtl: true },
-  )
-  .addStory(
-    'contentAfter',
-    () => <Input contentAfter={<DismissRegular style={{ fontSize: '20px' }} />} placeholder="Placeholder" />,
-    { includeRtl: true },
-  )
-  .addStory('With appearance override', () => (
-    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <Input placeholder="Default overriden appearance" />
-        <Input appearance="outline" placeholder="Outline appearance" />
-      </div>
-    </FluentProvider>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx
new file mode 100644
index 0000000000000..f655de82f480b
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Input } from '@fluentui/react-input';
+import { SearchRegular, DismissRegular } from '@fluentui/react-icons';
+import { FluentProvider } from '@fluentui/react-provider';
+
+import { getStoryVariant, withStoryWrightSteps, TestWrapperDecoratorFixedWidth, RTL } from '../../utilities';
+
+export default {
+  title: 'Input Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Input>;
+
+export const SizeSmall = () => <Input size="small" placeholder="Placeholder" />;
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge = () => <Input size="large" placeholder="Placeholder" />;
+SizeLarge.storyName = 'Size: large';
+
+export const Inline = () => (
+  <p>
+    Some text with <Input placeholder="hello" style={{ width: '75px' }} /> inline input
+  </p>
+);
+
+export const ContentBefore = () => (
+  <Input contentBefore={<SearchRegular style={{ fontSize: '20px' }} />} placeholder="Placeholder" />
+);
+ContentBefore.storyName = 'contentBefore';
+
+export const ContentBeforeRTL = getStoryVariant(ContentBefore, RTL);
+
+export const ContentAfter = () => (
+  <Input contentAfter={<DismissRegular style={{ fontSize: '20px' }} />} placeholder="Placeholder" />
+);
+ContentAfter.storyName = 'contentAfter';
+
+export const ContentAfterRTL = getStoryVariant(ContentAfter, RTL);
+
+export const WithAppearanceOverride = () => (
+  <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <Input placeholder="Default overriden appearance" />
+      <Input appearance="outline" placeholder="Outline appearance" />
+    </div>
+  </FluentProvider>
+);
+WithAppearanceOverride.storyName = 'With appearance override';
diff --git a/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx
new file mode 100644
index 0000000000000..9c77857ee58ed
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Input } from '@fluentui/react-input';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Input Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .click('input')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Input>;
+
+export const AppearanceOutlineDefault = () => <Input placeholder="Placeholder" />;
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline = () => <Input appearance="underline" placeholder="Placeholder" />;
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker = () => <Input appearance="filled-darker" placeholder="Placeholder" />;
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <Input appearance="filled-lighter" placeholder="Placeholder" />
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const InvalidAppearanceOutline = () => <Input aria-invalid placeholder="Placeholder" />;
+InvalidAppearanceOutline.storyName = 'Invalid, appearance: outline';
+
+export const InvalidAppearanceUnderline = () => <Input aria-invalid appearance="underline" placeholder="Placeholder" />;
+InvalidAppearanceUnderline.storyName = 'Invalid, appearance: underline';
+
+export const InvalidAppearanceFilledDarker = () => (
+  <Input aria-invalid appearance="filled-darker" placeholder="Placeholder" />
+);
+InvalidAppearanceFilledDarker.storyName = 'Invalid, appearance: filled-darker';
+
+export const InvalidAppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <Input aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
+  </div>
+);
+InvalidAppearanceFilledLighter.storyName = 'Invalid, appearance: filled-lighter';
+
+export const DisabledAppearanceOutline = () => <Input disabled value="Disabled" />;
+DisabledAppearanceOutline.storyName = 'Disabled, appearance: outline';
+
+export const DisabledAppearanceUnderline = () => <Input disabled appearance="underline" value="Disabled" />;
+DisabledAppearanceUnderline.storyName = 'Disabled, appearance: underline';
+
+export const DisabledAppearanceFilledDarker = () => <Input disabled appearance="filled-darker" value="Disabled" />;
+DisabledAppearanceFilledDarker.storyName = 'Disabled, appearance: filled-darker';
+
+export const DisabledAppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <Input disabled appearance="filled-lighter" value="Disabled" />
+  </div>
+);
+DisabledAppearanceFilledLighter.storyName = 'Disabled, appearance: filled-lighter';
+
+export const WithValue = () => <Input defaultValue="Value!" />;
+WithValue.storyName = 'With value';
diff --git a/apps/vr-tests-react-components/src/stories/Label.stories.tsx b/apps/vr-tests-react-components/src/stories/Label.stories.tsx
index e7be90a5e6ba5..08919a31d4367 100644
--- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Label.stories.tsx
@@ -1,44 +1,52 @@
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { Label } from '@fluentui/react-label';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities';
 
-storiesOf('Label Converged', module)
-  .addDecorator(story =>
-    // prettier-ignore
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>,
-  )
-  .addStory('Root', () => <Label>I'm a label</Label>, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Disabled', () => <Label disabled>I'm a disabled label</Label>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Required', () => <Label required>I'm a required label</Label>, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Semibold', () => <Label weight="semibold">I'm a semibold label</Label>)
-  .addStory('Small', () => <Label size="small">I'm a small label</Label>)
-  .addStory('Large', () => <Label size="large">I'm a large label</Label>)
-  .addStory('CustomRequired', () => <Label required="**">I'm a label with custom required text</Label>, {
-    includeRtl: true,
-  })
-  .addStory(
-    'Multiline',
-    () => (
-      <div style={{ width: '200px' }}>
-        <Label required>Super long label to show overflow into multiple lines</Label>
-      </div>
-    ),
-    { includeRtl: true },
-  );
+export default {
+  title: 'Label Converged',
+
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Label>;
+
+export const Root = () => <Label>I'm a label</Label>;
+
+export const RootRTL = getStoryVariant(Root, RTL);
+
+export const RootHighContrast = getStoryVariant(Root, HIGH_CONTRAST);
+
+export const RootDarkMode = getStoryVariant(Root, DARK_MODE);
+
+export const Disabled = () => <Label disabled>I'm a disabled label</Label>;
+
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const Required = () => <Label required>I'm a required label</Label>;
+
+export const RequiredHighContrast = getStoryVariant(Required, HIGH_CONTRAST);
+
+export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE);
+
+export const Semibold = () => <Label weight="semibold">I'm a semibold label</Label>;
+
+export const Small = () => <Label size="small">I'm a small label</Label>;
+
+export const Large = () => <Label size="large">I'm a large label</Label>;
+
+export const CustomRequired = () => <Label required="**">I'm a label with custom required text</Label>;
+CustomRequired.storyName = 'CustomRequired';
+
+export const CustomRequiredRTL = getStoryVariant(CustomRequired, RTL);
+
+export const Multiline = () => (
+  <div style={{ width: '200px' }}>
+    <Label required>Super long label to show overflow into multiple lines</Label>
+  </div>
+);
+
+export const MultilineRTL = getStoryVariant(Multiline, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Link.stories.tsx b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
deleted file mode 100644
index ab14aceca9756..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Link.stories.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Link, LinkProps } from '@fluentui/react-link';
-import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
-import { makeStyles, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-
-const AnchorLink = (props: LinkProps & { as?: 'a' }) => <Link {...props} href="https://www.bing.com" />;
-const ButtonLink = (props: LinkProps) => <Link {...props} />;
-const SpanLink = (props: LinkProps & { as?: 'span' }) => <Link as="span" {...props} />;
-
-const useInvertedBackgroundStyles = makeStyles({
-  root: {
-    ...shorthands.padding('14px'),
-    backgroundColor: tokens.colorNeutralBackgroundInverted,
-  },
-});
-
-const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const styles = useInvertedBackgroundStyles();
-  return (
-    <div className={styles.root}>
-      <BackgroundAppearanceProvider value="inverted">{children}</BackgroundAppearanceProvider>
-    </div>
-  );
-};
-
-storiesOf('Link Converged - Rendered as anchor', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        // This needs to be added so that the focus outline is shown correctly
-        .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
-        .focus('.fui-Link')
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone', () => <AnchorLink>Stand-alone link</AnchorLink>, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory(
-    'Stand-alone Disabled Focusable',
-    () => (
-      <AnchorLink disabled disabledFocusable>
-        Stand-alone disabled focusable link
-      </AnchorLink>
-    ),
-    { includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory(
-    'Inline',
-    () => (
-      <div>
-        This is <AnchorLink inline>a link</AnchorLink> used alongside other text content.
-      </div>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Inline Disabled Focusable', () => (
-    <div>
-      This is{' '}
-      <AnchorLink inline disabled disabledFocusable>
-        a disabled focusable link
-      </AnchorLink>{' '}
-      used alongside other text content.
-    </div>
-  ))
-  .addStory(
-    'Inverted',
-    () => (
-      <InvertedBackground>
-        <AnchorLink>Link on inverted background</AnchorLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory(
-    'Inverted disabled',
-    () => (
-      <InvertedBackground>
-        <AnchorLink disabled disabledFocusable>
-          Disabled link on inverted background
-        </AnchorLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  );
-
-// We put the disabled stories separately so they do not error on the focused step.
-storiesOf('Link Converged - Rendered as anchor', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone Disabled', () => <AnchorLink disabled>Stand-alone disabled link</AnchorLink>)
-  .addStory('Inline Disabled', () => (
-    <div>
-      This is{' '}
-      <AnchorLink inline disabled>
-        a disabled link
-      </AnchorLink>{' '}
-      used alongside other text content.
-    </div>
-  ));
-
-storiesOf('Link Converged - Rendered as button', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        // This needs to be added so that the focus outline is shown correctly
-        .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
-        .focus('.fui-Link')
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone', () => <ButtonLink>Stand-alone link</ButtonLink>, { includeRtl: true })
-  .addStory('Stand-alone Disabled Focusable', () => (
-    <ButtonLink disabled disabledFocusable>
-      Stand-alone disabled focusable link
-    </ButtonLink>
-  ))
-  .addStory(
-    'Inline',
-    () => (
-      <div>
-        This is <ButtonLink inline>a link</ButtonLink> used alongside other text content.
-      </div>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Inline Disabled Focusable', () => (
-    <div>
-      This is{' '}
-      <ButtonLink inline disabled disabledFocusable>
-        a disabled focusable link
-      </ButtonLink>{' '}
-      used alongside other text content.
-    </div>
-  ))
-  .addStory(
-    'Inverted',
-    () => (
-      <InvertedBackground>
-        <ButtonLink>Link on inverted background</ButtonLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory(
-    'Inverted disabled',
-    () => (
-      <InvertedBackground>
-        <AnchorLink disabled disabledFocusable>
-          Disabled link on inverted background
-        </AnchorLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  );
-
-// We put the disabled stories separately so they do not error on the focused step.
-storiesOf('Link Converged - Rendered as button', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone Disabled', () => <ButtonLink disabled>Stand-alone disabled link</ButtonLink>)
-  .addStory('Inline Disabled', () => (
-    <div>
-      This is{' '}
-      <ButtonLink inline disabled>
-        a disabled link
-      </ButtonLink>{' '}
-      used alongside other text content.
-    </div>
-  ));
-
-storiesOf('Link Converged - Rendered as span', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        // This needs to be added so that the focus outline is shown correctly
-        .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
-        .focus('.fui-Link')
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone', () => <SpanLink>Stand-alone link</SpanLink>, { includeRtl: true })
-  .addStory('Stand-alone Disabled Focusable', () => (
-    <SpanLink disabled disabledFocusable>
-      Stand-alone disabled focusable link
-    </SpanLink>
-  ))
-  .addStory(
-    'Inline',
-    () => (
-      <div>
-        This is <SpanLink inline>a link</SpanLink> used alongside other text content.
-      </div>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Inline Disabled Focusable', () => (
-    <div>
-      This is{' '}
-      <SpanLink inline disabled disabledFocusable>
-        a disabled focusable link
-      </SpanLink>{' '}
-      used alongside other text content.
-    </div>
-  ))
-  .addStory(
-    'Inverted',
-    () => (
-      <InvertedBackground>
-        <SpanLink>Link on inverted background</SpanLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory(
-    'Inverted disabled',
-    () => (
-      <InvertedBackground>
-        <SpanLink disabled disabledFocusable>
-          Disabled link on inverted background
-        </SpanLink>
-      </InvertedBackground>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory('Wraps correctly as an inline element', () => (
-    <div style={{ width: '100px' }}>
-      This <SpanLink inline>link wraps correctly between different lines, behaving as an inline element</SpanLink> as
-      expected.
-    </div>
-  ));
-
-// We put the disabled stories separately so they do not error on the focused step.
-storiesOf('Link Converged - Rendered as button', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.fui-Link')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.fui-Link')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.fui-Link')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Stand-alone Disabled', () => <SpanLink disabled>Stand-alone disabled link</SpanLink>)
-  .addStory('Inline Disabled', () => (
-    <div>
-      This is{' '}
-      <SpanLink inline disabled>
-        a disabled link
-      </SpanLink>{' '}
-      used alongside other text content.
-    </div>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx
new file mode 100644
index 0000000000000..089ccc239d259
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Link, LinkProps } from '@fluentui/react-link';
+
+import { InvertedBackground, steps } from './utils';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+const AnchorLink = (props: LinkProps & { as?: 'a' }) => <Link as="a" {...props} href="https://www.bing.com" />;
+
+export default {
+  title: 'Link Converged - Rendered as anchor',
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} satisfies Meta<typeof Link>;
+
+export const StandAlone = () => <AnchorLink>Stand-alone link</AnchorLink>;
+StandAlone.storyName = 'Stand-alone';
+
+export const StandAloneRTL = getStoryVariant(StandAlone, RTL);
+
+export const StandAloneHighContrast = getStoryVariant(StandAlone, HIGH_CONTRAST);
+
+export const StandAloneDarkMode = getStoryVariant(StandAlone, DARK_MODE);
+
+export const StandAloneDisabledFocusable = () => (
+  <AnchorLink disabled disabledFocusable>
+    Stand-alone disabled focusable link
+  </AnchorLink>
+);
+StandAloneDisabledFocusable.storyName = 'Stand-alone Disabled Focusable';
+
+export const StandAloneDisabledFocusableHighContrast = getStoryVariant(StandAloneDisabledFocusable, HIGH_CONTRAST);
+
+export const StandAloneDisabledFocusableDarkMode = getStoryVariant(StandAloneDisabledFocusable, DARK_MODE);
+
+export const Inline = () => (
+  <div>
+    This is <AnchorLink inline>a link</AnchorLink> used alongside other text content.
+  </div>
+);
+
+export const InlineRTL = getStoryVariant(Inline, RTL);
+
+export const InlineDisabledFocusable = () => (
+  <div>
+    This is{' '}
+    <AnchorLink inline disabled disabledFocusable>
+      a disabled focusable link
+    </AnchorLink>{' '}
+    used alongside other text content.
+  </div>
+);
+
+export const Inverted = () => (
+  <InvertedBackground>
+    <AnchorLink>Link on inverted background</AnchorLink>
+  </InvertedBackground>
+);
+
+export const InvertedHighContrast = getStoryVariant(Inverted, HIGH_CONTRAST);
+
+export const InvertedDarkMode = getStoryVariant(Inverted, DARK_MODE);
+
+export const InvertedDisabled = () => (
+  <InvertedBackground>
+    <AnchorLink disabled disabledFocusable>
+      Disabled link on inverted background
+    </AnchorLink>
+  </InvertedBackground>
+);
+InvertedDisabled.storyName = 'Inverted disabled';
+
+export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST);
+
+export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx
new file mode 100644
index 0000000000000..5c29701cd24ff
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Link, LinkProps } from '@fluentui/react-link';
+
+import { withStoryWrightSteps } from '../../utilities';
+import { disabledUnfocusableSteps } from './utils';
+
+const AnchorLink = (props: LinkProps & { as?: 'a' }) => <Link as="a" {...props} href="https://www.bing.com" />;
+
+export default {
+  title: 'Link Converged - Rendered as anchor',
+  decorators: [story => withStoryWrightSteps({ story, steps: disabledUnfocusableSteps })],
+} satisfies Meta<typeof Link>;
+
+export const StandAloneDisabled = () => <AnchorLink disabled>Stand-alone disabled link</AnchorLink>;
+StandAloneDisabled.storyName = 'Stand-alone Disabled';
+
+export const InlineDisabled = () => (
+  <div>
+    This is{' '}
+    <AnchorLink inline disabled>
+      a disabled link
+    </AnchorLink>{' '}
+    used alongside other text content.
+  </div>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx
new file mode 100644
index 0000000000000..2d995c5982dbb
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { Link, LinkProps } from '@fluentui/react-link';
+
+import { InvertedBackground, steps } from './utils';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+const ButtonLink = (props: LinkProps) => <Link {...props} />;
+
+export default {
+  title: 'Link Converged - Rendered as button',
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} satisfies Meta<typeof Link>;
+
+export const StandAlone = () => <ButtonLink>Stand-alone link</ButtonLink>;
+StandAlone.storyName = 'Stand-alone';
+
+export const StandAloneRTL = getStoryVariant(StandAlone, RTL);
+
+export const StandAloneDisabledFocusable = () => (
+  <ButtonLink disabled disabledFocusable>
+    Stand-alone disabled focusable link
+  </ButtonLink>
+);
+StandAloneDisabledFocusable.storyName = 'Stand-alone Disabled Focusable';
+
+export const Inline = () => (
+  <div>
+    This is <ButtonLink inline>a link</ButtonLink> used alongside other text content.
+  </div>
+);
+
+export const InlineRTL = getStoryVariant(Inline, RTL);
+
+export const InlineDisabledFocusable = () => (
+  <div>
+    This is{' '}
+    <ButtonLink inline disabled disabledFocusable>
+      a disabled focusable link
+    </ButtonLink>{' '}
+    used alongside other text content.
+  </div>
+);
+
+export const Inverted = () => (
+  <InvertedBackground>
+    <ButtonLink>Link on inverted background</ButtonLink>
+  </InvertedBackground>
+);
+
+export const InvertedHighContrast = getStoryVariant(Inverted, HIGH_CONTRAST);
+
+export const InvertedDarkMode = getStoryVariant(Inverted, DARK_MODE);
+
+export const InvertedDisabled = () => (
+  <InvertedBackground>
+    <ButtonLink disabled disabledFocusable>
+      Disabled link on inverted background
+    </ButtonLink>
+  </InvertedBackground>
+);
+InvertedDisabled.storyName = 'Inverted disabled';
+
+export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST);
+
+export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx
new file mode 100644
index 0000000000000..d17aac128b9d8
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { Link, LinkProps } from '@fluentui/react-link';
+
+import { disabledUnfocusableSteps } from './utils';
+import { withStoryWrightSteps } from '../../utilities';
+
+const ButtonLink = (props: LinkProps) => <Link {...props} />;
+
+export default {
+  title: 'Link Converged - Rendered as button',
+  decorators: [story => withStoryWrightSteps({ story, steps: disabledUnfocusableSteps })],
+} satisfies Meta<typeof Link>;
+
+export const StandAloneDisabled = () => <ButtonLink disabled>Stand-alone disabled link</ButtonLink>;
+StandAloneDisabled.storyName = 'Stand-alone Disabled';
+
+export const InlineDisabled = () => (
+  <div>
+    This is{' '}
+    <ButtonLink inline disabled>
+      a disabled link
+    </ButtonLink>{' '}
+    used alongside other text content.
+  </div>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx
new file mode 100644
index 0000000000000..efd447d800d4c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Link, LinkProps } from '@fluentui/react-link';
+
+import { InvertedBackground, steps } from './utils';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+const SpanLink = (props: LinkProps & { as?: 'span' }) => <Link as="span" {...props} />;
+
+export default {
+  title: 'Link Converged - Rendered as span',
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} satisfies Meta<typeof Link>;
+
+export const StandAlone = () => <SpanLink>Stand-alone link</SpanLink>;
+StandAlone.storyName = 'Stand-alone';
+
+export const StandAloneRTL = getStoryVariant(StandAlone, RTL);
+
+export const StandAloneDisabledFocusable = () => (
+  <SpanLink disabled disabledFocusable>
+    Stand-alone disabled focusable link
+  </SpanLink>
+);
+StandAloneDisabledFocusable.storyName = 'Stand-alone Disabled Focusable';
+
+export const Inline = () => (
+  <div>
+    This is <SpanLink inline>a link</SpanLink> used alongside other text content.
+  </div>
+);
+
+export const InlineRTL = getStoryVariant(Inline, RTL);
+
+export const InlineDisabledFocusable = () => (
+  <div>
+    This is{' '}
+    <SpanLink inline disabled disabledFocusable>
+      a disabled focusable link
+    </SpanLink>{' '}
+    used alongside other text content.
+  </div>
+);
+
+export const Inverted = () => (
+  <InvertedBackground>
+    <SpanLink>Link on inverted background</SpanLink>
+  </InvertedBackground>
+);
+
+export const InvertedHighContrast = getStoryVariant(Inverted, HIGH_CONTRAST);
+
+export const InvertedDarkMode = getStoryVariant(Inverted, DARK_MODE);
+
+export const InvertedDisabled = () => (
+  <InvertedBackground>
+    <SpanLink disabled disabledFocusable>
+      Disabled link on inverted background
+    </SpanLink>
+  </InvertedBackground>
+);
+InvertedDisabled.storyName = 'Inverted disabled';
+
+export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST);
+
+export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE);
+
+export const WrapsCorrectlyAsAnInlineElement = () => (
+  <div style={{ width: '100px' }}>
+    This <SpanLink inline>link wraps correctly between different lines, behaving as an inline element</SpanLink> as
+    expected.
+  </div>
+);
+WrapsCorrectlyAsAnInlineElement.storyName = 'Wraps correctly as an inline element';
diff --git a/apps/vr-tests-react-components/src/stories/Link/utils.tsx b/apps/vr-tests-react-components/src/stories/Link/utils.tsx
new file mode 100644
index 0000000000000..9ad2a30f1ac7a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Link/utils.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
+import { makeStyles, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { Steps } from 'storywright';
+
+const useInvertedBackgroundStyles = makeStyles({
+  root: {
+    ...shorthands.padding('14px'),
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+  },
+});
+
+export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useInvertedBackgroundStyles();
+  return (
+    <div className={styles.root}>
+      <BackgroundAppearanceProvider value="inverted">{children}</BackgroundAppearanceProvider>
+    </div>
+  );
+};
+
+export const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover('.fui-Link')
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
+  .focus('.fui-Link')
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
+  .mouseDown('.fui-Link')
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .mouseUp('.fui-Link')
+  .end();
+
+// Disabled stories use steps without focus so they do not error out on the focused step.
+export const disabledUnfocusableSteps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover('.fui-Link')
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown('.fui-Link')
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .mouseUp('.fui-Link')
+  .end();
diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
deleted file mode 100644
index ccbd6d5f9cd57..0000000000000
--- a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
-import { FluentProvider } from '@fluentui/react-provider';
-import { tokens, webLightTheme } from '@fluentui/react-theme';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-
-const useStyles = makeStyles({
-  box: {
-    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
-    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
-
-    backgroundColor: tokens.colorNeutralBackground1,
-    color: tokens.colorNeutralForeground1,
-
-    ...shorthands.margin('5px'),
-    ...shorthands.padding('5px'),
-    paddingLeft: '50px',
-  },
-
-  container: {
-    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
-    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
-
-    ...shorthands.margin('5px'),
-    ...shorthands.padding('5px'),
-  },
-  containerPrimary: {
-    borderLeftColor: tokens.colorPaletteDarkOrangeBorder2,
-  },
-
-  provider: {
-    marginLeft: '20px',
-  },
-});
-
-const useFocusStylesA = makeStyles({
-  root: {
-    ...shorthands.border('3px', 'solid', 'blue'),
-    ...shorthands.padding('10px'),
-
-    ':focus': {
-      color: 'red',
-    },
-    ':hover': {
-      color: 'blue',
-    },
-  },
-});
-const useFocusStylesB = makeStyles({
-  root: {
-    ...shorthands.border('3px', 'solid', 'orange'),
-    ...shorthands.padding('10px'),
-
-    ':hover': {
-      color: 'orange',
-    },
-    ':focus': {
-      color: 'green',
-    },
-  },
-});
-
-const Box: React.FC = props => {
-  const classes = useStyles();
-
-  return <div className={classes.box}>{props.children}</div>;
-};
-
-const BoxWithPseudo: React.FC = () => {
-  const classesA = useFocusStylesA();
-  const classesB = useFocusStylesB();
-
-  return (
-    <div style={{ display: 'flex', gap: '5px', flexDirection: 'column' }}>
-      <p>When element is focused & hovered - border color & text color should match</p>
-
-      <div className={classesA.root} id="boxA" tabIndex={0}>
-        A focusable element
-      </div>
-      <div className={classesB.root} id="boxB" tabIndex={0}>
-        A focusable element
-      </div>
-    </div>
-  );
-};
-
-const Container: React.FC<{ className?: string; primary?: boolean }> = props => {
-  const classes = useStyles();
-
-  return (
-    <div className={mergeClasses(classes.container, props.primary && classes.containerPrimary, props.className)}>
-      {props.children}
-    </div>
-  );
-};
-
-const ClassNameProvider: React.FC<{
-  children: (className: string) => React.ReactElement;
-}> = props => {
-  const classes = useStyles();
-
-  return props.children(classes.provider);
-};
-
-export const Nested = () => (
-  <>
-    <p>This scenario shows that it's possible to have nested components (LTR inside RTL).</p>
-
-    <FluentProvider dir="rtl" theme={webLightTheme}>
-      <Container primary>مرحبا بالعالم!</Container>
-
-      <FluentProvider dir="ltr">
-        <Container primary>Hello world!</Container>
-      </FluentProvider>
-    </FluentProvider>
-  </>
-);
-
-export const Propagation = () => (
-  <>
-    <p>
-      This scenario shows classes propagation between boundaries with "mergeClasses()" function: classes generated in
-      LTR context will be applied properly in RTL.
-    </p>
-
-    <FluentProvider theme={webLightTheme}>
-      <ClassNameProvider>
-        {className => (
-          <FluentProvider dir="rtl">
-            <Container className={className} primary>
-              مرحبا بالعالم!
-            </Container>
-          </FluentProvider>
-        )}
-      </ClassNameProvider>
-
-      <FluentProvider dir="rtl">
-        <ClassNameProvider>
-          {className => (
-            <FluentProvider dir="ltr">
-              <Container className={className} primary>
-                Hello world!
-              </Container>
-            </FluentProvider>
-          )}
-        </ClassNameProvider>
-      </FluentProvider>
-    </FluentProvider>
-  </>
-);
-
-// RTL stories
-// Check for details: packages/react-examples/src/react-make-styles/RTL/RTL.stories.tsx
-
-storiesOf('MakeStyles', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </StoryWright>
-  ))
-  .addStory('RTL: two components in a single Provider', () => (
-    <FluentProvider dir="rtl" theme={webLightTheme}>
-      <Box>مرحبا بالعالم!</Box>
-      <Container>مرحبا بالعالم!</Container>
-    </FluentProvider>
-  ))
-  .addStory('RTL: two providers with different directions as siblings', () => (
-    <>
-      <FluentProvider theme={webLightTheme}>
-        <Box>Hello world!</Box>
-        <Container primary>Hello world!</Container>
-      </FluentProvider>
-
-      <FluentProvider dir="rtl" theme={webLightTheme}>
-        <Box>مرحبا بالعالم!</Box>
-        <Container primary>مرحبا بالعالم!</Container>
-      </FluentProvider>
-    </>
-  ))
-  .addStory('RTL: two providers with different directions as children', () => (
-    <FluentProvider dir="rtl" theme={webLightTheme}>
-      <Container primary>مرحبا بالعالم!</Container>
-
-      <FluentProvider dir="ltr">
-        <Container primary>Hello world!</Container>
-      </FluentProvider>
-    </FluentProvider>
-  ));
-
-// Pseudo selectors stories
-
-storiesOf('MakeStyles (pseudo)', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('normal', { cropTo: '.testWrapper' })
-        .focus('#boxA')
-        .snapshot('boxA, focus', { cropTo: '.testWrapper' })
-        .hover('#boxA')
-        .snapshot('boxA, focus+hover', { cropTo: '.testWrapper' })
-        .focus('#boxB')
-        .hover('#boxB')
-        .snapshot('boxB, focus+hover', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </StoryWright>
-  ))
-  .addStory('insertion is ordered', () => <BoxWithPseudo />);
diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx
new file mode 100644
index 0000000000000..28ce1d30cd748
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx
@@ -0,0 +1,99 @@
+import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { tokens, webLightTheme } from '@fluentui/react-theme';
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+
+const useStyles = makeStyles({
+  box: {
+    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
+
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+
+    ...shorthands.margin('5px'),
+    ...shorthands.padding('5px'),
+    paddingLeft: '50px',
+  },
+
+  container: {
+    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
+
+    ...shorthands.margin('5px'),
+    ...shorthands.padding('5px'),
+  },
+  containerPrimary: {
+    borderLeftColor: tokens.colorPaletteDarkOrangeBorder2,
+  },
+
+  provider: {
+    marginLeft: '20px',
+  },
+});
+
+const Box: React.FC = props => {
+  const classes = useStyles();
+
+  return <div className={classes.box}>{props.children}</div>;
+};
+
+const Container: React.FC<{ className?: string; primary?: boolean }> = props => {
+  const classes = useStyles();
+
+  return (
+    <div className={mergeClasses(classes.container, props.primary && classes.containerPrimary, props.className)}>
+      {props.children}
+    </div>
+  );
+};
+
+export default {
+  title: 'MakeStyles',
+
+  decorators: [
+    (storyFn, context) => (
+      <div className="testWrapper" style={{ width: '300px' }}>
+        {storyFn(context)}
+      </div>
+    ),
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<'div'>;
+
+export const RtlTwoComponentsInASingleProvider = () => (
+  <FluentProvider dir="rtl" theme={webLightTheme}>
+    <Box>مرحبا بالعالم!</Box>
+    <Container>مرحبا بالعالم!</Container>
+  </FluentProvider>
+);
+RtlTwoComponentsInASingleProvider.storyName = 'RTL: two components in a single Provider';
+
+export const RtlTwoProvidersWithDifferentDirectionsAsSiblings = () => (
+  <>
+    <FluentProvider theme={webLightTheme}>
+      <Box>Hello world!</Box>
+      <Container primary>Hello world!</Container>
+    </FluentProvider>
+
+    <FluentProvider dir="rtl" theme={webLightTheme}>
+      <Box>مرحبا بالعالم!</Box>
+      <Container primary>مرحبا بالعالم!</Container>
+    </FluentProvider>
+  </>
+);
+RtlTwoProvidersWithDifferentDirectionsAsSiblings.storyName = 'RTL: two providers with different directions as siblings';
+
+export const RtlTwoProvidersWithDifferentDirectionsAsChildren = () => (
+  <FluentProvider dir="rtl" theme={webLightTheme}>
+    <Container primary>مرحبا بالعالم!</Container>
+
+    <FluentProvider dir="ltr">
+      <Container primary>Hello world!</Container>
+    </FluentProvider>
+  </FluentProvider>
+);
+RtlTwoProvidersWithDifferentDirectionsAsChildren.storyName = 'RTL: two providers with different directions as children';
diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx
new file mode 100644
index 0000000000000..d10590f100d05
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx
@@ -0,0 +1,79 @@
+import { shorthands, makeStyles } from '@griffel/react';
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+
+const useFocusStylesA = makeStyles({
+  root: {
+    ...shorthands.border('3px', 'solid', 'blue'),
+    ...shorthands.padding('10px'),
+
+    ':focus': {
+      color: 'red',
+    },
+    ':hover': {
+      color: 'blue',
+    },
+  },
+});
+const useFocusStylesB = makeStyles({
+  root: {
+    ...shorthands.border('3px', 'solid', 'orange'),
+    ...shorthands.padding('10px'),
+
+    ':hover': {
+      color: 'orange',
+    },
+    ':focus': {
+      color: 'green',
+    },
+  },
+});
+
+const BoxWithPseudo: React.FC = () => {
+  const classesA = useFocusStylesA();
+  const classesB = useFocusStylesB();
+
+  return (
+    <div style={{ display: 'flex', gap: '5px', flexDirection: 'column' }}>
+      <p>When element is focused & hovered - border color & text color should match</p>
+
+      <div className={classesA.root} id="boxA" tabIndex={0}>
+        A focusable element
+      </div>
+      <div className={classesB.root} id="boxB" tabIndex={0}>
+        A focusable element
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'MakeStyles (pseudo)',
+
+  decorators: [
+    (storyFn, context) => (
+      <div className="testWrapper" style={{ width: '300px' }}>
+        {storyFn(context)}
+      </div>
+    ),
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('normal', { cropTo: '.testWrapper' })
+          .focus('#boxA')
+          .snapshot('boxA, focus', { cropTo: '.testWrapper' })
+          .hover('#boxA')
+          .snapshot('boxA, focus+hover', { cropTo: '.testWrapper' })
+          .focus('#boxB')
+          .hover('#boxB')
+          .snapshot('boxB, focus+hover', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<'div'>;
+
+export const InsertionIsOrdered = () => <BoxWithPseudo />;
+InsertionIsOrdered.storyName = 'insertion is ordered';
diff --git a/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx
index e58390cc32948..143410b25fafc 100644
--- a/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx
@@ -1,488 +1,34 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import {
-  Menu,
-  MenuTrigger,
-  MenuPopover,
-  MenuList,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuItemRadio,
-  MenuGroup,
-  MenuGroupHeader,
-  MenuDivider,
-  MenuSplitGroup,
-  MenuItemLink,
-  MenuItemSwitch,
-} from '@fluentui/react-menu';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
 import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
-
-storiesOf('Menu Converged - basic', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem icon={<CutRegular />}>Cut</MenuItem>
-            <MenuItem icon={<EditRegular />}>Edit</MenuItem>
-            <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-storiesOf('Menu Converged - MenuItemLinks', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitemlink').end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('default', () => (
-    <Menu open>
-      <MenuTrigger>
-        <button>Toggle menu</button>
-      </MenuTrigger>
-
-      <MenuPopover>
-        <MenuList>
-          <MenuItemLink href="#" icon={<CutRegular />}>
-            Cut
-          </MenuItemLink>
-          <MenuItemLink href="#" icon={<EditRegular />}>
-            Edit
-          </MenuItemLink>
-          <MenuItemLink href="#" icon={<ClipboardPasteRegular />}>
-            Paste
-          </MenuItemLink>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  ));
-
-storiesOf('Menu Converged - secondary content', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem icon={<CutRegular />} secondaryContent="Ctrl+X">
-              Cut
-            </MenuItem>
-            <MenuItem icon={<EditRegular />}>Edit</MenuItem>
-            <MenuItem icon={<ClipboardPasteRegular />} secondaryContent="Ctrl+P">
-              Paste
-            </MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-storiesOf('Menu Converged - long content', module)
-  .addDecorator(story => <StoryWright>{story()}</StoryWright>)
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem icon={<CutRegular />}>Cut</MenuItem>
-            <MenuDivider />
-            <MenuItem icon={<ClipboardPasteRegular />} secondaryContent="Ctrl+P">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua. Nisl pretium fusce id velit ut tortor.
-            </MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-storiesOf('Menu Converged - groups', module)
-  .addDecorator(story => <StoryWright>{story()}</StoryWright>)
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuGroup>
-              <MenuGroupHeader>Section header</MenuGroupHeader>
-              <MenuItem icon={<CutRegular />}>Cut</MenuItem>
-              <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
-              <MenuItem icon={<EditRegular />}>Edit</MenuItem>
-            </MenuGroup>
-            <MenuDivider />
-            <MenuGroup>
-              <MenuGroupHeader>Section header</MenuGroupHeader>
-              <MenuItem icon={<CutRegular />}>Cut</MenuItem>
-              <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
-              <MenuItem icon={<EditRegular />}>Edit</MenuItem>
-            </MenuGroup>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  );
-
-storiesOf('Menu Converged - selection', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'checkbox',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItemCheckbox icon={<CutRegular />} name="edit" value="cut">
-              Cut
-            </MenuItemCheckbox>
-            <MenuItemCheckbox icon={<ClipboardPasteRegular />} name="edit" value="paste">
-              Paste
-            </MenuItemCheckbox>
-            <MenuItemCheckbox icon={<EditRegular />} name="edit" value="edit">
-              Edit
-            </MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory(
-    'switch',
-    () => (
-      <Menu open checkedValues={{ demo: ['checked'] }}>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItemSwitch icon={<CutRegular />} name="demo" value="unchecked">
-              Unchecked
-            </MenuItemSwitch>
-            <MenuItemSwitch icon={<ClipboardPasteRegular />} name="demo" value="checked">
-              Checked
-            </MenuItemSwitch>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  );
-
-storiesOf('Menu Converged - selection groups', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuGroup>
-              <MenuGroupHeader>Checkbox group</MenuGroupHeader>
-              <MenuItemCheckbox icon={<CutRegular />} name="edit" value="cut">
-                Cut
-              </MenuItemCheckbox>
-              <MenuItemCheckbox icon={<ClipboardPasteRegular />} name="edit" value="paste">
-                Paste
-              </MenuItemCheckbox>
-              <MenuItemCheckbox icon={<EditRegular />} name="edit" value="edit">
-                Edit
-              </MenuItemCheckbox>
-            </MenuGroup>
-            <MenuDivider />
-            <MenuGroup>
-              <MenuGroupHeader>Radio group</MenuGroupHeader>
-              <MenuItemRadio icon={<CutRegular />} name="font" value="segoe">
-                Segoe
-              </MenuItemRadio>
-              <MenuItemRadio icon={<ClipboardPasteRegular />} name="font" value="calibri">
-                Caliri
-              </MenuItemRadio>
-              <MenuItemRadio icon={<EditRegular />} name="font" value="arial">
-                Arial
-              </MenuItemRadio>
-            </MenuGroup>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-storiesOf('Menu Converged - nested submenus', module)
-  .addDecorator(story => (
-    // https://github.com/microsoft/fluentui/issues/19782
-    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('all open').end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>New </MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
-            <Menu>
-              <MenuTrigger>
-                <MenuItem id="nestedTrigger">Preferences</MenuItem>
-              </MenuTrigger>
-
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem>New </MenuItem>
-                  <MenuItem>New Window</MenuItem>
-                  <MenuItem>Open Folder</MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-storiesOf('Menu Converged - split item', module)
-  .addDecorator(story => (
-    // https://github.com/microsoft/fluentui/issues/19782
-    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>New </MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
-            <Menu>
-              <MenuSplitGroup>
-                <MenuItem>Open</MenuItem>
-                <MenuTrigger>
-                  <MenuItem id="nestedTrigger" />
-                </MenuTrigger>
-              </MenuSplitGroup>
-
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem>In browser</MenuItem>
-                  <MenuItem>In desktop app</MenuItem>
-                  <MenuItem>In mobile</MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-const ContextMenuArea = React.forwardRef<HTMLDivElement>((props, ref) => {
-  return (
-    <div
-      ref={ref}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        border: '1px solid red ',
-        width: 300,
-        height: 300,
-      }}
-      {...props}
-    >
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>New </MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem disabled>Open File</MenuItem>
-            <Menu>
-              <MenuTrigger>
-                <MenuItem id="nestedTrigger">Open Folder</MenuItem>
-              </MenuTrigger>
-
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem>New </MenuItem>
-                  <MenuItem>New Window</MenuItem>
-                  <MenuItem disabled>Open File</MenuItem>
-                  <MenuItem>Open Folder</MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </div>
-  );
-});
-
-storiesOf('Menu nested within a MenuTrigger', module)
-  .addDecorator(story => (
-    // https://github.com/microsoft/fluentui/issues/19782
-    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</StoryWright>
-  ))
-  .addStory('default', () => (
-    <Menu openOnContext>
-      <MenuTrigger>
-        <ContextMenuArea />
-      </MenuTrigger>
-
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>New </MenuItem>
-          <MenuItem>New Window</MenuItem>
-          <MenuItem disabled>Open File</MenuItem>
-          <MenuItem>Open Folder</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  ));
-
-// this places text in the icon slot to verify alignment when not using v9 icons
-storiesOf('Menu Converged - icon slotted content', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem icon={<span>X</span>} secondaryContent="Ctrl+X">
-              Cut
-            </MenuItem>
-            <MenuItem icon={<span>C</span>} secondaryContent="Ctrl+C">
-              Copy
-            </MenuItem>
-            <MenuItem icon={<span>V</span>} secondaryContent="Ctrl+V">
-              Paste
-            </MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
-
-// this places text in the submenuIndicator slot to verify alignment when not using v9 icons
-storiesOf('Menu Converged - submenuIndicator slotted content', module)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <Menu open>
-        <MenuTrigger>
-          <button>Toggle menu</button>
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <Menu>
-              <MenuTrigger>
-                <MenuItem id="nestedTrigger1" submenuIndicator={<span>N</span>}>
-                  New
-                </MenuItem>
-              </MenuTrigger>
-
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem>File </MenuItem>
-                  <MenuItem>Folder</MenuItem>
-                  <Menu>
-                    <MenuTrigger>
-                      <MenuItem id="nestedTrigger2" submenuIndicator={<span>P</span>}>
-                        Project
-                      </MenuItem>
-                    </MenuTrigger>
-
-                    <MenuPopover>
-                      <MenuList>
-                        <MenuItem>Financial</MenuItem>
-                        <MenuItem>Planning</MenuItem>
-                        <MenuItem>Status</MenuItem>
-                      </MenuList>
-                    </MenuPopover>
-                  </Menu>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    ),
-    { includeRtl: true },
-  );
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - basic',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem icon={<CutRegular />}>Cut</MenuItem>
+        <MenuItem icon={<EditRegular />}>Edit</MenuItem>
+        <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuGroups.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuGroups.stories.tsx
new file mode 100644
index 0000000000000..c189605f0270e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuGroups.stories.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { StoryWright } from 'storywright';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuDivider,
+} from '@fluentui/react-menu';
+import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - groups',
+
+  decorators: [story => <StoryWright>{story()}</StoryWright>],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuGroup>
+          <MenuGroupHeader>Section header</MenuGroupHeader>
+          <MenuItem icon={<CutRegular />}>Cut</MenuItem>
+          <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
+          <MenuItem icon={<EditRegular />}>Edit</MenuItem>
+        </MenuGroup>
+        <MenuDivider />
+        <MenuGroup>
+          <MenuGroupHeader>Section header</MenuGroupHeader>
+          <MenuItem icon={<CutRegular />}>Cut</MenuItem>
+          <MenuItem icon={<ClipboardPasteRegular />}>Paste</MenuItem>
+          <MenuItem icon={<EditRegular />}>Edit</MenuItem>
+        </MenuGroup>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx
new file mode 100644
index 0000000000000..ee34bf080e627
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - icon slotted content',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem icon={<span>X</span>} secondaryContent="Ctrl+X">
+          Cut
+        </MenuItem>
+        <MenuItem icon={<span>C</span>} secondaryContent="Ctrl+C">
+          Copy
+        </MenuItem>
+        <MenuItem icon={<span>V</span>} secondaryContent="Ctrl+V">
+          Paste
+        </MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx
new file mode 100644
index 0000000000000..675d369362221
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemLink } from '@fluentui/react-menu';
+import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - MenuItemLinks',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitemlink').end(),
+      }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItemLink href="#" icon={<CutRegular />}>
+          Cut
+        </MenuItemLink>
+        <MenuItemLink href="#" icon={<EditRegular />}>
+          Edit
+        </MenuItemLink>
+        <MenuItemLink href="#" icon={<ClipboardPasteRegular />}>
+          Paste
+        </MenuItemLink>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx
new file mode 100644
index 0000000000000..915675bf07575
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { StoryWright } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider } from '@fluentui/react-menu';
+import { CutRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { getStoryVariant, RTL } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - long content',
+
+  decorators: [story => <StoryWright>{story()}</StoryWright>],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem icon={<CutRegular />}>Cut</MenuItem>
+        <MenuDivider />
+        <MenuItem icon={<ClipboardPasteRegular />} secondaryContent="Ctrl+P">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Nisl pretium fusce id velit ut tortor.
+        </MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx
new file mode 100644
index 0000000000000..82c1281351f12
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - secondary content',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem icon={<CutRegular />} secondaryContent="Ctrl+X">
+          Cut
+        </MenuItem>
+        <MenuItem icon={<EditRegular />}>Edit</MenuItem>
+        <MenuItem icon={<ClipboardPasteRegular />} secondaryContent="Ctrl+P">
+          Paste
+        </MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx
new file mode 100644
index 0000000000000..c4da62d2907f3
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItemSwitch } from '@fluentui/react-menu';
+import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - selection',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Checkbox = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItemCheckbox icon={<CutRegular />} name="edit" value="cut">
+          Cut
+        </MenuItemCheckbox>
+        <MenuItemCheckbox icon={<ClipboardPasteRegular />} name="edit" value="paste">
+          Paste
+        </MenuItemCheckbox>
+        <MenuItemCheckbox icon={<EditRegular />} name="edit" value="edit">
+          Edit
+        </MenuItemCheckbox>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Checkbox.storyName = 'checkbox';
+
+export const CheckboxRTL = getStoryVariant(Checkbox, RTL);
+
+export const CheckboxHighContrast = getStoryVariant(Checkbox, HIGH_CONTRAST);
+
+export const CheckboxDarkMode = getStoryVariant(Checkbox, DARK_MODE);
+
+export const Switch = () => (
+  <Menu open checkedValues={{ demo: ['checked'] }}>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItemSwitch icon={<CutRegular />} name="demo" value="unchecked">
+          Unchecked
+        </MenuItemSwitch>
+        <MenuItemSwitch icon={<ClipboardPasteRegular />} name="demo" value="checked">
+          Checked
+        </MenuItemSwitch>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Switch.storyName = 'switch';
+
+export const SwitchRTL = getStoryVariant(Switch, RTL);
+
+export const SwitchHighContrast = getStoryVariant(Switch, HIGH_CONTRAST);
+
+export const SwitchDarkMode = getStoryVariant(Switch, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx
new file mode 100644
index 0000000000000..6932580ca353c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuDivider,
+} from '@fluentui/react-menu';
+import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
+
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - selection groups',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuGroup>
+          <MenuGroupHeader>Checkbox group</MenuGroupHeader>
+          <MenuItemCheckbox icon={<CutRegular />} name="edit" value="cut">
+            Cut
+          </MenuItemCheckbox>
+          <MenuItemCheckbox icon={<ClipboardPasteRegular />} name="edit" value="paste">
+            Paste
+          </MenuItemCheckbox>
+          <MenuItemCheckbox icon={<EditRegular />} name="edit" value="edit">
+            Edit
+          </MenuItemCheckbox>
+        </MenuGroup>
+        <MenuDivider />
+        <MenuGroup>
+          <MenuGroupHeader>Radio group</MenuGroupHeader>
+          <MenuItemRadio icon={<CutRegular />} name="font" value="segoe">
+            Segoe
+          </MenuItemRadio>
+          <MenuItemRadio icon={<ClipboardPasteRegular />} name="font" value="calibri">
+            Caliri
+          </MenuItemRadio>
+          <MenuItemRadio icon={<EditRegular />} name="font" value="arial">
+            Arial
+          </MenuItemRadio>
+        </MenuGroup>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx
new file mode 100644
index 0000000000000..97511cfa10bd6
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuSplitGroup } from '@fluentui/react-menu';
+
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - split item',
+
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>New </MenuItem>
+        <MenuItem>New Window</MenuItem>
+        <MenuItem>Open Folder</MenuItem>
+        <Menu>
+          <MenuSplitGroup>
+            <MenuItem>Open</MenuItem>
+            <MenuTrigger>
+              <MenuItem id="nestedTrigger" />
+            </MenuTrigger>
+          </MenuSplitGroup>
+
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>In browser</MenuItem>
+              <MenuItem>In desktop app</MenuItem>
+              <MenuItem>In mobile</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx
new file mode 100644
index 0000000000000..e03491fcf0c5c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+
+import { withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu nested within a MenuTrigger',
+
+  decorators: [
+    // https://github.com/microsoft/fluentui/issues/19782
+    story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+const ContextMenuArea = React.forwardRef<HTMLDivElement>((props, ref) => {
+  return (
+    <div
+      ref={ref}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid red ',
+        width: 300,
+        height: 300,
+      }}
+      {...props}
+    >
+      <Menu open>
+        <MenuTrigger>
+          <button>Toggle menu</button>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>New </MenuItem>
+            <MenuItem>New Window</MenuItem>
+            <MenuItem disabled>Open File</MenuItem>
+            <Menu>
+              <MenuTrigger>
+                <MenuItem id="nestedTrigger">Open Folder</MenuItem>
+              </MenuTrigger>
+
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>New </MenuItem>
+                  <MenuItem>New Window</MenuItem>
+                  <MenuItem disabled>Open File</MenuItem>
+                  <MenuItem>Open Folder</MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </div>
+  );
+});
+
+export const Default = () => (
+  <Menu openOnContext>
+    <MenuTrigger>
+      <ContextMenuArea />
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>New </MenuItem>
+        <MenuItem>New Window</MenuItem>
+        <MenuItem disabled>Open File</MenuItem>
+        <MenuItem>Open Folder</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx
index fceeb5a4a2eff..e287765801d85 100644
--- a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-
+import type { Meta } from '@storybook/react';
 import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-menu';
 import { makeStyles, shorthands } from '@griffel/react';
 import { PositioningImperativeRef } from '@fluentui/react-positioning';
-import { Steps, StoryWright } from 'storywright';
+import { Steps } from 'storywright';
+
+import { withStoryWrightSteps } from '../../utilities';
 
 const useStyles = makeStyles({
   container: {
@@ -68,9 +70,16 @@ const Example = () => {
   );
 };
 
-const steps = new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end();
-export const NestedSubmenusSmallViewportFlipped = () => (
-  <StoryWright steps={steps}>
-    <Example />
-  </StoryWright>
-);
+export default {
+  title: 'Menu',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end(),
+      }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const NestedSubmenusSmallViewportFlipped = () => <Example />;
diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx
index 877e9c554599e..0629b00a93a43 100644
--- a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-
+import type { Meta } from '@storybook/react';
 import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-menu';
 import { makeStyles, shorthands } from '@griffel/react';
 import { PositioningImperativeRef } from '@fluentui/react-positioning';
-import { Steps, StoryWright } from 'storywright';
+import { Steps } from 'storywright';
+
+import { withStoryWrightSteps } from '../../utilities';
 
 const useStyles = makeStyles({
   container: {
@@ -28,50 +30,55 @@ const Example = () => {
   }, []);
 
   return (
-    <StoryWright steps={steps}>
-      <div id="boundary" className={styles.container} ref={setBoundary}>
-        <Menu open positioning={{ positioningRef: positioningRefRoot }}>
-          <MenuTrigger disableButtonEnhancement>
-            <button>Menu</button>
-          </MenuTrigger>
+    <div id="boundary" className={styles.container} ref={setBoundary}>
+      <Menu open positioning={{ positioningRef: positioningRefRoot }}>
+        <MenuTrigger disableButtonEnhancement>
+          <button>Menu</button>
+        </MenuTrigger>
 
-          <MenuPopover>
-            <MenuList>
-              <MenuItem>New </MenuItem>
-              <MenuItem>New Window</MenuItem>
-              <MenuItem disabled>Open File</MenuItem>
-              <MenuItem>Open Folder</MenuItem>
-              <Menu
-                positioning={{
-                  overflowBoundary,
-                  flipBoundary: overflowBoundary,
-                  positioningRef: positioningRefSubmenu,
-                }}
-              >
-                <MenuTrigger disableButtonEnhancement>
-                  <MenuItem id="nested">Nested menu</MenuItem>
-                </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>New </MenuItem>
+            <MenuItem>New Window</MenuItem>
+            <MenuItem disabled>Open File</MenuItem>
+            <MenuItem>Open Folder</MenuItem>
+            <Menu
+              positioning={{
+                overflowBoundary,
+                flipBoundary: overflowBoundary,
+                positioningRef: positioningRefSubmenu,
+              }}
+            >
+              <MenuTrigger disableButtonEnhancement>
+                <MenuItem id="nested">Nested menu</MenuItem>
+              </MenuTrigger>
 
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem>New </MenuItem>
-                    <MenuItem>New Window</MenuItem>
-                    <MenuItem disabled>Open File</MenuItem>
-                    <MenuItem>Open Folder</MenuItem>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
-            </MenuList>
-          </MenuPopover>
-        </Menu>
-      </div>
-    </StoryWright>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>New </MenuItem>
+                  <MenuItem>New Window</MenuItem>
+                  <MenuItem disabled>Open File</MenuItem>
+                  <MenuItem>Open Folder</MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </div>
   );
 };
 
-const steps = new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end();
-export const NestedSubmenusSmallViewportStacked = () => (
-  <StoryWright steps={steps}>
-    <Example />
-  </StoryWright>
-);
+export default {
+  title: 'Menu',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end(),
+      }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const NestedSubmenusSmallViewportStacked = () => <Example />;
diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx
new file mode 100644
index 0000000000000..113795f9edb17
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Menu Converged - nested submenus',
+
+  decorators: [
+    // https://github.com/microsoft/fluentui/issues/19782
+    story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('all open').end() }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>New </MenuItem>
+        <MenuItem>New Window</MenuItem>
+        <MenuItem>Open Folder</MenuItem>
+        <Menu>
+          <MenuTrigger>
+            <MenuItem id="nestedTrigger">Preferences</MenuItem>
+          </MenuTrigger>
+
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>New </MenuItem>
+              <MenuItem>New Window</MenuItem>
+              <MenuItem>Open Folder</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx
index 272d85c284ade..48cc2bd300ce9 100644
--- a/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx
@@ -1,9 +1,12 @@
 import * as React from 'react';
-
+import type { Meta } from '@storybook/react';
 import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover, MenuGroup, MenuDivider } from '@fluentui/react-menu';
 import { makeStyles, shorthands } from '@griffel/react';
 import { PositioningProps } from '@fluentui/react-positioning';
-import { Steps, StoryWright } from 'storywright';
+import { Steps } from 'storywright';
+
+import { withStoryWrightSteps } from '../../utilities';
+
 const useStyles = makeStyles({
   wrapper: { display: 'flex' },
   shortContainer: {
@@ -61,25 +64,24 @@ const Example = () => {
   const [longOverflowBoundary, setLongOverflowBoundary] = React.useState<HTMLElement | null>(null);
 
   return (
-    <StoryWright steps={steps}>
-      <div className={styles.wrapper}>
-        <div className={styles.shortContainer} ref={setShortOverflowBoundary}>
-          <div>Short viewport:</div>
-          <ScrollableMenu overflowBoundary={shortOverflowBoundary} />
-        </div>
+    <div className={styles.wrapper}>
+      <div className={styles.shortContainer} ref={setShortOverflowBoundary}>
+        <div>Short viewport:</div>
+        <ScrollableMenu overflowBoundary={shortOverflowBoundary} />
+      </div>
 
-        <div className={styles.longContainer} ref={setLongOverflowBoundary}>
-          <div>Long viewport:</div>
-          <ScrollableMenu overflowBoundary={longOverflowBoundary} />
-        </div>
+      <div className={styles.longContainer} ref={setLongOverflowBoundary}>
+        <div>Long viewport:</div>
+        <ScrollableMenu overflowBoundary={longOverflowBoundary} />
       </div>
-    </StoryWright>
+    </div>
   );
 };
 
-const steps = new Steps().snapshot('default').end();
-export const ScrollableMenuSmallViewport = () => (
-  <StoryWright steps={steps}>
-    <Example />
-  </StoryWright>
-);
+export default {
+  title: 'Menu',
+
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
+} satisfies Meta<typeof Menu>;
+
+export const ScrollableMenuSmallViewport = () => <Example />;
diff --git a/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx
new file mode 100644
index 0000000000000..3f58eacbfafaf
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities';
+
+// this places text in the submenuIndicator slot to verify alignment when not using v9 icons
+export default {
+  title: 'Menu Converged - submenuIndicator slotted content',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end(),
+      }),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export const Default = () => (
+  <Menu open>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <Menu>
+          <MenuTrigger>
+            <MenuItem id="nestedTrigger1" submenuIndicator={<span>N</span>}>
+              New
+            </MenuItem>
+          </MenuTrigger>
+
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>File </MenuItem>
+              <MenuItem>Folder</MenuItem>
+              <Menu>
+                <MenuTrigger>
+                  <MenuItem id="nestedTrigger2" submenuIndicator={<span>P</span>}>
+                    Project
+                  </MenuItem>
+                </MenuTrigger>
+
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem>Financial</MenuItem>
+                    <MenuItem>Planning</MenuItem>
+                    <MenuItem>Status</MenuItem>
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx
deleted file mode 100644
index e94ae2cfa1d31..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Menu } from '@fluentui/react-menu';
-import { ComponentMeta } from '@storybook/react';
-
-export { NestedSubmenusSmallViewportStacked } from './NestedMenuSmallViewportStacked.stories';
-export { NestedSubmenusSmallViewportFlipped } from './NestedMenuSmallViewportFlipped.stories';
-export { ScrollableMenuSmallViewport } from './ScrollableMenuSmallViewport.stories';
-
-export default {
-  title: 'Menu',
-  component: Menu,
-} as ComponentMeta<typeof Menu>;
diff --git a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
index dc1e9b4214b64..b0d4d0cc5bf36 100644
--- a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
@@ -6,7 +6,7 @@ import {
   MessageBarIntent,
   MessageBarTitle,
 } from '@fluentui/react-message-bar';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { Button } from '@fluentui/react-button';
 import { Link } from '@fluentui/react-link';
@@ -17,9 +17,9 @@ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'MessageBar',
-  Component: MessageBar,
+  component: MessageBar,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof MessageBar>;
+} satisfies Meta<typeof MessageBar>;
 
 const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];
 
diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
index d51bf21027b6f..97da531c95993 100644
--- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
@@ -1,123 +1,141 @@
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { Persona } from '@fluentui/react-persona';
 import type { PersonaProps } from '@fluentui/react-persona';
+import { getStoryVariant, withStoryWrightSteps, RTL, HIGH_CONTRAST, DARK_MODE } from '../utilities';
 
 const sizes: PersonaProps['size'][] = ['extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'];
 const textPositions: PersonaProps['textPosition'][] = ['before', 'below', 'after'];
 const textAlignments: PersonaProps['textAlignment'][] = ['start', 'center'];
 
-storiesOf('Persona Converged', module)
-  .addDecorator(story => (
-    <div className="testWrapper" style={{ maxWidth: '750px' }}>
-      {story()}
-    </div>
-  ))
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'basic',
-    () => (
-      <div
-        className="testWrapper"
-        style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
-      >
-        <Persona name="Kevin Sturgis" secondaryText="Available" />
-        <Persona name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
-        <Persona presenceOnly name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
+export default {
+  title: 'Persona Converged',
+
+  decorators: [
+    story => (
+      <div className="testWrapper" style={{ maxWidth: '750px' }}>
+        {story()}
       </div>
     ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory('size-avatar', () => (
-    <div
-      className="testWrapper"
-      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
-    >
-      {sizes.map(size => (
-        <Persona
-          size={size}
-          name="Kevin Sturgis"
-          secondaryText="Software Engineer"
-          tertiaryText="Available"
-          quaternaryText="Microsoft"
-          key={size}
-        />
-      ))}
-    </div>
-  ))
-  .addStory('size-presence', () => (
-    <div
-      className="testWrapper"
-      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
-    >
-      {sizes.map(size => (
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Persona>;
+
+export const Basic = () => (
+  <div
+    className="testWrapper"
+    style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+  >
+    <Persona name="Kevin Sturgis" secondaryText="Available" />
+    <Persona name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
+    <Persona presenceOnly name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
+  </div>
+);
+Basic.storyName = 'basic';
+
+export const BasicRTL = getStoryVariant(Basic, RTL);
+
+export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
+
+export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
+
+export const SizeAvatar = () => (
+  <div
+    className="testWrapper"
+    style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+  >
+    {sizes.map(size => (
+      <Persona
+        size={size}
+        name="Kevin Sturgis"
+        secondaryText="Software Engineer"
+        tertiaryText="Available"
+        quaternaryText="Microsoft"
+        key={size}
+      />
+    ))}
+  </div>
+);
+SizeAvatar.storyName = 'size-avatar';
+
+export const SizePresence = () => (
+  <div
+    className="testWrapper"
+    style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+  >
+    {sizes.map(size => (
+      <Persona
+        size={size}
+        presenceOnly
+        presence={{ status: 'available' }}
+        name="Kevin Sturgis"
+        secondaryText="Software Engineer"
+        tertiaryText="Available"
+        quaternaryText="Microsoft"
+        key={size}
+      />
+    ))}
+  </div>
+);
+SizePresence.storyName = 'size-presence';
+
+export const TextPosition = () => (
+  <div className="testWrapper" style={{ display: 'flex', gap: '50px', padding: '10px', maxWidth: '750px' }}>
+    {textPositions.map(textPosition => (
+      <Persona
+        textPosition={textPosition}
+        presenceOnly
+        presence={{ status: 'available' }}
+        name="Kevin Sturgis"
+        secondaryText="Software Engineer"
+        tertiaryText="Available"
+        quaternaryText="Microsoft"
+        key={textPosition}
+      />
+    ))}
+  </div>
+);
+TextPosition.storyName = 'textPosition';
+
+export const TextAlignment = () => (
+  <div className="testWrapper" style={{ display: 'flex', gap: '50px', padding: '10px', maxWidth: '750px' }}>
+    {textAlignments.map(textAlignment => (
+      <div key={textAlignment} style={{ display: 'flex', gap: '20px', flexDirection: 'column' }}>
         <Persona
-          size={size}
+          textAlignment={textAlignment}
           presenceOnly
           presence={{ status: 'available' }}
           name="Kevin Sturgis"
           secondaryText="Software Engineer"
           tertiaryText="Available"
           quaternaryText="Microsoft"
-          key={size}
+          key={'presence-' + textAlignment}
         />
-      ))}
-    </div>
-  ))
-  .addStory('textPosition', () => (
-    <div className="testWrapper" style={{ display: 'flex', gap: '50px', padding: '10px', maxWidth: '750px' }}>
-      {textPositions.map(textPosition => (
+        {/* This test is to verify that when the Avatar takes more space
+          than the text lines, the text lines are centered */}
         <Persona
-          textPosition={textPosition}
-          presenceOnly
-          presence={{ status: 'available' }}
+          textAlignment={textAlignment}
+          size="huge"
           name="Kevin Sturgis"
           secondaryText="Software Engineer"
-          tertiaryText="Available"
-          quaternaryText="Microsoft"
-          key={textPosition}
+          key={'avatar-' + textAlignment}
         />
-      ))}
-    </div>
-  ))
-  .addStory('textAlignment', () => (
-    <div className="testWrapper" style={{ display: 'flex', gap: '50px', padding: '10px', maxWidth: '750px' }}>
-      {textAlignments.map(textAlignment => (
-        <div key={textAlignment} style={{ display: 'flex', gap: '20px', flexDirection: 'column' }}>
-          <Persona
-            textAlignment={textAlignment}
-            presenceOnly
-            presence={{ status: 'available' }}
-            name="Kevin Sturgis"
-            secondaryText="Software Engineer"
-            tertiaryText="Available"
-            quaternaryText="Microsoft"
-            key={'presence-' + textAlignment}
-          />
-          {/* This test is to verify that when the Avatar takes more space
-          than the text lines, the text lines are centered */}
-          <Persona
-            textAlignment={textAlignment}
-            size="huge"
-            name="Kevin Sturgis"
-            secondaryText="Software Engineer"
-            key={'avatar-' + textAlignment}
-          />
-        </div>
-      ))}
-    </div>
-  ))
-  .addStory('textWrap', () => (
-    <div className="testWrapper" style={{ padding: '10px', width: '200px' }}>
-      <Persona
-        presence={{ status: 'available' }}
-        name="Do in incididunt ea minim laboris et est do consequat."
-        secondaryText="Ea cupidatat esse ullamco velit officia sint ea sit duis id ea id eu."
-        tertiaryText="Eiusmod mollit labore cupidatat enim amet dolor dolor."
-        quaternaryText="Commodo est aute sunt eiusmod sint elit irure incididunt reprehenderit culpa."
-      />
-    </div>
-  ));
+      </div>
+    ))}
+  </div>
+);
+TextAlignment.storyName = 'textAlignment';
+
+export const TextWrap = () => (
+  <div className="testWrapper" style={{ padding: '10px', width: '200px' }}>
+    <Persona
+      presence={{ status: 'available' }}
+      name="Do in incididunt ea minim laboris et est do consequat."
+      secondaryText="Ea cupidatat esse ullamco velit officia sint ea sit duis id ea id eu."
+      tertiaryText="Eiusmod mollit labore cupidatat enim amet dolor dolor."
+      quaternaryText="Commodo est aute sunt eiusmod sint elit irure incididunt reprehenderit culpa."
+    />
+  </div>
+);
+TextWrap.storyName = 'textWrap';
diff --git a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
deleted file mode 100644
index bc27cabe557ba..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover';
-import { tokens } from '@fluentui/react-theme';
-import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
-
-const PopoverPositioning: React.FC = () => {
-  const positions = [
-    ['above', 'start'],
-    ['above', 'center'],
-    ['above', 'end'],
-    ['below', 'start'],
-    ['below', 'center'],
-    ['below', 'end'],
-    ['before', 'top'],
-    ['before', 'center'],
-    ['before', 'bottom'],
-    ['after', 'top'],
-    ['after', 'center'],
-    ['after', 'bottom'],
-  ] as const;
-
-  const [target, setTarget] = React.useState<HTMLDivElement | null>(null);
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  return (
-    <div style={{ display: 'flex', padding: '100px 150px' }}>
-      <div
-        ref={setTarget}
-        className="target"
-        style={{ width: '400px', height: '300px', border: `1px solid ${tokens.colorNeutralStroke1}` }}
-      >
-        {positions.map(([position, align]) => (
-          <Popover withArrow open={open} positioning={{ position, align, target }} key={position + '' + align}>
-            <PopoverSurface>
-              <div>{position + ' ' + align}</div>
-            </PopoverSurface>
-          </Popover>
-        ))}
-
-        <button id="show-popovers" onClick={() => setOpen(true)}>
-          Show popovers
-        </button>
-      </div>
-    </div>
-  );
-};
-
-storiesOf('Popover Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps().click('#show-popovers').snapshot('positioned popovers', { cropTo: '.testWrapper' }).end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('positioning', () => <PopoverPositioning />, { includeRtl: true, includeHighContrast: true });
-
-storiesOf('Popover Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().click('#show-popover').snapshot('PopoverSurface focused').end()}>
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('avoid scrolling', () => {
-    return (
-      <Popover trapFocus>
-        <PopoverTrigger>
-          <button id="show-popover">Show Popover</button>
-        </PopoverTrigger>
-        <PopoverSurface
-          tabIndex={-1}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            maxWidth: '300px',
-            maxHeight: '300px',
-            overflowY: 'scroll',
-          }}
-        >
-          <span>{sampleText}</span>
-          <div>
-            <button>close</button>
-            <button>accept</button>
-          </div>
-        </PopoverSurface>
-      </Popover>
-    );
-  })
-  .addStory('when rendering inline, it should not render behind relatively positioned elements', () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Popover inline>
-        <PopoverTrigger>
-          <button id="show-popover">Show Popover</button>
-        </PopoverTrigger>
-        <PopoverSurface>
-          <span>Sample PopoverSurface text</span>
-        </PopoverSurface>
-      </Popover>
-      <input style={{ position: 'relative' }} />
-    </div>
-  ));
-
-const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. In pellentesque massa placerat duis
- ultricies lacus sed turpis. Eros donec ac odio tempor. Mattis molestie a iaculis at erat. Aenean euismod elementum nisi
-  quis eleifend quam. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Sed euismod nisi porta
-  lorem mollis aliquam ut porttitor leo. Lorem ipsum dolor sit amet. Id faucibus nisl tincidunt eget nullam. Fermentum
-  posuere urna nec tincidunt praesent semper. Dolor sit amet consectetur adipiscing. Ut enim blandit volutpat maecenas
-  volutpat blandit aliquam etiam erat. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
-  Dignissim convallis aenean et tortor at risus. Tristique senectus et netus et malesuada. Sed blandit libero volutpat
-  sed cras ornare arcu dui. Arcu dictum varius duis at consectetur lorem. Montes nascetur ridiculus mus mauris vitae. Ut
-   ornare lectus sit amet est placerat in egestas.`;
diff --git a/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx
new file mode 100644
index 0000000000000..4b7859711fb69
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Popover Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().click('#show-popover').snapshot('PopoverSurface focused').end(),
+      }),
+  ],
+} satisfies Meta<typeof Popover>;
+
+export const AvoidScrolling = () => {
+  return (
+    <Popover trapFocus>
+      <PopoverTrigger>
+        <button id="show-popover">Show Popover</button>
+      </PopoverTrigger>
+      <PopoverSurface
+        tabIndex={-1}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          maxWidth: '300px',
+          maxHeight: '300px',
+          overflowY: 'scroll',
+        }}
+      >
+        <span>{sampleText}</span>
+        <div>
+          <button>close</button>
+          <button>accept</button>
+        </div>
+      </PopoverSurface>
+    </Popover>
+  );
+};
+AvoidScrolling.storyName = 'avoid scrolling';
+
+export const WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements = () => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+    }}
+  >
+    <Popover inline>
+      <PopoverTrigger>
+        <button id="show-popover">Show Popover</button>
+      </PopoverTrigger>
+      <PopoverSurface>
+        <span>Sample PopoverSurface text</span>
+      </PopoverSurface>
+    </Popover>
+    <input style={{ position: 'relative' }} />
+  </div>
+);
+
+WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements.storyName =
+  'when rendering inline, it should not render behind relatively positioned elements';
+
+const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+ et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. In pellentesque massa placerat duis
+ ultricies lacus sed turpis. Eros donec ac odio tempor. Mattis molestie a iaculis at erat. Aenean euismod elementum nisi
+  quis eleifend quam. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Sed euismod nisi porta
+  lorem mollis aliquam ut porttitor leo. Lorem ipsum dolor sit amet. Id faucibus nisl tincidunt eget nullam. Fermentum
+  posuere urna nec tincidunt praesent semper. Dolor sit amet consectetur adipiscing. Ut enim blandit volutpat maecenas
+  volutpat blandit aliquam etiam erat. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
+  Dignissim convallis aenean et tortor at risus. Tristique senectus et netus et malesuada. Sed blandit libero volutpat
+  sed cras ornare arcu dui. Arcu dictum varius duis at consectetur lorem. Montes nascetur ridiculus mus mauris vitae. Ut
+   ornare lectus sit amet est placerat in egestas.`;
diff --git a/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx
new file mode 100644
index 0000000000000..993e2150ff85c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Popover, PopoverSurface } from '@fluentui/react-popover';
+import { tokens } from '@fluentui/react-theme';
+import { getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps, TestWrapperDecorator } from '../../utilities';
+
+const PopoverPositioning: React.FC = () => {
+  const positions = [
+    ['above', 'start'],
+    ['above', 'center'],
+    ['above', 'end'],
+    ['below', 'start'],
+    ['below', 'center'],
+    ['below', 'end'],
+    ['before', 'top'],
+    ['before', 'center'],
+    ['before', 'bottom'],
+    ['after', 'top'],
+    ['after', 'center'],
+    ['after', 'bottom'],
+  ] as const;
+
+  const [target, setTarget] = React.useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  return (
+    <div style={{ display: 'flex', padding: '100px 150px' }}>
+      <div
+        ref={setTarget}
+        className="target"
+        style={{ width: '400px', height: '300px', border: `1px solid ${tokens.colorNeutralStroke1}` }}
+      >
+        {positions.map(([position, align]) => (
+          <Popover withArrow open={open} positioning={{ position, align, target }} key={position + '' + align}>
+            <PopoverSurface>
+              <div>{position + ' ' + align}</div>
+            </PopoverSurface>
+          </Popover>
+        ))}
+
+        <button id="show-popovers" onClick={() => setOpen(true)}>
+          Show popovers
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Popover Converged',
+
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().click('#show-popovers').snapshot('positioned popovers', { cropTo: '.testWrapper' }).end(),
+      }),
+  ],
+} satisfies Meta<typeof Popover>;
+
+export const Positioning = () => <PopoverPositioning />;
+Positioning.storyName = 'positioning';
+
+export const PositioningRTL = getStoryVariant(Positioning, RTL);
+
+export const PositioningHighContrast = getStoryVariant(Positioning, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Portal.stories.tsx b/apps/vr-tests-react-components/src/stories/Portal.stories.tsx
index 5d2654285d90b..8545b69afd67a 100644
--- a/apps/vr-tests-react-components/src/stories/Portal.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Portal.stories.tsx
@@ -3,16 +3,16 @@ import { Portal } from '@fluentui/react-portal';
 import { tokens } from '@fluentui/react-theme';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';
 import { makeStyles, shorthands } from '@griffel/react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 
 const steps = new Steps().click('#popoverTrigger').snapshot('should have green border').end();
 
 export default {
   title: 'Portal',
-  Component: Portal,
+  component: Portal,
   decorators: [story => <StoryWright steps={steps}>{story()}</StoryWright>],
-} as ComponentMeta<typeof Portal>;
+} satisfies Meta<typeof Portal>;
 
 const useStyles = makeStyles({
   canary: {
diff --git a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx
similarity index 63%
rename from apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
rename to apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx
index f80b4f04e65ef..a8bce2012c57d 100644
--- a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx
@@ -1,114 +1,17 @@
 import * as React from 'react';
+import type { Meta } from '@storybook/react';
 import {
   usePositioning,
-  createArrowStyles,
   PositioningProps,
   PositioningVirtualElement,
   PositioningImperativeRef,
 } from '@fluentui/react-positioning';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { useMergedRefs } from '@fluentui/react-utilities';
-import { tokens } from '@fluentui/react-theme';
-import { storiesOf } from '@storybook/react';
-import * as ReactDOM from 'react-dom';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { Steps, StoryWright } from 'storywright';
 
-const useStyles = makeStyles({
-  wrapper: {
-    display: 'flex',
-    ...shorthands.gap('5px'),
-    backgroundColor: tokens.colorNeutralBackground1,
-
-    '& .target': {
-      color: tokens.colorNeutralForeground1,
-      backgroundColor: tokens.colorNeutralBackground1,
-      ...shorthands.border('2px', 'dashed', 'green'),
-      width: '400px',
-      height: '200px',
-    },
-  },
-
-  gridWrapper: {
-    width: '400px',
-    height: '400px',
-    display: 'grid',
-    gridTemplateColumns: 'auto auto auto',
-    columnGap: '20px',
-    rowGap: '50px',
-  },
-
-  boundary: {
-    ...shorthands.border('2px', 'dashed', 'red'),
-  },
-
-  box: {
-    ...shorthands.padding('15px'),
-    ...shorthands.border('1px', 'solid', 'blue'),
-    backgroundColor: 'white',
-  },
-  boxBold: {
-    ...shorthands.borderWidth('3px'),
-  },
-
-  arrow: {
-    ...createArrowStyles({
-      arrowHeight: 12,
-      borderStyle: 'solid',
-      borderColor: 'blue',
-      borderWidth: '3px',
-    }),
-  },
-
-  seeThrough: {
-    opacity: 0.6,
-  },
-
-  visibilityModifiers: {
-    backgroundColor: '#ccc',
-    minHeight: '60px',
-    width: '200px',
-
-    '[data-popper-reference-hidden]': {
-      outlineWidth: '5px',
-      outlineStyle: 'solid',
-      outlineColor: 'red',
-    },
-    '[data-popper-escaped]': {
-      backgroundColor: 'yellow',
-    },
-    '[data-popper-is-intersecting]': {
-      outlineWidth: '5px',
-      outlineStyle: 'solid',
-      outlineColor: 'green',
-    },
-  },
-});
-
-const positions = [
-  ['above', 'start'],
-  ['above', 'center'],
-  ['above', 'end'],
-  ['below', 'start'],
-  ['below', 'center'],
-  ['below', 'end'],
-  ['before', 'top'],
-  ['before', 'center'],
-  ['before', 'bottom'],
-  ['after', 'top'],
-  ['after', 'center'],
-  ['after', 'bottom'],
-] as const;
-
-const Box = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => {
-  const styles = useStyles();
-  return (
-    <div {...props} className={mergeClasses(styles.box, props.className)} ref={ref}>
-      {props.children}
-    </div>
-  );
-});
+import { Box, positions, useStyles } from './utils';
+import { getStoryVariant, RTL } from '../../utilities';
 
 const PositionAndAlignProps: React.FC<{ positionFixed?: boolean; useTransform?: boolean }> = ({
   positionFixed,
@@ -812,286 +715,6 @@ const FallbackPositioning = () => {
   );
 };
 
-const ScrollJump: React.FC = () => {
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const [open, setOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    if (open && buttonRef.current) {
-      const scrollY = window.scrollY;
-      buttonRef.current.focus();
-
-      setTimeout(() => {
-        const element = document.querySelector<HTMLElement>(
-          scrollY === window.scrollY ? '#test-passed' : '#test-failed',
-        );
-
-        if (element) {
-          element.style.setProperty('display', 'block');
-          element.setAttribute('id', 'test-completed');
-        }
-      }, 500);
-    }
-  }, [open]);
-
-  const { containerRef, targetRef } = usePositioning({
-    position: 'above',
-    align: 'start',
-  });
-
-  const floating = ReactDOM.createPortal(
-    <Box ref={containerRef}>
-      Focusable element <button ref={buttonRef}>Focus me</button>
-    </Box>,
-    document.body,
-  );
-
-  return (
-    <>
-      <div
-        style={{
-          position: 'fixed',
-          top: 10,
-          left: 100,
-          right: 100,
-
-          background: 'white',
-        }}
-      >
-        <p style={{ fontWeight: 20, border: '8px dotted magenta', padding: 10, margin: 0 }}>
-          This example simulates a scroll jump on autofocus when opening a floating element. The example uses a layout
-          effect to focus on the content of the floating box before usePopper is called. This results in the focus
-          executing before the layout effect to position the floating is executed. The scroll jump is fixed internally
-          in usePositioning by using position: fixed on the floating element before it is first positioned.
-        </p>
-        <div
-          id="test-failed"
-          style={{
-            border: '8px dotted magenta',
-            borderTop: 'none',
-            padding: 10,
-            fontSize: 20,
-            color: 'red',
-            display: 'none',
-          }}
-        >
-          Test failed, scroll jump occurred 💥
-        </div>
-        <div
-          id="test-passed"
-          style={{
-            border: '8px dotted magenta',
-            borderTop: 'none',
-            padding: 10,
-            fontSize: 20,
-            color: 'green',
-            display: 'none',
-          }}
-        >
-          Test passed ✅
-        </div>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          background: 'repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px)',
-        }}
-      >
-        <div style={{ background: 'white', border: '4px dotted green', margin: 10 }}>
-          <div
-            style={{
-              display: 'flex',
-
-              background:
-                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
-              margin: 30,
-              height: '100vh',
-            }}
-          />
-
-          <div style={{ border: '4px dotted black', padding: 10, margin: 100 }}>
-            <button id="target" ref={targetRef} onClick={() => setOpen(s => !s)}>
-              Target
-            </button>
-          </div>
-
-          <div
-            style={{
-              display: 'flex',
-
-              background:
-                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
-              margin: 30,
-              height: '100vh',
-            }}
-          />
-
-          {open && floating}
-        </div>
-      </div>
-    </>
-  );
-};
-
-//
-//
-//
-
-const Context = createContext<
-  | {
-      containerRef: React.RefObject<HTMLDivElement>;
-      targetRef: React.RefObject<HTMLDivElement>;
-      open: boolean;
-      setOpen: (open: boolean) => void;
-    }
-  | undefined
->(undefined);
-
-const Controller: React.FC<React.PropsWithChildren<{}>> = props => {
-  const [open, setOpen] = React.useState(false);
-  const children = React.Children.toArray(props.children);
-
-  const { containerRef, targetRef } = usePositioning({
-    position: 'above',
-    align: 'center',
-  });
-
-  React.useEffect(() => {
-    if (open) {
-      const scrollY = window.scrollY;
-      const button = containerRef.current?.querySelector('button');
-
-      button.focus();
-
-      setTimeout(() => {
-        const element = document.querySelector<HTMLElement>(
-          scrollY === window.scrollY ? '#test-passed' : '#test-failed',
-        );
-
-        if (element) {
-          element.style.setProperty('display', 'block');
-          element.setAttribute('id', 'test-completed');
-        }
-      }, 500);
-    }
-  }, [containerRef, open]);
-
-  return (
-    <Context.Provider value={{ setOpen, containerRef, targetRef, open }}>
-      {children[0]}
-      {open && children[1]}
-    </Context.Provider>
-  );
-};
-
-const Target: React.FC = props => {
-  const open = useContextSelector(Context, v => v!.open);
-  const setOpen = useContextSelector(Context, v => v!.setOpen);
-  const targetRef = useContextSelector(Context, v => v!.targetRef);
-
-  return React.cloneElement(props.children as React.ReactElement, {
-    'aria-expanded': `${open}`,
-    onClick: () => setOpen(true),
-    ref: targetRef,
-  });
-};
-
-const Container: React.FC = props => {
-  const containerRef = useContextSelector(Context, v => v!.containerRef);
-
-  return ReactDOM.createPortal(
-    <div style={{ position: 'absolute', left: 0, top: 0, right: 0, zIndex: 1000 }}>
-      <div ref={containerRef} style={{ background: 'white', padding: 20, border: '5px solid blue' }}>
-        {props.children}
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-const ScrollJumpContext = () => {
-  return (
-    <>
-      <div
-        style={{
-          position: 'fixed',
-          top: 10,
-          left: 100,
-          right: 100,
-
-          background: 'white',
-        }}
-      >
-        <p style={{ fontWeight: 20, border: '8px dotted magenta', padding: 10, margin: 0 }}>
-          This example simulates a scroll jump on autofocus when opening a floating element. The example uses a layout
-          effect to focus on the content of the floating box before usePopper is called. This results in the focus
-          executing before the layout effect to position the floating is executed. The scroll jump is fixed internally
-          in usePositioning by using position: fixed on the floating element before it is first positioned.
-        </p>
-        <div
-          id="test-failed"
-          style={{
-            border: '8px dotted magenta',
-            borderTop: 'none',
-            padding: 10,
-            fontSize: 20,
-            color: 'red',
-            display: 'none',
-          }}
-        >
-          Test failed, scroll jump occurred 💥
-        </div>
-        <div
-          id="test-passed"
-          style={{
-            border: '8px dotted magenta',
-            borderTop: 'none',
-            padding: 10,
-            fontSize: 20,
-            color: 'green',
-            display: 'none',
-          }}
-        >
-          Test passed ✅
-        </div>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          background: 'repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px)',
-        }}
-      >
-        <div style={{ background: 'white', border: '4px dotted green', margin: 10, padding: 40 }}>
-          <div
-            style={{
-              display: 'flex',
-
-              background:
-                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
-              margin: 30,
-              height: '100vh',
-            }}
-          />
-
-          <Controller>
-            <Target>
-              <button id="target">Popover trigger</button>
-            </Target>
-
-            <Container>
-              <button>Action</button>
-            </Container>
-          </Controller>
-        </div>
-      </div>
-    </>
-  );
-};
-
 const MultiScrollParent = () => {
   const { targetRef, containerRef } = usePositioning({});
   const scrollContainerRef = React.useRef<HTMLDivElement>(null);
@@ -1220,127 +843,193 @@ const TargetDisplayNone = () => {
   );
 };
 
-storiesOf('Positioning', module)
-  .addDecorator(story => (
-    <div
-      style={{
-        position: 'fixed',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      {story()}
-    </div>
-  ))
-  .addStory('position and align props', () => <PositionAndAlignProps />, { includeRtl: true })
-  .addStory('offset', () => <Offset />, { includeRtl: true })
-  .addStory('offset function', () => <OffsetFunction />, { includeRtl: true })
-  .addStory('coverTarget', () => <CoverTarget />, { includeRtl: true })
-  .addStory('vertical flip', () => <VerticalFlip />)
-  .addStory('horizontal flip', () => <HorizontalFlip />, { includeRtl: true })
-  .addStory('vertical overflow', () => <VerticalOverflow />)
-  .addStory('horizontal overflow padding', () => <HorizontalOverflowPadding />, { includeRtl: true })
-  .addStory('vertical overflow padding', () => <VerticalOverflowPadding />)
-  .addStory('explicit overflow padding', () => <ExplicitOverflowPadding />, { includeRtl: true })
-  .addStory('horizontal overflow', () => <HorizontalOverflow />, { includeRtl: true })
-  .addStory('pinned', () => <Pinned />)
-  .addStory('auto size', () => <AutoSize />)
-  .addStory('auto size overflow padding', () => <AutoSize overflowBoundaryPadding={{ start: 10, end: 5 }} />, {
-    includeRtl: true,
-  })
-  .addStory('auto size overflow padding shorthand', () => <AutoSize overflowBoundaryPadding={10} />)
-  .addStory('auto size with async content', () => (
-    <StoryWright
-      steps={new Steps()
-        .click('#load-content')
-        .wait('#full-content')
-        .snapshot('floating element is within the boundary')
-        .end()}
-    >
-      <AutoSizeAsyncContent />
-    </StoryWright>
-  ))
-  .addStory('auto size with async content reset styles on updatePosition', () => (
-    <StoryWright
-      steps={new Steps()
-        .click('#load-content')
-        .wait('#full-content')
-        .wait(250) // let updatePosition finish
-        .snapshot('floating element width fills boundary and overflows 10px because of overflow:clip')
-        .end()}
-    >
-      <AutoSizeUpdatePosition />
-    </StoryWright>
-  ))
-  .addStory('disable tether', () => <DisableTether />)
-  .addStory('position fixed', () => <PositionAndAlignProps positionFixed />, { includeRtl: true })
-  .addStory('virtual element', () => <VirtualElement />)
-  .addStory('reset target', () => <ResetTarget />)
-  .addStory('target property', () => <TargetProp />)
-  .addStory('imperative target', () => <ImperativeTarget />)
-  .addStory('visibility modifiers', () => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries')
-        .executeScript('document.querySelector("#scrollable-area").scrollTop = 80')
-        .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`)
-        .executeScript('document.querySelector("#scrollable-area").scrollTop = 150')
-        .snapshot('has "[data-popper-reference-hidden]" when the reference is hidden')
-        .end()}
-    >
-      <VisibilityModifiers />
-    </StoryWright>
-  ))
-  .addStory('arrow', () => <Arrow />, { includeRtl: true })
-  .addStory('fallback positioning', () => <FallbackPositioning />)
-  .addStory('disable CSS transform', () => <PositionAndAlignProps useTransform={false} />, { includeRtl: true })
-  .addStory(
-    'disable CSS transform with position fixed',
-    () => <PositionAndAlignProps positionFixed useTransform={false} />,
-    { includeRtl: true },
-  )
-  .addStory('Multiple scroll parents', () => (
-    <StoryWright steps={new Steps().click('#scroll').snapshot('container attached to target').end()}>
-      <MultiScrollParent />
-    </StoryWright>
-  ))
-  .addStory('Match target size', () => <MatchTargetSize />)
-  .addStory('Positioning end', () => (
-    <StoryWright steps={new Steps().click('#target').snapshot('updated 2 times').end()}>
-      <PositioningEndEvent />
-    </StoryWright>
-  ))
-  .addStory('Target display none', () => (
-    <StoryWright steps={new Steps().click('#target').snapshot('target display: none').end()}>
-      <TargetDisplayNone />
-    </StoryWright>
-  ));
-
-storiesOf('Positioning (no decorator)', module)
-  .addStory('scroll jumps', () => (
-    <StoryWright
-      steps={new Steps()
-        .focus('#target')
-        .click('#target')
-        .wait('#test-completed')
-        .snapshot('positions without scroll jump')
-        .end()}
-    >
-      <ScrollJump />
-    </StoryWright>
-  ))
-  .addStory('scroll jumps (with context usage)', () => (
-    <StoryWright
-      steps={new Steps()
-        .focus('#target')
-        .click('#target')
-        .wait('#test-completed')
-        .snapshot('positions without scroll jump')
-        .end()}
-    >
-      <ScrollJumpContext />
-    </StoryWright>
-  ));
+export default {
+  title: 'Positioning',
+
+  decorators: [
+    story => (
+      <div
+        style={{
+          position: 'fixed',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        {story()}
+      </div>
+    ),
+  ],
+} satisfies Meta<'div'>;
+
+export const _PositionAndAlignProps = () => <PositionAndAlignProps />;
+_PositionAndAlignProps.storyName = 'position and align props';
+
+export const PositionAndAlignPropsRTL = getStoryVariant(_PositionAndAlignProps, RTL);
+
+export const _Offset = () => <Offset />;
+_Offset.storyName = 'offset';
+
+export const OffsetRTL = getStoryVariant(_Offset, RTL);
+
+export const _OffsetFunction = () => <OffsetFunction />;
+_OffsetFunction.storyName = 'offset function';
+
+export const OffsetFunctionRTL = getStoryVariant(_OffsetFunction, RTL);
+
+export const _CoverTarget = () => <CoverTarget />;
+_CoverTarget.storyName = 'coverTarget';
+
+export const CoverTargetRTL = getStoryVariant(_CoverTarget, RTL);
+
+export const _VerticalFlip = () => <VerticalFlip />;
+_VerticalFlip.storyName = 'vertical flip';
+
+export const _HorizontalFlip = () => <HorizontalFlip />;
+_HorizontalFlip.storyName = 'horizontal flip';
+
+export const HorizontalFlipRTL = getStoryVariant(_HorizontalFlip, RTL);
+
+export const _VerticalOverflow = () => <VerticalOverflow />;
+_VerticalOverflow.storyName = 'vertical overflow';
+
+export const _HorizontalOverflowPadding = () => <HorizontalOverflowPadding />;
+_HorizontalOverflowPadding.storyName = 'horizontal overflow padding';
+
+export const HorizontalOverflowPaddingRTL = getStoryVariant(_HorizontalOverflowPadding, RTL);
+
+export const _VerticalOverflowPadding = () => <VerticalOverflowPadding />;
+_VerticalOverflowPadding.storyName = 'vertical overflow padding';
+
+export const _ExplicitOverflowPadding = () => <ExplicitOverflowPadding />;
+_ExplicitOverflowPadding.storyName = 'explicit overflow padding';
+
+export const ExplicitOverflowPaddingRTL = getStoryVariant(_ExplicitOverflowPadding, RTL);
+
+export const _HorizontalOverflow = () => <HorizontalOverflow />;
+_HorizontalOverflow.storyName = 'horizontal overflow';
+
+export const HorizontalOverflowRTL = getStoryVariant(_HorizontalOverflow, RTL);
+
+export const _Pinned = () => <Pinned />;
+_Pinned.storyName = 'pinned';
+
+export const _AutoSize = () => <AutoSize />;
+_AutoSize.storyName = 'auto size';
+
+export const _AutoSizeOverflowPadding = () => <AutoSize overflowBoundaryPadding={{ start: 10, end: 5 }} />;
+
+_AutoSizeOverflowPadding.storyName = 'auto size overflow padding';
+
+export const AutoSizeOverflowPaddingRTL = getStoryVariant(_AutoSizeOverflowPadding, RTL);
+
+export const AutoSizeOverflowPaddingShorthand = () => <AutoSize overflowBoundaryPadding={10} />;
+AutoSizeOverflowPaddingShorthand.storyName = 'auto size overflow padding shorthand';
+
+export const AutoSizeWithAsyncContent = () => (
+  <StoryWright
+    steps={new Steps()
+      .click('#load-content')
+      .wait('#full-content')
+      .snapshot('floating element is within the boundary')
+      .end()}
+  >
+    <AutoSizeAsyncContent />
+  </StoryWright>
+);
+AutoSizeWithAsyncContent.storyName = 'auto size with async content';
+
+export const AutoSizeWithAsyncContentResetStylesOnUpdatePosition = () => (
+  <StoryWright
+    steps={new Steps()
+      .click('#load-content')
+      .wait('#full-content')
+      .wait(250) // let updatePosition finish
+      .snapshot('floating element width fills boundary and overflows 10px because of overflow:clip')
+      .end()}
+  >
+    <AutoSizeUpdatePosition />
+  </StoryWright>
+);
+
+AutoSizeWithAsyncContentResetStylesOnUpdatePosition.storyName =
+  'auto size with async content reset styles on updatePosition';
+
+export const _DisableTether = () => <DisableTether />;
+_DisableTether.storyName = 'disable tether';
+
+export const _PositionFixed = () => <PositionAndAlignProps positionFixed />;
+_PositionFixed.storyName = 'position fixed';
+
+export const _PositionFixedRTL = getStoryVariant(_PositionFixed, RTL);
+
+export const _VirtualElement = () => <VirtualElement />;
+_VirtualElement.storyName = 'virtual element';
+
+export const _ResetTarget = () => <ResetTarget />;
+_ResetTarget.storyName = 'reset target';
+
+export const TargetProperty = () => <TargetProp />;
+TargetProperty.storyName = 'target property';
+
+export const _ImperativeTarget = () => <ImperativeTarget />;
+_ImperativeTarget.storyName = 'imperative target';
+
+export const _VisibilityModifiers = () => (
+  <StoryWright
+    steps={new Steps()
+      .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries')
+      .executeScript('document.querySelector("#scrollable-area").scrollTop = 80')
+      .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`)
+      .executeScript('document.querySelector("#scrollable-area").scrollTop = 150')
+      .snapshot('has "[data-popper-reference-hidden]" when the reference is hidden')
+      .end()}
+  >
+    <VisibilityModifiers />
+  </StoryWright>
+);
+_VisibilityModifiers.storyName = 'visibility modifiers';
+
+export const _Arrow = () => <Arrow />;
+_Arrow.storyName = 'arrow';
+
+export const ArrowRTL = getStoryVariant(_Arrow, RTL);
+
+export const _FallbackPositioning = () => <FallbackPositioning />;
+_FallbackPositioning.storyName = 'fallback positioning';
+
+export const DisableCssTransform = () => <PositionAndAlignProps useTransform={false} />;
+DisableCssTransform.storyName = 'disable CSS transform';
+
+export const DisableCssTransformRTL = getStoryVariant(DisableCssTransform, RTL);
+
+export const DisableCssTransformWithPositionFixed = () => <PositionAndAlignProps positionFixed useTransform={false} />;
+DisableCssTransformWithPositionFixed.storyName = 'disable CSS transform with position fixed';
+
+export const DisableCssTransformWithPositionFixedRTL = getStoryVariant(DisableCssTransformWithPositionFixed, RTL);
+
+export const MultipleScrollParents = () => (
+  <StoryWright steps={new Steps().click('#scroll').snapshot('container attached to target').end()}>
+    <MultiScrollParent />
+  </StoryWright>
+);
+MultipleScrollParents.storyName = 'Multiple scroll parents';
+
+export const _MatchTargetSize = () => <MatchTargetSize />;
+_MatchTargetSize.storyName = 'Match target size';
+
+export const PositioningEnd = () => (
+  <StoryWright steps={new Steps().click('#target').snapshot('updated 2 times').end()}>
+    <PositioningEndEvent />
+  </StoryWright>
+);
+PositioningEnd.storyName = 'Positioning end';
+
+export const _TargetDisplayNone = () => (
+  <StoryWright steps={new Steps().click('#target').snapshot('target display: none').end()}>
+    <TargetDisplayNone />
+  </StoryWright>
+);
+_TargetDisplayNone.storyName = 'Target display none';
diff --git a/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx
new file mode 100644
index 0000000000000..0389813eb7253
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx
@@ -0,0 +1,319 @@
+import * as React from 'react';
+import { usePositioning } from '@fluentui/react-positioning';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import * as ReactDOM from 'react-dom';
+import { Steps, StoryWright } from 'storywright';
+
+import { Box } from './utils';
+
+const ScrollJump: React.FC = () => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open && buttonRef.current) {
+      const scrollY = window.scrollY;
+      buttonRef.current.focus();
+
+      setTimeout(() => {
+        const element = document.querySelector<HTMLElement>(
+          scrollY === window.scrollY ? '#test-passed' : '#test-failed',
+        );
+
+        if (element) {
+          element.style.setProperty('display', 'block');
+          element.setAttribute('id', 'test-completed');
+        }
+      }, 500);
+    }
+  }, [open]);
+
+  const { containerRef, targetRef } = usePositioning({
+    position: 'above',
+    align: 'start',
+  });
+
+  const floating = ReactDOM.createPortal(
+    <Box ref={containerRef}>
+      Focusable element <button ref={buttonRef}>Focus me</button>
+    </Box>,
+    document.body,
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          top: 10,
+          left: 100,
+          right: 100,
+
+          background: 'white',
+        }}
+      >
+        <p style={{ fontWeight: 20, border: '8px dotted magenta', padding: 10, margin: 0 }}>
+          This example simulates a scroll jump on autofocus when opening a floating element. The example uses a layout
+          effect to focus on the content of the floating box before usePopper is called. This results in the focus
+          executing before the layout effect to position the floating is executed. The scroll jump is fixed internally
+          in usePositioning by using position: fixed on the floating element before it is first positioned.
+        </p>
+        <div
+          id="test-failed"
+          style={{
+            border: '8px dotted magenta',
+            borderTop: 'none',
+            padding: 10,
+            fontSize: 20,
+            color: 'red',
+            display: 'none',
+          }}
+        >
+          Test failed, scroll jump occurred 💥
+        </div>
+        <div
+          id="test-passed"
+          style={{
+            border: '8px dotted magenta',
+            borderTop: 'none',
+            padding: 10,
+            fontSize: 20,
+            color: 'green',
+            display: 'none',
+          }}
+        >
+          Test passed ✅
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          background: 'repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px)',
+        }}
+      >
+        <div style={{ background: 'white', border: '4px dotted green', margin: 10 }}>
+          <div
+            style={{
+              display: 'flex',
+
+              background:
+                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
+              margin: 30,
+              height: '100vh',
+            }}
+          />
+
+          <div style={{ border: '4px dotted black', padding: 10, margin: 100 }}>
+            <button id="target" ref={targetRef} onClick={() => setOpen(s => !s)}>
+              Target
+            </button>
+          </div>
+
+          <div
+            style={{
+              display: 'flex',
+
+              background:
+                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
+              margin: 30,
+              height: '100vh',
+            }}
+          />
+
+          {open && floating}
+        </div>
+      </div>
+    </>
+  );
+};
+
+//
+//
+//
+
+const Context = createContext<
+  | {
+      containerRef: React.RefObject<HTMLDivElement>;
+      targetRef: React.RefObject<HTMLDivElement>;
+      open: boolean;
+      setOpen: (open: boolean) => void;
+    }
+  | undefined
+>(undefined);
+
+const Controller: React.FC<React.PropsWithChildren<{}>> = props => {
+  const [open, setOpen] = React.useState(false);
+  const children = React.Children.toArray(props.children);
+
+  const { containerRef, targetRef } = usePositioning({
+    position: 'above',
+    align: 'center',
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      const scrollY = window.scrollY;
+      const button = containerRef.current?.querySelector('button');
+
+      button.focus();
+
+      setTimeout(() => {
+        const element = document.querySelector<HTMLElement>(
+          scrollY === window.scrollY ? '#test-passed' : '#test-failed',
+        );
+
+        if (element) {
+          element.style.setProperty('display', 'block');
+          element.setAttribute('id', 'test-completed');
+        }
+      }, 500);
+    }
+  }, [containerRef, open]);
+
+  return (
+    <Context.Provider value={{ setOpen, containerRef, targetRef, open }}>
+      {children[0]}
+      {open && children[1]}
+    </Context.Provider>
+  );
+};
+
+const Target: React.FC = props => {
+  const open = useContextSelector(Context, v => v!.open);
+  const setOpen = useContextSelector(Context, v => v!.setOpen);
+  const targetRef = useContextSelector(Context, v => v!.targetRef);
+
+  return React.cloneElement(props.children as React.ReactElement, {
+    'aria-expanded': `${open}`,
+    onClick: () => setOpen(true),
+    ref: targetRef,
+  });
+};
+
+const Container: React.FC = props => {
+  const containerRef = useContextSelector(Context, v => v!.containerRef);
+
+  return ReactDOM.createPortal(
+    <div style={{ position: 'absolute', left: 0, top: 0, right: 0, zIndex: 1000 }}>
+      <div ref={containerRef} style={{ background: 'white', padding: 20, border: '5px solid blue' }}>
+        {props.children}
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+const ScrollJumpContext = () => {
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          top: 10,
+          left: 100,
+          right: 100,
+
+          background: 'white',
+        }}
+      >
+        <p style={{ fontWeight: 20, border: '8px dotted magenta', padding: 10, margin: 0 }}>
+          This example simulates a scroll jump on autofocus when opening a floating element. The example uses a layout
+          effect to focus on the content of the floating box before usePopper is called. This results in the focus
+          executing before the layout effect to position the floating is executed. The scroll jump is fixed internally
+          in usePositioning by using position: fixed on the floating element before it is first positioned.
+        </p>
+        <div
+          id="test-failed"
+          style={{
+            border: '8px dotted magenta',
+            borderTop: 'none',
+            padding: 10,
+            fontSize: 20,
+            color: 'red',
+            display: 'none',
+          }}
+        >
+          Test failed, scroll jump occurred 💥
+        </div>
+        <div
+          id="test-passed"
+          style={{
+            border: '8px dotted magenta',
+            borderTop: 'none',
+            padding: 10,
+            fontSize: 20,
+            color: 'green',
+            display: 'none',
+          }}
+        >
+          Test passed ✅
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          background: 'repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px)',
+        }}
+      >
+        <div style={{ background: 'white', border: '4px dotted green', margin: 10, padding: 40 }}>
+          <div
+            style={{
+              display: 'flex',
+
+              background:
+                'repeating-linear-gradient(135deg, transparent, transparent 15px, #0f6cbd 10px, #0f6cbd 20px)',
+              margin: 30,
+              height: '100vh',
+            }}
+          />
+
+          <Controller>
+            <Target>
+              <button id="target">Popover trigger</button>
+            </Target>
+
+            <Container>
+              <button>Action</button>
+            </Container>
+          </Controller>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'Positioning (no decorator)',
+};
+
+export const ScrollJumpUsage = () => (
+  <StoryWright
+    steps={new Steps()
+      .focus('#target')
+      .click('#target')
+      .wait('#test-completed')
+      .snapshot('positions without scroll jump')
+      .end()}
+  >
+    <ScrollJump />
+  </StoryWright>
+);
+ScrollJumpUsage.storyName = 'scroll jumps';
+
+export const ScrollJumpsWithContextUsage = () => (
+  <StoryWright
+    steps={new Steps()
+      .focus('#target')
+      .click('#target')
+      .wait('#test-completed')
+      .snapshot('positions without scroll jump')
+      .end()}
+  >
+    <ScrollJumpContext />
+  </StoryWright>
+);
+ScrollJumpsWithContextUsage.storyName = 'scroll jumps (with context usage)';
diff --git a/apps/vr-tests-react-components/src/stories/Positioning/utils.tsx b/apps/vr-tests-react-components/src/stories/Positioning/utils.tsx
new file mode 100644
index 0000000000000..98f122b081fab
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Positioning/utils.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { createArrowStyles } from '@fluentui/react-positioning';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+
+export const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    ...shorthands.gap('5px'),
+    backgroundColor: tokens.colorNeutralBackground1,
+
+    '& .target': {
+      color: tokens.colorNeutralForeground1,
+      backgroundColor: tokens.colorNeutralBackground1,
+      ...shorthands.border('2px', 'dashed', 'green'),
+      width: '400px',
+      height: '200px',
+    },
+  },
+
+  gridWrapper: {
+    width: '400px',
+    height: '400px',
+    display: 'grid',
+    gridTemplateColumns: 'auto auto auto',
+    columnGap: '20px',
+    rowGap: '50px',
+  },
+
+  boundary: {
+    ...shorthands.border('2px', 'dashed', 'red'),
+  },
+
+  box: {
+    ...shorthands.padding('15px'),
+    ...shorthands.border('1px', 'solid', 'blue'),
+    backgroundColor: 'white',
+  },
+  boxBold: {
+    ...shorthands.borderWidth('3px'),
+  },
+
+  arrow: {
+    ...createArrowStyles({
+      arrowHeight: 12,
+      borderStyle: 'solid',
+      borderColor: 'blue',
+      borderWidth: '3px',
+    }),
+  },
+
+  seeThrough: {
+    opacity: 0.6,
+  },
+
+  visibilityModifiers: {
+    backgroundColor: '#ccc',
+    minHeight: '60px',
+    width: '200px',
+
+    '[data-popper-reference-hidden]': {
+      outlineWidth: '5px',
+      outlineStyle: 'solid',
+      outlineColor: 'red',
+    },
+    '[data-popper-escaped]': {
+      backgroundColor: 'yellow',
+    },
+    '[data-popper-is-intersecting]': {
+      outlineWidth: '5px',
+      outlineStyle: 'solid',
+      outlineColor: 'green',
+    },
+  },
+});
+
+export const positions = [
+  ['above', 'start'],
+  ['above', 'center'],
+  ['above', 'end'],
+  ['below', 'start'],
+  ['below', 'center'],
+  ['below', 'end'],
+  ['before', 'top'],
+  ['before', 'center'],
+  ['before', 'bottom'],
+  ['after', 'top'],
+  ['after', 'center'],
+  ['after', 'bottom'],
+] as const;
+
+export const Box = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => {
+  const styles = useStyles();
+  return (
+    <div {...props} className={mergeClasses(styles.box, props.className)} ref={ref}>
+      {props.children}
+    </div>
+  );
+});
diff --git a/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
deleted file mode 100644
index bb430a79932ea..0000000000000
--- a/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import { PresenceBadge } from '@fluentui/react-badge';
-import { tokens } from '@fluentui/react-theme';
-import { Steps, StoryWright } from 'storywright';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-
-const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const;
-const sizes = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as const;
-
-storiesOf('PresenceBadge Converged - status', module).addStory(
-  'default',
-  () => (
-    <div style={{ display: 'flex', gap: 10 }}>
-      {statuses.map(status => (
-        <PresenceBadge status={status} key={status} />
-      ))}
-    </div>
-  ),
-  { includeRtl: true },
-);
-
-storiesOf('PresenceBadge Converged - OOF status', module).addStory(
-  'default',
-  () => (
-    <div style={{ display: 'flex', gap: 10 }}>
-      {statuses.map(status => (
-        <PresenceBadge status={status} key={status} outOfOffice />
-      ))}
-    </div>
-  ),
-  { includeRtl: true },
-);
-
-storiesOf('PresenceBadge Converged - sizes', module).addStory(
-  'default',
-  () => (
-    <div style={{ display: 'flex', gap: 10 }}>
-      {sizes.map(size => (
-        <PresenceBadge status="available" key={size} size={size} />
-      ))}
-    </div>
-  ),
-  { includeRtl: true },
-);
-
-storiesOf('PresenceBadge Converged - inverted background', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'default',
-    () => (
-      <div
-        style={{
-          display: 'inline-grid',
-          gridTemplateColumns: `repeat(${2 * statuses.length}, auto)`,
-          placeItems: 'start',
-          gap: '10px',
-          padding: '16px',
-          backgroundColor: tokens.colorNeutralBackgroundInverted,
-        }}
-      >
-        {sizes.map(size => (
-          <>
-            {statuses.map(status => (
-              <PresenceBadge key={size + status} size={size} status={status} />
-            ))}
-            {statuses.map(status => (
-              <PresenceBadge key={size + status + 'OOO'} size={size} status={status} outOfOffice />
-            ))}
-          </>
-        ))}
-      </div>
-    ),
-    { includeHighContrast: true, includeDarkMode: true },
-  );
diff --git a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx
new file mode 100644
index 0000000000000..33d340d87510f
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { tokens } from '@fluentui/react-theme';
+import { Steps } from 'storywright';
+import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, HIGH_CONTRAST, DARK_MODE } from '../../utilities';
+
+const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const;
+const sizes = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as const;
+
+export default {
+  title: 'PresenceBadge Converged - inverted background',
+  decorators: [
+    TestWrapperDecorator,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof PresenceBadge>;
+
+export const Default = () => (
+  <div
+    style={{
+      display: 'inline-grid',
+      gridTemplateColumns: `repeat(${2 * statuses.length}, auto)`,
+      placeItems: 'start',
+      gap: '10px',
+      padding: '16px',
+      backgroundColor: tokens.colorNeutralBackgroundInverted,
+    }}
+  >
+    {sizes.map(size => (
+      <>
+        {statuses.map(status => (
+          <PresenceBadge key={size + status} size={size} status={status} />
+        ))}
+        {statuses.map(status => (
+          <PresenceBadge key={size + status + 'OOO'} size={size} status={status} outOfOffice />
+        ))}
+      </>
+    ))}
+  </div>
+);
+Default.storyName = 'default';
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeOOF.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeOOF.stories.tsx
new file mode 100644
index 0000000000000..1f474321aed8a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeOOF.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { getStoryVariant, RTL } from '../../utilities';
+
+const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const;
+
+export default {
+  title: 'PresenceBadge Converged - OOF status',
+} satisfies Meta<typeof PresenceBadge>;
+
+export const Default = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    {statuses.map(status => (
+      <PresenceBadge status={status} key={status} outOfOffice />
+    ))}
+  </div>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeSizes.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeSizes.stories.tsx
new file mode 100644
index 0000000000000..0dd8e73dcee95
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeSizes.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { getStoryVariant, RTL } from '../../utilities';
+
+const sizes = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as const;
+
+export default {
+  title: 'PresenceBadge Converged - sizes',
+} satisfies Meta<typeof PresenceBadge>;
+
+export const Default = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    {sizes.map(size => (
+      <PresenceBadge status="available" key={size} size={size} />
+    ))}
+  </div>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeStatus.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeStatus.stories.tsx
new file mode 100644
index 0000000000000..76f3e50af0a9d
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeStatus.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { getStoryVariant, RTL } from '../../utilities';
+
+const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const;
+
+export default {
+  title: 'PresenceBadge Converged - status',
+} satisfies Meta<typeof PresenceBadge>;
+
+export const Default = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    {statuses.map(status => (
+      <PresenceBadge status={status} key={status} />
+    ))}
+  </div>
+);
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx
index aab4a88526cb4..7c4730b57ef77 100644
--- a/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { ProgressBar } from '@fluentui/react-progress';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { StoryWright, Steps } from 'storywright';
+import { Steps } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
+import {
+  getStoryVariant,
+  withStoryWrightSteps,
+  TestWrapperDecoratorFixedWidth,
+  DARK_MODE,
+  HIGH_CONTRAST,
+  RTL,
+} from '../utilities';
+
 const useStyles = makeStyles({
   paused: {
     '& *': {
@@ -14,39 +22,45 @@ const useStyles = makeStyles({
   },
 });
 
-storiesOf('ProgressBar converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'Indeterminate + thickness',
-    () => (
-      <div className={useStyles().paused} style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
-        <ProgressBar />
-        <ProgressBar thickness="large" />
-      </div>
-    ),
-    {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Determinate + thickness',
-    () => (
-      <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
-        <ProgressBar value={0.5} />
-        <ProgressBar value={0.5} thickness="large" />
-      </div>
-    ),
-    {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    },
-  )
-  .addStory('Error', () => <ProgressBar value={0.5} color="error" />)
-  .addStory('Warning', () => <ProgressBar value={0.5} color="warning" />)
-  .addStory('Success', () => <ProgressBar value={1} color="success" />);
+export default {
+  title: 'ProgressBar converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof ProgressBar>;
+
+export const IndeterminateThickness = () => (
+  <div className={useStyles().paused} style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
+    <ProgressBar />
+    <ProgressBar thickness="large" />
+  </div>
+);
+IndeterminateThickness.storyName = 'Indeterminate + thickness';
+
+export const IndeterminateThicknessDarkMode = getStoryVariant(IndeterminateThickness, DARK_MODE);
+
+export const IndeterminateThicknessHighContrast = getStoryVariant(IndeterminateThickness, HIGH_CONTRAST);
+
+export const IndeterminateThicknessRTL = getStoryVariant(IndeterminateThickness, RTL);
+
+export const DeterminateThickness = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
+    <ProgressBar value={0.5} />
+    <ProgressBar value={0.5} thickness="large" />
+  </div>
+);
+DeterminateThickness.storyName = 'Determinate + thickness';
+
+export const DeterminateThicknessDarkMode = getStoryVariant(DeterminateThickness, DARK_MODE);
+
+export const DeterminateThicknessHighContrast = getStoryVariant(DeterminateThickness, HIGH_CONTRAST);
+
+export const DeterminateThicknessRTL = getStoryVariant(DeterminateThickness, RTL);
+
+export const Error = () => <ProgressBar value={0.5} color="error" />;
+
+export const Warning = () => <ProgressBar value={0.5} color="warning" />;
+
+export const Success = () => <ProgressBar value={1} color="success" />;
diff --git a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
deleted file mode 100644
index 4516e20e84bb1..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { AirplaneFilled } from '@fluentui/react-icons';
-import { Radio, RadioGroup } from '@fluentui/react-radio';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Radio Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('input')
-        .snapshot('active', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('unchecked', () => <Radio label="Unchecked" />, {
-    includeDarkMode: true,
-    includeHighContrast: true,
-  })
-  .addStory('checked', () => <Radio checked label="Checked" />, {
-    includeDarkMode: true,
-    includeHighContrast: true,
-  })
-  .addStory('disabled', () => <Radio disabled label="Disabled" />, {
-    includeDarkMode: true,
-    includeHighContrast: true,
-  })
-  .addStory('indicator+checked', () => <Radio checked indicator={<AirplaneFilled />} label="Custom indicator" />);
-
-storiesOf('Radio Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('disabled+checked', () => <Radio disabled checked label="Disabled checked" />, {
-    includeDarkMode: true,
-    includeHighContrast: true,
-  })
-  .addStory('indicator+unchecked', () => <Radio indicator={<AirplaneFilled />} label="Custom indicator" />)
-  .addStory('no-label', () => <Radio />, { includeRtl: true })
-  .addStory('label-after', () => <Radio labelPosition="after" label="Label after" />, { includeRtl: true })
-  .addStory('label-below', () => <Radio labelPosition="below" label="Label below" />, { includeRtl: true })
-  .addStory(
-    'label-wrapping',
-    () => (
-      <Radio
-        label={
-          <>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua
-          </>
-        }
-      />
-    ),
-    { includeRtl: true },
-  )
-  .addStory('required', () => <Radio required label="Required" />, { includeRtl: true })
-  //
-  // RadioGroup
-  //
-  .addStory(
-    'group-vertical',
-    () => (
-      <RadioGroup defaultValue="A">
-        <Radio value="A" label="Option A" />
-        <Radio value="B" label="Option B" />
-        <Radio value="C" label="Option C" />
-      </RadioGroup>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'group-horizontal',
-    () => (
-      <RadioGroup value="A" layout="horizontal">
-        <Radio value="A" label="Option A" />
-        <Radio value="B" label="Option B" />
-        <Radio value="C" label="Option C" />
-      </RadioGroup>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'group-horizontal-stacked',
-    () => (
-      <RadioGroup layout="horizontal-stacked">
-        <Radio value="A" label="Option A" defaultChecked />
-        <Radio value="B" label="Option B" />
-        <Radio value="C" label="Option C" />
-      </RadioGroup>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'group-disabled',
-    () => (
-      <RadioGroup disabled value="A">
-        <Radio value="A" label="Option A" />
-        <Radio value="B" label="Option B" />
-        <Radio value="C" label="Option C" />
-      </RadioGroup>
-    ),
-    { includeRtl: true },
-  );
diff --git a/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx
new file mode 100644
index 0000000000000..4713c90e3d1b5
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { AirplaneFilled } from '@fluentui/react-icons';
+import { Radio, RadioGroup } from '@fluentui/react-radio';
+
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  RTL,
+  TestWrapperDecoratorFixedWidth,
+  withStoryWrightSteps,
+} from '../../utilities';
+
+export default {
+  title: 'Radio Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Radio>;
+
+export const DisabledChecked = () => <Radio disabled checked label="Disabled checked" />;
+DisabledChecked.storyName = 'disabled+checked';
+
+export const DisabledCheckedHighContrast = getStoryVariant(DisabledChecked, HIGH_CONTRAST);
+
+export const DisabledCheckedDarkMode = getStoryVariant(DisabledChecked, DARK_MODE);
+
+export const IndicatorUnchecked = () => <Radio indicator={<AirplaneFilled />} label="Custom indicator" />;
+IndicatorUnchecked.storyName = 'indicator+unchecked';
+
+export const NoLabel = () => <Radio />;
+NoLabel.storyName = 'no-label';
+
+export const NoLabelRTL = getStoryVariant(NoLabel, RTL);
+
+export const LabelAfter = () => <Radio labelPosition="after" label="Label after" />;
+LabelAfter.storyName = 'label-after';
+
+export const LabelAfterRTL = getStoryVariant(LabelAfter, RTL);
+
+export const LabelBelow = () => <Radio labelPosition="below" label="Label below" />;
+LabelBelow.storyName = 'label-below';
+
+export const LabelBelowRTL = getStoryVariant(LabelBelow, RTL);
+
+export const LabelWrapping = () => (
+  <Radio
+    label={
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua
+      </>
+    }
+  />
+);
+LabelWrapping.storyName = 'label-wrapping';
+
+export const LabelWrappingRTL = getStoryVariant(LabelWrapping, RTL);
+
+export const Required = () => <Radio required label="Required" />;
+Required.storyName = 'required';
+
+export const RequiredRTL = getStoryVariant(Required, RTL);
+
+export const GroupVertical = () => (
+  <RadioGroup defaultValue="A">
+    <Radio value="A" label="Option A" />
+    <Radio value="B" label="Option B" />
+    <Radio value="C" label="Option C" />
+  </RadioGroup>
+);
+GroupVertical.storyName = 'group-vertical';
+
+export const GroupVerticalRTL = getStoryVariant(GroupVertical, RTL);
+
+export const GroupHorizontal = () => (
+  <RadioGroup value="A" layout="horizontal">
+    <Radio value="A" label="Option A" />
+    <Radio value="B" label="Option B" />
+    <Radio value="C" label="Option C" />
+  </RadioGroup>
+);
+GroupHorizontal.storyName = 'group-horizontal';
+
+export const GroupHorizontalRTL = getStoryVariant(GroupHorizontal, RTL);
+
+export const GroupHorizontalStacked = () => (
+  <RadioGroup layout="horizontal-stacked">
+    <Radio value="A" label="Option A" defaultChecked />
+    <Radio value="B" label="Option B" />
+    <Radio value="C" label="Option C" />
+  </RadioGroup>
+);
+GroupHorizontalStacked.storyName = 'group-horizontal-stacked';
+
+export const GroupHorizontalStackedRTL = getStoryVariant(GroupHorizontalStacked, RTL);
+
+export const GroupDisabled = () => (
+  <RadioGroup disabled value="A">
+    <Radio value="A" label="Option A" />
+    <Radio value="B" label="Option B" />
+    <Radio value="C" label="Option C" />
+  </RadioGroup>
+);
+GroupDisabled.storyName = 'group-disabled';
+
+export const GroupDisabledRTL = getStoryVariant(GroupDisabled, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx
new file mode 100644
index 0000000000000..2d1c0b7f386aa
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { AirplaneFilled } from '@fluentui/react-icons';
+import { Radio } from '@fluentui/react-radio';
+
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  TestWrapperDecoratorFixedWidth,
+  withStoryWrightSteps,
+} from '../../utilities';
+
+export default {
+  title: 'Radio Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('rest', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('input')
+          .snapshot('active', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Radio>;
+
+export const Unchecked = () => <Radio label="Unchecked" />;
+Unchecked.storyName = 'unchecked';
+
+export const UncheckedHighContrast = getStoryVariant(Unchecked, HIGH_CONTRAST);
+
+export const UncheckedDarkMode = getStoryVariant(Unchecked, DARK_MODE);
+
+export const Checked = () => <Radio checked label="Checked" />;
+Checked.storyName = 'checked';
+
+export const CheckedHighContrast = getStoryVariant(Checked, HIGH_CONTRAST);
+
+export const CheckedDarkMode = getStoryVariant(Checked, DARK_MODE);
+
+export const Disabled = () => <Radio disabled label="Disabled" />;
+Disabled.storyName = 'disabled';
+
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const IndicatorChecked = () => <Radio checked indicator={<AirplaneFilled />} label="Custom indicator" />;
+IndicatorChecked.storyName = 'indicator+checked';
diff --git a/apps/vr-tests-react-components/src/stories/Rating.stories.tsx b/apps/vr-tests-react-components/src/stories/Rating.stories.tsx
deleted file mode 100644
index c60e402d11c56..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Rating.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { CircleRegular, CircleFilled, SquareRegular, SquareFilled } from '@fluentui/react-icons';
-import { Rating } from '@fluentui/react-rating';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Rating Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Neutral Rating with half star', () => <Rating defaultValue={3.5} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Brand Rating with half star', () => <Rating color="brand" defaultValue={3.5} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Marigold Rating with half star', () => <Rating color="marigold" defaultValue={3.5} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-
-storiesOf('Rating Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Rating size small', () => <Rating size="small" />, {})
-  .addStory('Rating size medium', () => <Rating size="medium" />, {})
-  .addStory('Rating size large', () => <Rating size="large" />, {})
-  .addStory('Rating size extra-large', () => <Rating size="extra-large" />, {});
-
-storiesOf('Rating Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'Rating with custom circle icons',
-    () => <Rating iconFilled={CircleFilled} iconOutline={CircleRegular} defaultValue={3.5} />,
-    {},
-  )
-  .addStory(
-    'Rating with custom square icons',
-    () => <Rating iconFilled={SquareFilled} iconOutline={SquareRegular} defaultValue={3.5} />,
-    {},
-  );
diff --git a/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx b/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx
new file mode 100644
index 0000000000000..e6679a392ca0b
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { CircleRegular, CircleFilled, SquareRegular, SquareFilled } from '@fluentui/react-icons';
+import { Rating } from '@fluentui/react-rating';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Rating Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Rating>;
+
+export const RatingSizeSmall = () => <Rating size="small" />;
+RatingSizeSmall.storyName = 'Rating size small';
+
+export const RatingSizeMedium = () => <Rating size="medium" />;
+RatingSizeMedium.storyName = 'Rating size medium';
+
+export const RatingSizeLarge = () => <Rating size="large" />;
+RatingSizeLarge.storyName = 'Rating size large';
+
+export const RatingSizeExtraLarge = () => <Rating size="extra-large" />;
+RatingSizeExtraLarge.storyName = 'Rating size extra-large';
+
+export const RatingWithCustomCircleIcons = () => (
+  <Rating iconFilled={CircleFilled} iconOutline={CircleRegular} defaultValue={3.5} />
+);
+RatingWithCustomCircleIcons.storyName = 'Rating with custom circle icons';
+
+export const RatingWithCustomSquareIcons = () => (
+  <Rating iconFilled={SquareFilled} iconOutline={SquareRegular} defaultValue={3.5} />
+);
+RatingWithCustomSquareIcons.storyName = 'Rating with custom square icons';
diff --git a/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx
new file mode 100644
index 0000000000000..72b8fb7d634da
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Rating } from '@fluentui/react-rating';
+
+import {
+  getStoryVariant,
+  withStoryWrightSteps,
+  TestWrapperDecoratorFixedWidth,
+  HIGH_CONTRAST,
+  DARK_MODE,
+} from '../../utilities';
+
+export default {
+  title: 'Rating Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('rest', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Rating>;
+
+export const NeutralRatingWithHalfStar = () => <Rating defaultValue={3.5} />;
+NeutralRatingWithHalfStar.storyName = 'Neutral Rating with half star';
+
+export const NeutralRatingWithHalfStartHighContrast = getStoryVariant(NeutralRatingWithHalfStar, HIGH_CONTRAST);
+
+export const NeutralRatingWithHalfStartDarkMode = getStoryVariant(NeutralRatingWithHalfStar, DARK_MODE);
+
+export const BrandRatingWithHalfStar = () => <Rating color="brand" defaultValue={3.5} />;
+BrandRatingWithHalfStar.storyName = 'Brand Rating with half star';
+
+export const BrandRatingWithHalfStarHighContrast = getStoryVariant(BrandRatingWithHalfStar, HIGH_CONTRAST);
+
+export const BrandRatingWithHalfStarDarkMode = getStoryVariant(BrandRatingWithHalfStar, DARK_MODE);
+
+export const MarigoldRatingWithHalfStar = () => <Rating color="marigold" defaultValue={3.5} />;
+MarigoldRatingWithHalfStar.storyName = 'Marigold Rating with half star';
+
+export const MarigoldRatingWithHalfStarHighContrast = getStoryVariant(MarigoldRatingWithHalfStar, HIGH_CONTRAST);
+
+export const MarigoldRatingWithHalfStarDarkMode = getStoryVariant(MarigoldRatingWithHalfStar, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx b/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx
index 4546d8161f71e..7d8d2cb085957 100644
--- a/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx
@@ -1,34 +1,70 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { CircleFilled, SquareFilled } from '@fluentui/react-icons';
 import { RatingDisplay } from '@fluentui/react-rating';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { Steps, StoryWright } from 'storywright';
-
-storiesOf('RatingDisplay Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('no value', () => <RatingDisplay />)
-  .addStory('size small with value and count', () => <RatingDisplay size="small" value={5} count={1160} />)
-  .addStory('size medium with value and count', () => <RatingDisplay size="medium" value={5} count={1160} />)
-  .addStory('size large with value and count', () => <RatingDisplay size="large" value={5} count={1160} />)
-  .addStory('size extra-large with value and count', () => <RatingDisplay size="extra-large" value={5} count={1160} />)
-  .addStory('custom circle icons', () => <RatingDisplay icon={CircleFilled} value={3} />)
-  .addStory('custom square icons', () => <RatingDisplay icon={SquareFilled} value={3} />)
-  .addStory('rounded up', () => <RatingDisplay value={3.8} />)
-  .addStory('rounded down', () => <RatingDisplay value={3.7} />)
-  .addStory('Neutral with half value', () => <RatingDisplay value={2.5} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Brand with half value', () => <RatingDisplay value={2.5} color="brand" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Marigold with half value', () => <RatingDisplay value={2.5} color="marigold" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Compact', () => <RatingDisplay compact value={3} />, {});
+import {
+  getStoryVariant,
+  withStoryWrightSteps,
+  TestWrapperDecoratorFixedWidth,
+  HIGH_CONTRAST,
+  DARK_MODE,
+} from '../utilities';
+import { Steps } from 'storywright';
+
+export default {
+  title: 'RatingDisplay Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof RatingDisplay>;
+
+export const NoValue = () => <RatingDisplay />;
+NoValue.storyName = 'no value';
+
+export const SizeSmallWithValueAndCount = () => <RatingDisplay size="small" value={5} count={1160} />;
+SizeSmallWithValueAndCount.storyName = 'size small with value and count';
+
+export const SizeMediumWithValueAndCount = () => <RatingDisplay size="medium" value={5} count={1160} />;
+SizeMediumWithValueAndCount.storyName = 'size medium with value and count';
+
+export const SizeLargeWithValueAndCount = () => <RatingDisplay size="large" value={5} count={1160} />;
+SizeLargeWithValueAndCount.storyName = 'size large with value and count';
+
+export const SizeExtraLargeWithValueAndCount = () => <RatingDisplay size="extra-large" value={5} count={1160} />;
+SizeExtraLargeWithValueAndCount.storyName = 'size extra-large with value and count';
+
+export const CustomCircleIcons = () => <RatingDisplay icon={CircleFilled} value={3} />;
+CustomCircleIcons.storyName = 'custom circle icons';
+
+export const CustomSquareIcons = () => <RatingDisplay icon={SquareFilled} value={3} />;
+CustomSquareIcons.storyName = 'custom square icons';
+
+export const RoundedUp = () => <RatingDisplay value={3.8} />;
+RoundedUp.storyName = 'rounded up';
+
+export const RoundedDown = () => <RatingDisplay value={3.7} />;
+RoundedDown.storyName = 'rounded down';
+
+export const NeutralWithHalfValue = () => <RatingDisplay value={2.5} />;
+NeutralWithHalfValue.storyName = 'Neutral with half value';
+
+export const NeutralWithHalfValueHighContrast = getStoryVariant(NeutralWithHalfValue, HIGH_CONTRAST);
+
+export const NeutralWithHalfValueDarkMode = getStoryVariant(NeutralWithHalfValue, DARK_MODE);
+
+export const BrandWithHalfValue = () => <RatingDisplay value={2.5} color="brand" />;
+BrandWithHalfValue.storyName = 'Brand with half value';
+
+export const BrandWithHalfValueHighContrast = getStoryVariant(BrandWithHalfValue, HIGH_CONTRAST);
+
+export const BrandWithHalfValueDarkMode = getStoryVariant(BrandWithHalfValue, DARK_MODE);
+
+export const MarigoldWithHalfValue = () => <RatingDisplay value={2.5} color="marigold" />;
+MarigoldWithHalfValue.storyName = 'Marigold with half value';
+
+export const MarigoldWithHalfValueHighContrast = getStoryVariant(MarigoldWithHalfValue, HIGH_CONTRAST);
+
+export const MarigoldWithHalfValueDarkMode = getStoryVariant(MarigoldWithHalfValue, DARK_MODE);
+
+export const Compact = () => <RatingDisplay compact value={3} />;
diff --git a/apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx
deleted file mode 100644
index d86ca9d4d7d54..0000000000000
--- a/apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { SearchBox } from '@fluentui/react-search';
-import { ArrowEnterLeftRegular, MicRegular } from '@fluentui/react-icons';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-
-// Focused & unfocused stories
-storiesOf('SearchBox Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .click('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .click('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('With value', () => <SearchBox defaultValue="Value!" />)
-  .addStory('Appearance: outline (default)', () => <SearchBox placeholder="Placeholder" />)
-  .addStory('Appearance: underline', () => <SearchBox appearance="underline" placeholder="Placeholder" />)
-  .addStory('Appearance: filled-darker', () => <SearchBox appearance="filled-darker" placeholder="Placeholder" />)
-  .addStory('Appearance: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <SearchBox appearance="filled-lighter" placeholder="Placeholder" />
-    </div>
-  ))
-  .addStory('Size: small', () => <SearchBox size="small" placeholder="Placeholder" />)
-  .addStory('Size: large', () => <SearchBox size="large" placeholder="Placeholder" />)
-  .addStory('Disabled, appearance: outline', () => <SearchBox disabled value="Disabled" />)
-  .addStory('Disabled, appearance: underline', () => <SearchBox disabled appearance="underline" value="Disabled" />)
-  .addStory('Disabled, appearance: filled-darker', () => (
-    <SearchBox disabled appearance="filled-darker" value="Disabled" />
-  ))
-  .addStory('Disabled, appearance: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <SearchBox disabled appearance="filled-lighter" value="Disabled" />
-    </div>
-  ))
-  .addStory('WIth contentAfter', () => <SearchBox contentAfter={<MicRegular />} placeholder="Placeholder" />, {
-    includeRtl: true,
-  })
-  .addStory('With custom dismiss', () => <SearchBox dismiss={<ArrowEnterLeftRegular />} placeholder="Placeholder" />, {
-    includeRtl: true,
-  });
-
-// Focused & unfocused stories
-storiesOf('SearchBox Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .keys('input', 'Tab')
-        .wait(250) // let focus border animation finish
-        .snapshot('input focused', { cropTo: '.testWrapper' })
-        .focus('[role=button]')
-        .snapshot('dismiss focused', { cropTo: '.testWrapper' })
-        .click('[role=button]')
-        .snapshot('dismiss clicked', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Clears value', () => <SearchBox defaultValue="Value!" />);
diff --git a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx
new file mode 100644
index 0000000000000..36bb7737b77bd
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { SearchBox } from '@fluentui/react-search';
+import { ArrowEnterLeftRegular, MicRegular } from '@fluentui/react-icons';
+
+import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, RTL } from '../../utilities';
+
+export default {
+  title: 'SearchBox Converged',
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .click('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .click('input')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof SearchBox>;
+
+export const WithValue = () => <SearchBox defaultValue="Value!" />;
+WithValue.storyName = 'With value';
+
+export const AppearanceOutlineDefault = () => <SearchBox placeholder="Placeholder" />;
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline = () => <SearchBox appearance="underline" placeholder="Placeholder" />;
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker = () => <SearchBox appearance="filled-darker" placeholder="Placeholder" />;
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <SearchBox appearance="filled-lighter" placeholder="Placeholder" />
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const SizeSmall = () => <SearchBox size="small" placeholder="Placeholder" />;
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge = () => <SearchBox size="large" placeholder="Placeholder" />;
+SizeLarge.storyName = 'Size: large';
+
+export const DisabledAppearanceOutline = () => <SearchBox disabled value="Disabled" />;
+DisabledAppearanceOutline.storyName = 'Disabled, appearance: outline';
+
+export const DisabledAppearanceUnderline = () => <SearchBox disabled appearance="underline" value="Disabled" />;
+DisabledAppearanceUnderline.storyName = 'Disabled, appearance: underline';
+
+export const DisabledAppearanceFilledDarker = () => <SearchBox disabled appearance="filled-darker" value="Disabled" />;
+DisabledAppearanceFilledDarker.storyName = 'Disabled, appearance: filled-darker';
+
+export const DisabledAppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <SearchBox disabled appearance="filled-lighter" value="Disabled" />
+  </div>
+);
+DisabledAppearanceFilledLighter.storyName = 'Disabled, appearance: filled-lighter';
+
+export const WIthContentAfter = () => <SearchBox contentAfter={<MicRegular />} placeholder="Placeholder" />;
+WIthContentAfter.storyName = 'WIth contentAfter';
+
+export const WIthContentAfterRTL = getStoryVariant(WIthContentAfter, RTL);
+
+export const WithCustomDismiss = () => <SearchBox dismiss={<ArrowEnterLeftRegular />} placeholder="Placeholder" />;
+WithCustomDismiss.storyName = 'With custom dismiss';
+
+export const WithCustomDismissRTL = getStoryVariant(WithCustomDismiss, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx
new file mode 100644
index 0000000000000..91ef2063598a3
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { SearchBox } from '@fluentui/react-search';
+
+import { withStoryWrightSteps, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'SearchBox Converged',
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .keys('input', 'Tab')
+          .wait(250) // let focus border animation finish
+          .snapshot('input focused', { cropTo: '.testWrapper' })
+          .focus('[role=button]')
+          .snapshot('dismiss focused', { cropTo: '.testWrapper' })
+          .click('[role=button]')
+          .snapshot('dismiss clicked', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof SearchBox>;
+
+export const ClearsValue = () => <SearchBox defaultValue="Value!" />;
+ClearsValue.storyName = 'Clears value';
diff --git a/apps/vr-tests-react-components/src/stories/Select.stories.tsx b/apps/vr-tests-react-components/src/stories/Select.stories.tsx
deleted file mode 100644
index fd53a7013f0d4..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Select.stories.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Select } from '@fluentui/react-select';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { FluentProvider } from '@fluentui/react-provider';
-
-storiesOf('Select Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('select')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .focus('select')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => (
-    <Select>
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Appearance: underline', () => (
-    <Select appearance="underline">
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Appearance: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Select appearance="filled-darker">
-        <option>text</option>
-      </Select>
-    </div>
-  ))
-  .addStory('Appearance: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Select appearance="filled-lighter">
-        <option>text</option>
-      </Select>
-    </div>
-  ))
-  .addStory('Invalid: outline', () => (
-    <Select aria-invalid>
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Invalid: underline', () => (
-    <Select aria-invalid appearance="underline">
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Invalid: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Select aria-invalid appearance="filled-darker">
-        <option>text</option>
-      </Select>
-    </div>
-  ))
-  .addStory('Invalid: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Select aria-invalid appearance="filled-lighter">
-        <option>text</option>
-      </Select>
-    </div>
-  ));
-
-// Non-interactive stories
-storiesOf('Select Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  // note: due to reused "Select Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('With value', () => (
-    <Select>
-      <option>Red</option>
-      <option selected>Green</option>
-      <option>Blue</option>
-    </Select>
-  ))
-  .addStory('Disabled', () => (
-    <Select disabled>
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Size: small', () => (
-    <Select size="small">
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Size: large', () => (
-    <Select size="large">
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('Custom Icon', () => (
-    <Select icon="+">
-      <option>text</option>
-    </Select>
-  ))
-  .addStory('With appearance override', () => (
-    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <Select>
-          <option>Default overriden appearance</option>
-        </Select>
-        <Select appearance="outline">
-          <option>Outline appearance</option>
-        </Select>
-      </div>
-    </FluentProvider>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx b/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx
new file mode 100644
index 0000000000000..cc9993c6a1ee5
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Select } from '@fluentui/react-select';
+import { FluentProvider } from '@fluentui/react-provider';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Select Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Select>;
+
+export const WithValue = () => (
+  <Select>
+    <option>Red</option>
+    <option selected>Green</option>
+    <option>Blue</option>
+  </Select>
+);
+WithValue.storyName = 'With value';
+
+export const Disabled = () => (
+  <Select disabled>
+    <option>text</option>
+  </Select>
+);
+
+export const SizeSmall = () => (
+  <Select size="small">
+    <option>text</option>
+  </Select>
+);
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge = () => (
+  <Select size="large">
+    <option>text</option>
+  </Select>
+);
+SizeLarge.storyName = 'Size: large';
+
+export const CustomIcon = () => (
+  <Select icon="+">
+    <option>text</option>
+  </Select>
+);
+
+export const WithAppearanceOverride = () => (
+  <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <Select>
+        <option>Default overriden appearance</option>
+      </Select>
+      <Select appearance="outline">
+        <option>Outline appearance</option>
+      </Select>
+    </div>
+  </FluentProvider>
+);
+WithAppearanceOverride.storyName = 'With appearance override';
diff --git a/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx
new file mode 100644
index 0000000000000..0626a5fe6d81a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Select } from '@fluentui/react-select';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Select Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('select')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .focus('select')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo: '.testWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Select>;
+
+export const AppearanceOutlineDefault = () => (
+  <Select>
+    <option>text</option>
+  </Select>
+);
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline = () => (
+  <Select appearance="underline">
+    <option>text</option>
+  </Select>
+);
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Select appearance="filled-darker">
+      <option>text</option>
+    </Select>
+  </div>
+);
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Select appearance="filled-lighter">
+      <option>text</option>
+    </Select>
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const InvalidOutline = () => (
+  <Select aria-invalid>
+    <option>text</option>
+  </Select>
+);
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidUnderline = () => (
+  <Select aria-invalid appearance="underline">
+    <option>text</option>
+  </Select>
+);
+InvalidUnderline.storyName = 'Invalid: underline';
+
+export const InvalidFilledDarker = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Select aria-invalid appearance="filled-darker">
+      <option>text</option>
+    </Select>
+  </div>
+);
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Select aria-invalid appearance="filled-lighter">
+      <option>text</option>
+    </Select>
+  </div>
+);
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
index fd8bf09295c41..2ac6ca52265ef 100644
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
@@ -36,6 +36,10 @@ const ComponentSet: React.FC = () => {
   );
 };
 
+export default {
+  title: 'Shadow DOM',
+};
+
 export const Default = () => (
   <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
     <ShadowRoot>
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
index 9e80f12a873a7..09e443803c516 100644
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
@@ -5,6 +5,10 @@ import * as React from 'react';
 import { ShadowRoot } from './utils';
 import { Steps, StoryWright } from 'storywright';
 
+export default {
+  title: 'Shadow DOM',
+};
+
 export const Portal: React.FC = () => (
   <StoryWright steps={new Steps().click('#toggle-menu').snapshot('normal', { cropTo: '.testWrapper' }).end()}>
     <ShadowRoot>
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/index.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/index.stories.tsx
deleted file mode 100644
index 196fca5acae20..0000000000000
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/index.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-
-export default {
-  title: 'Shadow DOM',
-} as ComponentMeta<'div'>;
-
-export { Default } from './ShadowDOMDefault.stories';
-export { Portal } from './ShadowDOMPortal.stories';
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/utils.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/utils.tsx
index cb23ac396553e..1db84cce2b853 100644
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/utils.tsx
@@ -3,7 +3,6 @@ import { RendererProvider } from '@griffel/react';
 import { PortalMountNodeProvider } from '@fluentui/react-shared-contexts';
 import { createProxy, Root } from 'react-shadow';
 import * as React from 'react';
-
 const ShadowRootProvider: React.FC<{
   children: React.ReactNode;
   root: ShadowRoot;
diff --git a/apps/vr-tests-react-components/src/stories/Skeleton.stories.tsx b/apps/vr-tests-react-components/src/stories/Skeleton.stories.tsx
index 578fd44591dd2..5a2a3460610a0 100644
--- a/apps/vr-tests-react-components/src/stories/Skeleton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Skeleton.stories.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Skeleton, SkeletonItem } from '@fluentui/react-skeleton';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { Steps, StoryWright } from 'storywright';
+import { Steps } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
+import {
+  getStoryVariant,
+  withStoryWrightSteps,
+  TestWrapperDecoratorFixedWidth,
+  HIGH_CONTRAST,
+  DARK_MODE,
+  RTL,
+} from '../utilities';
+
 const useStyles = makeStyles({
   paused: {
     '& *': {
@@ -14,83 +22,87 @@ const useStyles = makeStyles({
   },
 });
 
-storiesOf('Skeleton converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory(
-    'Opaque Skeleton with rectangle',
-    () => (
-      <Skeleton className={useStyles().paused}>
-        <SkeletonItem style={{ width: '96px' }} />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Opaque Skeleton with circle',
-    () => (
-      <Skeleton className={useStyles().paused}>
-        <SkeletonItem shape="circle" />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Opaque Skeleton with square',
-    () => (
-      <Skeleton className={useStyles().paused}>
-        <SkeletonItem shape="square" />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Translucent Skeleton with rectangle',
-    () => (
-      <Skeleton className={useStyles().paused} appearance="translucent">
-        <SkeletonItem style={{ width: '96px' }} />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Translucent Skeleton with circle',
-    () => (
-      <Skeleton className={useStyles().paused} appearance="translucent">
-        <SkeletonItem shape="circle" />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Translucent Skeleton with square',
-    () => (
-      <Skeleton className={useStyles().paused} appearance="translucent">
-        <SkeletonItem shape="square" />
-      </Skeleton>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  );
+export default {
+  title: 'Skeleton converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Skeleton>;
+
+export const OpaqueSkeletonWithRectangle = () => (
+  <Skeleton className={useStyles().paused}>
+    <SkeletonItem style={{ width: '96px' }} />
+  </Skeleton>
+);
+OpaqueSkeletonWithRectangle.storyName = 'Opaque Skeleton with rectangle';
+
+export const OpaqueSkeletonWithRectangleHighContrast = getStoryVariant(OpaqueSkeletonWithRectangle, HIGH_CONTRAST);
+
+export const OpaqueSkeletonWithRectangleDarkMode = getStoryVariant(OpaqueSkeletonWithRectangle, DARK_MODE);
+
+export const OpaqueSkeletonWithRectangleRTL = getStoryVariant(OpaqueSkeletonWithRectangle, RTL);
+
+export const OpaqueSkeletonWithCircle = () => (
+  <Skeleton className={useStyles().paused}>
+    <SkeletonItem shape="circle" />
+  </Skeleton>
+);
+OpaqueSkeletonWithCircle.storyName = 'Opaque Skeleton with circle';
+
+export const OpaqueSkeletonWithCircleHighContrast = getStoryVariant(OpaqueSkeletonWithCircle, HIGH_CONTRAST);
+
+export const OpaqueSkeletonWithCircleDarkMode = getStoryVariant(OpaqueSkeletonWithCircle, DARK_MODE);
+
+export const OpaqueSkeletonWithCircleRTL = getStoryVariant(OpaqueSkeletonWithCircle, RTL);
+
+export const OpaqueSkeletonWithSquare = () => (
+  <Skeleton className={useStyles().paused}>
+    <SkeletonItem shape="square" />
+  </Skeleton>
+);
+OpaqueSkeletonWithSquare.storyName = 'Opaque Skeleton with square';
+
+export const OpaqueSkeletonWithSquareHighContrast = getStoryVariant(OpaqueSkeletonWithSquare, HIGH_CONTRAST);
+
+export const OpaqueSkeletonWithSquareDarkMode = getStoryVariant(OpaqueSkeletonWithSquare, DARK_MODE);
+
+export const OpaqueSkeletonWithSquareRTL = getStoryVariant(OpaqueSkeletonWithSquare, RTL);
+
+export const TranslucentSkeletonWithRectangle = () => (
+  <Skeleton className={useStyles().paused} appearance="translucent">
+    <SkeletonItem style={{ width: '96px' }} />
+  </Skeleton>
+);
+TranslucentSkeletonWithRectangle.storyName = 'Translucent Skeleton with rectangle';
+
+export const TranslucentSkeletonWithRectangleHighContrast = getStoryVariant(
+  TranslucentSkeletonWithRectangle,
+  HIGH_CONTRAST,
+);
+
+export const TranslucentSkeletonWithRectangleDarkMode = getStoryVariant(TranslucentSkeletonWithRectangle, DARK_MODE);
+
+export const TranslucentSkeletonWithCircle = () => (
+  <Skeleton className={useStyles().paused} appearance="translucent">
+    <SkeletonItem shape="circle" />
+  </Skeleton>
+);
+
+TranslucentSkeletonWithCircle.storyName = 'Translucent Skeleton with circle';
+
+export const TranslucentSkeletonWithCircleHighContrast = getStoryVariant(TranslucentSkeletonWithCircle, HIGH_CONTRAST);
+
+export const TranslucentSkeletonWithCircleDarkMode = getStoryVariant(TranslucentSkeletonWithCircle, DARK_MODE);
+
+export const TranslucentSkeletonWithSquare = () => (
+  <Skeleton className={useStyles().paused} appearance="translucent">
+    <SkeletonItem shape="square" />
+  </Skeleton>
+);
+TranslucentSkeletonWithSquare.storyName = 'Translucent Skeleton with square';
+
+export const TranslucentSkeletonWithSquareHighContrast = getStoryVariant(TranslucentSkeletonWithSquare, HIGH_CONTRAST);
+
+export const TranslucentSkeletonWithSquareDarkMode = getStoryVariant(TranslucentSkeletonWithSquare, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx b/apps/vr-tests-react-components/src/stories/Slider.stories.tsx
deleted file mode 100644
index 4504d844b9a6b..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Slider } from '@fluentui/react-slider';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Slider Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.test-class')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.test-class')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.test-class')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Root', () => <Slider className="test-class" defaultValue={30} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Vertical', () => <Slider className="test-class" vertical defaultValue={30} />, {
-    includeRtl: true,
-  })
-  .addStory('Disabled', () => <Slider className="test-class" disabled defaultValue={30} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Disabled Vertical', () => <Slider className="test-class" disabled vertical defaultValue={30} />);
-
-storiesOf('Slider Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Horizontal - 0%', () => <Slider defaultValue={0} />, { includeRtl: true })
-  .addStory('Horizontal - 100%', () => <Slider defaultValue={100} />, { includeRtl: true })
-  .addStory('Vertical - 0%', () => <Slider vertical defaultValue={0} />, { includeRtl: true })
-  .addStory('Vertical - 100%', () => <Slider vertical defaultValue={100} />, { includeRtl: true });
diff --git a/apps/vr-tests-react-components/src/stories/Slider/Slider.stories.tsx b/apps/vr-tests-react-components/src/stories/Slider/Slider.stories.tsx
new file mode 100644
index 0000000000000..477085a483d36
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Slider/Slider.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Slider } from '@fluentui/react-slider';
+import { getStoryVariant, RTL, TestWrapperDecorator, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Slider Converged',
+  decorators: [
+    TestWrapperDecorator,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export const Horizontal0 = () => <Slider defaultValue={0} />;
+Horizontal0.storyName = 'Horizontal - 0%';
+
+export const Horizontal0RTL = getStoryVariant(Horizontal0, RTL);
+
+export const Horizontal100 = () => <Slider defaultValue={100} />;
+Horizontal100.storyName = 'Horizontal - 100%';
+
+export const Horizontal100RTL = getStoryVariant(Horizontal100, RTL);
+
+export const Vertical0 = () => <Slider vertical defaultValue={0} />;
+Vertical0.storyName = 'Vertical - 0%';
+
+export const Vertical0RTL = getStoryVariant(Vertical0, RTL);
+
+export const Vertical100 = () => <Slider vertical defaultValue={100} />;
+Vertical100.storyName = 'Vertical - 100%';
+
+export const Vertical100RTL = getStoryVariant(Vertical100, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Slider/SliderInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Slider/SliderInteractions.stories.tsx
new file mode 100644
index 0000000000000..f067a0bf1444e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Slider/SliderInteractions.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Slider } from '@fluentui/react-slider';
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  RTL,
+  TestWrapperDecorator,
+  withStoryWrightSteps,
+} from '../../utilities';
+
+export default {
+  title: 'Slider Converged',
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('.test-class')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('.test-class')
+          .snapshot('pressed', { cropTo: '.testWrapper' })
+          .mouseUp('.test-class')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export const Root = () => <Slider className="test-class" defaultValue={30} />;
+
+export const RootRTL = getStoryVariant(Root, RTL);
+
+export const RootHighContrast = getStoryVariant(Root, HIGH_CONTRAST);
+
+export const RootDarkMode = getStoryVariant(Root, DARK_MODE);
+
+export const Vertical = () => <Slider className="test-class" vertical defaultValue={30} />;
+
+export const VerticalRTL = getStoryVariant(Vertical, RTL);
+
+export const Disabled = () => <Slider className="test-class" disabled defaultValue={30} />;
+
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const DisabledVertical = () => <Slider className="test-class" disabled vertical defaultValue={30} />;
diff --git a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
deleted file mode 100644
index b1cc9feec01f2..0000000000000
--- a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { FluentProvider } from '@fluentui/react-provider';
-import { makeStyles } from '@griffel/react';
-
-const cropTo = '.testWrapper';
-
-storiesOf('SpinButton Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo })
-        .hover('input')
-        .snapshot('hoverInput', { cropTo })
-
-        .hover(`.${spinButtonClassNames.incrementButton}`)
-        .snapshot('hoverIncrement', { cropTo })
-
-        .hover(`.${spinButtonClassNames.decrementButton}`)
-        .snapshot('hoverDecrement', { cropTo })
-
-        .mouseDown(`.${spinButtonClassNames.incrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownIncrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.incrementButton}`)
-
-        .mouseDown(`.${spinButtonClassNames.decrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownDecrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.decrementButton}`)
-
-        .click('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => <SpinButton value={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Appearance: underline', () => <SpinButton appearance="underline" value={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Appearance: filled-darker', () => <SpinButton appearance="filled-darker" value={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory(
-    'Appearance: filled-lighter',
-    () => (
-      // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-      <div style={{ background: '#f5f5f5', padding: '10px' }}>
-        <SpinButton appearance="filled-lighter" value={10} />
-      </div>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory('Invalid: outline', () => <SpinButton aria-invalid value={10} />)
-  .addStory('Invalid: underline', () => <SpinButton aria-invalid appearance="underline" value={10} />)
-  .addStory('Invalid: filled-darker', () => <SpinButton aria-invalid appearance="filled-darker" value={10} />)
-  .addStory('Invalid: filled-lighter', () => (
-    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <SpinButton aria-invalid appearance="filled-lighter" value={10} />
-    </div>
-  ))
-  .addStory('Display Value', () => <SpinButton value={10} displayValue="$10.00" />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Disabled', () => <SpinButton disabled value={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-
-// The order of increment/decrement mouse down matters for max bound
-storiesOf('SpinButton Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo })
-        .hover('input')
-        .snapshot('hoverInput', { cropTo })
-
-        .hover(`.${spinButtonClassNames.incrementButton}`)
-        .snapshot('hoverIncrement', { cropTo })
-
-        .hover(`.${spinButtonClassNames.decrementButton}`)
-        .snapshot('hoverDecrement', { cropTo })
-
-        .mouseDown(`.${spinButtonClassNames.incrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownIncrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.incrementButton}`)
-
-        .mouseDown(`.${spinButtonClassNames.decrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownDecrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.decrementButton}`)
-
-        .click('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('At Max Bound', () => <SpinButton value={10} max={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-
-// The order of increment/decrement mouse down matters for min bound
-storiesOf('SpinButton Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo })
-        .hover('input')
-        .snapshot('hoverInput', { cropTo })
-
-        .hover(`.${spinButtonClassNames.incrementButton}`)
-        .snapshot('hoverIncrement', { cropTo })
-
-        .hover(`.${spinButtonClassNames.decrementButton}`)
-        .snapshot('hoverDecrement', { cropTo })
-
-        .mouseDown(`.${spinButtonClassNames.decrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownDecrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.decrementButton}`)
-
-        .mouseDown(`.${spinButtonClassNames.incrementButton}`)
-        .wait(250)
-        .snapshot('mouseDownIncrement', { cropTo })
-        .mouseUp(`.${spinButtonClassNames.incrementButton}`)
-
-        .click('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('At Min Bound', () => <SpinButton value={10} min={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-
-storiesOf('SpinButton Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => <StoryWright steps={new Steps().snapshot('default', { cropTo }).end()}>{story()}</StoryWright>)
-  .addStory('Size: small', () => <SpinButton size="small" value={10} />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Size: medium (default)', () => <SpinButton value={10} />, { includeRtl: true })
-  .addStory('With appearance override', () => (
-    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <SpinButton value={10} />
-        <SpinButton value={10} appearance="outline" />
-      </div>
-    </FluentProvider>
-  ))
-  .addStory(
-    'Custom Width',
-    () => {
-      const useStyles = makeStyles({
-        customWidth: { width: '50px' },
-      });
-      const classes = useStyles();
-      return <SpinButton value={10} className={classes.customWidth} />;
-    },
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  );
diff --git a/apps/vr-tests-react-components/src/stories/SpinButton/SpinButton.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton/SpinButton.stories.tsx
new file mode 100644
index 0000000000000..e6d1e492f0173
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/SpinButton/SpinButton.stories.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { SpinButton } from '@fluentui/react-spinbutton';
+import { FluentProvider } from '@fluentui/react-provider';
+import { makeStyles } from '@griffel/react';
+
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  RTL,
+  TestWrapperDecoratorFixedWidth,
+  withStoryWrightSteps,
+} from '../../utilities';
+
+export default {
+  title: 'SpinButton Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof SpinButton>;
+
+export const SizeSmall = () => <SpinButton size="small" value={10} />;
+
+SizeSmall.storyName = 'Size: small';
+
+export const SizeSmallRTL = getStoryVariant(SizeSmall, RTL);
+
+export const SizeSmallHighContrast = getStoryVariant(SizeSmall, HIGH_CONTRAST);
+
+export const SizeSmallDarkMode = getStoryVariant(SizeSmall, DARK_MODE);
+
+export const SizeMediumDefault = () => <SpinButton value={10} />;
+SizeMediumDefault.storyName = 'Size: medium (default)';
+
+export const SizeMediumDefaultRTL = getStoryVariant(SizeMediumDefault, RTL);
+
+export const WithAppearanceOverride = () => (
+  <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <SpinButton value={10} />
+      <SpinButton value={10} appearance="outline" />
+    </div>
+  </FluentProvider>
+);
+WithAppearanceOverride.storyName = 'With appearance override';
+
+export const CustomWidth = () => {
+  const useStyles = makeStyles({
+    customWidth: { width: '50px' },
+  });
+  const classes = useStyles();
+  return <SpinButton value={10} className={classes.customWidth} />;
+};
+
+export const CustomWidthRTL = getStoryVariant(CustomWidth, RTL);
+
+export const CustomWidthHighContrast = getStoryVariant(CustomWidth, HIGH_CONTRAST);
+
+export const CustomWidthDarkMode = getStoryVariant(CustomWidth, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/SpinButton/SpinButtonInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton/SpinButtonInteractions.stories.tsx
new file mode 100644
index 0000000000000..1d19692b39ff5
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/SpinButton/SpinButtonInteractions.stories.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton';
+
+import {
+  getStoryVariant,
+  withStoryWrightSteps,
+  TestWrapperDecoratorFixedWidth,
+  DARK_MODE,
+  RTL,
+  HIGH_CONTRAST,
+} from '../../utilities';
+
+const cropTo = '.testWrapper';
+
+export default {
+  title: 'SpinButton Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('rest', { cropTo })
+          .hover('input')
+          .snapshot('hoverInput', { cropTo })
+
+          .hover(`.${spinButtonClassNames.incrementButton}`)
+          .snapshot('hoverIncrement', { cropTo })
+
+          .hover(`.${spinButtonClassNames.decrementButton}`)
+          .snapshot('hoverDecrement', { cropTo })
+
+          .mouseDown(`.${spinButtonClassNames.incrementButton}`)
+          .wait(250)
+          .snapshot('mouseDownIncrement', { cropTo })
+          .mouseUp(`.${spinButtonClassNames.incrementButton}`)
+
+          .mouseDown(`.${spinButtonClassNames.decrementButton}`)
+          .wait(250)
+          .snapshot('mouseDownDecrement', { cropTo })
+          .mouseUp(`.${spinButtonClassNames.decrementButton}`)
+
+          .click('input')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof SpinButton>;
+
+export const AppearanceOutlineDefault = () => <SpinButton value={10} />;
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceOutlineDefaultRTL = getStoryVariant(AppearanceOutlineDefault, RTL);
+
+export const AppearanceOutlineDefaultHighContrast = getStoryVariant(AppearanceOutlineDefault, HIGH_CONTRAST);
+
+export const AppearanceOutlineDefaultDarkMode = getStoryVariant(AppearanceOutlineDefault, DARK_MODE);
+
+export const AppearanceUnderline = () => <SpinButton appearance="underline" value={10} />;
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceUnderlineRTL = getStoryVariant(AppearanceUnderline, RTL);
+
+export const AppearanceUnderlineHighContrast = getStoryVariant(AppearanceUnderline, HIGH_CONTRAST);
+
+export const AppearanceUnderlineDarkMode = getStoryVariant(AppearanceUnderline, DARK_MODE);
+
+export const AppearanceFilledDarker = () => <SpinButton appearance="filled-darker" value={10} />;
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledDarkerRTL = getStoryVariant(AppearanceFilledDarker, RTL);
+
+export const AppearanceFilledDarkerHighContrast = getStoryVariant(AppearanceFilledDarker, HIGH_CONTRAST);
+
+export const AppearanceFilledDarkerDarkMode = getStoryVariant(AppearanceFilledDarker, DARK_MODE);
+
+export const AppearanceFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <SpinButton appearance="filled-lighter" value={10} />
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const AppearanceFilledLighterRTL = getStoryVariant(AppearanceFilledLighter, RTL);
+
+export const AppearanceFilledLighterHighContrast = getStoryVariant(AppearanceFilledLighter, HIGH_CONTRAST);
+
+export const AppearanceFilledLighterDarkMode = getStoryVariant(AppearanceFilledLighter, DARK_MODE);
+
+export const InvalidOutline = () => <SpinButton aria-invalid value={10} />;
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidUnderline = () => <SpinButton aria-invalid appearance="underline" value={10} />;
+InvalidUnderline.storyName = 'Invalid: underline';
+
+export const InvalidFilledDarker = () => <SpinButton aria-invalid appearance="filled-darker" value={10} />;
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter = () => (
+  // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <SpinButton aria-invalid appearance="filled-lighter" value={10} />
+  </div>
+);
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
+
+export const DisplayValue = () => <SpinButton value={10} displayValue="$10.00" />;
+
+export const DisplayValueRTL = getStoryVariant(DisplayValue, RTL);
+
+export const DisplayValueHighContrast = getStoryVariant(DisplayValue, HIGH_CONTRAST);
+
+export const DisplayValueDarkMode = getStoryVariant(DisplayValue, DARK_MODE);
+
+export const Disabled = () => <SpinButton disabled value={10} />;
+
+export const DisabledRTL = getStoryVariant(Disabled, RTL);
+
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const AtMaxBound = () => <SpinButton value={10} max={10} />;
+
+export const AtMaxBoundRTL = getStoryVariant(AtMaxBound, RTL);
+
+export const AtMaxBoundHighContrast = getStoryVariant(AtMaxBound, HIGH_CONTRAST);
+
+export const AtMaxBoundDarkMode = getStoryVariant(AtMaxBound, DARK_MODE);
+
+export const AtMinBound = () => <SpinButton value={10} min={10} />;
+
+export const AtMinBoundRTL = getStoryVariant(AtMinBound, RTL);
+
+export const AtMinBoundHighContrast = getStoryVariant(AtMinBound, HIGH_CONTRAST);
+
+export const AtMinBoundDarkMode = getStoryVariant(AtMinBound, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
index d4bc9861ba18c..348fb9e99f8f8 100644
--- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import type { DecoratorFn, Meta } from '@storybook/react';
 import { Spinner, spinnerClassNames } from '@fluentui/react-spinner';
 import { tokens } from '@fluentui/react-theme';
-import { DecoratorFunction } from '@storybook/addons';
-import { ExtendedStoryFnReturnType } from '../utilities/types';
-import { StoryWright, Steps } from 'storywright';
+import { Steps } from 'storywright';
 import { makeResetStyles, mergeClasses } from '@griffel/react';
 
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities';
+
 const usePauseWrapperClass = makeResetStyles({
   minWidth: '300px',
   padding: '10px',
@@ -17,7 +17,7 @@ const usePauseWrapperClass = makeResetStyles({
   },
 });
 
-export const TestWrapperDecoratorPauseAnimation: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+const TestWrapperDecoratorPauseAnimation: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className={mergeClasses('testWrapper', usePauseWrapperClass())}>{story()}</div>
   </div>
@@ -30,82 +30,85 @@ const InvertedWrapper: React.FC = ({ children }) => {
   return <div style={{ background: tokens.colorBrandBackgroundStatic, padding: '10px' }}>{children}</div>;
 };
 
-storiesOf('Spinner converged', module)
-  .addDecorator(TestWrapperDecoratorPauseAnimation)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Primary', () => <Spinner />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory(
-    'Primary with Label',
-    () => (
-      <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
-        <Spinner labelPosition="before" label="Before" />
-        <Spinner labelPosition="after" label="After" />
-        <Spinner labelPosition="above" label="Above" />
-        <Spinner labelPosition="below" label="Below" />
-      </div>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory('Primary + size', () => (
+export default {
+  title: 'Spinner converged',
+
+  decorators: [
+    TestWrapperDecoratorPauseAnimation,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Spinner>;
+
+export const Primary = () => <Spinner />;
+
+export const PrimaryHighContrast = getStoryVariant(Primary, HIGH_CONTRAST);
+
+export const PrimaryDarkMode = getStoryVariant(Primary, DARK_MODE);
+
+export const PrimaryWithLabel = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
+    <Spinner labelPosition="before" label="Before" />
+    <Spinner labelPosition="after" label="After" />
+    <Spinner labelPosition="above" label="Above" />
+    <Spinner labelPosition="below" label="Below" />
+  </div>
+);
+
+PrimaryWithLabel.storyName = 'Primary with Label';
+
+export const PrimaryWithLabelHighContrast = getStoryVariant(PrimaryWithLabel, HIGH_CONTRAST);
+
+export const PrimaryWithLabelDarkMode = getStoryVariant(PrimaryWithLabel, DARK_MODE);
+
+export const PrimaryWithLabelRTL = getStoryVariant(PrimaryWithLabel, RTL);
+
+export const PrimarySize = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
+    <Spinner size="extra-tiny" label="Extra Tiny" />
+    <Spinner size="tiny" label="Tiny" />
+    <Spinner size="extra-small" label="Extra Small" />
+    <Spinner size="small" label="Small" />
+    <Spinner size="medium" label="Medium" />
+    <Spinner size="large" label="Large" />
+    <Spinner size="extra-large" label="Extra Large" />
+    <Spinner size="huge" label="Huge" />
+  </div>
+);
+PrimarySize.storyName = 'Primary + size';
+
+export const Inverted = () => (
+  <InvertedWrapper>
+    <Spinner appearance="inverted" />
+  </InvertedWrapper>
+);
+
+export const InvertedHighContrast = getStoryVariant(Inverted, HIGH_CONTRAST);
+
+export const InvertedDarkMode = getStoryVariant(Inverted, DARK_MODE);
+
+export const InvertedWithLabel = () => (
+  <InvertedWrapper>
     <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
-      <Spinner size="extra-tiny" label="Extra Tiny" />
-      <Spinner size="tiny" label="Tiny" />
-      <Spinner size="extra-small" label="Extra Small" />
-      <Spinner size="small" label="Small" />
-      <Spinner size="medium" label="Medium" />
-      <Spinner size="large" label="Large" />
-      <Spinner size="extra-large" label="Extra Large" />
-      <Spinner size="huge" label="Huge" />
+      <Spinner appearance="inverted" labelPosition="before" label="Before" />
+      <Spinner appearance="inverted" labelPosition="after" label="After" />
+      <Spinner appearance="inverted" labelPosition="above" label="Above" />
+      <Spinner appearance="inverted" labelPosition="below" label="Below" />
     </div>
-  ))
-  .addStory(
-    'Inverted',
-    () => (
-      <InvertedWrapper>
-        <Spinner appearance="inverted" />
-      </InvertedWrapper>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Inverted with Label',
-    () => (
-      <InvertedWrapper>
-        <div style={{ display: 'flex', flexDirection: 'column', rowGap: '20px' }}>
-          <Spinner appearance="inverted" labelPosition="before" label="Before" />
-          <Spinner appearance="inverted" labelPosition="after" label="After" />
-          <Spinner appearance="inverted" labelPosition="above" label="Above" />
-          <Spinner appearance="inverted" labelPosition="below" label="Below" />
-        </div>
-      </InvertedWrapper>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Animation',
-    () => (
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(16, auto)', gap: '20px 2px' }}>
-        {Array.from({ length: 75 }).map((_, i) => (
-          <Spinner key={i} style={{ '--test-animation-delay': `${-0.02 * i}s` } as React.CSSProperties} />
-        ))}
-      </div>
-    ),
-    {
-      includeRtl: true,
-    },
-  );
+  </InvertedWrapper>
+);
+
+InvertedWithLabel.storyName = 'Inverted with Label';
+
+export const InvertedWithLabelHighContrast = getStoryVariant(InvertedWithLabel, HIGH_CONTRAST);
+
+export const InvertedWithLabelDarkMode = getStoryVariant(InvertedWithLabel, DARK_MODE);
+
+export const Animation = () => (
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(16, auto)', gap: '20px 2px' }}>
+    {Array.from({ length: 75 }).map((_, i) => (
+      <Spinner key={i} style={{ '--test-animation-delay': `${-0.02 * i}s` } as React.CSSProperties} />
+    ))}
+  </div>
+);
+
+export const AnimationRTL = getStoryVariant(Animation, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
index 9ad0bfa00b47e..dea1b91753f6f 100644
--- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
+import type { Meta } from '@storybook/react';
 import { SwatchPicker } from '@fluentui/react-swatch-picker';
 import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils';
-import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
 
 export default {
   title: 'SwatchPicker Converged',
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof SwatchPicker>;
+} satisfies Meta<typeof SwatchPicker>;
 
 export const Default = () => (
   <>
@@ -19,11 +20,12 @@ export const Default = () => (
     <SampleSwatchPickerGrid />
   </>
 );
-
 Default.storyName = 'default';
 
-export const AppearanceDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
 export const DefaultRTL = getStoryVariant(Default, RTL);
 
 export const Size = () => (
@@ -45,7 +47,6 @@ export const Size = () => (
     <SampleSwatchPickerGrid size="large" />
   </>
 );
-
 Size.storyName = 'size';
 
 export const Shape = () => (
@@ -63,7 +64,6 @@ export const Shape = () => (
     <SampleSwatchPickerGrid shape="circular" />
   </>
 );
-
 Size.storyName = 'shape';
 
 export const Spacing = () => (
@@ -79,5 +79,4 @@ export const Spacing = () => (
     <SampleSwatchPickerGrid spacing="small" />
   </>
 );
-
 Size.storyName = 'spacing';
diff --git a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
index 1fea769cea587..dd8f7fe2b5605 100644
--- a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
@@ -1,73 +1,95 @@
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { Switch } from '@fluentui/react-switch';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Switch Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.test-class')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.test-class')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.test-class')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'Enabled and unchecked',
-    () => <Switch className="test-class" defaultChecked={false} label="Toggle switch" />,
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Enabled and checked',
-    () => <Switch className="test-class" defaultChecked={true} label="Toggle switch" />,
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Disabled and unchecked',
-    () => <Switch className="test-class" disabled defaultChecked={false} label="Toggle switch" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Disabled and checked',
-    () => <Switch className="test-class" disabled defaultChecked={true} label="Toggle switch" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('With label above', () => <Switch className="test-class" label="Toggle switch" labelPosition="above" />, {
-    includeRtl: true,
-  })
-  .addStory('With label after', () => <Switch className="test-class" label="Toggle switch" labelPosition="after" />, {
-    includeRtl: true,
-  })
-  .addStory('With label before', () => <Switch className="test-class" label="Toggle switch" labelPosition="before" />, {
-    includeRtl: true,
-  })
-  .addStory('With label wrapping', () => (
-    <Switch
-      className="test-class"
-      label={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+
+import {
+  DARK_MODE,
+  getStoryVariant,
+  HIGH_CONTRAST,
+  RTL,
+  TestWrapperDecorator,
+  withStoryWrightSteps,
+} from '../utilities';
+
+export default {
+  title: 'Switch Converged',
+
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('.test-class')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('.test-class')
+          .snapshot('pressed', { cropTo: '.testWrapper' })
+          .mouseUp('.test-class')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Switch>;
+
+export const EnabledAndUnchecked = () => <Switch className="test-class" defaultChecked={false} label="Toggle switch" />;
+EnabledAndUnchecked.storyName = 'Enabled and unchecked';
+
+export const EnabledAndUncheckedRTL = getStoryVariant(EnabledAndUnchecked, RTL);
+
+export const EnabledAndUncheckedHighContrast = getStoryVariant(EnabledAndUnchecked, HIGH_CONTRAST);
+
+export const EnabledAndUncheckedDarkMode = getStoryVariant(EnabledAndUnchecked, DARK_MODE);
+
+export const EnabledAndChecked = () => <Switch className="test-class" defaultChecked={true} label="Toggle switch" />;
+EnabledAndChecked.storyName = 'Enabled and checked';
+
+export const EnabledAndCheckedRTL = getStoryVariant(EnabledAndChecked, RTL);
+
+export const EnabledAndCheckedHighContrast = getStoryVariant(EnabledAndChecked, HIGH_CONTRAST);
+
+export const EnabledAndCheckedDarkMode = getStoryVariant(EnabledAndChecked, DARK_MODE);
+
+export const DisabledAndUnchecked = () => (
+  <Switch className="test-class" disabled defaultChecked={false} label="Toggle switch" />
+);
+DisabledAndUnchecked.storyName = 'Disabled and unchecked';
+
+export const DisabledAndUncheckedHighContrast = getStoryVariant(DisabledAndUnchecked, HIGH_CONTRAST);
+
+export const DisabledAndUncheckedDarkMode = getStoryVariant(DisabledAndUnchecked, DARK_MODE);
+
+export const DisabledAndChecked = () => (
+  <Switch className="test-class" disabled defaultChecked={true} label="Toggle switch" />
+);
+DisabledAndChecked.storyName = 'Disabled and checked';
+
+export const DisabledAndCheckedHighContrast = getStoryVariant(DisabledAndChecked, HIGH_CONTRAST);
+
+export const DisabledAndCheckedDarkMode = getStoryVariant(DisabledAndChecked, DARK_MODE);
+
+export const WithLabelAbove = () => <Switch className="test-class" label="Toggle switch" labelPosition="above" />;
+WithLabelAbove.storyName = 'With label above';
+
+export const WithLabelAboveRTL = getStoryVariant(WithLabelAbove, RTL);
+
+export const WithLabelAfter = () => <Switch className="test-class" label="Toggle switch" labelPosition="after" />;
+WithLabelAfter.storyName = 'With label after';
+
+export const WithLabelAfterRTL = getStoryVariant(WithLabelAfter, RTL);
+
+export const WithLabelBefore = () => <Switch className="test-class" label="Toggle switch" labelPosition="before" />;
+WithLabelBefore.storyName = 'With label before';
+
+export const WithLabelBeforeRTL = getStoryVariant(WithLabelBefore, RTL);
+
+export const WithLabelWrapping = () => (
+  <Switch
+    className="test-class"
+    label={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua`}
-    />
-  ))
-  .addStory('Required', () => <Switch className="test-class" label="Toggle switch" required />);
+  />
+);
+WithLabelWrapping.storyName = 'With label wrapping';
+
+export const Required = () => <Switch className="test-class" label="Toggle switch" required />;
diff --git a/apps/vr-tests-react-components/src/stories/Table/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/Table.stories.tsx
new file mode 100644
index 0000000000000..378b3f89dbf6e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/Table.stories.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
+import {
+  Multiselect,
+  MultiselectChecked,
+  MultiselectMixed,
+  PrimaryCell,
+  SizeExtraSmall,
+  SizeMedium,
+  SizeSmall,
+  SingleSelectChecked,
+  SingleSelect,
+} from './utils';
+
+export default {
+  title: 'Table layout table',
+} satisfies Meta<typeof Table>;
+
+export const SizeMediumStory = () => <SizeMedium noNativeElements={false} />;
+SizeMediumStory.storyName = 'size - medium';
+
+export const SizeMediumRTLStory = getStoryVariant(SizeMediumStory, RTL);
+
+export const SizeMediumHighContrastStory = getStoryVariant(SizeMediumStory, HIGH_CONTRAST);
+
+export const SizeMediumDarkModeStory = getStoryVariant(SizeMediumStory, DARK_MODE);
+
+export const SizeSmallStory = () => <SizeSmall noNativeElements={false} />;
+SizeSmallStory.storyName = 'size - small';
+
+export const SizeExtraSmallStory = () => <SizeExtraSmall noNativeElements={false} />;
+SizeExtraSmallStory.storyName = 'size - extra small';
+
+export const PrimaryCellStory = () => <PrimaryCell noNativeElements={false} />;
+PrimaryCellStory.storyName = 'primary cell';
+
+export const MultiselectStory = () => <Multiselect noNativeElements={false} />;
+MultiselectStory.storyName = 'multiselect';
+
+export const MultiselectRTLStory = getStoryVariant(MultiselectStory, RTL);
+
+export const MultiselectHighContrastStory = getStoryVariant(MultiselectStory, HIGH_CONTRAST);
+
+export const MultiselectDarkModeStory = getStoryVariant(MultiselectStory, DARK_MODE);
+
+export const MultiselectCheckedBrand = () => (
+  <MultiselectChecked noNativeElements={false} selectedRowAppearance="brand" />
+);
+MultiselectCheckedBrand.storyName = 'multiselect (checked) - brand';
+
+export const MultiselectCheckedBrandRTL = getStoryVariant(MultiselectCheckedBrand, RTL);
+
+export const MultiselectCheckedBrandHighContrast = getStoryVariant(MultiselectCheckedBrand, HIGH_CONTRAST);
+
+export const MultiselectCheckedBrandDarkMode = getStoryVariant(MultiselectCheckedBrand, DARK_MODE);
+
+export const MultiselectMixedBrand = () => <MultiselectMixed noNativeElements={false} selectedRowAppearance="brand" />;
+MultiselectMixedBrand.storyName = 'multiselect (mixed) - brand';
+
+export const MultiselectMixedBrandRTL = getStoryVariant(MultiselectMixedBrand, RTL);
+
+export const MultiselectMixedBrandHighContrast = getStoryVariant(MultiselectMixedBrand, HIGH_CONTRAST);
+
+export const MultiselectMixedBrandDarkMode = getStoryVariant(MultiselectMixedBrand, DARK_MODE);
+
+export const SingleSelectStory = () => <SingleSelect noNativeElements={false} />;
+SingleSelectStory.storyName = 'single select';
+
+export const SingleSelectRTLStory = getStoryVariant(SingleSelectStory, RTL);
+
+export const SingleSelectHighContrastStory = getStoryVariant(SingleSelectStory, HIGH_CONTRAST);
+
+export const SingleSelectDarkModeStory = getStoryVariant(SingleSelectStory, DARK_MODE);
+
+export const SingleSelectCheckedBrand = () => (
+  <SingleSelectChecked noNativeElements={false} selectedRowAppearance="brand" />
+);
+SingleSelectCheckedBrand.storyName = 'single select (checked) - brand';
+
+export const SingleSelectCheckedBrandRTL = getStoryVariant(SingleSelectCheckedBrand, RTL);
+
+export const SingleSelectCheckedBrandHighContrast = getStoryVariant(SingleSelectCheckedBrand, HIGH_CONTRAST);
+
+export const SingleSelectCheckedBrandDarkMode = getStoryVariant(SingleSelectCheckedBrand, DARK_MODE);
+
+export const MultiselectCheckedNeutral = () => (
+  <MultiselectChecked noNativeElements={false} selectedRowAppearance="neutral" />
+);
+MultiselectCheckedNeutral.storyName = 'multiselect (checked) - neutral';
+
+export const MultiselectCheckedNeutralRTL = getStoryVariant(MultiselectCheckedNeutral, RTL);
+
+export const MultiselectCheckedNeutralHighContrast = getStoryVariant(MultiselectCheckedNeutral, HIGH_CONTRAST);
+
+export const MultiselectCheckedNeutralDarkMode = getStoryVariant(MultiselectCheckedNeutral, DARK_MODE);
+
+export const MultiselectMixedNeutral = () => (
+  <MultiselectMixed noNativeElements={false} selectedRowAppearance="neutral" />
+);
+MultiselectMixedNeutral.storyName = 'multiselect (mixed) - neutral';
+
+export const MultiselectMixedNeutralRTL = getStoryVariant(MultiselectMixedNeutral, RTL);
+
+export const MultiselectMixedNeutralHighContrast = getStoryVariant(MultiselectMixedNeutral, HIGH_CONTRAST);
+
+export const MultiselectMixedNeutralDarkMode = getStoryVariant(MultiselectMixedNeutral, DARK_MODE);
+
+export const SingleSelectCheckedNeutral = () => (
+  <SingleSelectChecked noNativeElements={false} selectedRowAppearance="neutral" />
+);
+SingleSelectCheckedNeutral.storyName = 'single select (checked) - neutral';
+
+export const SingleSelectCheckedNeutralRTL = getStoryVariant(SingleSelectCheckedNeutral, RTL);
+
+export const SingleSelectCheckedNeutralHighContrast = getStoryVariant(SingleSelectCheckedNeutral, HIGH_CONTRAST);
+
+export const SingleSelectCheckedNeutralDarkMode = getStoryVariant(SingleSelectCheckedNeutral, DARK_MODE);
+
+export const SingleSelectCheckedStory = () => <SingleSelectChecked noNativeElements={false} />;
+SingleSelectCheckedStory.storyName = 'single select (checked)';
+
+export const SingleSelectCheckedRTLStory = getStoryVariant(SingleSelectCheckedStory, RTL);
+
+export const SingleSelectCheckedHighContrastStory = getStoryVariant(SingleSelectCheckedStory, HIGH_CONTRAST);
+
+export const SingleSelectCheckedDarkModeStory = getStoryVariant(SingleSelectCheckedStory, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx
new file mode 100644
index 0000000000000..371214546bd19
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+import { CellActionsAlwaysVisible, CellActionsDefault, CellActionsInHeaderCell } from './utils';
+
+export default {
+  title: 'Table layout table - cell actions',
+
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().hover('.row-1').snapshot('hover row').end() }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <CellActionsDefault noNativeElements={false} />;
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const AlwaysVisible = () => <CellActionsAlwaysVisible noNativeElements={false} />;
+AlwaysVisible.storyName = 'always visible';
+
+export const AlwaysVisibleRTL = getStoryVariant(AlwaysVisible, RTL);
+
+export const AlwaysVisibleHighContrast = getStoryVariant(AlwaysVisible, HIGH_CONTRAST);
+
+export const AlwaysVisibleDarkMode = getStoryVariant(AlwaysVisible, DARK_MODE);
+
+export const InHeaderCell = () => <CellActionsInHeaderCell noNativeElements={false} />;
+InHeaderCell.storyName = 'in header cell';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlex.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlex.stories.tsx
new file mode 100644
index 0000000000000..be3bb9b14be2c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlex.stories.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
+import {
+  Multiselect,
+  MultiselectChecked,
+  MultiselectMixed,
+  PrimaryCell,
+  SizeExtraSmall,
+  SizeMedium,
+  SizeSmall,
+  SingleSelectChecked,
+  SingleSelect,
+} from './utils';
+
+export default {
+  title: 'Table layout flex',
+} satisfies Meta<typeof Table>;
+
+export const SizeMediumStory = () => <SizeMedium noNativeElements={true} />;
+SizeMediumStory.storyName = 'size - medium';
+
+export const SizeMediumRTLStory = getStoryVariant(SizeMediumStory, RTL);
+
+export const SizeMediumHighContrastStory = getStoryVariant(SizeMediumStory, HIGH_CONTRAST);
+
+export const SizeMediumDarkModeStory = getStoryVariant(SizeMediumStory, DARK_MODE);
+
+export const SizeSmallStory = () => <SizeSmall noNativeElements={true} />;
+SizeSmallStory.storyName = 'size - small';
+
+export const SizeExtraSmallStory = () => <SizeExtraSmall noNativeElements={true} />;
+SizeExtraSmallStory.storyName = 'size - extra small';
+
+export const PrimaryCellStory = () => <PrimaryCell noNativeElements={true} />;
+PrimaryCellStory.storyName = 'primary cell';
+
+export const MultiselectStory = () => <Multiselect noNativeElements={true} />;
+MultiselectStory.storyName = 'multiselect';
+
+export const MultiselectRTLStory = getStoryVariant(MultiselectStory, RTL);
+
+export const MultiselectHighContrastStory = getStoryVariant(MultiselectStory, HIGH_CONTRAST);
+
+export const MultiselectDarkModeStory = getStoryVariant(MultiselectStory, DARK_MODE);
+
+export const MultiselectCheckedBrand = () => (
+  <MultiselectChecked noNativeElements={true} selectedRowAppearance="brand" />
+);
+MultiselectCheckedBrand.storyName = 'multiselect (checked) - brand';
+
+export const MultiselectCheckedBrandRTL = getStoryVariant(MultiselectCheckedBrand, RTL);
+
+export const MultiselectCheckedBrandHighContrast = getStoryVariant(MultiselectCheckedBrand, HIGH_CONTRAST);
+
+export const MultiselectCheckedBrandDarkMode = getStoryVariant(MultiselectCheckedBrand, DARK_MODE);
+
+export const MultiselectMixedBrand = () => <MultiselectMixed noNativeElements={true} selectedRowAppearance="brand" />;
+MultiselectMixedBrand.storyName = 'multiselect (mixed) - brand';
+
+export const MultiselectMixedBrandRTL = getStoryVariant(MultiselectMixedBrand, RTL);
+
+export const MultiselectMixedBrandHighContrast = getStoryVariant(MultiselectMixedBrand, HIGH_CONTRAST);
+
+export const MultiselectMixedBrandDarkMode = getStoryVariant(MultiselectMixedBrand, DARK_MODE);
+
+export const SingleSelectStory = () => <SingleSelect noNativeElements={true} />;
+SingleSelectStory.storyName = 'single select';
+
+export const SingleSelectRTLStory = getStoryVariant(SingleSelectStory, RTL);
+
+export const SingleSelectHighContrastStory = getStoryVariant(SingleSelectStory, HIGH_CONTRAST);
+
+export const SingleSelectDarkModeStory = getStoryVariant(SingleSelectStory, DARK_MODE);
+
+export const SingleSelectCheckedBrand = () => (
+  <SingleSelectChecked noNativeElements={true} selectedRowAppearance="brand" />
+);
+SingleSelectCheckedBrand.storyName = 'single select (checked) - brand';
+
+export const SingleSelectCheckedBrandRTL = getStoryVariant(SingleSelectCheckedBrand, RTL);
+
+export const SingleSelectCheckedBrandHighContrast = getStoryVariant(SingleSelectCheckedBrand, HIGH_CONTRAST);
+
+export const SingleSelectCheckedBrandDarkMode = getStoryVariant(SingleSelectCheckedBrand, DARK_MODE);
+
+export const MultiselectCheckedNeutral = () => (
+  <MultiselectChecked noNativeElements={true} selectedRowAppearance="neutral" />
+);
+MultiselectCheckedNeutral.storyName = 'multiselect (checked) - neutral';
+
+export const MultiselectCheckedNeutralRTL = getStoryVariant(MultiselectCheckedNeutral, RTL);
+
+export const MultiselectCheckedNeutralHighContrast = getStoryVariant(MultiselectCheckedNeutral, HIGH_CONTRAST);
+
+export const MultiselectCheckedNeutralDarkMode = getStoryVariant(MultiselectCheckedNeutral, DARK_MODE);
+
+export const MultiselectMixedNeutral = () => (
+  <MultiselectMixed noNativeElements={true} selectedRowAppearance="neutral" />
+);
+MultiselectMixedNeutral.storyName = 'multiselect (mixed) - neutral';
+
+export const MultiselectMixedNeutralRTL = getStoryVariant(MultiselectMixedNeutral, RTL);
+
+export const MultiselectMixedNeutralHighContrast = getStoryVariant(MultiselectMixedNeutral, HIGH_CONTRAST);
+
+export const MultiselectMixedNeutralDarkMode = getStoryVariant(MultiselectMixedNeutral, DARK_MODE);
+
+export const SingleSelectCheckedNeutral = () => (
+  <SingleSelectChecked noNativeElements={true} selectedRowAppearance="neutral" />
+);
+SingleSelectCheckedNeutral.storyName = 'single select (checked) - neutral';
+
+export const SingleSelectCheckedNeutralRTL = getStoryVariant(SingleSelectCheckedNeutral, RTL);
+
+export const SingleSelectCheckedNeutralHighContrast = getStoryVariant(SingleSelectCheckedNeutral, HIGH_CONTRAST);
+
+export const SingleSelectCheckedNeutralDarkMode = getStoryVariant(SingleSelectCheckedNeutral, DARK_MODE);
+
+export const SingleSelectCheckedStory = () => <SingleSelectChecked noNativeElements={true} />;
+SingleSelectCheckedStory.storyName = 'single select (checked)';
+
+export const SingleSelectCheckedRTLStory = getStoryVariant(SingleSelectCheckedStory, RTL);
+
+export const SingleSelectCheckedHighContrastStory = getStoryVariant(SingleSelectCheckedStory, HIGH_CONTRAST);
+
+export const SingleSelectCheckedDarkModeStory = getStoryVariant(SingleSelectCheckedStory, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx
new file mode 100644
index 0000000000000..710dca742f54f
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+import { CellActionsAlwaysVisible, CellActionsDefault, CellActionsInHeaderCell } from './utils';
+
+export default {
+  title: 'Table layout flex - cell actions',
+
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().hover('.row-1').snapshot('hover row').end() }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <CellActionsDefault noNativeElements={true} />;
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const AlwaysVisible = () => <CellActionsAlwaysVisible noNativeElements={true} />;
+AlwaysVisible.storyName = 'always visible';
+
+export const AlwaysVisibleRTL = getStoryVariant(AlwaysVisible, RTL);
+
+export const AlwaysVisibleHighContrast = getStoryVariant(AlwaysVisible, HIGH_CONTRAST);
+
+export const AlwaysVisibleDarkMode = getStoryVariant(AlwaysVisible, DARK_MODE);
+
+export const InHeaderCell = () => <CellActionsInHeaderCell noNativeElements={true} />;
+InHeaderCell.storyName = 'in header cell';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx
new file mode 100644
index 0000000000000..eb8f89a74cd52
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, withStoryWrightSteps } from '../../utilities';
+import { SortableHeaders } from './utils';
+
+export default {
+  title: 'Table layout flex - headers',
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .hover('.columnheader')
+          .snapshot('hover header')
+          .mouseDown('.columnheader')
+          .snapshot('press header')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Sortable = () => <SortableHeaders noNativeElements={true} />;
+Sortable.storyName = 'sortable';
+
+export const SortableDarkMode = getStoryVariant(Sortable, DARK_MODE);
+
+export const SortableHighContrast = getStoryVariant(Sortable, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexResizableColumns.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexResizableColumns.stories.tsx
new file mode 100644
index 0000000000000..2736998339cf4
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexResizableColumns.stories.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { ResizableColumns } from './utils';
+
+export default {
+  title: 'Table layout flex - resizable columns',
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <ResizableColumns noNativeElements={true} />;
+Default.storyName = 'default';
+
+export const End = () => <ResizableColumns noNativeElements={true} scrollToEnd />;
+End.storyName = 'end';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx
new file mode 100644
index 0000000000000..2d14df310bac1
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+import { SubtleSelection } from './utils';
+
+export default {
+  title: 'Table flex - subtle selection',
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().hover('.not-selected').snapshot('hover unselected row').end() }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Rest = () => <SubtleSelection noNativeElements={true} />;
+Rest.storyName = 'rest';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexTruncate.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexTruncate.stories.tsx
new file mode 100644
index 0000000000000..c95fa397d2ef9
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexTruncate.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Truncate } from './utils';
+
+export default {
+  title: 'Table layout flex - truncate',
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <Truncate noNativeElements={true} />;
+Default.storyName = 'default (disabled)';
+
+export const True = () => <Truncate noNativeElements={true} truncate={true} />;
+True.storyName = 'true';
+
+export const False = () => <Truncate noNativeElements={true} truncate={false} />;
+False.storyName = 'false';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx
new file mode 100644
index 0000000000000..30a60f3264bb6
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, withStoryWrightSteps } from '../../utilities';
+import { SortableHeaders } from './utils';
+
+export default {
+  title: 'Table layout table - headers',
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .hover('.columnheader')
+          .snapshot('hover header')
+          .mouseDown('.columnheader')
+          .snapshot('press header')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Sortable = () => <SortableHeaders noNativeElements={false} />;
+Sortable.storyName = 'sortable';
+
+export const SortableDarkMode = getStoryVariant(Sortable, DARK_MODE);
+
+export const SortableHighContrast = getStoryVariant(Sortable, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableResizableColumns.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableResizableColumns.stories.tsx
new file mode 100644
index 0000000000000..4ec43147bb21f
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableResizableColumns.stories.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { ResizableColumns } from './utils';
+
+export default {
+  title: 'Table layout table - resizable columns',
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <ResizableColumns noNativeElements={false} />;
+Default.storyName = 'default';
+
+export const End = () => <ResizableColumns noNativeElements={false} scrollToEnd />;
+End.storyName = 'end';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx
new file mode 100644
index 0000000000000..8c9c5d0d6da4c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+import { SubtleSelection } from './utils';
+
+export default {
+  title: 'Table table - subtle selection',
+  decorators: [
+    story =>
+      withStoryWrightSteps({ story, steps: new Steps().hover('.not-selected').snapshot('hover unselected row').end() }),
+  ],
+} satisfies Meta<typeof Table>;
+
+export const Rest = () => <SubtleSelection noNativeElements={false} />;
+Rest.storyName = 'rest';
diff --git a/apps/vr-tests-react-components/src/stories/Table/TableTruncate.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableTruncate.stories.tsx
new file mode 100644
index 0000000000000..050e9347c93b3
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Table/TableTruncate.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Table } from '@fluentui/react-table';
+import { Truncate } from './utils';
+
+export default {
+  title: 'Table layout table - truncate',
+} satisfies Meta<typeof Table>;
+
+export const Default = () => <Truncate noNativeElements={false} />;
+Default.storyName = 'default (disabled)';
+
+export const True = () => <Truncate noNativeElements={false} truncate={true} />;
+True.storyName = 'true';
+
+export const False = () => <Truncate noNativeElements={false} truncate={false} />;
+False.storyName = 'false';
diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/utils.tsx
similarity index 78%
rename from apps/vr-tests-react-components/src/stories/Table.stories.tsx
rename to apps/vr-tests-react-components/src/stories/Table/utils.tsx
index 17d5238e7e2c9..5f392907510f9 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table/utils.tsx
@@ -29,8 +29,6 @@ import {
   createTableColumn,
 } from '@fluentui/react-table';
 import { Button } from '@fluentui/react-button';
-import { storiesOf } from '@storybook/react';
-import { Steps, StoryWright } from 'storywright';
 
 type FileCell = {
   label: string;
@@ -129,7 +127,7 @@ interface SharedVrTestArgs {
   selectedRowAppearance?: TableRowProps['appearance'];
 }
 
-const CellActionsDefault: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const CellActionsDefault: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -167,7 +165,7 @@ const CellActionsDefault: React.FC<SharedVrTestArgs> = ({ noNativeElements }) =>
   </Table>
 );
 
-const CellActionsAlwaysVisible: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const CellActionsAlwaysVisible: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -205,7 +203,7 @@ const CellActionsAlwaysVisible: React.FC<SharedVrTestArgs> = ({ noNativeElements
   </Table>
 );
 
-const CellActionsInHeaderCell: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const CellActionsInHeaderCell: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -243,7 +241,7 @@ const CellActionsInHeaderCell: React.FC<SharedVrTestArgs> = ({ noNativeElements
   </Table>
 );
 
-const SizeMedium: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SizeMedium: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -277,7 +275,7 @@ const SizeMedium: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const SizeSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SizeSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table size="small" noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -315,7 +313,7 @@ const SizeSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const SizeExtraSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SizeExtraSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table size="extra-small" noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -353,7 +351,7 @@ const SizeExtraSmall: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const PrimaryCell: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const PrimaryCell: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -385,7 +383,7 @@ const PrimaryCell: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const Multiselect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const Multiselect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -419,7 +417,7 @@ const Multiselect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const MultiselectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
+export const MultiselectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -457,7 +455,7 @@ const MultiselectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, sele
   </Table>
 );
 
-const MultiselectMixed: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
+export const MultiselectMixed: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -496,7 +494,7 @@ const MultiselectMixed: React.FC<SharedVrTestArgs> = ({ noNativeElements, select
   </Table>
 );
 
-const Singleselect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SingleSelect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -530,7 +528,7 @@ const Singleselect: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const SingleselectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
+export const SingleSelectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, selectedRowAppearance }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -570,7 +568,7 @@ const SingleselectChecked: React.FC<SharedVrTestArgs> = ({ noNativeElements, sel
   </Table>
 );
 
-const SortableHeaders: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SortableHeaders: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements} sortable>
     <TableHeader>
       <TableRow>
@@ -606,7 +604,7 @@ const SortableHeaders: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+export const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   <Table noNativeElements={noNativeElements}>
     <TableHeader>
       <TableRow>
@@ -641,7 +639,7 @@ const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   </Table>
 );
 
-const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativeElements, truncate }) => (
+export const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativeElements, truncate }) => (
   <Table noNativeElements={noNativeElements} style={{ width: '400px' }}>
     <TableHeader>
       <TableRow>
@@ -684,7 +682,7 @@ const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativ
   </Table>
 );
 
-const ResizableColumns: React.FC<SharedVrTestArgs & { scrollToEnd?: boolean }> = ({
+export const ResizableColumns: React.FC<SharedVrTestArgs & { scrollToEnd?: boolean }> = ({
   noNativeElements,
   scrollToEnd,
 }) => {
@@ -762,135 +760,3 @@ const ResizableColumns: React.FC<SharedVrTestArgs & { scrollToEnd?: boolean }> =
     </div>
   );
 };
-
-([true, false] as const).forEach(noNativeElements => {
-  const layoutName = noNativeElements ? 'flex' : 'table';
-  storiesOf(`Table layout ${layoutName} - cell actions`, module)
-    .addDecorator(story => (
-      <StoryWright steps={new Steps().hover('.row-1').snapshot('hover row').end()}>{story()}</StoryWright>
-    ))
-    .addStory('default', () => <CellActionsDefault noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    })
-    .addStory('always visible', () => <CellActionsAlwaysVisible noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    })
-    .addStory('in header cell', () => <CellActionsInHeaderCell noNativeElements={noNativeElements} />);
-
-  storiesOf(`Table layout ${layoutName}`, module)
-    .addStory('size - medium', () => <SizeMedium noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    })
-    .addStory('size - small', () => <SizeSmall noNativeElements={noNativeElements} />)
-    .addStory('size - extra small', () => <SizeExtraSmall noNativeElements={noNativeElements} />)
-    .addStory('primary cell', () => <PrimaryCell noNativeElements={noNativeElements} />)
-    .addStory('multiselect', () => <Multiselect noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    })
-    .addStory(
-      'multiselect (checked) - brand',
-      () => <MultiselectChecked noNativeElements={noNativeElements} selectedRowAppearance="brand" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory(
-      'multiselect (mixed) - brand',
-      () => <MultiselectMixed noNativeElements={noNativeElements} selectedRowAppearance="brand" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory('single select', () => <Singleselect noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    })
-    .addStory(
-      'single select (checked) - brand',
-      () => <SingleselectChecked noNativeElements={noNativeElements} selectedRowAppearance="brand" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory(
-      'multiselect (checked) - neutral',
-      () => <MultiselectChecked noNativeElements={noNativeElements} selectedRowAppearance="neutral" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory(
-      'multiselect (mixed) - neutral',
-      () => <MultiselectMixed noNativeElements={noNativeElements} selectedRowAppearance="neutral" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory(
-      'single select (checked) - neutral',
-      () => <SingleselectChecked noNativeElements={noNativeElements} selectedRowAppearance="neutral" />,
-      {
-        includeDarkMode: true,
-        includeHighContrast: true,
-        includeRtl: true,
-      },
-    )
-    .addStory('single select (checked)', () => <SingleselectChecked noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-      includeRtl: true,
-    });
-
-  storiesOf(`Table ${layoutName} - subtle selection`, module)
-    .addDecorator(story => (
-      <StoryWright steps={new Steps().hover('.not-selected').snapshot('hover unselected row').end()}>
-        {story()}
-      </StoryWright>
-    ))
-    .addStory('rest', () => <SubtleSelection noNativeElements={noNativeElements} />);
-  storiesOf(`Table layout ${layoutName} - headers`, module)
-    .addDecorator(story => (
-      <StoryWright
-        steps={new Steps()
-          .hover('.columnheader')
-          .snapshot('hover header')
-          .mouseDown('.columnheader')
-          .snapshot('press header')
-          .end()}
-      >
-        {story()}
-      </StoryWright>
-    ))
-    .addStory('sortable', () => <SortableHeaders noNativeElements={noNativeElements} />, {
-      includeDarkMode: true,
-      includeHighContrast: true,
-    });
-
-  storiesOf(`Table layout ${layoutName} - truncate`, module)
-    .addStory('default (disabled)', () => <Truncate noNativeElements={noNativeElements} />)
-    .addStory('false', () => <Truncate noNativeElements={noNativeElements} truncate={false} />)
-    .addStory('true', () => <Truncate noNativeElements={noNativeElements} truncate={true} />);
-
-  storiesOf(`Table layout ${layoutName} - resizable columns`, module)
-    .addStory('default', () => <ResizableColumns noNativeElements={noNativeElements} />)
-    .addStory('end', () => <ResizableColumns noNativeElements={noNativeElements} scrollToEnd />);
-});
diff --git a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
index 19f5f9ff46d8b..6924e258e895c 100644
--- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
@@ -1,222 +1,208 @@
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { TabList, Tab } from '@fluentui/react-tabs';
 
-storiesOf('TabList and Tab Converged', module)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.mouse-target')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('.mouse-target')
-        .snapshot('pressed', { cropTo: '.testWrapper' })
-        .mouseUp('.mouse-target')
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory(
-    'Default',
-    () => (
-      <TabList>
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('Vertical', () => (
-    <TabList vertical>
-      <Tab value="1">First</Tab>
-      <Tab className="mouse-target" value="2">
-        Second
-      </Tab>
-      <Tab value="3">Third</Tab>
-    </TabList>
-  ))
-  .addStory(
-    'Subtle appearance',
-    () => (
-      <TabList appearance="subtle">
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Small size',
-    () => (
-      <TabList size="small">
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Vertical and small size',
-    () => (
-      <TabList size="small" vertical>
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Large size',
-    () => (
-      <TabList size="large">
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Vertical and large size',
-    () => (
-      <TabList size="large" vertical>
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Tab Selected (default)',
-    () => (
-      <TabList defaultSelectedValue="2">
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Tab Selected',
-    () => (
-      <TabList selectedValue="2">
-        <Tab value="1">First</Tab>
-        <Tab className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab value="3">Third</Tab>
-      </TabList>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'With icon',
-    () => (
-      <TabList>
-        <Tab icon="A" value="1">
-          First
-        </Tab>
-        <Tab icon="B" className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab icon="C" value="3">
-          Third
-        </Tab>
-      </TabList>
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'With icon and vertical',
-    () => (
-      <TabList vertical>
-        <Tab icon="A" value="1">
-          First
-        </Tab>
-        <Tab icon="B" className="mouse-target" value="2">
-          Second
-        </Tab>
-        <Tab icon="C" value="3">
-          Third
-        </Tab>
-      </TabList>
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'With icon only',
-    () => (
-      <TabList>
-        <Tab icon="A" value="1" />
-        <Tab icon="B" className="mouse-target" value="2" />
-        <Tab icon="C" value="3" />
-      </TabList>
-    ),
-    {
-      includeRtl: false,
-    },
-  )
-  .addStory(
-    'With icon only and vertical',
-    () => (
-      <TabList vertical>
-        <Tab icon="A" value="1" />
-        <Tab icon="B" className="mouse-target" value="2" />
-        <Tab icon="C" value="3" />
-      </TabList>
-    ),
-    {
-      includeRtl: false,
-    },
-  );
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities';
+
+export default {
+  title: 'TabList and Tab Converged',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('.mouse-target')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('.mouse-target')
+          .snapshot('pressed', { cropTo: '.testWrapper' })
+          .mouseUp('.mouse-target')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof TabList>;
+
+export const Default = () => (
+  <TabList>
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Vertical = () => (
+  <TabList vertical>
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+
+export const SubtleAppearance = () => (
+  <TabList appearance="subtle">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+SubtleAppearance.storyName = 'Subtle appearance';
+
+export const SubtleAppearanceHighContrast = getStoryVariant(SubtleAppearance, HIGH_CONTRAST);
+
+export const SubtleAppearanceDarkMode = getStoryVariant(SubtleAppearance, DARK_MODE);
+
+export const SmallSize = () => (
+  <TabList size="small">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+SmallSize.storyName = 'Small size';
+
+export const SmallSizeHighContrast = getStoryVariant(SmallSize, HIGH_CONTRAST);
+
+export const SmallSizeDarkMode = getStoryVariant(SmallSize, DARK_MODE);
+
+export const VerticalAndSmallSize = () => (
+  <TabList size="small" vertical>
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+VerticalAndSmallSize.storyName = 'Vertical and small size';
+
+export const VerticalAndSmallSizeHighContrast = getStoryVariant(VerticalAndSmallSize, HIGH_CONTRAST);
+
+export const VerticalAndSmallSizeDarkMode = getStoryVariant(VerticalAndSmallSize, DARK_MODE);
+
+export const LargeSize = () => (
+  <TabList size="large">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+LargeSize.storyName = 'Large size';
+
+export const LargeSizeHighContrast = getStoryVariant(LargeSize, HIGH_CONTRAST);
+
+export const LargeSizeDarkMode = getStoryVariant(LargeSize, DARK_MODE);
+
+export const VerticalAndLargeSize = () => (
+  <TabList size="large" vertical>
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+VerticalAndLargeSize.storyName = 'Vertical and large size';
+
+export const VerticalAndLargeSizeHighContrast = getStoryVariant(VerticalAndLargeSize, HIGH_CONTRAST);
+
+export const VerticalAndLargeSizeDarkMode = getStoryVariant(VerticalAndLargeSize, DARK_MODE);
+
+export const TabSelectedDefault = () => (
+  <TabList defaultSelectedValue="2">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+TabSelectedDefault.storyName = 'Tab Selected (default)';
+
+export const TabSelectedDefaultHighContrast = getStoryVariant(TabSelectedDefault, HIGH_CONTRAST);
+
+export const TabSelectedDefaultDarkMode = getStoryVariant(TabSelectedDefault, DARK_MODE);
+
+export const TabSelected = () => (
+  <TabList selectedValue="2">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+
+export const TabSelectedHighContrast = getStoryVariant(TabSelected, HIGH_CONTRAST);
+
+export const TabSelectedDarkMode = getStoryVariant(TabSelected, DARK_MODE);
+
+export const WithIcon = () => (
+  <TabList>
+    <Tab icon="A" value="1">
+      First
+    </Tab>
+    <Tab icon="B" className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab icon="C" value="3">
+      Third
+    </Tab>
+  </TabList>
+);
+WithIcon.storyName = 'With icon';
+
+export const WithIconRTL = getStoryVariant(WithIcon, RTL);
+
+export const WithIconAndVertical = () => (
+  <TabList vertical>
+    <Tab icon="A" value="1">
+      First
+    </Tab>
+    <Tab icon="B" className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab icon="C" value="3">
+      Third
+    </Tab>
+  </TabList>
+);
+WithIconAndVertical.storyName = 'With icon and vertical';
+
+export const WithIconAndVerticalRTL = getStoryVariant(WithIconAndVertical, RTL);
+
+export const WithIconOnly = () => (
+  <TabList>
+    <Tab icon="A" value="1" />
+    <Tab icon="B" className="mouse-target" value="2" />
+    <Tab icon="C" value="3" />
+  </TabList>
+);
+WithIconOnly.storyName = 'With icon only';
+
+export const WithIconOnlyAndVertical = () => (
+  <TabList vertical>
+    <Tab icon="A" value="1" />
+    <Tab icon="B" className="mouse-target" value="2" />
+    <Tab icon="C" value="3" />
+  </TabList>
+);
+
+WithIconOnlyAndVertical.storyName = 'With icon only and vertical';
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index 88a300aebc624..c5460fe58e434 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { Avatar } from '@fluentui/react-avatar';
 import { Steps } from 'storywright';
@@ -12,9 +12,9 @@ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'InteractionTag Converged',
-  Component: InteractionTag,
+  component: InteractionTag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof InteractionTag>;
+} satisfies Meta<typeof InteractionTag>;
 
 export const Default = () => (
   <InteractionTag>
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
index f976d2d70a2f4..681b0c8fc5776 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
 import { Steps } from 'storywright';
 
@@ -25,9 +25,9 @@ const steps = new Steps()
 
 export default {
   title: 'InteractionTag Converged',
-  Component: InteractionTag,
+  component: InteractionTag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof InteractionTag>;
+} satisfies Meta<typeof InteractionTag>;
 
 export const Filled = () => (
   <InteractionTag appearance="filled">
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
index 56ee37944574b..7b539a470bbd6 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { Avatar } from '@fluentui/react-avatar';
 import { Steps } from 'storywright';
@@ -26,9 +26,9 @@ const steps = new Steps()
 
 export default {
   title: 'InteractionTag Converged',
-  Component: InteractionTag,
+  component: InteractionTag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof InteractionTag>;
+} satisfies Meta<typeof InteractionTag>;
 
 export const Rounded = () => (
   <InteractionTag>
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index f95469f3f6b46..bde3970f43ea8 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tag } from '@fluentui/react-tags';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { Avatar } from '@fluentui/react-avatar';
 import { Steps } from 'storywright';
@@ -12,9 +12,9 @@ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'Tag Converged',
-  Component: Tag,
+  component: Tag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Tag>;
+} satisfies Meta<typeof Tag>;
 
 export const Default = () => <Tag>Primary Text</Tag>;
 
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
index 294e2aceaa21a..0310924ea9fbf 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tag } from '@fluentui/react-tags';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
 import { Steps } from 'storywright';
 
@@ -18,9 +18,9 @@ const steps = new Steps()
 
 export default {
   title: 'Tag Converged',
-  Component: Tag,
+  component: Tag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Tag>;
+} satisfies Meta<typeof Tag>;
 
 export const Filled = () => (
   <Tag appearance="filled" dismissible icon={<CalendarMonth />} dismissIcon={{ id: dismissIconId }}>
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
index bf2168e68a919..961347ffbd30e 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TagGroup, Tag, InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';
 
@@ -8,9 +8,9 @@ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'TagGroup Converged',
-  Component: TagGroup,
+  component: TagGroup,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof TagGroup>;
+} satisfies Meta<typeof TagGroup>;
 
 export const Default = () => (
   <TagGroup>
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
index 5bcdfc9c154c6..2a0a461147187 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tag } from '@fluentui/react-tags';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { Avatar } from '@fluentui/react-avatar';
 import { Steps } from 'storywright';
@@ -17,9 +17,9 @@ const steps = new Steps()
 
 export default {
   title: 'Tag Converged',
-  Component: Tag,
+  component: Tag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Tag>;
+} satisfies Meta<typeof Tag>;
 
 export const Rounded = () => <Tag>Primary Text</Tag>;
 
diff --git a/apps/vr-tests-react-components/src/stories/TagPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/TagPicker.stories.tsx
index 1bc469bdd8264..6cb98ba4fedd4 100644
--- a/apps/vr-tests-react-components/src/stories/TagPicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/TagPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import {
   TagPicker,
   TagPickerControl,
@@ -12,16 +12,17 @@ import {
 } from '@fluentui/react-tag-picker';
 import { Tag } from '@fluentui/react-tags';
 import { Avatar } from '@fluentui/react-avatar';
-import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../utilities/getStoryVariant';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { Steps, StoryWright } from 'storywright';
 import { ArrowDownFilled } from '@fluentui/react-icons';
 import { Button } from '@fluentui/react-button';
 
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../utilities';
+
 export default {
   title: 'TagPicker',
-} as ComponentMeta<typeof TagPicker>;
+} satisfies Meta<typeof TagPicker>;
 
 const options = [
   'John Doe',
@@ -76,10 +77,12 @@ export const Default = (props: Pick<TagPickerProps, 'appearance' | 'size'>) => {
     </div>
   );
 };
-
 Default.storyName = 'default';
+
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
 export const DefaultRTL = getStoryVariant(Default, RTL);
 
 export const DefaultOpen = () => {
@@ -133,10 +136,12 @@ export const DefaultOpen = () => {
     </StoryWright>
   );
 };
-
 DefaultOpen.storyName = 'default open';
+
 export const DefaultOpenDarkMode = getStoryVariant(DefaultOpen, DARK_MODE);
+
 export const DefaultOpenHighContrast = getStoryVariant(DefaultOpen, HIGH_CONTRAST);
+
 export const DefaultOpenRTL = getStoryVariant(DefaultOpen, RTL);
 
 const useStyles = makeStyles({
@@ -174,10 +179,12 @@ export const Appearance = () => {
     </>
   );
 };
-
 Appearance.storyName = 'appearance';
+
 export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+
 export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST);
+
 export const AppearanceRTL = getStoryVariant(Appearance, RTL);
 
 export const Size = () => (
@@ -197,8 +204,11 @@ export const Size = () => (
   </>
 );
 Size.storyName = 'size';
+
 export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
+
 export const SizeHighContrast = getStoryVariant(Size, HIGH_CONTRAST);
+
 export const SizeRTL = getStoryVariant(Size, RTL);
 
 export const Disabled = () => {
@@ -251,8 +261,11 @@ export const Disabled = () => {
   );
 };
 Disabled.storyName = 'disabled';
+
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
 export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+
 export const DisabledRTL = getStoryVariant(Disabled, RTL);
 
 export const ExpandIcon = () => {
@@ -366,8 +379,11 @@ export const Grouped = () => {
   );
 };
 Grouped.storyName = 'grouped';
+
 export const GroupedDarkMode = getStoryVariant(Grouped, DARK_MODE);
+
 export const GroupedHighContrast = getStoryVariant(Grouped, HIGH_CONTRAST);
+
 export const GroupedRTL = getStoryVariant(Grouped, RTL);
 
 export const SecondaryAction = () => {
@@ -422,6 +438,9 @@ export const SecondaryAction = () => {
   );
 };
 SecondaryAction.storyName = 'secondary action';
+
 export const SecondaryActionDarkMode = getStoryVariant(SecondaryAction, DARK_MODE);
+
 export const SecondaryActionHighContrast = getStoryVariant(SecondaryAction, HIGH_CONTRAST);
+
 export const SecondaryActionRTL = getStoryVariant(SecondaryAction, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
index ad5f9d33c4dae..2f44cb6f30c08 100644
--- a/apps/vr-tests-react-components/src/stories/Text.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Steps, StoryWright } from 'storywright';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import {
   Body1,
   Body1Strong,
@@ -22,150 +22,159 @@ import {
   Title3,
 } from '@fluentui/react-text';
 
-storiesOf('Text Converged', module)
-  .addDecorator((story: () => React.ReactNode) => (
-    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities';
+
+export default {
+  title: 'Text Converged',
+
+  decorators: [
+    (storyFn, context) => (
       <div className="testWrapper" style={{ width: '250px' }}>
-        {story()}
+        {storyFn(context)}
       </div>
-    </StoryWright>
-  ))
-  .addStory(
-    'Default',
-    () => (
-      <>
-        <p>
-          <Title3 block>Default</Title3>
-          <Text>Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.</Text>
-        </p>
-        <p>
-          <Title3 block>No wrapping</Title3>
-          <Text block wrap={false}>
-            Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Truncate</Title3>
-          <Text block wrap={false} truncate>
-            Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Italic</Title3>
-          <Text block italic>
-            Hello, world
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Underline</Title3>
-          <Text block underline>
-            Hello, world
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Strikethrough</Title3>
-          <Text block strikethrough>
-            Hello, world
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Sizes</Title3>
-          <Text block size={100}>
-            100
-          </Text>
-          <Text block size={200}>
-            200
-          </Text>
-          <Text block size={300}>
-            300
-          </Text>
-          <Text block size={400}>
-            400
-          </Text>
-          <Text block size={500}>
-            500
-          </Text>
-          <Text block size={600}>
-            600
-          </Text>
-          <Text block size={700}>
-            700
-          </Text>
-          <Text block size={800}>
-            800
-          </Text>
-          <Text block size={900}>
-            900
-          </Text>
-          <Text block size={1000}>
-            1000
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Fonts</Title3>
-          <Text block font="base">
-            Base
-          </Text>
-          <Text block font="monospace">
-            Monospace
-          </Text>
-          <Text block font="numeric">
-            Numeric
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Weights</Title3>
-          <Text block weight="regular">
-            Regular
-          </Text>
-          <Text block weight="medium">
-            Medium
-          </Text>
-          <Text block weight="semibold">
-            Semibold
-          </Text>
-        </p>
-        <p>
-          <Title3 block>Alignments</Title3>
-          <Text block align="start">
-            Start
-          </Text>
-          <Text block align="center">
-            Center
-          </Text>
-          <Text block align="end">
-            End
-          </Text>
-          <Text block align="justify">
-            Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
-          </Text>
-        </p>
-      </>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory(
-    'Typography presets',
-    () => (
-      <>
-        <Body1 block>Body1</Body1>
-        <Body1Strong block>Body1Strong</Body1Strong>
-        <Body1Stronger block>Body1Stronger</Body1Stronger>
-        <Body2 block>Body2</Body2>
-        <Caption1 block>Caption1</Caption1>
-        <Caption1Strong block>Caption1Strong</Caption1Strong>
-        <Caption1Stronger block>Caption1Stronger</Caption1Stronger>
-        <Caption2 block>Caption2</Caption2>
-        <Caption2Strong block>Caption2Strong</Caption2Strong>
-        <Display block>Display</Display>
-        <LargeTitle block>LargeTitle</LargeTitle>
-        <Subtitle1 block>Subtitle1</Subtitle1>
-        <Subtitle2 block>Subtitle2</Subtitle2>
-        <Subtitle2Stronger block>Subtitle2Stronger</Subtitle2Stronger>
-        <Title1 block>Title1</Title1>
-        <Title2 block>Title2</Title2>
-        <Title3 block>Title3</Title3>
-      </>
     ),
-    { includeRtl: true },
-  );
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Text>;
+
+export const Default = () => (
+  <>
+    <p>
+      <Title3 block>Default</Title3>
+      <Text>Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.</Text>
+    </p>
+    <p>
+      <Title3 block>No wrapping</Title3>
+      <Text block wrap={false}>
+        Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Truncate</Title3>
+      <Text block wrap={false} truncate>
+        Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Italic</Title3>
+      <Text block italic>
+        Hello, world
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Underline</Title3>
+      <Text block underline>
+        Hello, world
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Strikethrough</Title3>
+      <Text block strikethrough>
+        Hello, world
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Sizes</Title3>
+      <Text block size={100}>
+        100
+      </Text>
+      <Text block size={200}>
+        200
+      </Text>
+      <Text block size={300}>
+        300
+      </Text>
+      <Text block size={400}>
+        400
+      </Text>
+      <Text block size={500}>
+        500
+      </Text>
+      <Text block size={600}>
+        600
+      </Text>
+      <Text block size={700}>
+        700
+      </Text>
+      <Text block size={800}>
+        800
+      </Text>
+      <Text block size={900}>
+        900
+      </Text>
+      <Text block size={1000}>
+        1000
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Fonts</Title3>
+      <Text block font="base">
+        Base
+      </Text>
+      <Text block font="monospace">
+        Monospace
+      </Text>
+      <Text block font="numeric">
+        Numeric
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Weights</Title3>
+      <Text block weight="regular">
+        Regular
+      </Text>
+      <Text block weight="medium">
+        Medium
+      </Text>
+      <Text block weight="semibold">
+        Semibold
+      </Text>
+    </p>
+    <p>
+      <Title3 block>Alignments</Title3>
+      <Text block align="start">
+        Start
+      </Text>
+      <Text block align="center">
+        Center
+      </Text>
+      <Text block align="end">
+        End
+      </Text>
+      <Text block align="justify">
+        Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
+      </Text>
+    </p>
+  </>
+);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const TypographyPresets = () => (
+  <>
+    <Body1 block>Body1</Body1>
+    <Body1Strong block>Body1Strong</Body1Strong>
+    <Body1Stronger block>Body1Stronger</Body1Stronger>
+    <Body2 block>Body2</Body2>
+    <Caption1 block>Caption1</Caption1>
+    <Caption1Strong block>Caption1Strong</Caption1Strong>
+    <Caption1Stronger block>Caption1Stronger</Caption1Stronger>
+    <Caption2 block>Caption2</Caption2>
+    <Caption2Strong block>Caption2Strong</Caption2Strong>
+    <Display block>Display</Display>
+    <LargeTitle block>LargeTitle</LargeTitle>
+    <Subtitle1 block>Subtitle1</Subtitle1>
+    <Subtitle2 block>Subtitle2</Subtitle2>
+    <Subtitle2Stronger block>Subtitle2Stronger</Subtitle2Stronger>
+    <Title1 block>Title1</Title1>
+    <Title2 block>Title2</Title2>
+    <Title3 block>Title3</Title3>
+  </>
+);
+TypographyPresets.storyName = 'Typography presets';
+
+export const TypographyPresetsRTL = getStoryVariant(TypographyPresets, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
deleted file mode 100644
index 0a6e3a5645dc6..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Textarea } from '@fluentui/react-textarea';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-import { FluentProvider } from '@fluentui/react-provider';
-
-storiesOf('Textarea Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('textarea')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .click('textarea')
-        .wait(250) // needed for bottom focus border animation
-        .snapshot('focused', { cropTo: '.textWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => <Textarea placeholder="Placeholder" />)
-  .addStory('Appearance: filled-darker', () => <Textarea appearance="filled-darker" placeholder="Placeholder" />)
-  .addStory('Appearance: filled-lighter', () => (
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Textarea appearance="filled-lighter" placeholder="Placeholder" />
-    </div>
-  ))
-  .addStory('Invalid: outline', () => <Textarea aria-invalid placeholder="Placeholder" />)
-  .addStory('Invalid: filled-darker', () => (
-    <Textarea aria-invalid appearance="filled-darker" placeholder="Placeholder" />
-  ))
-  .addStory('Invalid: filled-lighter', () => (
-    <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Textarea aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
-    </div>
-  ))
-  .addStory('With value', () => <Textarea defaultValue="Value" />);
-
-// Non interactive
-storiesOf('Textarea Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Size: small', () => <Textarea size="small" placeholder="Placeholder" />)
-  .addStory('Size: medium', () => <Textarea size="medium" placeholder="Placeholder" />)
-  .addStory('Size: large', () => <Textarea size="large" placeholder="Placeholder" />)
-  .addStory('Disabled', () => <Textarea defaultValue="Example Textarea value" disabled />)
-  .addStory('Disabled + placeholder', () => <Textarea placeholder="Example Textarea placeholder" disabled />)
-  .addStory('Disabled + filled', () => (
-    <Textarea appearance="filled-darker" defaultValue="Example Textarea value" disabled />
-  ))
-  .addStory('With appearance override', () => (
-    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <Textarea placeholder="Default overriden appearance" />
-        <Textarea appearance="outline" placeholder="Outline appearance" />
-      </div>
-    </FluentProvider>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000000000..d26b599da702d
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Textarea } from '@fluentui/react-textarea';
+import { FluentProvider } from '@fluentui/react-provider';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Textarea Converged',
+
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof Textarea>;
+
+export const SizeSmall = () => <Textarea size="small" placeholder="Placeholder" />;
+SizeSmall.storyName = 'Size: small';
+
+export const SizeMedium = () => <Textarea size="medium" placeholder="Placeholder" />;
+SizeMedium.storyName = 'Size: medium';
+
+export const SizeLarge = () => <Textarea size="large" placeholder="Placeholder" />;
+SizeLarge.storyName = 'Size: large';
+
+export const Disabled = () => <Textarea defaultValue="Example Textarea value" disabled />;
+export const DisabledPlaceholder = () => <Textarea placeholder="Example Textarea placeholder" disabled />;
+DisabledPlaceholder.storyName = 'Disabled + placeholder';
+
+export const DisabledFilled = () => (
+  <Textarea appearance="filled-darker" defaultValue="Example Textarea value" disabled />
+);
+DisabledFilled.storyName = 'Disabled + filled';
+
+export const WithAppearanceOverride = () => (
+  <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <Textarea placeholder="Default overriden appearance" />
+      <Textarea appearance="outline" placeholder="Outline appearance" />
+    </div>
+  </FluentProvider>
+);
+WithAppearanceOverride.storyName = 'With appearance override';
diff --git a/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx
new file mode 100644
index 0000000000000..711e3b5f7e495
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Textarea } from '@fluentui/react-textarea';
+
+import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Textarea Converged',
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('textarea')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .click('textarea')
+          .wait(250) // needed for bottom focus border animation
+          .snapshot('focused', { cropTo: '.textWrapper' })
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof Textarea>;
+
+export const AppearanceOutlineDefault = () => <Textarea placeholder="Placeholder" />;
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceFilledDarker = () => <Textarea appearance="filled-darker" placeholder="Placeholder" />;
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter = () => (
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <Textarea appearance="filled-lighter" placeholder="Placeholder" />
+  </div>
+);
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const InvalidOutline = () => <Textarea aria-invalid placeholder="Placeholder" />;
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidFilledDarker = () => <Textarea aria-invalid appearance="filled-darker" placeholder="Placeholder" />;
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter = () => (
+  <div style={{ background: '#f5f5f5', padding: '10px' }}>
+    <Textarea aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
+  </div>
+);
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
+
+export const WithValue = () => <Textarea defaultValue="Value" />;
+WithValue.storyName = 'With value';
diff --git a/apps/vr-tests-react-components/src/stories/TimePicker.stories.tsx b/apps/vr-tests-react-components/src/stories/TimePicker.stories.tsx
index cd510c112cd7d..4f357aead002f 100644
--- a/apps/vr-tests-react-components/src/stories/TimePicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/TimePicker.stories.tsx
@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Steps, StoryWright } from 'storywright';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
 import { TimePicker } from '@fluentui/react-timepicker-compat';
 
+import { withStoryWrightSteps } from '../utilities';
+
 export default {
   title: 'TimePicker compat',
-  decorators: [
-    Story => (
-      <StoryWright steps={new Steps().snapshot('default').end()}>
-        <Story />
-      </StoryWright>
-    ),
-  ],
-} as ComponentMeta<typeof TimePicker>;
+
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
+} satisfies Meta<typeof TimePicker>;
 
 export const Default = () => <TimePicker open startHour={11} endHour={13} />;
+
 export const With12HourFormat = () => <TimePicker open startHour={11} endHour={13} hourCycle="h11" />;
+
 export const ShowSeconds = () => <TimePicker open startHour={11} endHour={13} showSeconds />;
diff --git a/apps/vr-tests-react-components/src/stories/Toast/Toast.stories.tsx b/apps/vr-tests-react-components/src/stories/Toast/Toast.stories.tsx
index 9a586ab0c875f..70eafba7c9be5 100644
--- a/apps/vr-tests-react-components/src/stories/Toast/Toast.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Toast/Toast.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import {
   Toast,
   ToastTitle,
@@ -22,7 +22,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Toast>;
+} satisfies Meta<typeof Toast>;
 
 const toastIntents = ['success', 'warning', 'info', 'error'] as const;
 
diff --git a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
index f9d5044a62872..f77fc819fc6dd 100644
--- a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
@@ -18,12 +18,12 @@ import {
   FontDecreaseRegular,
   TextFontRegular,
 } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { steps } from './utils';
 
 export default {
   title: 'Toolbar Converged',
-  Component: Toolbar,
+  component: Toolbar,
   decorators: [
     story => (
       <StoryWright steps={steps}>
@@ -33,7 +33,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Toolbar>;
+} satisfies Meta<typeof Toolbar>;
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx b/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
deleted file mode 100644
index 6be2cc56e5046..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Tooltip } from '@fluentui/react-tooltip';
-import { TestWrapperDecorator } from '../utilities/index';
-import { makeStyles, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { Steps, StoryWright } from 'storywright';
-
-const useStyles = makeStyles({
-  wrapper: {
-    display: 'flex',
-    ...shorthands.gap('5px'),
-    ...shorthands.padding('50px', '120px'),
-    backgroundColor: tokens.colorNeutralBackground1,
-
-    '& button, & .target': {
-      color: tokens.colorNeutralForeground1,
-      backgroundColor: tokens.colorNeutralBackground1,
-      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
-    },
-  },
-});
-
-storiesOf('Tooltip Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addStory(
-    'basic',
-    () => (
-      <div className={useStyles().wrapper}>
-        <Tooltip visible content="This is a tooltip" relationship="description">
-          <button>Target</button>
-        </Tooltip>
-      </div>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory(
-    'inverted',
-    () => (
-      <div className={useStyles().wrapper}>
-        <Tooltip visible appearance="inverted" content="Inverted tooltip" relationship="description">
-          <button>Target</button>
-        </Tooltip>
-      </div>
-    ),
-    { includeDarkMode: true },
-  )
-  .addStory(
-    'withArrow',
-    () => (
-      <div className={useStyles().wrapper}>
-        <Tooltip visible withArrow content="Tooltip with an arrow" relationship="description">
-          <button>Target</button>
-        </Tooltip>
-      </div>
-    ),
-    { includeDarkMode: true, includeHighContrast: true },
-  )
-  .addStory(
-    'inverted withArrow',
-    () => (
-      <div className={useStyles().wrapper}>
-        <Tooltip
-          visible
-          appearance="inverted"
-          withArrow
-          content="Inverted tooltip with an arrow"
-          relationship="description"
-        >
-          <button>Target</button>
-        </Tooltip>
-      </div>
-    ),
-    { includeDarkMode: true },
-  )
-  .addStory('text-wrapping', () => (
-    <div className={useStyles().wrapper}>
-      <Tooltip visible content="This tooltip's text is long enough to wrap to a new line" relationship="description">
-        <button>Target</button>
-      </Tooltip>
-    </div>
-  ))
-  .addStory('overflow-wrap', () => (
-    <div className={useStyles().wrapper}>
-      <Tooltip visible content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
-        <button>Target</button>
-      </Tooltip>
-    </div>
-  ))
-  .addStory('overflow-wrap withArrow', () => (
-    <div className={useStyles().wrapper}>
-      <Tooltip visible withArrow content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
-        <button>Target</button>
-      </Tooltip>
-    </div>
-  ));
-
-const TooltipPositioning: React.FC = () => {
-  const positions = [
-    ['above', 'start'],
-    ['above', 'center'],
-    ['above', 'end'],
-    ['below', 'start'],
-    ['below', 'center'],
-    ['below', 'end'],
-    ['before', 'top'],
-    ['before', 'center'],
-    ['before', 'bottom'],
-    ['after', 'top'],
-    ['after', 'center'],
-    ['after', 'bottom'],
-  ] as const;
-
-  const [target, setTarget] = React.useState<HTMLDivElement | null>(null);
-  const [visible, setVisible] = React.useState<boolean>(false);
-
-  return (
-    <div className={useStyles().wrapper}>
-      <div ref={setTarget} className="target" style={{ width: '300px', height: '300px' }}>
-        {positions.map(([position, align]) => (
-          <Tooltip
-            key={position + align}
-            content={{ children: position + ' ' + align, style: { height: 50 } }}
-            relationship="label"
-            positioning={{ position, align, target }}
-            withArrow
-            visible={visible}
-          />
-        ))}
-
-        <button id="show-tooltips" onClick={() => setVisible(true)}>
-          Show tooltips
-        </button>
-      </div>
-    </div>
-  );
-};
-
-storiesOf('Tooltip Converged', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps().click('#show-tooltips').snapshot('positioned tooltips', { cropTo: '.testWrapper' }).end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('positioning', () => <TooltipPositioning />, { includeRtl: true, includeHighContrast: true });
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip/Tooltip.stories.tsx b/apps/vr-tests-react-components/src/stories/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000000000..8120c2e1ed9bd
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Tooltip } from '@fluentui/react-tooltip';
+
+import { useStyles } from './utils';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'Tooltip Converged',
+  decorators: [TestWrapperDecorator],
+} satisfies Meta<typeof Tooltip>;
+
+export const Basic = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible content="This is a tooltip" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+Basic.storyName = 'basic';
+
+export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
+
+export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
+
+export const Inverted = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible appearance="inverted" content="Inverted tooltip" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+Inverted.storyName = 'inverted';
+
+export const InvertedDarkMode = getStoryVariant(Inverted, DARK_MODE);
+
+export const WithArrow = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible withArrow content="Tooltip with an arrow" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+WithArrow.storyName = 'withArrow';
+
+export const WithArrowDarkMode = getStoryVariant(WithArrow, DARK_MODE);
+
+export const WithArrowHighContrast = getStoryVariant(WithArrow, HIGH_CONTRAST);
+
+export const InvertedWithArrow = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip
+      visible
+      appearance="inverted"
+      withArrow
+      content="Inverted tooltip with an arrow"
+      relationship="description"
+    >
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+InvertedWithArrow.storyName = 'inverted withArrow';
+
+export const InvertedWithArrowDarkMode = getStoryVariant(InvertedWithArrow, DARK_MODE);
+
+export const TextWrapping = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible content="This tooltip's text is long enough to wrap to a new line" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+TextWrapping.storyName = 'text-wrapping';
+
+export const OverflowWrap = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+OverflowWrap.storyName = 'overflow-wrap';
+
+export const OverflowWrapWithArrow = () => (
+  <div className={useStyles().wrapper}>
+    <Tooltip visible withArrow content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
+      <button>Target</button>
+    </Tooltip>
+  </div>
+);
+OverflowWrapWithArrow.storyName = 'overflow-wrap withArrow';
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip/TooltipPositioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Tooltip/TooltipPositioning.stories.tsx
new file mode 100644
index 0000000000000..d3bb24d934109
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tooltip/TooltipPositioning.stories.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { Tooltip } from '@fluentui/react-tooltip';
+
+import { useStyles } from './utils';
+import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, RTL, HIGH_CONTRAST } from '../../utilities';
+
+const TooltipPositioning: React.FC = () => {
+  const positions = [
+    ['above', 'start'],
+    ['above', 'center'],
+    ['above', 'end'],
+    ['below', 'start'],
+    ['below', 'center'],
+    ['below', 'end'],
+    ['before', 'top'],
+    ['before', 'center'],
+    ['before', 'bottom'],
+    ['after', 'top'],
+    ['after', 'center'],
+    ['after', 'bottom'],
+  ] as const;
+
+  const [target, setTarget] = React.useState<HTMLDivElement | null>(null);
+  const [visible, setVisible] = React.useState<boolean>(false);
+
+  return (
+    <div className={useStyles().wrapper}>
+      <div ref={setTarget} className="target" style={{ width: '300px', height: '300px' }}>
+        {positions.map(([position, align]) => (
+          <Tooltip
+            key={position + align}
+            content={{ children: position + ' ' + align, style: { height: 50 } }}
+            relationship="label"
+            positioning={{ position, align, target }}
+            withArrow
+            visible={visible}
+          />
+        ))}
+
+        <button id="show-tooltips" onClick={() => setVisible(true)}>
+          Show tooltips
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Tooltip Converged',
+
+  decorators: [
+    TestWrapperDecorator,
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps().click('#show-tooltips').snapshot('positioned tooltips', { cropTo: '.testWrapper' }).end(),
+      }),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export const Positioning = () => <TooltipPositioning />;
+Positioning.storyName = 'positioning';
+
+export const PositioningRTL = getStoryVariant(Positioning, RTL);
+
+export const PositioningHighContrast = getStoryVariant(Positioning, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip/utils.ts b/apps/vr-tests-react-components/src/stories/Tooltip/utils.ts
new file mode 100644
index 0000000000000..876b9ce0886fc
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tooltip/utils.ts
@@ -0,0 +1,17 @@
+import { makeStyles, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+
+export const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    ...shorthands.gap('5px'),
+    ...shorthands.padding('50px', '120px'),
+    backgroundColor: tokens.colorNeutralBackground1,
+
+    '& button, & .target': {
+      color: tokens.colorNeutralForeground1,
+      backgroundColor: tokens.colorNeutralBackground1,
+      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
+    },
+  },
+});
diff --git a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
index 7b097c4835d57..101d6cb90e777 100644
--- a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
@@ -14,8 +14,8 @@ import {
 import { tokens } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { ComponentMeta } from '@storybook/react';
-import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../utilities/getStoryVariant';
+import type { Meta } from '@storybook/react';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../utilities';
 import { Steps, StoryWright } from 'storywright';
 import {
   CaretDownRegular,
@@ -33,7 +33,7 @@ import { Avatar } from '@fluentui/react-avatar';
 
 export default {
   title: 'Tree',
-} as ComponentMeta<typeof Tree>;
+} satisfies Meta<typeof Tree>;
 
 export const Default = () => (
   <Tree aria-label="Tree">
@@ -69,10 +69,12 @@ export const Default = () => (
     </TreeItem>
   </Tree>
 );
-
 Default.storyName = 'default';
+
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
 export const DefaultRTL = getStoryVariant(Default, RTL);
 
 export const DefaultOpenTree = () => {
@@ -116,10 +118,12 @@ export const DefaultOpenTree = () => {
     </Tree>
   );
 };
-
 DefaultOpenTree.storyName = 'default open tree';
+
 export const DefaultOpenTreeDarkMode = getStoryVariant(DefaultOpenTree, DARK_MODE);
+
 export const DefaultOpenTreeHighContrast = getStoryVariant(DefaultOpenTree, HIGH_CONTRAST);
+
 export const DefaultOpenTreeRTL = getStoryVariant(DefaultOpenTree, RTL);
 
 export const Appearance = () => {
@@ -158,10 +162,12 @@ export const Appearance = () => {
     </StoryWright>
   );
 };
-
 Appearance.storyName = 'appearance';
+
 export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+
 export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST);
+
 export const AppearanceRTL = getStoryVariant(Appearance, RTL);
 
 export const Size = () => {
@@ -203,10 +209,12 @@ export const Size = () => {
     </>
   );
 };
-
 Size.storyName = 'size';
+
 export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
+
 export const SizeHighContrast = getStoryVariant(Size, HIGH_CONTRAST);
+
 export const SizeRTL = getStoryVariant(Size, RTL);
 
 export const ExpandIcon = () => {
@@ -250,10 +258,12 @@ export const ExpandIcon = () => {
     </Tree>
   );
 };
-
 ExpandIcon.storyName = 'expand icon';
+
 export const ExpandIconDarkMode = getStoryVariant(ExpandIcon, DARK_MODE);
+
 export const ExpandIconHighContrast = getStoryVariant(ExpandIcon, HIGH_CONTRAST);
+
 export const ExpandIconRTL = getStoryVariant(ExpandIcon, RTL);
 
 const ActionsExample = () => {
@@ -309,10 +319,12 @@ export const Actions = () => (
     </TreeItem>
   </Tree>
 );
-
 Actions.storyName = 'actions';
+
 export const ActionsDarkMode = getStoryVariant(Actions, DARK_MODE);
+
 export const ActionsHighContrast = getStoryVariant(Actions, HIGH_CONTRAST);
+
 export const ActionsRTL = getStoryVariant(Actions, RTL);
 
 export const Layout = () => (
@@ -384,10 +396,12 @@ export const Layout = () => (
     </TreeItem>
   </Tree>
 );
-
 Layout.storyName = 'layout';
+
 export const LayoutDarkMode = getStoryVariant(Layout, DARK_MODE);
+
 export const LayoutHighContrast = getStoryVariant(Layout, HIGH_CONTRAST);
+
 export const LayoutRTL = getStoryVariant(Layout, RTL);
 
 const useBadgeStyles = makeStyles({
@@ -473,10 +487,12 @@ export const Persona = () => {
     </Tree>
   );
 };
-
 Persona.storyName = 'persona';
+
 export const PersonaDarkMode = getStoryVariant(Persona, DARK_MODE);
+
 export const PersonaHighContrast = getStoryVariant(Persona, HIGH_CONTRAST);
+
 export const PersonaRTL = getStoryVariant(Persona, RTL);
 
 const defaultItems: HeadlessFlatTreeItemProps[] = [
@@ -508,10 +524,12 @@ export const Flat = () => {
     </FlatTree>
   );
 };
-
 Flat.storyName = 'flat';
+
 export const FlatDarkMode = getStoryVariant(Flat, DARK_MODE);
+
 export const FlatHighContrast = getStoryVariant(Flat, HIGH_CONTRAST);
+
 export const FlatRTL = getStoryVariant(Flat, RTL);
 
 export const FlatTreeSingleSelection = () => {
@@ -534,10 +552,12 @@ export const FlatTreeSingleSelection = () => {
     </StoryWright>
   );
 };
-
 FlatTreeSingleSelection.storyName = 'flat tree single selection';
+
 export const FlatTreeSingleSelectionDarkMode = getStoryVariant(FlatTreeSingleSelection, DARK_MODE);
+
 export const FlatTreeSingleSelectionHighContrast = getStoryVariant(FlatTreeSingleSelection, HIGH_CONTRAST);
+
 export const FlatTreeSingleSelectionRTL = getStoryVariant(FlatTreeSingleSelection, RTL);
 
 export const FlatTreeMultiSelection = () => {
@@ -560,8 +580,10 @@ export const FlatTreeMultiSelection = () => {
     </StoryWright>
   );
 };
-
 FlatTreeMultiSelection.storyName = 'flat tree multi selection';
+
 export const FlatTreeMultiSelectionDarkMode = getStoryVariant(FlatTreeMultiSelection, DARK_MODE);
+
 export const FlatTreeMultiSelectionHighContrast = getStoryVariant(FlatTreeMultiSelection, HIGH_CONTRAST);
+
 export const FlatTreeMultiSelectionRTL = getStoryVariant(FlatTreeSingleSelection, RTL);
diff --git a/apps/vr-tests-react-components/src/utilities/TestWrapperDecorator.tsx b/apps/vr-tests-react-components/src/utilities/TestWrapperDecorator.tsx
index b3c53740c6786..c2057b4008113 100644
--- a/apps/vr-tests-react-components/src/utilities/TestWrapperDecorator.tsx
+++ b/apps/vr-tests-react-components/src/utilities/TestWrapperDecorator.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { DecoratorFunction } from '@storybook/addons';
-import { ExtendedStoryFnReturnType } from './types';
+import type { DecoratorFn } from '@storybook/react';
 
-export const TestWrapperDecorator: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+export const TestWrapperDecorator: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px', overflow: 'hidden' }}>
       {story()}
@@ -10,7 +9,7 @@ export const TestWrapperDecorator: DecoratorFunction<ExtendedStoryFnReturnType>
   </div>
 );
 
-export const TestWrapperDecoratorTall: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+export const TestWrapperDecoratorTall: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px 10px 120px' }}>
       {story()}
@@ -18,7 +17,7 @@ export const TestWrapperDecoratorTall: DecoratorFunction<ExtendedStoryFnReturnTy
   </div>
 );
 
-export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+export const TestWrapperDecoratorTallFixedWidth: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px 10px 120px', width: '300px' }}>
       {story()}
@@ -26,7 +25,7 @@ export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction<ExtendedStory
   </div>
 );
 
-export const TestWrapperDecoratorFixedWidth: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+export const TestWrapperDecoratorFixedWidth: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px', width: '300px' }}>
       {story()}
@@ -34,7 +33,7 @@ export const TestWrapperDecoratorFixedWidth: DecoratorFunction<ExtendedStoryFnRe
   </div>
 );
 
-export const TestWrapperDecoratorFullWidth: DecoratorFunction<ExtendedStoryFnReturnType> = story => (
+export const TestWrapperDecoratorFullWidth: DecoratorFn = story => (
   <div style={{ display: 'flex' }}>
     <div className="testWrapper" style={{ padding: '10px', width: '100%', overflow: 'hidden' }}>
       {story()}
diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts
deleted file mode 100644
index 8ef22a3f23cbc..0000000000000
--- a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ComponentStory } from '@storybook/react';
-import { parameters } from '@fluentui/react-storybook-addon';
-
-export const DARK_MODE = 'Dark Mode';
-export const HIGH_CONTRAST = 'High Contrast';
-export const RTL = 'RTL';
-
-const theme = {
-  'Dark Mode': 'web-dark',
-  'High Contrast': 'teams-high-contrast',
-} as const;
-
-type Variant = typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL;
-
-/**
- * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story.
- */
-export const getStoryVariant = (story: ComponentStory<any>, variant: Variant) => {
-  const fluentTheme = getTheme(variant);
-  const dir = getDir(variant);
-
-  return {
-    ...story,
-    render: story,
-    storyName: `${getStoryName(story)} - ${variant}`,
-    parameters: parameters({ fluentTheme, dir, mode: 'vr-test' }),
-  };
-};
-
-function getTheme(variant: Variant) {
-  if (variant === 'RTL') {
-    return 'web-light';
-  }
-  return theme[variant];
-}
-
-function getDir(variant: Variant) {
-  if (variant !== 'RTL') {
-    return 'ltr';
-  }
-  return 'rtl';
-}
-
-function getStoryName(story: ComponentStory<any>) {
-  if (story.storyName) {
-    return story.storyName;
-  }
-
-  return story.name.replace(/([a-z])([A-Z])/g, '$1 $2');
-}
diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx b/apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx
new file mode 100644
index 0000000000000..c4077a4f69aad
--- /dev/null
+++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { Args, DecoratorFn, StoryFn, StoryObj } from '@storybook/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme, webDarkTheme, teamsHighContrastTheme } from '@fluentui/react-theme';
+
+export const DARK_MODE = 'Dark Mode';
+export const HIGH_CONTRAST = 'High Contrast';
+export const RTL = 'RTL';
+
+type StoryVariant = typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL;
+
+/** Helper function that returns RTL, Dark Mode or High Contrast variant of an existing story. */
+export function getStoryVariant(story: StoryFn, variant: StoryVariant) {
+  const theme = getTheme(variant);
+  const dir = getDir(variant);
+
+  return {
+    ...story,
+    render: story,
+    storyName: `${getStoryName(story)} - ${variant}`,
+    parameters: {
+      ...story.parameters,
+      dir,
+      mode: 'vr-test',
+      theme,
+    },
+    decorators: [...(story.decorators ?? []), StoryVariantDecorator],
+  } satisfies StoryObj;
+}
+
+const StoryVariantDecorator: DecoratorFn = (storyFn, context) => {
+  return (
+    <FluentProvider applyStylesToPortals={false} theme={context.parameters.theme} dir={context.parameters.dir}>
+      {storyFn(context)}
+    </FluentProvider>
+  );
+};
+
+/** A mapping of story variants to Fluent themes. */
+const STORY_VARIANT_THEME = {
+  [RTL]: webLightTheme,
+  [DARK_MODE]: webDarkTheme,
+  [HIGH_CONTRAST]: teamsHighContrastTheme,
+} as const;
+
+function getTheme(variant: StoryVariant) {
+  return STORY_VARIANT_THEME[variant];
+}
+
+function getDir(variant: StoryVariant) {
+  return variant === RTL ? 'rtl' : 'ltr';
+}
+
+function getStoryName<TArgs = Args>({ name, storyName }: StoryFn<TArgs>) {
+  return storyName ?? name?.replace(/([a-z])([A-Z])/g, '$1 $2');
+}
diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts
index fb576191fc42a..177f1172845a5 100644
--- a/apps/vr-tests-react-components/src/utilities/index.ts
+++ b/apps/vr-tests-react-components/src/utilities/index.ts
@@ -1,12 +1,3 @@
-import { ExtendedStoryApi } from './types';
-
-declare module '@storybook/addons' {
-  interface StoryApi {
-    /** adds a story, but via VR Tests' addon which auto adds variants like RTL */
-    addStory: ExtendedStoryApi['addStory'];
-  }
-}
-
 export * from './TestWrapperDecorator';
 export * from './getStoryVariant';
 export * from './withStoryWrightSteps';
diff --git a/apps/vr-tests-react-components/src/utilities/types.ts b/apps/vr-tests-react-components/src/utilities/types.ts
deleted file mode 100644
index 80b0004a1f660..0000000000000
--- a/apps/vr-tests-react-components/src/utilities/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import type { StoryApi, StoryName, LegacyStoryFn, ClientApiReturnFn } from '@storybook/addons';
-
-/** Extra parameters provided by our addon (see `.storybook/preview.js`) */
-export interface AddStoryConfig {
-  /** Whether to include an RTL version of the story */
-  includeRtl?: boolean;
-  /** Whether to include a high contrast *theme* version of the story (converged only) */
-  includeHighContrast?: boolean;
-  /** Whether to include a dark theme version of the story (converged only) */
-  includeDarkMode?: boolean;
-}
-
-export type ExtendedStoryFnReturnType = React.ReactElement<unknown>;
-
-export type ExtendedStoryFn = LegacyStoryFn<ExtendedStoryFnReturnType>;
-export type StoryContext = Parameters<ExtendedStoryFn>[0];
-
-export interface ExtendedStoryApi extends StoryApi<ExtendedStoryFnReturnType> {
-  addStory: (storyName: StoryName, storyFn: ExtendedStoryFn, config?: AddStoryConfig) => ExtendedStoryApi;
-
-  add: ClientApiReturnFn<ExtendedStoryFnReturnType>;
-}
diff --git a/apps/vr-tests-react-components/src/utilities/utilities.test.tsx b/apps/vr-tests-react-components/src/utilities/utilities.test.tsx
index c8acd36d1b698..b520c17f55fac 100644
--- a/apps/vr-tests-react-components/src/utilities/utilities.test.tsx
+++ b/apps/vr-tests-react-components/src/utilities/utilities.test.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
-import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from './getStoryVariant';
+import type { StoryFn } from '@storybook/react';
 import { Button } from '@fluentui/react-button';
-import { ComponentStory } from '@storybook/react';
+import { webDarkTheme, teamsHighContrastTheme } from '@fluentui/react-theme';
+
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from './getStoryVariant';
 
 describe('utility functions', () => {
   describe('getStoryVariant', () => {
-    const DefaultStory = () => <Button> Hello World</Button>;
+    const DefaultStory: StoryFn = () => <Button> Hello World</Button>;
 
     it('should set the correct direction for story', () => {
       const ltrStory = getStoryVariant(DefaultStory, DARK_MODE);
@@ -20,26 +22,24 @@ describe('utility functions', () => {
       const darkModeStory = getStoryVariant(DefaultStory, DARK_MODE);
       const highContrastStory = getStoryVariant(DefaultStory, HIGH_CONTRAST);
 
-      expect(darkModeStory.parameters.fluentTheme).toBe('web-dark');
-      expect(highContrastStory.parameters.fluentTheme).toBe('teams-high-contrast');
+      expect(darkModeStory.parameters.theme).toEqual(webDarkTheme);
+      expect(highContrastStory.parameters.theme).toEqual(teamsHighContrastTheme);
     });
 
     it('should set the correct name for story', () => {
       const darkModeStory = getStoryVariant(DefaultStory, DARK_MODE);
       const highContrastStory = getStoryVariant(DefaultStory, HIGH_CONTRAST);
       const rtlStory = getStoryVariant(DefaultStory, RTL);
-
       expect(darkModeStory.storyName).toEqual('Default Story - Dark Mode');
       expect(highContrastStory.storyName).toEqual('Default Story - High Contrast');
       expect(rtlStory.storyName).toEqual('Default Story - RTL');
 
-      const buttonStory: ComponentStory<any> = DefaultStory;
+      const buttonStory: StoryFn = (...args) => DefaultStory(...args);
       buttonStory.storyName = 'button';
 
       const buttonDarkModeStory = getStoryVariant(buttonStory, DARK_MODE);
       const buttonHighContrastStory = getStoryVariant(buttonStory, HIGH_CONTRAST);
       const buttonRtlStory = getStoryVariant(buttonStory, RTL);
-
       expect(buttonDarkModeStory.storyName).toEqual('button - Dark Mode');
       expect(buttonHighContrastStory.storyName).toEqual('button - High Contrast');
       expect(buttonRtlStory.storyName).toEqual('button - RTL');
diff --git a/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx b/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
index 816b53ec340d4..f3dba2476395e 100644
--- a/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
+++ b/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StoryWright, Step } from 'storywright';
-import { StoryContext } from './types';
+import type { StoryContext } from '@storybook/react';
 
 export const withStoryWrightSteps = ({
   story,