From dd86813301e892ea6491292984351a4cf6a68783 Mon Sep 17 00:00:00 2001
From: Miroslav Stastny <miroslav.stastny@microsoft.com>
Date: Thu, 19 May 2022 16:58:30 +0200
Subject: [PATCH 01/11] fix(react-theme): Remove webHighContrast theme

---
 apps/vr-tests-react-components/.storybook/preview.js     | 4 ++--
 .../react-card/src/stories/CardAppearance.stories.tsx    | 4 ++--
 .../react-components/etc/react-components.api.md         | 3 ---
 packages/react-components/react-components/src/index.ts  | 1 -
 .../etc/react-storybook-addon.api.md                     | 4 ----
 .../react-components/react-storybook-addon/src/theme.ts  | 2 --
 .../react-storybook/src/knobs/useFluentTheme.ts          | 2 --
 .../react-switch/src/stories/SwitchThemed.stories.tsx    | 6 +++---
 .../react-components/react-theme/etc/react-theme.api.md  | 3 ---
 packages/react-components/react-theme/src/index.ts       | 9 +--------
 .../react-theme/src/themes/web/highContrastTheme.ts      | 4 ----
 .../react-components/react-theme/src/themes/web/index.ts | 1 -
 12 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 packages/react-components/react-theme/src/themes/web/highContrastTheme.ts

diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js
index 9075813bbd9ff..cf398f5828d91 100644
--- a/apps/vr-tests-react-components/.storybook/preview.js
+++ b/apps/vr-tests-react-components/.storybook/preview.js
@@ -1,7 +1,7 @@
 // @ts-check
 import * as React from 'react';
 import { setAddon } from '@storybook/react';
-import { webLightTheme, webHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
+import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
 import { FluentProvider } from '@fluentui/react-provider';
 
 /**
@@ -44,7 +44,7 @@ setAddon({
     }
     if (config.includeHighContrast) {
       this.add(storyName + ' - High Contrast', context => {
-        return <FluentProvider theme={webHighContrastTheme}>{storyFn(context)}</FluentProvider>;
+        return <FluentProvider theme={teamsHighContrastTheme}>{storyFn(context)}</FluentProvider>;
       });
     }
 
diff --git a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
index fc75419322bf4..a3e8c5b4cbe8d 100644
--- a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
@@ -4,7 +4,7 @@ import { Headline, Title3 } from '@fluentui/react-text';
 import { makeStyles, shorthands } from '@griffel/react';
 import { SampleCard } from './SampleCard.stories';
 import { FluentProvider } from '@fluentui/react-provider';
-import { webDarkTheme, webHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
+import { webDarkTheme, teamsHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
 
 const useStyles = makeStyles({
   container: {
@@ -85,7 +85,7 @@ export const Appearance = () => {
       <FluentProvider theme={webDarkTheme}>
         <AppearanceExamples title="Dark theme" />
       </FluentProvider>
-      <FluentProvider theme={webHighContrastTheme}>
+      <FluentProvider theme={teamsHighContrastTheme}>
         <AppearanceExamples title="High contrast theme" />
       </FluentProvider>
     </div>
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index f97407be2390f..e84fac1954de2 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -547,7 +547,6 @@ import { useTooltip_unstable } from '@fluentui/react-tooltip';
 import { useTooltipStyles_unstable } from '@fluentui/react-tooltip';
 import { VerticalSpacingTokens } from '@fluentui/react-theme';
 import { webDarkTheme } from '@fluentui/react-theme';
-import { webHighContrastTheme } from '@fluentui/react-theme';
 import { webLightTheme } from '@fluentui/react-theme';
 
 export { __styles }
@@ -1636,8 +1635,6 @@ export { VerticalSpacingTokens }
 
 export { webDarkTheme }
 
-export { webHighContrastTheme }
-
 export { webLightTheme }
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index bb0d8b1b16699..763f3ef982e07 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -86,7 +86,6 @@ export {
   tokens,
   typographyStyles,
   webDarkTheme,
-  webHighContrastTheme,
   webLightTheme,
 } from '@fluentui/react-theme';
 export type {
diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
index b1244a204d005..c9d140b21ddb9 100644
--- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
+++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
@@ -35,10 +35,6 @@ export const themes: readonly [{
     readonly id: "web-dark";
     readonly label: "Web Dark";
     readonly theme: Theme;
-}, {
-    readonly id: "web-high-contrast";
-    readonly label: "Web High Contrast";
-    readonly theme: Theme;
 }, {
     readonly id: "teams-light";
     readonly label: "Teams Light";
diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts
index e69ac8d2bfa5e..6727b72a73c84 100644
--- a/packages/react-components/react-storybook-addon/src/theme.ts
+++ b/packages/react-components/react-storybook-addon/src/theme.ts
@@ -1,7 +1,6 @@
 import {
   webLightTheme,
   webDarkTheme,
-  webHighContrastTheme,
   teamsLightTheme,
   teamsDarkTheme,
   teamsHighContrastTheme,
@@ -14,7 +13,6 @@ export { FluentProvider } from '@fluentui/react-provider';
 export const themes = [
   { id: 'web-light', label: 'Web Light', theme: webLightTheme },
   { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
-  { id: 'web-high-contrast', label: 'Web High Contrast', theme: webHighContrastTheme },
   { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme },
   { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme },
   { id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme },
diff --git a/packages/react-components/react-storybook/src/knobs/useFluentTheme.ts b/packages/react-components/react-storybook/src/knobs/useFluentTheme.ts
index 558cf43ae69dc..0d52aafdf149f 100644
--- a/packages/react-components/react-storybook/src/knobs/useFluentTheme.ts
+++ b/packages/react-components/react-storybook/src/knobs/useFluentTheme.ts
@@ -1,7 +1,6 @@
 import {
   webLightTheme,
   webDarkTheme,
-  webHighContrastTheme,
   teamsLightTheme,
   teamsDarkTheme,
   teamsHighContrastTheme,
@@ -14,7 +13,6 @@ const themeSelectorLabel = 'Theme';
 const themeOptions = [
   { label: 'Web Light', theme: webLightTheme },
   { label: 'Web Dark', theme: webDarkTheme },
-  { label: 'Web High Contrast', theme: webHighContrastTheme },
   { label: 'Teams Light', theme: teamsLightTheme },
   { label: 'Teams Dark', theme: teamsDarkTheme },
   { label: 'Teams High Contrast', theme: teamsHighContrastTheme },
diff --git a/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx b/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx
index 6e6c5a34a5251..dda58fe7752bf 100644
--- a/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx
+++ b/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FluentProvider } from '@fluentui/react-provider';
-import { webDarkTheme, webHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
+import { webDarkTheme, teamsHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
 import { Switch } from '../index';
 
 const outerWrapperStyle: React.CSSProperties = {
@@ -33,7 +33,7 @@ export const Themed = () => (
         <Switch checked={false} label="Unchecked and enabled" />
         <Switch checked={false} disabled label="Unchecked and disabled" />
       </FluentProvider>
-      <FluentProvider style={rightSectionStyle} theme={webHighContrastTheme}>
+      <FluentProvider style={rightSectionStyle} theme={teamsHighContrastTheme}>
         <Switch checked={false} label="Unchecked and enabled" />
         <Switch checked={false} disabled label="Unchecked and disabled" />
       </FluentProvider>
@@ -47,7 +47,7 @@ export const Themed = () => (
         <Switch checked label="Checked and enabled" />
         <Switch checked disabled label="Checked and disabled" />
       </FluentProvider>
-      <FluentProvider style={rightSectionStyle} theme={webHighContrastTheme}>
+      <FluentProvider style={rightSectionStyle} theme={teamsHighContrastTheme}>
         <Switch checked label="Checked and enabled" />
         <Switch checked disabled label="Checked and disabled" />
       </FluentProvider>
diff --git a/packages/react-components/react-theme/etc/react-theme.api.md b/packages/react-components/react-theme/etc/react-theme.api.md
index 5305cc58552dd..c96aa8b2d0883 100644
--- a/packages/react-components/react-theme/etc/react-theme.api.md
+++ b/packages/react-components/react-theme/etc/react-theme.api.md
@@ -522,9 +522,6 @@ export type VerticalSpacingTokens = {
 // @public (undocumented)
 export const webDarkTheme: Theme;
 
-// @public (undocumented)
-export const webHighContrastTheme: Theme;
-
 // @public (undocumented)
 export const webLightTheme: Theme;
 
diff --git a/packages/react-components/react-theme/src/index.ts b/packages/react-components/react-theme/src/index.ts
index 8c9615fd9a795..e53cf670bcd50 100644
--- a/packages/react-components/react-theme/src/index.ts
+++ b/packages/react-components/react-theme/src/index.ts
@@ -1,11 +1,4 @@
-export {
-  teamsDarkTheme,
-  teamsHighContrastTheme,
-  teamsLightTheme,
-  webDarkTheme,
-  webHighContrastTheme,
-  webLightTheme,
-} from './themes/index';
+export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes/index';
 export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils/index';
 
 export { themeToTokensObject } from './themeToTokensObject';
diff --git a/packages/react-components/react-theme/src/themes/web/highContrastTheme.ts b/packages/react-components/react-theme/src/themes/web/highContrastTheme.ts
deleted file mode 100644
index cb730cf71b03d..0000000000000
--- a/packages/react-components/react-theme/src/themes/web/highContrastTheme.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createHighContrastTheme } from '../../utils/createHighContrastTheme';
-import type { Theme } from '../../types';
-
-export const webHighContrastTheme: Theme = createHighContrastTheme();
diff --git a/packages/react-components/react-theme/src/themes/web/index.ts b/packages/react-components/react-theme/src/themes/web/index.ts
index 553fc643a162b..a5747057dff72 100644
--- a/packages/react-components/react-theme/src/themes/web/index.ts
+++ b/packages/react-components/react-theme/src/themes/web/index.ts
@@ -1,3 +1,2 @@
 export * from './lightTheme';
 export * from './darkTheme';
-export * from './highContrastTheme';

From ee9846751cbaaae3c54aa8e15314f00802ff55cc Mon Sep 17 00:00:00 2001
From: Miroslav Stastny <miroslav.stastny@microsoft.com>
Date: Thu, 19 May 2022 17:05:42 +0200
Subject: [PATCH 02/11] change file

---
 ...ct-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json | 7 +++++++
 ...i-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json
 create mode 100644 change/@fluentui-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json

diff --git a/change/@fluentui-react-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json b/change/@fluentui-react-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json
new file mode 100644
index 0000000000000..5bafae266acb8
--- /dev/null
+++ b/change/@fluentui-react-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove webHighContrast theme",
+  "packageName": "@fluentui/react-components",
+  "email": "miroslav.stastny@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json b/change/@fluentui-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json
new file mode 100644
index 0000000000000..7e3856b6e75e3
--- /dev/null
+++ b/change/@fluentui-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove webHighContrast theme",
+  "packageName": "@fluentui/react-theme",
+  "email": "miroslav.stastny@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 98ef426ab4419d2bec09ce11aecb887e86d89586 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Thu, 19 May 2022 15:09:06 -0700
Subject: [PATCH 03/11] react-button: Removing deprecated block prop from all
 button components (#23071)

* react-button: Removing deprecated block prop from all button components.

* Removing block stories.

* Adding changefile.

* Removing block prop from migration guide and vr tests.
---
 .../src/stories/Button.stories.tsx            | 228 ------------------
 ...-fd44c043-6794-4163-b728-31531b359075.json |   7 +
 .../react-button/etc/react-button.api.md      |   7 +-
 .../src/components/Button/Button.types.ts     |  12 +-
 .../src/components/Button/MIGRATION.md        |   3 +-
 .../src/components/Button/SPEC.md             |  75 +-----
 .../Button/stories/ButtonBlock.stories.tsx    |  15 --
 .../src/components/Button/useButton.ts        |   3 -
 .../src/components/Button/useButtonStyles.ts  |  19 +-
 .../CompoundButton/CompoundButton.types.ts    |   2 +-
 .../stories/CompoundButtonBlock.stories.tsx   |  17 --
 .../components/MenuButton/MenuButton.types.ts |   2 +-
 .../stories/MenuButtonBlock.stories.tsx       |  25 --
 .../stories/SplitButtonBlock.stories.tsx      |  29 ---
 .../components/SplitButton/useSplitButton.ts  |   4 -
 .../SplitButton/useSplitButtonStyles.ts       |  14 +-
 .../stories/ToggleButtonBlock.stories.tsx     |  15 --
 17 files changed, 17 insertions(+), 460 deletions(-)
 create mode 100644 change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json
 delete mode 100644 packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx
 delete mode 100644 packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx
 delete mode 100644 packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx
 delete mode 100644 packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx
 delete mode 100644 packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
index 87a60be745751..68be66eb1cd8b 100644
--- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
@@ -152,58 +152,6 @@ storiesOf('Button Converged', module)
     includeRtl: true,
   });
 
-storiesOf('Button Block Converged', module)
-  .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
-  .addStory(
-    'Default',
-    () => (
-      <Button id={buttonId} block>
-        Hello, world
-      </Button>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Circular', () => (
-    <Button id={buttonId} block shape="circular">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Outline', () => (
-    <Button id={buttonId} block appearance="outline">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Primary', () => (
-    <Button id={buttonId} block appearance="primary">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Subtle', () => (
-    <Button id={buttonId} block appearance="subtle">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Transparent', () => (
-    <Button id={buttonId} block appearance="transparent">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Disabled', () => (
-    <Button id={buttonId} block disabled>
-      Hello, world
-    </Button>
-  ))
-  .addStory('Size small', () => (
-    <Button id={buttonId} block icon="X" size="small">
-      Hello, world
-    </Button>
-  ))
-  .addStory('Size large', () => (
-    <Button id={buttonId} block icon="X" size="large">
-      Hello, world
-    </Button>
-  ));
-
 storiesOf('CompoundButton Converged', module)
   .addDecorator(story => (
     <Screener
@@ -315,58 +263,6 @@ storiesOf('CompoundButton Converged', module)
     includeRtl: true,
   });
 
-storiesOf('CompoundButton Block Converged', module)
-  .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
-  .addStory(
-    'Default',
-    () => (
-      <CompoundButton id={buttonId} block secondaryContent="This is some secondary text">
-        Hello, world
-      </CompoundButton>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Circular', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" shape="circular">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Outline', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="outline">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Primary', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="primary">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Subtle', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="subtle">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Transparent', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="transparent">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Disabled', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" disabled>
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Size small', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" icon="X" size="small">
-      Hello, world
-    </CompoundButton>
-  ))
-  .addStory('Size large', () => (
-    <CompoundButton id={buttonId} block secondaryContent="This is some secondary text" icon="X" size="large">
-      Hello, world
-    </CompoundButton>
-  ));
-
 storiesOf('ToggleButton Converged', module)
   .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
   .addStory('Default', () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>, {
@@ -469,78 +365,6 @@ storiesOf('ToggleButton Converged', module)
     </ToggleButton>
   ));
 
-storiesOf('ToggleButton Block Converged', module)
-  .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
-  .addStory(
-    'Default',
-    () => (
-      <ToggleButton id={buttonId} block>
-        Hello, world
-      </ToggleButton>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Circular', () => (
-    <ToggleButton id={buttonId} block shape="circular">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Outline', () => (
-    <ToggleButton id={buttonId} block appearance="primary">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Primary', () => (
-    <ToggleButton id={buttonId} block appearance="primary">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Subtle', () => (
-    <ToggleButton id={buttonId} block appearance="subtle">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Transparent', () => (
-    <ToggleButton id={buttonId} block appearance="transparent">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Disabled', () => (
-    <ToggleButton id={buttonId} block disabled>
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Size small', () => (
-    <ToggleButton id={buttonId} block icon="X" size="small">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Size large', () => (
-    <ToggleButton id={buttonId} block icon="X" size="large">
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Checked', () => (
-    <ToggleButton id={buttonId} block checked>
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Primary Checked', () => (
-    <ToggleButton id={buttonId} block appearance="primary" checked>
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Subtle Checked', () => (
-    <ToggleButton id={buttonId} block appearance="subtle" checked>
-      Hello, world
-    </ToggleButton>
-  ))
-  .addStory('Transparent Checked', () => (
-    <ToggleButton id={buttonId} block appearance="transparent" checked>
-      Hello, world
-    </ToggleButton>
-  ));
-
 storiesOf('MenuButton Converged', module)
   .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
   .addStory('Default', () => <MenuButton id={buttonId}>Hello, world</MenuButton>, { includeRtl: true })
@@ -611,55 +435,3 @@ storiesOf('MenuButton Converged', module)
   ))
   .addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
   .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);
-
-storiesOf('MenuButton Block Converged', module)
-  .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
-  .addStory(
-    'Default',
-    () => (
-      <MenuButton id={buttonId} block>
-        Hello, world
-      </MenuButton>
-    ),
-    { includeRtl: true },
-  )
-  .addStory('Circular', () => (
-    <MenuButton id={buttonId} block shape="circular">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Outline', () => (
-    <MenuButton id={buttonId} block appearance="outline">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Primary', () => (
-    <MenuButton id={buttonId} block appearance="primary">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Subtle', () => (
-    <MenuButton id={buttonId} block appearance="subtle">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Transparent', () => (
-    <MenuButton id={buttonId} block appearance="transparent">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Disabled', () => (
-    <MenuButton id={buttonId} block disabled>
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Size small', () => (
-    <MenuButton id={buttonId} block icon="X" size="small">
-      Hello, world
-    </MenuButton>
-  ))
-  .addStory('Size large', () => (
-    <MenuButton id={buttonId} block icon="X" size="large">
-      Hello, world
-    </MenuButton>
-  ));
diff --git a/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json b/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json
new file mode 100644
index 0000000000000..6557ae8cb6ac2
--- /dev/null
+++ b/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing deprecated block prop from all button components.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md
index 58f6cabb2edb2..c098a7c86e472 100644
--- a/packages/react-components/react-button/etc/react-button.api.md
+++ b/packages/react-components/react-button/etc/react-button.api.md
@@ -24,7 +24,6 @@ export const buttonClassNames: SlotClassNames<ButtonSlots>;
 // @public (undocumented)
 export type ButtonProps = ComponentProps<ButtonSlots> & {
     appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
-    block?: boolean;
     disabledFocusable?: boolean;
     disabled?: boolean;
     iconPosition?: 'before' | 'after';
@@ -39,7 +38,7 @@ export type ButtonSlots = {
 };
 
 // @public (undocumented)
-export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
+export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
     iconOnly: boolean;
 };
 
@@ -53,7 +52,7 @@ export const compoundButtonClassName: string;
 export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
 
 // @public (undocumented)
-export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
+export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
 
 // @public (undocumented)
 export type CompoundButtonSlots = ButtonSlots & {
@@ -74,7 +73,7 @@ export const menuButtonClassName: string;
 export const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
 
 // @public (undocumented)
-export type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
+export type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
 
 // @public (undocumented)
 export type MenuButtonSlots = ButtonSlots & {
diff --git a/packages/react-components/react-button/src/components/Button/Button.types.ts b/packages/react-components/react-button/src/components/Button/Button.types.ts
index 91dbfb92c8ee2..5b078d8c14c9c 100644
--- a/packages/react-components/react-button/src/components/Button/Button.types.ts
+++ b/packages/react-components/react-button/src/components/Button/Button.types.ts
@@ -26,14 +26,6 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
    */
   appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
 
-  /**
-   * A button can fill the width of its container.
-   * @default false
-   *
-   * @deprecated - Use style overrides instead.
-   */
-  block?: boolean;
-
   /**
    * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
    * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
@@ -73,9 +65,7 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
 };
 
 export type ButtonState = ComponentState<ButtonSlots> &
-  Required<
-    Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>
-  > & {
+  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
     /**
      * A button can contain only an icon.
      *
diff --git a/packages/react-components/react-button/src/components/Button/MIGRATION.md b/packages/react-components/react-button/src/components/Button/MIGRATION.md
index 54e7b2d7396c9..68562e9ddedf0 100644
--- a/packages/react-components/react-button/src/components/Button/MIGRATION.md
+++ b/packages/react-components/react-button/src/components/Button/MIGRATION.md
@@ -100,7 +100,6 @@ Common buttons now all map to `Button`:
 
 ### Renamed props
 
-- `fluid` => `block`
 - `text` => `transparent`
 
 ### Props removed because we can get them from HTML props
@@ -142,7 +141,7 @@ Common buttons now all map to `Button`:
 | `description`                      |                     |                        |
 | `disabled`                         | `disabled`          | `disabled`             |
 | `elementRef`                       |                     | `ref`                  |
-|                                    | `fluid`             | `block`                |
+|                                    | `fluid`             |                        |
 | `getClassNames`                    |                     |                        |
 | `getSplitButtonClassNames`         |                     |                        |
 | `href`                             |                     | `href`                 |
diff --git a/packages/react-components/react-button/src/components/Button/SPEC.md b/packages/react-components/react-button/src/components/Button/SPEC.md
index fe9f853746432..e37420d74651b 100644
--- a/packages/react-components/react-button/src/components/Button/SPEC.md
+++ b/packages/react-components/react-button/src/components/Button/SPEC.md
@@ -60,10 +60,6 @@ The `Button` component can include an `icon` that appears before or after its `c
 
 The `Button` component supports different sizing with at least three different sizes: `small`, `medium` (default) and `large`.
 
-### Block
-
-The `Button` component can completely fill the width of its container.
-
 ### Loading
 
 The `Button` component can be loading if it's waiting for another action to occur before allowing itself to be interacted with.
@@ -78,76 +74,7 @@ The `Button` component can be loading if it's waiting for another action to occu
 
 ### Props
 
-```ts
-export type ButtonProps = ComponentPropsCompat &
-  React.ButtonHTMLAttributes<HTMLElement> & {
-    /**
-     * A button can have its content and borders styled for greater emphasis or to be subtle.
-     * - 'primary': Emphasizes the button as a primary action.
-     * - 'outline': Removes background styling.
-     * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused.
-     * - 'transparent': Removes background and border styling.
-     */
-    appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';
-
-    /**
-     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the
-     * `iconPosition` prop.
-     */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-
-    // /**
-    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag
-    //  * is set to `true`.
-    //  */
-    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
-
-    /**
-     * A button can fill the width of its container.
-     * @default false
-     */
-    block?: boolean;
-
-    /**
-     * A button can show that it cannot be interacted with.
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
-     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
-     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
-     * @default false
-     */
-    disabledFocusable?: boolean;
-
-    /**
-     * A button can format its icon to appear before or after its content.
-     * @default 'before'
-     */
-    iconPosition?: 'before' | 'after';
-
-    // /**
-    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to
-    //  * be interacted with.
-    //  * @default false
-    //  */
-    // loading?: boolean;
-
-    /**
-     * A button can be rounded, circular, or square.
-     * @default 'rounded'
-     */
-    shape?: 'rounded' | 'circular' | 'square';
-
-    /**
-     * A button supports different sizes.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-  };
-```
+See API interface in [Button.types.ts](./Button.types.ts).
 
 ### Styling Tokens
 
diff --git a/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx
deleted file mode 100644
index 1b70f32a0a663..0000000000000
--- a/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Button } from '../../../Button';
-
-export const Block = () => (
-  <>
-    <Button block>Block</Button>
-  </>
-);
-Block.parameters = {
-  docs: {
-    description: {
-      story: 'A button can fill the width of its container.',
-    },
-  },
-};
diff --git a/packages/react-components/react-button/src/components/Button/useButton.ts b/packages/react-components/react-button/src/components/Button/useButton.ts
index d7fb6b4952f55..bd9d09f0eca00 100644
--- a/packages/react-components/react-button/src/components/Button/useButton.ts
+++ b/packages/react-components/react-button/src/components/Button/useButton.ts
@@ -16,8 +16,6 @@ export const useButton_unstable = (
   const {
     appearance = 'secondary',
     as,
-    // eslint-disable-next-line deprecation/deprecation
-    block = false,
     disabled = false,
     disabledFocusable = false,
     icon,
@@ -30,7 +28,6 @@ export const useButton_unstable = (
   return {
     // Props passed at the top-level
     appearance,
-    block,
     disabled,
     disabledFocusable,
     iconPosition,
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 9435b14bff5ed..5da2fb1e84a11 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -89,12 +89,6 @@ const useRootStyles = makeStyles({
     },
   },
 
-  // Block styles
-  block: {
-    maxWidth: '100%',
-    width: '100%',
-  },
-
   // Appearance variations
   outline: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -437,17 +431,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
   const rootIconOnlyStyles = useRootIconOnlyStyles();
   const iconStyles = useIconStyles();
 
-  const {
-    appearance,
-    // eslint-disable-next-line deprecation/deprecation
-    block,
-    disabled,
-    disabledFocusable,
-    iconOnly,
-    iconPosition,
-    shape,
-    size,
-  } = state;
+  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;
 
   state.root.className = mergeClasses(
     buttonClassNames.root,
@@ -455,7 +439,6 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
     // Root styles
     rootStyles.base,
     rootStyles.highContrast,
-    block && rootStyles.block,
     appearance && rootStyles[appearance],
     rootStyles[size],
     rootStyles[shape],
diff --git a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts
index 482f399ce7d70..59f4e6a54cd5b 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts
@@ -14,7 +14,7 @@ export type CompoundButtonSlots = ButtonSlots & {
 };
 
 export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &
-  Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
+  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
 
 export type CompoundButtonState = ComponentState<CompoundButtonSlots> &
   Omit<ButtonState, keyof ButtonSlots | 'components'>;
diff --git a/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx
deleted file mode 100644
index bb9bdc39c77b4..0000000000000
--- a/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { CompoundButton } from '../../../CompoundButton';
-
-export const Block = () => (
-  <>
-    <CompoundButton secondaryContent="Secondary content" block>
-      Block
-    </CompoundButton>
-  </>
-);
-Block.parameters = {
-  docs: {
-    description: {
-      story: 'A compound button can fill the width of its container.',
-    },
-  },
-};
diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts b/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts
index e538bc39baed8..f630f660ac85b 100644
--- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts
+++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts
@@ -9,7 +9,7 @@ export type MenuButtonSlots = ButtonSlots & {
 };
 
 export type MenuButtonProps = ComponentProps<MenuButtonSlots> &
-  Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
+  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
 
 export type MenuButtonState = ComponentState<MenuButtonSlots> &
   Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
diff --git a/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx
deleted file mode 100644
index ae82b5de3732b..0000000000000
--- a/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { MenuButton } from '../../../MenuButton';
-
-export const Block = () => (
-  <Menu>
-    <MenuTrigger>
-      <MenuButton block>Block</MenuButton>
-    </MenuTrigger>
-
-    <MenuPopover>
-      <MenuList>
-        <MenuItem>Item a</MenuItem>
-        <MenuItem>Item b</MenuItem>
-      </MenuList>
-    </MenuPopover>
-  </Menu>
-);
-Block.parameters = {
-  docs: {
-    description: {
-      story: 'A menu button can fill the width of its container.',
-    },
-  },
-};
diff --git a/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx
deleted file mode 100644
index 8a72dd27990d5..0000000000000
--- a/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
-import { SplitButton, MenuButtonProps } from '../../../index';
-
-export const Block = () => (
-  <Menu positioning="below-end">
-    <MenuTrigger>
-      {(triggerProps: MenuButtonProps) => (
-        <SplitButton menuButton={triggerProps} block>
-          Block
-        </SplitButton>
-      )}
-    </MenuTrigger>
-
-    <MenuPopover>
-      <MenuList>
-        <MenuItem>Item a</MenuItem>
-        <MenuItem>Item b</MenuItem>
-      </MenuList>
-    </MenuPopover>
-  </Menu>
-);
-Block.parameters = {
-  docs: {
-    description: {
-      story: 'A split button can fill the width of its container.',
-    },
-  },
-};
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts
index 91eb55a1f8b2b..aad478a4c7df6 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts
@@ -15,8 +15,6 @@ export const useSplitButton_unstable = (
 ): SplitButtonState => {
   const {
     appearance = 'secondary',
-    // eslint-disable-next-line deprecation/deprecation
-    block = false,
     children,
     disabled = false,
     disabledFocusable = false,
@@ -46,7 +44,6 @@ export const useSplitButton_unstable = (
   const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
     defaultProps: {
       appearance,
-      block,
       children,
       disabled,
       disabledFocusable,
@@ -73,7 +70,6 @@ export const useSplitButton_unstable = (
   return {
     // Props passed at the top-level
     appearance,
-    block,
     disabled,
     disabledFocusable,
     iconPosition,
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 74dc9330f92b3..96e31224f8039 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -49,11 +49,6 @@ const useRootStyles = makeStyles({
     },
   },
 
-  // Block styles
-  block: {
-    width: '100%',
-  },
-
   // Appearance variations
   outline: {
     /* No styles */
@@ -163,18 +158,11 @@ export const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitBut
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
 
-  const {
-    appearance,
-    // eslint-disable-next-line deprecation/deprecation
-    block,
-    disabled,
-    disabledFocusable,
-  } = state;
+  const { appearance, disabled, disabledFocusable } = state;
 
   state.root.className = mergeClasses(
     splitButtonClassNames.root,
     rootStyles.base,
-    block && rootStyles.block,
     appearance && rootStyles[appearance],
     (disabled || disabledFocusable) && rootStyles.disabled,
     (disabled || disabledFocusable) && rootStyles.disabledHighContrast,
diff --git a/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx
deleted file mode 100644
index 159cd4fdd225d..0000000000000
--- a/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { ToggleButton } from '../../../ToggleButton';
-
-export const Block = () => (
-  <>
-    <ToggleButton block>Block</ToggleButton>
-  </>
-);
-Block.parameters = {
-  docs: {
-    description: {
-      story: 'A toggle button can fill the width of its container.',
-    },
-  },
-};

From 2b3c2bb4288d172d32b77f38766b707648257ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dias=20=28he/him=29?=
 <39736248+andrefcdias@users.noreply.github.com>
Date: Fri, 20 May 2022 00:16:33 +0200
Subject: [PATCH 04/11] fix(react-text): Update typography wrappers to latest
 naming (#22934)

* fix: change Headline to Subtitle1

* fix: change Subheadline to Subtitle2

* fix: change Body to Body1

* fix: change Caption to Caption1

* feat: add Caption2

* chore: use better vr story name

* chore: add change files

* chore: update api

* fix: rename components in missing story

* feat: removed unused `caption2ClassName`

* chore: disable classname conformance test

* chore: remove deprecated className

* chore: add conformance test exception
---
 .../src/stories/Card.stories.tsx              | 14 ++--
 .../src/stories/Text.stories.tsx              | 20 +++---
 ...-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json |  7 ++
 ...-91f14a73-d74c-4da0-8619-edbf5662b45d.json |  7 ++
 .../src/stories/CardAppearance.stories.tsx    |  6 +-
 .../src/stories/CardDefault.stories.tsx       |  8 +--
 .../src/stories/SampleCard.stories.tsx        |  8 +--
 .../etc/react-components.api.md               | 68 ++++++-------------
 .../react-components/src/index.ts             | 38 +++--------
 .../InputContentBeforeAfter.stories.tsx       | 14 ++--
 .../src/demos.stories.tsx                     |  4 +-
 .../react-components/react-text/README.md     |  8 +--
 .../bundle-size/Text.Wrappers.fixture.js      | 10 +--
 .../react-text/etc/react-text.api.md          | 55 ++++-----------
 .../react-components/react-text/src/Body.ts   |  1 -
 .../react-components/react-text/src/Body1.ts  |  1 +
 .../react-text/src/Caption.ts                 |  1 -
 .../react-text/src/Caption1.ts                |  1 +
 .../react-text/src/Caption2.ts                |  1 +
 .../react-text/src/Headline.ts                |  1 -
 .../react-text/src/Subheadline.ts             |  1 -
 .../react-text/src/Subtitle1.ts               |  1 +
 .../react-text/src/Subtitle2.ts               |  1 +
 .../Body/__snapshots__/Body.test.tsx.snap     | 11 ---
 .../react-text/src/components/Body/index.ts   |  1 -
 .../Body.test.tsx => Body1/Body1.test.tsx}    | 11 +--
 .../{Body/Body.tsx => Body1/Body1.tsx}        | 16 ++---
 .../Body1/__snapshots__/Body1.test.tsx.snap   | 11 +++
 .../react-text/src/components/Body1/index.ts  |  1 +
 .../src/components/Caption/Caption.test.tsx   | 16 -----
 .../__snapshots__/Caption.test.tsx.snap       | 11 ---
 .../src/components/Caption/index.ts           |  1 -
 .../src/components/Caption1/Caption1.test.tsx | 17 +++++
 .../Caption.tsx => Caption1/Caption1.tsx}     | 16 ++---
 .../__snapshots__/Caption1.test.tsx.snap      | 11 +++
 .../src/components/Caption1/index.ts          |  1 +
 .../src/components/Caption2/Caption2.test.tsx | 17 +++++
 .../src/components/Caption2/Caption2.tsx      | 26 +++++++
 .../__snapshots__/Caption2.test.tsx.snap      | 11 +++
 .../src/components/Caption2/index.ts          |  1 +
 .../src/components/Display/Display.test.tsx   |  1 +
 .../src/components/Display/Display.tsx        |  4 --
 .../src/components/Headline/Headline.test.tsx | 16 -----
 .../__snapshots__/Headline.test.tsx.snap      | 11 ---
 .../src/components/Headline/index.ts          |  1 -
 .../components/LargeTitle/LargeTitle.test.tsx |  1 +
 .../src/components/LargeTitle/LargeTitle.tsx  |  4 --
 .../Subheadline/Subheadline.test.tsx          | 16 -----
 .../__snapshots__/Subheadline.test.tsx.snap   | 11 ---
 .../src/components/Subheadline/index.ts       |  1 -
 .../components/Subtitle1/Subtitle1.test.tsx   | 17 +++++
 .../Headline.tsx => Subtitle1/Subtitle1.tsx}  | 16 ++---
 .../__snapshots__/Subtitle1.test.tsx.snap     | 11 +++
 .../src/components/Subtitle1/index.ts         |  1 +
 .../components/Subtitle2/Subtitle2.test.tsx   | 17 +++++
 .../Subtitle2.tsx}                            | 16 ++---
 .../__snapshots__/Subtitle2.test.tsx.snap     | 11 +++
 .../src/components/Subtitle2/index.ts         |  1 +
 .../src/components/Text/Text.test.tsx         |  1 +
 .../src/components/Text/useTextStyles.ts      |  4 --
 .../src/components/Title1/Title1.test.tsx     |  1 +
 .../src/components/Title1/Title1.tsx          |  4 --
 .../src/components/Title2/Title2.test.tsx     |  1 +
 .../src/components/Title2/Title2.tsx          |  4 --
 .../src/components/Title3/Title3.test.tsx     |  1 +
 .../src/components/Title3/Title3.tsx          |  4 --
 .../react-components/react-text/src/index.ts  | 29 +++-----
 .../src/stories/TextTypography.stories.tsx    | 11 +--
 68 files changed, 320 insertions(+), 351 deletions(-)
 create mode 100644 change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json
 create mode 100644 change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json
 delete mode 100644 packages/react-components/react-text/src/Body.ts
 create mode 100644 packages/react-components/react-text/src/Body1.ts
 delete mode 100644 packages/react-components/react-text/src/Caption.ts
 create mode 100644 packages/react-components/react-text/src/Caption1.ts
 create mode 100644 packages/react-components/react-text/src/Caption2.ts
 delete mode 100644 packages/react-components/react-text/src/Headline.ts
 delete mode 100644 packages/react-components/react-text/src/Subheadline.ts
 create mode 100644 packages/react-components/react-text/src/Subtitle1.ts
 create mode 100644 packages/react-components/react-text/src/Subtitle2.ts
 delete mode 100644 packages/react-components/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
 delete mode 100644 packages/react-components/react-text/src/components/Body/index.ts
 rename packages/react-components/react-text/src/components/{Body/Body.test.tsx => Body1/Body1.test.tsx} (50%)
 rename packages/react-components/react-text/src/components/{Body/Body.tsx => Body1/Body1.tsx} (55%)
 create mode 100644 packages/react-components/react-text/src/components/Body1/__snapshots__/Body1.test.tsx.snap
 create mode 100644 packages/react-components/react-text/src/components/Body1/index.ts
 delete mode 100644 packages/react-components/react-text/src/components/Caption/Caption.test.tsx
 delete mode 100644 packages/react-components/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
 delete mode 100644 packages/react-components/react-text/src/components/Caption/index.ts
 create mode 100644 packages/react-components/react-text/src/components/Caption1/Caption1.test.tsx
 rename packages/react-components/react-text/src/components/{Caption/Caption.tsx => Caption1/Caption1.tsx} (53%)
 create mode 100644 packages/react-components/react-text/src/components/Caption1/__snapshots__/Caption1.test.tsx.snap
 create mode 100644 packages/react-components/react-text/src/components/Caption1/index.ts
 create mode 100644 packages/react-components/react-text/src/components/Caption2/Caption2.test.tsx
 create mode 100644 packages/react-components/react-text/src/components/Caption2/Caption2.tsx
 create mode 100644 packages/react-components/react-text/src/components/Caption2/__snapshots__/Caption2.test.tsx.snap
 create mode 100644 packages/react-components/react-text/src/components/Caption2/index.ts
 delete mode 100644 packages/react-components/react-text/src/components/Headline/Headline.test.tsx
 delete mode 100644 packages/react-components/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
 delete mode 100644 packages/react-components/react-text/src/components/Headline/index.ts
 delete mode 100644 packages/react-components/react-text/src/components/Subheadline/Subheadline.test.tsx
 delete mode 100644 packages/react-components/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
 delete mode 100644 packages/react-components/react-text/src/components/Subheadline/index.ts
 create mode 100644 packages/react-components/react-text/src/components/Subtitle1/Subtitle1.test.tsx
 rename packages/react-components/react-text/src/components/{Headline/Headline.tsx => Subtitle1/Subtitle1.tsx} (53%)
 create mode 100644 packages/react-components/react-text/src/components/Subtitle1/__snapshots__/Subtitle1.test.tsx.snap
 create mode 100644 packages/react-components/react-text/src/components/Subtitle1/index.ts
 create mode 100644 packages/react-components/react-text/src/components/Subtitle2/Subtitle2.test.tsx
 rename packages/react-components/react-text/src/components/{Subheadline/Subheadline.tsx => Subtitle2/Subtitle2.tsx} (51%)
 create mode 100644 packages/react-components/react-text/src/components/Subtitle2/__snapshots__/Subtitle2.test.tsx.snap
 create mode 100644 packages/react-components/react-text/src/components/Subtitle2/index.ts

diff --git a/apps/vr-tests-react-components/src/stories/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card.stories.tsx
index 79e460c82d57d..aa9e03e209ddb 100644
--- a/apps/vr-tests-react-components/src/stories/Card.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card';
 import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
 import { action } from '@storybook/addon-actions';
 
@@ -17,11 +17,11 @@ const SampleCardContent = () => (
     <CardHeader
       image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
       header={
-        <Body>
+        <Body1>
           <b>App Name</b>
-        </Body>
+        </Body1>
       }
-      description={<Caption>Developer</Caption>}
+      description={<Caption1>Developer</Caption1>}
     />
     <div>
       Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
@@ -52,11 +52,11 @@ storiesOf('Card Converged', module)
         <CardHeader
           image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
           header={
-            <Body>
+            <Body1>
               <b>Sales analysis 2019 presentation</b>
-            </Body>
+            </Body1>
           }
-          description={<Caption>Folder &gt; Presentations</Caption>}
+          description={<Caption1>Folder &gt; Presentations</Caption1>}
         />
       </Card>
     </div>
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 7057ffbdf9a5e..52edf3df66c81 100644
--- a/apps/vr-tests-react-components/src/stories/Text.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
@@ -2,16 +2,17 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Screener from 'screener-storybook/src/screener';
 import {
-  Body,
-  Caption,
+  Body1,
+  Caption1,
   Display,
-  Headline,
+  Subtitle1,
   LargeTitle,
-  Subheadline,
+  Subtitle2,
   Text,
   Title1,
   Title2,
   Title3,
+  Caption2,
 } from '@fluentui/react-text';
 
 storiesOf('Text Converged', module)
@@ -137,7 +138,7 @@ storiesOf('Text Converged', module)
     { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
   )
   .addStory(
-    'Display',
+    'Typography wrappers',
     () => (
       <>
         <Display block>Display</Display>
@@ -145,10 +146,11 @@ storiesOf('Text Converged', module)
         <Title1 block>Title1</Title1>
         <Title2 block>Title2</Title2>
         <Title3 block>Title3</Title3>
-        <Headline block>Headline</Headline>
-        <Subheadline block>Subheadline</Subheadline>
-        <Body block>Body</Body>
-        <Caption block>Caption</Caption>
+        <Subtitle1 block>Subtitle1</Subtitle1>
+        <Subtitle2 block>Subtitle2</Subtitle2>
+        <Body1 block>Body1</Body1>
+        <Caption1 block>Caption1</Caption1>
+        <Caption2 block>Caption2</Caption2>
       </>
     ),
     { includeRtl: true },
diff --git a/change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json b/change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json
new file mode 100644
index 0000000000000..343311b53d5ea
--- /dev/null
+++ b/change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-text): Change typography wrapper component names to match new design spec",
+  "packageName": "@fluentui/react-components",
+  "email": "39736248+andrefcdias@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json b/change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json
new file mode 100644
index 0000000000000..f4105e33f70df
--- /dev/null
+++ b/change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Change typography wrapper component names to match new design spec",
+  "packageName": "@fluentui/react-text",
+  "email": "39736248+andrefcdias@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
index 940b460782a34..f9c87fc9b68cd 100644
--- a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Headline } from '@fluentui/react-text';
+import { Subtitle1 } from '@fluentui/react-text';
 import { makeStyles, shorthands } from '@griffel/react';
 import { SampleCard } from './SampleCard.stories';
 
@@ -24,9 +24,9 @@ const Title = (props: { children: React.ReactNode }) => {
   const styles = useStyles();
 
   return (
-    <Headline as="h4" block className={styles.header}>
+    <Subtitle1 as="h4" block className={styles.header}>
       {props.children}
-    </Headline>
+    </Subtitle1>
   );
 };
 
diff --git a/packages/react-components/react-card/src/stories/CardDefault.stories.tsx b/packages/react-components/react-card/src/stories/CardDefault.stories.tsx
index c4ff8ba0cd853..a0843a8fff311 100644
--- a/packages/react-components/react-card/src/stories/CardDefault.stories.tsx
+++ b/packages/react-components/react-card/src/stories/CardDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 
 import { Button } from '@fluentui/react-button';
 import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
@@ -17,11 +17,11 @@ export const Default = () => {
       <CardHeader
         image={<img src={avatarElviaURL} alt="Face of a person" />}
         header={
-          <Body>
+          <Body1>
             <b>Elvia Atkins</b> mentioned you
-          </Body>
+          </Body1>
         }
-        description={<Caption>5h ago · About us - Overview</Caption>}
+        description={<Caption1>5h ago · About us - Overview</Caption1>}
       />
 
       <CardPreview logo={<img src={wordLogoURL} alt="Microsoft Word logo" />}>
diff --git a/packages/react-components/react-card/src/stories/SampleCard.stories.tsx b/packages/react-components/react-card/src/stories/SampleCard.stories.tsx
index 0d2877aca9c81..b0868f3167f50 100644
--- a/packages/react-components/react-card/src/stories/SampleCard.stories.tsx
+++ b/packages/react-components/react-card/src/stories/SampleCard.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 import { Card, CardHeader, CardFooter, CardPreview } from '../index';
 import type { CardProps } from '../index';
 
@@ -19,11 +19,11 @@ export const SampleCard = (props: CardProps) => (
     <CardHeader
       image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
       header={
-        <Body>
+        <Body1>
           <b>App Name</b>
-        </Body>
+        </Body1>
       }
-      description={<Caption>Developer</Caption>}
+      description={<Caption1>Developer</Caption1>}
     />
     <div>
       Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index afe6cb419886f..67350f7b26efb 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -59,9 +59,8 @@ import { badgeClassNames } from '@fluentui/react-badge';
 import { BadgeProps } from '@fluentui/react-badge';
 import { BadgeSlots } from '@fluentui/react-badge';
 import { BadgeState } from '@fluentui/react-badge';
-import { Body as Body_2 } from '@fluentui/react-text';
-import { bodyClassName } from '@fluentui/react-text';
-import { bodyClassNames } from '@fluentui/react-text';
+import { Body1 } from '@fluentui/react-text';
+import { body1ClassNames } from '@fluentui/react-text';
 import { BorderRadiusTokens } from '@fluentui/react-theme';
 import { BrandVariants } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
@@ -70,9 +69,10 @@ import { buttonClassNames } from '@fluentui/react-button';
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
-import { Caption } from '@fluentui/react-text';
-import { captionClassName } from '@fluentui/react-text';
-import { captionClassNames } from '@fluentui/react-text';
+import { Caption1 } from '@fluentui/react-text';
+import { caption1ClassNames } from '@fluentui/react-text';
+import { Caption2 } from '@fluentui/react-text';
+import { caption2ClassNames } from '@fluentui/react-text';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { checkboxClassName } from '@fluentui/react-checkbox';
 import { checkboxClassNames } from '@fluentui/react-checkbox';
@@ -106,7 +106,6 @@ import { createLightTheme } from '@fluentui/react-theme';
 import { createTeamsDarkTheme } from '@fluentui/react-theme';
 import { CurveTokens } from '@fluentui/react-theme';
 import { Display } from '@fluentui/react-text';
-import { displayClassName } from '@fluentui/react-text';
 import { displayClassNames } from '@fluentui/react-text';
 import { Divider } from '@fluentui/react-divider';
 import { dividerClassName } from '@fluentui/react-divider';
@@ -132,9 +131,6 @@ import { getNativeProps } from '@fluentui/react-utilities';
 import { getPartitionedNativeProps } from '@fluentui/react-utilities';
 import { getSlots } from '@fluentui/react-utilities';
 import { GriffelStyle } from '@griffel/react';
-import { Headline } from '@fluentui/react-text';
-import { headlineClassName } from '@fluentui/react-text';
-import { headlineClassNames } from '@fluentui/react-text';
 import { HorizontalSpacingTokens } from '@fluentui/react-theme';
 import { Image as Image_2 } from '@fluentui/react-image';
 import { imageClassName } from '@fluentui/react-image';
@@ -156,7 +152,6 @@ import { LabelProps } from '@fluentui/react-label';
 import { LabelSlots } from '@fluentui/react-label';
 import { LabelState } from '@fluentui/react-label';
 import { LargeTitle } from '@fluentui/react-text';
-import { largeTitleClassName } from '@fluentui/react-text';
 import { largeTitleClassNames } from '@fluentui/react-text';
 import { LineHeightTokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
@@ -381,9 +376,10 @@ import { SplitButtonSlots } from '@fluentui/react-button';
 import { SplitButtonState } from '@fluentui/react-button';
 import { SSRProvider } from '@fluentui/react-utilities';
 import { StrokeWidthTokens } from '@fluentui/react-theme';
-import { Subheadline } from '@fluentui/react-text';
-import { subheadlineClassName } from '@fluentui/react-text';
-import { subheadlineClassNames } from '@fluentui/react-text';
+import { Subtitle1 } from '@fluentui/react-text';
+import { subtitle1ClassNames } from '@fluentui/react-text';
+import { Subtitle2 } from '@fluentui/react-text';
+import { subtitle2ClassNames } from '@fluentui/react-text';
 import { Switch } from '@fluentui/react-switch';
 import { switchClassNames } from '@fluentui/react-switch';
 import { SwitchOnChangeData } from '@fluentui/react-switch';
@@ -415,7 +411,6 @@ import { textareaClassNames } from '@fluentui/react-textarea';
 import { TextareaProps } from '@fluentui/react-textarea';
 import { TextareaSlots } from '@fluentui/react-textarea';
 import { TextareaState } from '@fluentui/react-textarea';
-import { textClassName } from '@fluentui/react-text';
 import { textClassNames } from '@fluentui/react-text';
 import { TextProps } from '@fluentui/react-text';
 import { TextSlots } from '@fluentui/react-text';
@@ -423,13 +418,10 @@ import { TextState } from '@fluentui/react-text';
 import { Theme } from '@fluentui/react-theme';
 import { themeToTokensObject } from '@fluentui/react-theme';
 import { Title1 } from '@fluentui/react-text';
-import { title1ClassName } from '@fluentui/react-text';
 import { title1ClassNames } from '@fluentui/react-text';
 import { Title2 } from '@fluentui/react-text';
-import { title2ClassName } from '@fluentui/react-text';
 import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
-import { title3ClassName } from '@fluentui/react-text';
 import { title3ClassNames } from '@fluentui/react-text';
 import { ToggleButton } from '@fluentui/react-button';
 import { toggleButtonClassName } from '@fluentui/react-button';
@@ -679,11 +671,9 @@ export { BadgeSlots }
 
 export { BadgeState }
 
-export { Body_2 as Body }
+export { Body1 }
 
-export { bodyClassName }
-
-export { bodyClassNames }
+export { body1ClassNames }
 
 export { BorderRadiusTokens }
 
@@ -701,11 +691,13 @@ export { ButtonSlots }
 
 export { ButtonState }
 
-export { Caption }
+export { Caption1 }
+
+export { caption1ClassNames }
 
-export { captionClassName }
+export { Caption2 }
 
-export { captionClassNames }
+export { caption2ClassNames }
 
 export { Checkbox }
 
@@ -773,8 +765,6 @@ export { CurveTokens }
 
 export { Display }
 
-export { displayClassName }
-
 export { displayClassNames }
 
 export { Divider }
@@ -825,12 +815,6 @@ export { getSlots }
 
 export { GriffelStyle }
 
-export { Headline }
-
-export { headlineClassName }
-
-export { headlineClassNames }
-
 export { HorizontalSpacingTokens }
 
 export { Image_2 as Image }
@@ -873,8 +857,6 @@ export { LabelState }
 
 export { LargeTitle }
 
-export { largeTitleClassName }
-
 export { largeTitleClassNames }
 
 export { LineHeightTokens }
@@ -1323,11 +1305,13 @@ export { SSRProvider }
 
 export { StrokeWidthTokens }
 
-export { Subheadline }
+export { Subtitle1 }
+
+export { subtitle1ClassNames }
 
-export { subheadlineClassName }
+export { Subtitle2 }
 
-export { subheadlineClassNames }
+export { subtitle2ClassNames }
 
 export { Switch }
 
@@ -1391,8 +1375,6 @@ export { TextareaSlots }
 
 export { TextareaState }
 
-export { textClassName }
-
 export { textClassNames }
 
 export { TextProps }
@@ -1407,20 +1389,14 @@ export { themeToTokensObject }
 
 export { Title1 }
 
-export { title1ClassName }
-
 export { title1ClassNames }
 
 export { Title2 }
 
-export { title2ClassName }
-
 export { title2ClassNames }
 
 export { Title3 }
 
-export { title3ClassName }
-
 export { title3ClassNames }
 
 export { ToggleButton }
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 252cddf88f877..7bb5e7ab5ca3e 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -582,43 +582,25 @@ export type {
   TabListState,
 } from '@fluentui/react-tabs';
 export {
-  Body,
-  Caption,
+  Body1,
+  Caption1,
+  Caption2,
   Display,
-  Headline,
+  Subtitle1,
   LargeTitle,
-  Subheadline,
+  Subtitle2,
   Text,
   Title1,
   Title2,
   Title3,
-  /* eslint-disable-next-line deprecation/deprecation */
-  bodyClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  captionClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  displayClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  headlineClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  largeTitleClassName,
-  bodyClassNames,
-  captionClassNames,
+  body1ClassNames,
+  caption1ClassNames,
+  caption2ClassNames,
   displayClassNames,
-  headlineClassNames,
+  subtitle1ClassNames,
   largeTitleClassNames,
   renderText_unstable,
-  /* eslint-disable-next-line deprecation/deprecation */
-  subheadlineClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  textClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  title1ClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  title2ClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  title3ClassName,
-  subheadlineClassNames,
+  subtitle2ClassNames,
   textClassNames,
   title1ClassNames,
   title2ClassNames,
diff --git a/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx b/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
index 6ebfd63e08322..e3d968647a499 100644
--- a/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
+++ b/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
@@ -5,7 +5,7 @@ import { makeStyles, shorthands } from '@griffel/react';
 import { PersonRegular, MicRegular } from '@fluentui/react-icons';
 import { Button } from '@fluentui/react-button';
 import type { ButtonProps } from '@fluentui/react-button';
-import { Body, Text } from '@fluentui/react-text';
+import { Body1, Text } from '@fluentui/react-text';
 import { Input } from '../index';
 
 const useStyles = makeStyles({
@@ -31,9 +31,9 @@ const ContentBefore = () => {
     <>
       <Label htmlFor={id}>Full Name</Label>
       <Input contentBefore={<PersonRegular />} id={id} />
-      <Body>
+      <Body1>
         An input with a decorative icon in the <code>contentBefore</code> slot.
-      </Body>
+      </Body1>
     </>
   );
 };
@@ -45,9 +45,9 @@ const ContentAfter = () => {
     <>
       <Label htmlFor={id}>First Name</Label>
       <Input contentAfter={<MicButton aria-label="Enter by voice" />} id={id} />
-      <Body>
+      <Body1>
         An input with a button in the <code>contentAfter</code> slot.
-      </Body>
+      </Body1>
     </>
   );
 };
@@ -74,10 +74,10 @@ const ContentBeforeAndAfter = () => {
         aria-labelledby={`${id} ${beforeId} ${afterId}`}
         id={id}
       />
-      <Body>
+      <Body1>
         An input with a presentational value in the <code>contentBefore</code> slot and another presentational value in
         the <code>contentAfter</code> slot.
-      </Body>
+      </Body1>
     </>
   );
 };
diff --git a/packages/react-components/react-storybook-addon/src/demos.stories.tsx b/packages/react-components/react-storybook-addon/src/demos.stories.tsx
index 0bde1e4d3a4f3..6fdf251c3b2a7 100644
--- a/packages/react-components/react-storybook-addon/src/demos.stories.tsx
+++ b/packages/react-components/react-storybook-addon/src/demos.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
-import { Headline, Text } from '@fluentui/react-text';
+import { Subtitle1, Text } from '@fluentui/react-text';
 import { action } from '@storybook/addon-actions';
 
 export const Demos = () => {
   return (
     <div>
-      <Headline>This story is for testing purposes of this addon</Headline>
+      <Subtitle1>This story is for testing purposes of this addon</Subtitle1>
       <section>
         <Button onClick={action('button clicked')}>
           <Text>Click me</Text>
diff --git a/packages/react-components/react-text/README.md b/packages/react-components/react-text/README.md
index b79042d255b93..71df0c6857dcc 100644
--- a/packages/react-components/react-text/README.md
+++ b/packages/react-components/react-text/README.md
@@ -74,8 +74,8 @@ By default, Text and all the typography wrappers render a `<span>` element. You
 
 ```html
 <div>
-  <Headline as="h1">Headline</Headline>
-  <Subheadline as="h2">Subheadline</Subheadline>
+  <Subtitle1 as="h1">Subtitle1</Subtitle1>
+  <Subtitle2 as="h2">Subtitle2</Subtitle2>
   <Text as="p">This is simple example</Text>
 </div>
 ```
@@ -84,8 +84,8 @@ This will result in the following DOM structure:
 
 ```html
 <div>
-  <h1>Headline</h1>
-  <h2>Subheadline</h2>
+  <h1>Subtitle1</h1>
+  <h2>Subtitle2</h2>
   <p>This is simple example</p>
 </div>
 ```
diff --git a/packages/react-components/react-text/bundle-size/Text.Wrappers.fixture.js b/packages/react-components/react-text/bundle-size/Text.Wrappers.fixture.js
index 9f9dfc7f4532a..55f7084d93414 100644
--- a/packages/react-components/react-text/bundle-size/Text.Wrappers.fixture.js
+++ b/packages/react-components/react-text/bundle-size/Text.Wrappers.fixture.js
@@ -4,13 +4,13 @@ import {
   Title1,
   Title2,
   Title3,
-  Headline,
-  Subheadline,
-  Body,
-  Caption,
+  Subtitle1,
+  Subtitle2,
+  Body1,
+  Caption1,
 } from '@fluentui/react-text';
 
-console.log(Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption);
+console.log(Display, LargeTitle, Title1, Title2, Title3, Subtitle1, Subtitle2, Body1, Caption1);
 
 export default {
   name: 'Text - Wrappers',
diff --git a/packages/react-components/react-text/etc/react-text.api.md b/packages/react-components/react-text/etc/react-text.api.md
index 0772a23aff7d6..c44889e7fcb78 100644
--- a/packages/react-components/react-text/etc/react-text.api.md
+++ b/packages/react-components/react-text/etc/react-text.api.md
@@ -13,48 +13,32 @@ import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-const Body_2: FunctionComponent<TextWrapperProps>;
-export { Body_2 as Body }
-
-// @public @deprecated (undocumented)
-export const bodyClassName = "fui-Body";
+export const Body1: FunctionComponent<TextWrapperProps>;
 
 // @public (undocumented)
-export const bodyClassNames: SlotClassNames<TextSlots>;
+export const body1ClassNames: SlotClassNames<TextSlots>;
 
 // @public
-export const Caption: FunctionComponent<TextWrapperProps>;
-
-// @public @deprecated (undocumented)
-export const captionClassName = "fui-Caption";
+export const Caption1: FunctionComponent<TextWrapperProps>;
 
 // @public (undocumented)
-export const captionClassNames: SlotClassNames<TextSlots>;
+export const caption1ClassNames: SlotClassNames<TextSlots>;
 
 // @public
-export const Display: FunctionComponent<TextWrapperProps>;
-
-// @public @deprecated (undocumented)
-export const displayClassName = "fui-Display";
+export const Caption2: FunctionComponent<TextWrapperProps>;
 
 // @public (undocumented)
-export const displayClassNames: SlotClassNames<TextSlots>;
+export const caption2ClassNames: SlotClassNames<TextSlots>;
 
 // @public
-export const Headline: FunctionComponent<TextWrapperProps>;
-
-// @public @deprecated (undocumented)
-export const headlineClassName = "fui-Headline";
+export const Display: FunctionComponent<TextWrapperProps>;
 
 // @public (undocumented)
-export const headlineClassNames: SlotClassNames<TextSlots>;
+export const displayClassNames: SlotClassNames<TextSlots>;
 
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
-// @public @deprecated (undocumented)
-export const largeTitleClassName = "fui-LargeTitle";
-
 // @public (undocumented)
 export const largeTitleClassNames: SlotClassNames<TextSlots>;
 
@@ -62,21 +46,21 @@ export const largeTitleClassNames: SlotClassNames<TextSlots>;
 export const renderText_unstable: (state: TextState) => JSX.Element;
 
 // @public
-export const Subheadline: FunctionComponent<TextWrapperProps>;
+export const Subtitle1: FunctionComponent<TextWrapperProps>;
+
+// @public (undocumented)
+export const subtitle1ClassNames: SlotClassNames<TextSlots>;
 
-// @public @deprecated (undocumented)
-export const subheadlineClassName = "fui-Subheadline";
+// @public
+export const Subtitle2: FunctionComponent<TextWrapperProps>;
 
 // @public (undocumented)
-export const subheadlineClassNames: SlotClassNames<TextSlots>;
+export const subtitle2ClassNames: SlotClassNames<TextSlots>;
 
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-// @public @deprecated (undocumented)
-export const textClassName = "fui-Text";
-
 // @public (undocumented)
 export const textClassNames: SlotClassNames<TextSlots>;
 
@@ -105,27 +89,18 @@ export type TextState = ComponentState<TextSlots> & Required<Pick<TextProps, 'al
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
-// @public @deprecated (undocumented)
-export const title1ClassName = "fui-Title1";
-
 // @public (undocumented)
 export const title1ClassNames: SlotClassNames<TextSlots>;
 
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
-// @public @deprecated (undocumented)
-export const title2ClassName = "fui-Title2";
-
 // @public (undocumented)
 export const title2ClassNames: SlotClassNames<TextSlots>;
 
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
-// @public @deprecated (undocumented)
-export const title3ClassName = "fui-Title3";
-
 // @public (undocumented)
 export const title3ClassNames: SlotClassNames<TextSlots>;
 
diff --git a/packages/react-components/react-text/src/Body.ts b/packages/react-components/react-text/src/Body.ts
deleted file mode 100644
index 486c9ba844556..0000000000000
--- a/packages/react-components/react-text/src/Body.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/Body/index';
diff --git a/packages/react-components/react-text/src/Body1.ts b/packages/react-components/react-text/src/Body1.ts
new file mode 100644
index 0000000000000..b87b5217a46db
--- /dev/null
+++ b/packages/react-components/react-text/src/Body1.ts
@@ -0,0 +1 @@
+export * from './components/Body1/index';
diff --git a/packages/react-components/react-text/src/Caption.ts b/packages/react-components/react-text/src/Caption.ts
deleted file mode 100644
index 1c62b4efa3f61..0000000000000
--- a/packages/react-components/react-text/src/Caption.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/Caption/index';
diff --git a/packages/react-components/react-text/src/Caption1.ts b/packages/react-components/react-text/src/Caption1.ts
new file mode 100644
index 0000000000000..7f256686695d8
--- /dev/null
+++ b/packages/react-components/react-text/src/Caption1.ts
@@ -0,0 +1 @@
+export * from './components/Caption1/index';
diff --git a/packages/react-components/react-text/src/Caption2.ts b/packages/react-components/react-text/src/Caption2.ts
new file mode 100644
index 0000000000000..30065921e0c31
--- /dev/null
+++ b/packages/react-components/react-text/src/Caption2.ts
@@ -0,0 +1 @@
+export * from './components/Caption2/index';
diff --git a/packages/react-components/react-text/src/Headline.ts b/packages/react-components/react-text/src/Headline.ts
deleted file mode 100644
index 92233e0f48b92..0000000000000
--- a/packages/react-components/react-text/src/Headline.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/Headline/index';
diff --git a/packages/react-components/react-text/src/Subheadline.ts b/packages/react-components/react-text/src/Subheadline.ts
deleted file mode 100644
index 46b3646d68a25..0000000000000
--- a/packages/react-components/react-text/src/Subheadline.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/Subheadline/index';
diff --git a/packages/react-components/react-text/src/Subtitle1.ts b/packages/react-components/react-text/src/Subtitle1.ts
new file mode 100644
index 0000000000000..97cfe5a6b4abf
--- /dev/null
+++ b/packages/react-components/react-text/src/Subtitle1.ts
@@ -0,0 +1 @@
+export * from './components/Subtitle1/index';
diff --git a/packages/react-components/react-text/src/Subtitle2.ts b/packages/react-components/react-text/src/Subtitle2.ts
new file mode 100644
index 0000000000000..b4a8aac34ad6f
--- /dev/null
+++ b/packages/react-components/react-text/src/Subtitle2.ts
@@ -0,0 +1 @@
+export * from './components/Subtitle2/index';
diff --git a/packages/react-components/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap b/packages/react-components/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
deleted file mode 100644
index a01fcdab85553..0000000000000
--- a/packages/react-components/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Body renders a default state 1`] = `
-<div>
-  <span
-    class="fui-Body fui-Text"
-  >
-    Default Body
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-text/src/components/Body/index.ts b/packages/react-components/react-text/src/components/Body/index.ts
deleted file mode 100644
index 0b63ac83587ab..0000000000000
--- a/packages/react-components/react-text/src/components/Body/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Body';
diff --git a/packages/react-components/react-text/src/components/Body/Body.test.tsx b/packages/react-components/react-text/src/components/Body1/Body1.test.tsx
similarity index 50%
rename from packages/react-components/react-text/src/components/Body/Body.test.tsx
rename to packages/react-components/react-text/src/components/Body1/Body1.test.tsx
index 65130e9e850fe..cdb3d73fdea81 100644
--- a/packages/react-components/react-text/src/components/Body/Body.test.tsx
+++ b/packages/react-components/react-text/src/components/Body1/Body1.test.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { Body } from './Body';
+import { Body1 } from './Body1';
 import { isConformant } from '../../common/isConformant';
 
-describe('Body', () => {
+describe('Body1', () => {
   isConformant({
-    Component: Body,
-    displayName: 'Body',
+    Component: Body1,
+    displayName: 'Body1',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
-    const result = render(<Body>Default Body</Body>);
+    const result = render(<Body1>Default Body1</Body1>);
     expect(result.container).toMatchSnapshot();
   });
 });
diff --git a/packages/react-components/react-text/src/components/Body/Body.tsx b/packages/react-components/react-text/src/components/Body1/Body1.tsx
similarity index 55%
rename from packages/react-components/react-text/src/components/Body/Body.tsx
rename to packages/react-components/react-text/src/components/Body1/Body1.tsx
index 369fcf462bd83..479e3cdb83f7b 100644
--- a/packages/react-components/react-text/src/components/Body/Body.tsx
+++ b/packages/react-components/react-text/src/components/Body1/Body1.tsx
@@ -5,12 +5,8 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `bodyClassNames.root` instead.
- */
-export const bodyClassName = 'fui-Body';
-export const bodyClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Body',
+export const body1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body1',
 };
 
 /**
@@ -21,10 +17,10 @@ const useStyles = makeStyles({
 });
 
 /**
- * Text wrapper component for the Body typography variant
+ * Text wrapper component for the Body1 typography variant
  */
-export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
+export const Body1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: bodyClassNames.root,
-  displayName: 'Body',
+  className: body1ClassNames.root,
+  displayName: 'Body1',
 });
diff --git a/packages/react-components/react-text/src/components/Body1/__snapshots__/Body1.test.tsx.snap b/packages/react-components/react-text/src/components/Body1/__snapshots__/Body1.test.tsx.snap
new file mode 100644
index 0000000000000..1cfef5566b41a
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Body1/__snapshots__/Body1.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body1 renders a default state 1`] = `
+<div>
+  <span
+    class="fui-Body1 fui-Text"
+  >
+    Default Body1
+  </span>
+</div>
+`;
diff --git a/packages/react-components/react-text/src/components/Body1/index.ts b/packages/react-components/react-text/src/components/Body1/index.ts
new file mode 100644
index 0000000000000..121209a453aa4
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Body1/index.ts
@@ -0,0 +1 @@
+export * from './Body1';
diff --git a/packages/react-components/react-text/src/components/Caption/Caption.test.tsx b/packages/react-components/react-text/src/components/Caption/Caption.test.tsx
deleted file mode 100644
index b90951df79e34..0000000000000
--- a/packages/react-components/react-text/src/components/Caption/Caption.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Caption } from './Caption';
-import { isConformant } from '../../common/isConformant';
-
-describe('Caption', () => {
-  isConformant({
-    Component: Caption,
-    displayName: 'Caption',
-  });
-
-  it('renders a default state', () => {
-    const result = render(<Caption>Default Caption</Caption>);
-    expect(result.container).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-components/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap b/packages/react-components/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
deleted file mode 100644
index c9a8180a724ba..0000000000000
--- a/packages/react-components/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Caption renders a default state 1`] = `
-<div>
-  <span
-    class="fui-Caption fui-Text"
-  >
-    Default Caption
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-text/src/components/Caption/index.ts b/packages/react-components/react-text/src/components/Caption/index.ts
deleted file mode 100644
index 2c6dacc019b85..0000000000000
--- a/packages/react-components/react-text/src/components/Caption/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Caption';
diff --git a/packages/react-components/react-text/src/components/Caption1/Caption1.test.tsx b/packages/react-components/react-text/src/components/Caption1/Caption1.test.tsx
new file mode 100644
index 0000000000000..3d8c161720831
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption1/Caption1.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Caption1 } from './Caption1';
+import { isConformant } from '../../common/isConformant';
+
+describe('Caption1', () => {
+  isConformant({
+    Component: Caption1,
+    displayName: 'Caption1',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Caption1>Default Caption1</Caption1>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-text/src/components/Caption/Caption.tsx b/packages/react-components/react-text/src/components/Caption1/Caption1.tsx
similarity index 53%
rename from packages/react-components/react-text/src/components/Caption/Caption.tsx
rename to packages/react-components/react-text/src/components/Caption1/Caption1.tsx
index 18d88f62c8c0e..a5f65dc96404d 100644
--- a/packages/react-components/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-components/react-text/src/components/Caption1/Caption1.tsx
@@ -5,12 +5,8 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `captionClassNames.root` instead.
- */
-export const captionClassName = 'fui-Caption';
-export const captionClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Caption',
+export const caption1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption1',
 };
 
 /**
@@ -21,10 +17,10 @@ const useStyles = makeStyles({
 });
 
 /**
- * Text wrapper component for the Caption typography variant
+ * Text wrapper component for the Caption1 typography variant
  */
-export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
+export const Caption1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: captionClassNames.root,
-  displayName: 'Caption',
+  className: caption1ClassNames.root,
+  displayName: 'Caption1',
 });
diff --git a/packages/react-components/react-text/src/components/Caption1/__snapshots__/Caption1.test.tsx.snap b/packages/react-components/react-text/src/components/Caption1/__snapshots__/Caption1.test.tsx.snap
new file mode 100644
index 0000000000000..3a2fac64369b2
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption1/__snapshots__/Caption1.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption1 renders a default state 1`] = `
+<div>
+  <span
+    class="fui-Caption1 fui-Text"
+  >
+    Default Caption1
+  </span>
+</div>
+`;
diff --git a/packages/react-components/react-text/src/components/Caption1/index.ts b/packages/react-components/react-text/src/components/Caption1/index.ts
new file mode 100644
index 0000000000000..9884a53b5ce8e
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption1/index.ts
@@ -0,0 +1 @@
+export * from './Caption1';
diff --git a/packages/react-components/react-text/src/components/Caption2/Caption2.test.tsx b/packages/react-components/react-text/src/components/Caption2/Caption2.test.tsx
new file mode 100644
index 0000000000000..d596797300622
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption2/Caption2.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Caption2 } from './Caption2';
+import { isConformant } from '../../common/isConformant';
+
+describe('Caption2', () => {
+  isConformant({
+    Component: Caption2,
+    displayName: 'Caption2',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Caption2>Default Caption2</Caption2>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-text/src/components/Caption2/Caption2.tsx b/packages/react-components/react-text/src/components/Caption2/Caption2.tsx
new file mode 100644
index 0000000000000..a6441426ff966
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption2/Caption2.tsx
@@ -0,0 +1,26 @@
+import type { FunctionComponent } from 'react';
+import { makeStyles } from '@griffel/react';
+import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+import { typographyStyles } from '@fluentui/react-theme';
+
+export const caption2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption2',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.caption2,
+});
+
+/**
+ * Text wrapper component for the Caption2 typography variant
+ */
+export const Caption2: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: caption2ClassNames.root,
+  displayName: 'Caption2',
+});
diff --git a/packages/react-components/react-text/src/components/Caption2/__snapshots__/Caption2.test.tsx.snap b/packages/react-components/react-text/src/components/Caption2/__snapshots__/Caption2.test.tsx.snap
new file mode 100644
index 0000000000000..1df96c237542f
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption2/__snapshots__/Caption2.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption2 renders a default state 1`] = `
+<div>
+  <span
+    class="fui-Caption2 fui-Text"
+  >
+    Default Caption2
+  </span>
+</div>
+`;
diff --git a/packages/react-components/react-text/src/components/Caption2/index.ts b/packages/react-components/react-text/src/components/Caption2/index.ts
new file mode 100644
index 0000000000000..0b834aa6325c1
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Caption2/index.ts
@@ -0,0 +1 @@
+export * from './Caption2';
diff --git a/packages/react-components/react-text/src/components/Display/Display.test.tsx b/packages/react-components/react-text/src/components/Display/Display.test.tsx
index 6e3c09310cd6e..dc86e3b34bb02 100644
--- a/packages/react-components/react-text/src/components/Display/Display.test.tsx
+++ b/packages/react-components/react-text/src/components/Display/Display.test.tsx
@@ -7,6 +7,7 @@ describe('Display', () => {
   isConformant({
     Component: Display,
     displayName: 'Display',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-text/src/components/Display/Display.tsx b/packages/react-components/react-text/src/components/Display/Display.tsx
index 7503f52423b69..a35a281b53ea8 100644
--- a/packages/react-components/react-text/src/components/Display/Display.tsx
+++ b/packages/react-components/react-text/src/components/Display/Display.tsx
@@ -5,10 +5,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `displayClassNames.root` instead.
- */
-export const displayClassName = 'fui-Display';
 export const displayClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-Display',
 };
diff --git a/packages/react-components/react-text/src/components/Headline/Headline.test.tsx b/packages/react-components/react-text/src/components/Headline/Headline.test.tsx
deleted file mode 100644
index e7f4464dabd9c..0000000000000
--- a/packages/react-components/react-text/src/components/Headline/Headline.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Headline } from './Headline';
-import { isConformant } from '../../common/isConformant';
-
-describe('Headline', () => {
-  isConformant({
-    Component: Headline,
-    displayName: 'Headline',
-  });
-
-  it('renders a default state', () => {
-    const result = render(<Headline>Default Headline</Headline>);
-    expect(result.container).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-components/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap b/packages/react-components/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
deleted file mode 100644
index 798a8f5142235..0000000000000
--- a/packages/react-components/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Headline renders a default state 1`] = `
-<div>
-  <span
-    class="fui-Headline fui-Text"
-  >
-    Default Headline
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-text/src/components/Headline/index.ts b/packages/react-components/react-text/src/components/Headline/index.ts
deleted file mode 100644
index 90e4df0e937b7..0000000000000
--- a/packages/react-components/react-text/src/components/Headline/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Headline';
diff --git a/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.test.tsx b/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.test.tsx
index 27fdc00020ebf..6ccce433f2859 100644
--- a/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.test.tsx
+++ b/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.test.tsx
@@ -7,6 +7,7 @@ describe('LargeTitle', () => {
   isConformant({
     Component: LargeTitle,
     displayName: 'LargeTitle',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.tsx
index 536e18d41a92b..4bc6460998048 100644
--- a/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-components/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -5,10 +5,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `largeTitleClassNames.root` instead.
- */
-export const largeTitleClassName = 'fui-LargeTitle';
 export const largeTitleClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-LargeTitle',
 };
diff --git a/packages/react-components/react-text/src/components/Subheadline/Subheadline.test.tsx b/packages/react-components/react-text/src/components/Subheadline/Subheadline.test.tsx
deleted file mode 100644
index 465b5608b5d8d..0000000000000
--- a/packages/react-components/react-text/src/components/Subheadline/Subheadline.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { Subheadline } from './Subheadline';
-import { isConformant } from '../../common/isConformant';
-
-describe('Subheadline', () => {
-  isConformant({
-    Component: Subheadline,
-    displayName: 'Subheadline',
-  });
-
-  it('renders a default state', () => {
-    const result = render(<Subheadline>Default Subheadline</Subheadline>);
-    expect(result.container).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-components/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap b/packages/react-components/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
deleted file mode 100644
index 97c7ba179b33b..0000000000000
--- a/packages/react-components/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Subheadline renders a default state 1`] = `
-<div>
-  <span
-    class="fui-Subheadline fui-Text"
-  >
-    Default Subheadline
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-text/src/components/Subheadline/index.ts b/packages/react-components/react-text/src/components/Subheadline/index.ts
deleted file mode 100644
index 06e39cabda845..0000000000000
--- a/packages/react-components/react-text/src/components/Subheadline/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Subheadline';
diff --git a/packages/react-components/react-text/src/components/Subtitle1/Subtitle1.test.tsx b/packages/react-components/react-text/src/components/Subtitle1/Subtitle1.test.tsx
new file mode 100644
index 0000000000000..8a59139f39ac0
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle1/Subtitle1.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Subtitle1 } from './Subtitle1';
+import { isConformant } from '../../common/isConformant';
+
+describe('Subtitle1', () => {
+  isConformant({
+    Component: Subtitle1,
+    displayName: 'Subtitle1',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Subtitle1>Default Subtitle1</Subtitle1>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-text/src/components/Headline/Headline.tsx b/packages/react-components/react-text/src/components/Subtitle1/Subtitle1.tsx
similarity index 53%
rename from packages/react-components/react-text/src/components/Headline/Headline.tsx
rename to packages/react-components/react-text/src/components/Subtitle1/Subtitle1.tsx
index 4629a916cf927..9ec86cc4414dc 100644
--- a/packages/react-components/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-components/react-text/src/components/Subtitle1/Subtitle1.tsx
@@ -5,12 +5,8 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `headlineClassNames.root` instead.
- */
-export const headlineClassName = 'fui-Headline';
-export const headlineClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Headline',
+export const subtitle1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subtitle1',
 };
 
 /**
@@ -21,10 +17,10 @@ const useStyles = makeStyles({
 });
 
 /**
- * Text wrapper component for the Headline typography variant
+ * Text wrapper component for the Subtitle1 typography variant
  */
-export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
+export const Subtitle1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: headlineClassNames.root,
-  displayName: 'Headline',
+  className: subtitle1ClassNames.root,
+  displayName: 'Subtitle1',
 });
diff --git a/packages/react-components/react-text/src/components/Subtitle1/__snapshots__/Subtitle1.test.tsx.snap b/packages/react-components/react-text/src/components/Subtitle1/__snapshots__/Subtitle1.test.tsx.snap
new file mode 100644
index 0000000000000..7d569c9251b09
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle1/__snapshots__/Subtitle1.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subtitle1 renders a default state 1`] = `
+<div>
+  <span
+    class="fui-Subtitle1 fui-Text"
+  >
+    Default Subtitle1
+  </span>
+</div>
+`;
diff --git a/packages/react-components/react-text/src/components/Subtitle1/index.ts b/packages/react-components/react-text/src/components/Subtitle1/index.ts
new file mode 100644
index 0000000000000..3673881ac6ea7
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle1/index.ts
@@ -0,0 +1 @@
+export * from './Subtitle1';
diff --git a/packages/react-components/react-text/src/components/Subtitle2/Subtitle2.test.tsx b/packages/react-components/react-text/src/components/Subtitle2/Subtitle2.test.tsx
new file mode 100644
index 0000000000000..8575246790e60
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle2/Subtitle2.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Subtitle2 } from './Subtitle2';
+import { isConformant } from '../../common/isConformant';
+
+describe('Subtitle2', () => {
+  isConformant({
+    Component: Subtitle2,
+    displayName: 'Subtitle2',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Subtitle2>Default Subtitle2</Subtitle2>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-components/react-text/src/components/Subtitle2/Subtitle2.tsx
similarity index 51%
rename from packages/react-components/react-text/src/components/Subheadline/Subheadline.tsx
rename to packages/react-components/react-text/src/components/Subtitle2/Subtitle2.tsx
index ff88354051f5a..65fe2887d89eb 100644
--- a/packages/react-components/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-components/react-text/src/components/Subtitle2/Subtitle2.tsx
@@ -5,12 +5,8 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `subheadlineClassNames.root` instead.
- */
-export const subheadlineClassName = 'fui-Subheadline';
-export const subheadlineClassNames: SlotClassNames<TextSlots> = {
-  root: 'fui-Subheadline',
+export const subtitle2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subtitle2',
 };
 
 /**
@@ -21,10 +17,10 @@ const useStyles = makeStyles({
 });
 
 /**
- * Text wrapper component for the Subheadline typography variant
+ * Text wrapper component for the Subtitle2 typography variant
  */
-export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
+export const Subtitle2: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: subheadlineClassNames.root,
-  displayName: 'Subheadline',
+  className: subtitle2ClassNames.root,
+  displayName: 'Subtitle2',
 });
diff --git a/packages/react-components/react-text/src/components/Subtitle2/__snapshots__/Subtitle2.test.tsx.snap b/packages/react-components/react-text/src/components/Subtitle2/__snapshots__/Subtitle2.test.tsx.snap
new file mode 100644
index 0000000000000..198743c097b06
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle2/__snapshots__/Subtitle2.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subtitle2 renders a default state 1`] = `
+<div>
+  <span
+    class="fui-Subtitle2 fui-Text"
+  >
+    Default Subtitle2
+  </span>
+</div>
+`;
diff --git a/packages/react-components/react-text/src/components/Subtitle2/index.ts b/packages/react-components/react-text/src/components/Subtitle2/index.ts
new file mode 100644
index 0000000000000..35d7ce8145e88
--- /dev/null
+++ b/packages/react-components/react-text/src/components/Subtitle2/index.ts
@@ -0,0 +1 @@
+export * from './Subtitle2';
diff --git a/packages/react-components/react-text/src/components/Text/Text.test.tsx b/packages/react-components/react-text/src/components/Text/Text.test.tsx
index 51363b8024402..99684b1df761c 100644
--- a/packages/react-components/react-text/src/components/Text/Text.test.tsx
+++ b/packages/react-components/react-text/src/components/Text/Text.test.tsx
@@ -8,6 +8,7 @@ describe('Text', () => {
   isConformant<TextProps>({
     Component: Text,
     displayName: 'Text',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
     testOptions: {
       'make-styles-overrides-win': {
         callCount: 1,
diff --git a/packages/react-components/react-text/src/components/Text/useTextStyles.ts b/packages/react-components/react-text/src/components/Text/useTextStyles.ts
index 8b58e16d1741c..8c249a609ddac 100644
--- a/packages/react-components/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-components/react-text/src/components/Text/useTextStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { TextSlots, TextState } from './Text.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `textClassNames.root` instead.
- */
-export const textClassName = 'fui-Text';
 export const textClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-Text',
 };
diff --git a/packages/react-components/react-text/src/components/Title1/Title1.test.tsx b/packages/react-components/react-text/src/components/Title1/Title1.test.tsx
index a1484276c8093..a752ab6e9fa94 100644
--- a/packages/react-components/react-text/src/components/Title1/Title1.test.tsx
+++ b/packages/react-components/react-text/src/components/Title1/Title1.test.tsx
@@ -7,6 +7,7 @@ describe('Title1', () => {
   isConformant({
     Component: Title1,
     displayName: 'Title1',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-text/src/components/Title1/Title1.tsx b/packages/react-components/react-text/src/components/Title1/Title1.tsx
index 671b4fca8b033..fe988a8aeb6be 100644
--- a/packages/react-components/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-components/react-text/src/components/Title1/Title1.tsx
@@ -5,10 +5,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `title1ClassNames.root` instead.
- */
-export const title1ClassName = 'fui-Title1';
 export const title1ClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-Title1',
 };
diff --git a/packages/react-components/react-text/src/components/Title2/Title2.test.tsx b/packages/react-components/react-text/src/components/Title2/Title2.test.tsx
index fe2787a44c7df..25b288a551b7b 100644
--- a/packages/react-components/react-text/src/components/Title2/Title2.test.tsx
+++ b/packages/react-components/react-text/src/components/Title2/Title2.test.tsx
@@ -7,6 +7,7 @@ describe('Title2', () => {
   isConformant({
     Component: Title2,
     displayName: 'Title2',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-text/src/components/Title2/Title2.tsx b/packages/react-components/react-text/src/components/Title2/Title2.tsx
index e341cee90115d..c03cc17182f4f 100644
--- a/packages/react-components/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-components/react-text/src/components/Title2/Title2.tsx
@@ -5,10 +5,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `title2ClassNames.root` instead.
- */
-export const title2ClassName = 'fui-Title2';
 export const title2ClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-Title2',
 };
diff --git a/packages/react-components/react-text/src/components/Title3/Title3.test.tsx b/packages/react-components/react-text/src/components/Title3/Title3.test.tsx
index 651857951966e..53f68808b38fc 100644
--- a/packages/react-components/react-text/src/components/Title3/Title3.test.tsx
+++ b/packages/react-components/react-text/src/components/Title3/Title3.test.tsx
@@ -7,6 +7,7 @@ describe('Title3', () => {
   isConformant({
     Component: Title3,
     displayName: 'Title3',
+    disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-text/src/components/Title3/Title3.tsx b/packages/react-components/react-text/src/components/Title3/Title3.tsx
index c334b4db151fe..d9902d40b6e8a 100644
--- a/packages/react-components/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-components/react-text/src/components/Title3/Title3.tsx
@@ -5,10 +5,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 import { typographyStyles } from '@fluentui/react-theme';
 
-/**
- * @deprecated Use `title3ClassNames.root` instead.
- */
-export const title3ClassName = 'fui-Title3';
 export const title3ClassNames: SlotClassNames<TextSlots> = {
   root: 'fui-Title3',
 };
diff --git a/packages/react-components/react-text/src/index.ts b/packages/react-components/react-text/src/index.ts
index 689b51c6a6a79..52b6c9b756387 100644
--- a/packages/react-components/react-text/src/index.ts
+++ b/packages/react-components/react-text/src/index.ts
@@ -1,19 +1,12 @@
-/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851 */
-export {
-  Text,
-  renderText_unstable,
-  textClassName,
-  textClassNames,
-  useTextStyles_unstable,
-  useText_unstable,
-} from './Text';
+export { Text, renderText_unstable, textClassNames, useTextStyles_unstable, useText_unstable } from './Text';
 export type { TextProps, TextSlots, TextState } from './Text';
-export { Display, displayClassName, displayClassNames } from './Display';
-export { LargeTitle, largeTitleClassName, largeTitleClassNames } from './LargeTitle';
-export { Title1, title1ClassName, title1ClassNames } from './Title1';
-export { Title2, title2ClassName, title2ClassNames } from './Title2';
-export { Title3, title3ClassName, title3ClassNames } from './Title3';
-export { Headline, headlineClassName, headlineClassNames } from './Headline';
-export { Subheadline, subheadlineClassName, subheadlineClassNames } from './Subheadline';
-export { Body, bodyClassName, bodyClassNames } from './Body';
-export { Caption, captionClassName, captionClassNames } from './Caption';
+export { Display, displayClassNames } from './Display';
+export { LargeTitle, largeTitleClassNames } from './LargeTitle';
+export { Title1, title1ClassNames } from './Title1';
+export { Title2, title2ClassNames } from './Title2';
+export { Title3, title3ClassNames } from './Title3';
+export { Subtitle1, subtitle1ClassNames } from './Subtitle1';
+export { Subtitle2, subtitle2ClassNames } from './Subtitle2';
+export { Body1, body1ClassNames } from './Body1';
+export { Caption1, caption1ClassNames } from './Caption1';
+export { Caption2, caption2ClassNames } from './Caption2';
diff --git a/packages/react-components/react-text/src/stories/TextTypography.stories.tsx b/packages/react-components/react-text/src/stories/TextTypography.stories.tsx
index 6b314a65c532e..af89b6da0debd 100644
--- a/packages/react-components/react-text/src/stories/TextTypography.stories.tsx
+++ b/packages/react-components/react-text/src/stories/TextTypography.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index';
+import { Body1, Caption1, Display, Subtitle1, LargeTitle, Title1, Title2, Title3, Subtitle2, Caption2 } from '../index';
 
 export const Typography = () => (
   <>
@@ -8,10 +8,11 @@ export const Typography = () => (
     <Title1 block>Title1 text wrapper, semibold, base800</Title1>
     <Title2 block>Title2 text wrapper, semibold, base700</Title2>
     <Title3 block>Title3 text wrapper, semibold, base600</Title3>
-    <Headline block>Headline text wrapper, semibold, base500</Headline>
-    <Subheadline block>Subheadline text wrapper, semibold, base400</Subheadline>
-    <Body block>Body text wrapper, regular, base300</Body>
-    <Caption block>Caption text wrapper, regular, base200</Caption>
+    <Subtitle1 block>Subtitle1 text wrapper, semibold, base500</Subtitle1>
+    <Subtitle2 block>Subtitle2 text wrapper, semibold, base400</Subtitle2>
+    <Body1 block>Body1 text wrapper, regular, base300</Body1>
+    <Caption1 block>Caption1 text wrapper, regular, base200</Caption1>
+    <Caption2 block>Caption2 text wrapper, regular, base100</Caption2>
   </>
 );
 

From 5184b86477c4b57672203449b809cefb0222476e Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 May 2022 16:55:44 -0600
Subject: [PATCH 05/11] BREAKING: Removing deprecated
 `<componentName>ClassName` exports from v9 packages (#23026)

* removing single static classnames

* api files

* change files

* disabling component-has-static-classname-exported test in react-image

* preparing to merge master

* disabling export tests

* removing change file for text

* change file

* disabling test in Dialog

* disabling more tests

* remove react-text class names

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
---
 ...-72835d74-837e-437d-8550-e3be4d9a8d83.json |   7 ++
 ...-7f9ac739-0e70-4200-bf95-4068139c936b.json |   7 ++
 ...-04b128f9-24f3-4d35-bc6d-b608422fc776.json |   7 ++
 ...-57f0169b-a24b-46bb-b6c5-8428eecf7a34.json |   7 ++
 ...-43344321-ad6b-4e49-ac2e-fcdfe4314594.json |   7 ++
 ...-bbec4a7f-ec16-4a5a-a74a-385ac529729e.json |   7 ++
 ...-846d7cde-6314-4496-a130-6b73591841ab.json |   7 ++
 ...-f3167de2-b10b-4528-8d73-8c64af613c71.json |   7 ++
 ...-ebd362a4-c89e-40fd-8e16-ef0b29b66b43.json |   7 ++
 ...-6ec3c963-9086-45f6-a760-fe3e45687a73.json |   7 ++
 ...-cfbd26ab-8615-4f8a-b740-d7d607148ea5.json |   7 ++
 ...-2e917e85-7516-435a-a9c3-e3e65283ea81.json |   7 ++
 ...-c0243ea3-5210-4fb3-af64-137b9669484d.json |   7 ++
 ...-ab08476f-3c75-477e-ba73-ed7bdfa64a05.json |   7 ++
 ...-3c546f6f-ca72-4208-b65c-bbdc338b9ff9.json |   7 ++
 ...-4d899a89-a9f7-4fab-8bab-deba826155f4.json |   7 ++
 ...-656abaaa-c067-4b16-a4bb-8eab4034b239.json |   7 ++
 ...-4a7b7981-aa3b-40ad-ab8e-c899b468352d.json |   7 ++
 .../etc/react-accordion.api.md                |  12 ---
 .../components/Accordion/Accordion.test.tsx   |   2 +-
 .../Accordion/useAccordionStyles.ts           |   4 -
 .../AccordionHeader/AccordionHeader.test.tsx  |   1 +
 .../useAccordionHeaderStyles.ts               |   4 -
 .../AccordionItem/AccordionItem.test.tsx      |   2 +-
 .../AccordionItem/useAccordionItemStyles.ts   |   4 -
 .../AccordionPanel/AccordionPanel.test.tsx    |   1 +
 .../AccordionPanel/useAccordionPanelStyles.ts |   4 -
 .../react-accordion/src/index.ts              |   8 --
 .../react-alert/etc/react-alert.api.md        |   3 -
 .../src/components/Alert/Alert.test.tsx       |  16 +--
 .../src/components/Alert/useAlertStyles.ts    |   1 -
 .../react-components/react-alert/src/index.ts |   9 +-
 .../react-avatar/etc/react-avatar.api.md      |   3 -
 .../src/components/Avatar/Avatar.test.tsx     |   1 +
 .../src/components/Avatar/useAvatarStyles.ts  |   4 -
 .../react-avatar/src/index.ts                 |   2 -
 .../react-badge/etc/react-badge.api.md        |   9 --
 .../src/components/Badge/Badge.test.tsx       |   1 +
 .../src/components/Badge/useBadgeStyles.ts    |   4 -
 .../CounterBadge/CounterBadge.test.tsx        |   1 +
 .../CounterBadge/useCounterBadgeStyles.ts     |   4 -
 .../PresenceBadge/PresenceBadge.test.tsx      |   1 +
 .../PresenceBadge/usePresenceBadgeStyles.ts   |   4 -
 .../react-components/react-badge/src/index.ts |  14 +--
 .../react-button/etc/react-button.api.md      |  15 ---
 .../src/components/Button/Button.test.tsx     |   1 +
 .../src/components/Button/index.ts            |   7 +-
 .../src/components/Button/useButtonStyles.ts  |   4 -
 .../CompoundButton/CompoundButton.test.tsx    |   1 +
 .../src/components/CompoundButton/index.ts    |   7 +-
 .../CompoundButton/useCompoundButtonStyles.ts |   5 -
 .../components/MenuButton/MenuButton.test.tsx |   1 +
 .../src/components/MenuButton/index.ts        |   7 +-
 .../MenuButton/useMenuButtonStyles.ts         |   5 -
 .../SplitButton/SplitButton.test.tsx          |   1 +
 .../src/components/SplitButton/index.ts       |   7 +-
 .../SplitButton/useSplitButtonStyles.ts       |   5 -
 .../ToggleButton/ToggleButton.test.tsx        |   1 +
 .../src/components/ToggleButton/index.ts      |   7 +-
 .../ToggleButton/useToggleButtonStyles.ts     |   5 -
 .../react-button/src/index.ts                 |  10 --
 .../react-card/etc/react-card.api.md          |  12 ---
 .../src/components/Card/Card.test.tsx         |   1 +
 .../src/components/Card/useCardStyles.ts      |   4 -
 .../components/CardFooter/CardFooter.test.tsx |   1 +
 .../CardFooter/useCardFooterStyles.ts         |   4 -
 .../components/CardHeader/CardHeader.test.tsx |   1 +
 .../CardHeader/useCardHeaderStyles.ts         |   4 -
 .../CardPreview/CardPreview.test.tsx          |   1 +
 .../CardPreview/useCardPreviewStyles.ts       |   4 -
 .../react-components/react-card/src/index.ts  |  14 +--
 .../react-checkbox/etc/react-checkbox.api.md  |   3 -
 .../src/components/Checkbox/Checkbox.test.tsx |   1 +
 .../components/Checkbox/useCheckboxStyles.ts  |   4 -
 .../react-checkbox/src/index.ts               |   2 -
 .../etc/react-components.api.md               | 102 ------------------
 .../etc/react-components.unstable.api.md      |  12 ---
 .../react-components/src/index.ts             |  66 ------------
 .../react-components/src/unstable/index.ts    |   8 --
 .../react-dialog/etc/react-dialog.api.md      |   3 -
 .../src/components/Dialog/Dialog.test.tsx     |   1 +
 .../src/components/Dialog/useDialogStyles.ts  |   4 -
 .../react-dialog/src/index.ts                 |   2 -
 .../react-divider/etc/react-divider.api.md    |   3 -
 .../src/components/Divider/Divider.test.tsx   |   1 +
 .../components/Divider/useDividerStyles.ts    |   4 -
 .../react-divider/src/index.ts                |   2 -
 .../react-image/etc/react-image.api.md        |   3 -
 .../src/components/Image/Image.test.tsx       |   1 +
 .../src/components/Image/useImageStyles.ts    |   4 -
 .../react-components/react-image/src/index.ts |  10 +-
 .../react-input/etc/react-input.api.md        |   3 -
 .../src/components/Input/Input.test.tsx       |   1 +
 .../src/components/Input/useInputStyles.ts    |   4 -
 .../react-components/react-input/src/index.ts |  10 +-
 .../react-label/etc/react-label.api.md        |   3 -
 .../src/components/Label/Label.test.tsx       |   1 +
 .../src/components/Label/useLabelStyles.ts    |   4 -
 .../react-components/react-label/src/index.ts |  10 +-
 .../react-link/etc/react-link.api.md          |   3 -
 .../src/components/Link/Link.test.tsx         |   1 +
 .../src/components/Link/useLinkStyles.ts      |   4 -
 .../react-components/react-link/src/index.ts  |   2 -
 .../react-menu/etc/react-menu.api.md          |  27 -----
 .../MenuDivider/MenuDivider.test.tsx          |   1 +
 .../MenuDivider/useMenuDividerStyles.ts       |   4 -
 .../components/MenuGroup/MenuGroup.test.tsx   |   1 +
 .../MenuGroup/useMenuGroupStyles.ts           |   4 -
 .../MenuGroupHeader/MenuGroupHeader.test.tsx  |   1 +
 .../useMenuGroupHeaderStyles.ts               |   4 -
 .../src/components/MenuItem/MenuItem.test.tsx |   1 +
 .../components/MenuItem/useMenuItemStyles.ts  |   4 -
 .../MenuItemCheckbox.test.tsx                 |   1 +
 .../useMenuItemCheckboxStyles.ts              |   4 -
 .../MenuItemRadio/MenuItemRadio.test.tsx      |   1 +
 .../MenuItemRadio/useMenuItemRadioStyles.ts   |   4 -
 .../src/components/MenuList/MenuList.test.tsx |   1 +
 .../components/MenuList/useMenuListStyles.ts  |   4 -
 .../MenuPopover/MenuPopover.test.tsx          |   1 +
 .../MenuPopover/useMenuPopoverStyles.ts       |   4 -
 .../MenuSplitGroup/MenuSplitGroup.test.tsx    |   1 +
 .../MenuSplitGroup/useMenuSplitGroupStyles.ts |   4 -
 .../react-components/react-menu/src/index.ts  |  18 ----
 .../react-popover/etc/react-popover.api.md    |   3 -
 .../PopoverSurface/PopoverSurface.test.tsx    |   1 +
 .../PopoverSurface/usePopoverSurfaceStyles.ts |   4 -
 .../react-popover/src/index.ts                |   2 -
 .../react-provider/etc/react-provider.api.md  |   3 -
 .../FluentProvider/FluentProvider.test.tsx    |   2 +-
 .../FluentProvider/useFluentProviderStyles.ts |   4 -
 .../react-provider/src/index.ts               |   2 -
 .../react-radio/etc/react-radio.api.md        |   6 --
 .../src/components/Radio/Radio.test.tsx       |   1 +
 .../src/components/Radio/useRadioStyles.ts    |   4 -
 .../components/RadioGroup/RadioGroup.test.tsx |   1 +
 .../RadioGroup/useRadioGroupStyles.ts         |   4 -
 .../react-components/react-radio/src/index.ts |  12 +--
 .../react-select/etc/react-select.api.md      |   3 -
 .../src/components/Select/Select.test.tsx     |   1 +
 .../src/components/Select/useSelectStyles.ts  |   4 -
 .../react-select/src/index.ts                 |   4 +-
 .../react-tabs/etc/react-tabs.api.md          |   6 --
 .../src/components/Tab/Tab.test.tsx           |   1 +
 .../src/components/Tab/useTabStyles.ts        |   3 -
 .../src/components/TabList/TabList.test.tsx   |   1 +
 .../components/TabList/useTabListStyles.ts    |   5 +-
 .../react-components/react-tabs/src/index.ts  |   3 +-
 .../react-tooltip/etc/react-tooltip.api.md    |   3 -
 .../src/components/Tooltip/Tooltip.test.tsx   |   2 +
 .../components/Tooltip/useTooltipStyles.ts    |   6 --
 .../react-tooltip/src/index.ts                |   2 -
 151 files changed, 184 insertions(+), 661 deletions(-)
 create mode 100644 change/@fluentui-react-accordion-72835d74-837e-437d-8550-e3be4d9a8d83.json
 create mode 100644 change/@fluentui-react-avatar-7f9ac739-0e70-4200-bf95-4068139c936b.json
 create mode 100644 change/@fluentui-react-badge-04b128f9-24f3-4d35-bc6d-b608422fc776.json
 create mode 100644 change/@fluentui-react-button-57f0169b-a24b-46bb-b6c5-8428eecf7a34.json
 create mode 100644 change/@fluentui-react-card-43344321-ad6b-4e49-ac2e-fcdfe4314594.json
 create mode 100644 change/@fluentui-react-checkbox-bbec4a7f-ec16-4a5a-a74a-385ac529729e.json
 create mode 100644 change/@fluentui-react-components-846d7cde-6314-4496-a130-6b73591841ab.json
 create mode 100644 change/@fluentui-react-divider-f3167de2-b10b-4528-8d73-8c64af613c71.json
 create mode 100644 change/@fluentui-react-image-ebd362a4-c89e-40fd-8e16-ef0b29b66b43.json
 create mode 100644 change/@fluentui-react-input-6ec3c963-9086-45f6-a760-fe3e45687a73.json
 create mode 100644 change/@fluentui-react-label-cfbd26ab-8615-4f8a-b740-d7d607148ea5.json
 create mode 100644 change/@fluentui-react-link-2e917e85-7516-435a-a9c3-e3e65283ea81.json
 create mode 100644 change/@fluentui-react-menu-c0243ea3-5210-4fb3-af64-137b9669484d.json
 create mode 100644 change/@fluentui-react-popover-ab08476f-3c75-477e-ba73-ed7bdfa64a05.json
 create mode 100644 change/@fluentui-react-provider-3c546f6f-ca72-4208-b65c-bbdc338b9ff9.json
 create mode 100644 change/@fluentui-react-radio-4d899a89-a9f7-4fab-8bab-deba826155f4.json
 create mode 100644 change/@fluentui-react-tabs-656abaaa-c067-4b16-a4bb-8eab4034b239.json
 create mode 100644 change/@fluentui-react-tooltip-4a7b7981-aa3b-40ad-ab8e-c899b468352d.json

diff --git a/change/@fluentui-react-accordion-72835d74-837e-437d-8550-e3be4d9a8d83.json b/change/@fluentui-react-accordion-72835d74-837e-437d-8550-e3be4d9a8d83.json
new file mode 100644
index 0000000000000..559d50d3704c1
--- /dev/null
+++ b/change/@fluentui-react-accordion-72835d74-837e-437d-8550-e3be4d9a8d83.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-accordion",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-7f9ac739-0e70-4200-bf95-4068139c936b.json b/change/@fluentui-react-avatar-7f9ac739-0e70-4200-bf95-4068139c936b.json
new file mode 100644
index 0000000000000..cb98cd028965c
--- /dev/null
+++ b/change/@fluentui-react-avatar-7f9ac739-0e70-4200-bf95-4068139c936b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-avatar",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-04b128f9-24f3-4d35-bc6d-b608422fc776.json b/change/@fluentui-react-badge-04b128f9-24f3-4d35-bc6d-b608422fc776.json
new file mode 100644
index 0000000000000..d4a7039465626
--- /dev/null
+++ b/change/@fluentui-react-badge-04b128f9-24f3-4d35-bc6d-b608422fc776.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-badge",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-57f0169b-a24b-46bb-b6c5-8428eecf7a34.json b/change/@fluentui-react-button-57f0169b-a24b-46bb-b6c5-8428eecf7a34.json
new file mode 100644
index 0000000000000..5af4324823d1b
--- /dev/null
+++ b/change/@fluentui-react-button-57f0169b-a24b-46bb-b6c5-8428eecf7a34.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-button",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-43344321-ad6b-4e49-ac2e-fcdfe4314594.json b/change/@fluentui-react-card-43344321-ad6b-4e49-ac2e-fcdfe4314594.json
new file mode 100644
index 0000000000000..957589259c9d5
--- /dev/null
+++ b/change/@fluentui-react-card-43344321-ad6b-4e49-ac2e-fcdfe4314594.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-card",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-bbec4a7f-ec16-4a5a-a74a-385ac529729e.json b/change/@fluentui-react-checkbox-bbec4a7f-ec16-4a5a-a74a-385ac529729e.json
new file mode 100644
index 0000000000000..ff2efad58d42d
--- /dev/null
+++ b/change/@fluentui-react-checkbox-bbec4a7f-ec16-4a5a-a74a-385ac529729e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-846d7cde-6314-4496-a130-6b73591841ab.json b/change/@fluentui-react-components-846d7cde-6314-4496-a130-6b73591841ab.json
new file mode 100644
index 0000000000000..841d56e6e460d
--- /dev/null
+++ b/change/@fluentui-react-components-846d7cde-6314-4496-a130-6b73591841ab.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-components",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-f3167de2-b10b-4528-8d73-8c64af613c71.json b/change/@fluentui-react-divider-f3167de2-b10b-4528-8d73-8c64af613c71.json
new file mode 100644
index 0000000000000..949184193ddeb
--- /dev/null
+++ b/change/@fluentui-react-divider-f3167de2-b10b-4528-8d73-8c64af613c71.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-divider",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-ebd362a4-c89e-40fd-8e16-ef0b29b66b43.json b/change/@fluentui-react-image-ebd362a4-c89e-40fd-8e16-ef0b29b66b43.json
new file mode 100644
index 0000000000000..cab5f1878d7e5
--- /dev/null
+++ b/change/@fluentui-react-image-ebd362a4-c89e-40fd-8e16-ef0b29b66b43.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-image",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-6ec3c963-9086-45f6-a760-fe3e45687a73.json b/change/@fluentui-react-input-6ec3c963-9086-45f6-a760-fe3e45687a73.json
new file mode 100644
index 0000000000000..d666cf31e872c
--- /dev/null
+++ b/change/@fluentui-react-input-6ec3c963-9086-45f6-a760-fe3e45687a73.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-input",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-cfbd26ab-8615-4f8a-b740-d7d607148ea5.json b/change/@fluentui-react-label-cfbd26ab-8615-4f8a-b740-d7d607148ea5.json
new file mode 100644
index 0000000000000..382256aaf6d50
--- /dev/null
+++ b/change/@fluentui-react-label-cfbd26ab-8615-4f8a-b740-d7d607148ea5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-label",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-2e917e85-7516-435a-a9c3-e3e65283ea81.json b/change/@fluentui-react-link-2e917e85-7516-435a-a9c3-e3e65283ea81.json
new file mode 100644
index 0000000000000..feb3ad06761ae
--- /dev/null
+++ b/change/@fluentui-react-link-2e917e85-7516-435a-a9c3-e3e65283ea81.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-link",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-c0243ea3-5210-4fb3-af64-137b9669484d.json b/change/@fluentui-react-menu-c0243ea3-5210-4fb3-af64-137b9669484d.json
new file mode 100644
index 0000000000000..4334121b0b379
--- /dev/null
+++ b/change/@fluentui-react-menu-c0243ea3-5210-4fb3-af64-137b9669484d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-menu",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-ab08476f-3c75-477e-ba73-ed7bdfa64a05.json b/change/@fluentui-react-popover-ab08476f-3c75-477e-ba73-ed7bdfa64a05.json
new file mode 100644
index 0000000000000..52ebd8dc10f45
--- /dev/null
+++ b/change/@fluentui-react-popover-ab08476f-3c75-477e-ba73-ed7bdfa64a05.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-popover",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-3c546f6f-ca72-4208-b65c-bbdc338b9ff9.json b/change/@fluentui-react-provider-3c546f6f-ca72-4208-b65c-bbdc338b9ff9.json
new file mode 100644
index 0000000000000..6c4d021e16874
--- /dev/null
+++ b/change/@fluentui-react-provider-3c546f6f-ca72-4208-b65c-bbdc338b9ff9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-provider",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-4d899a89-a9f7-4fab-8bab-deba826155f4.json b/change/@fluentui-react-radio-4d899a89-a9f7-4fab-8bab-deba826155f4.json
new file mode 100644
index 0000000000000..203d6cfdd5b2a
--- /dev/null
+++ b/change/@fluentui-react-radio-4d899a89-a9f7-4fab-8bab-deba826155f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-radio",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-656abaaa-c067-4b16-a4bb-8eab4034b239.json b/change/@fluentui-react-tabs-656abaaa-c067-4b16-a4bb-8eab4034b239.json
new file mode 100644
index 0000000000000..3a0fed1a2b939
--- /dev/null
+++ b/change/@fluentui-react-tabs-656abaaa-c067-4b16-a4bb-8eab4034b239.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing commons type from Label.",
+  "packageName": "@fluentui/react-tabs",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-4a7b7981-aa3b-40ad-ab8e-c899b468352d.json b/change/@fluentui-react-tooltip-4a7b7981-aa3b-40ad-ab8e-c899b468352d.json
new file mode 100644
index 0000000000000..741e99d1b4c8d
--- /dev/null
+++ b/change/@fluentui-react-tooltip-4a7b7981-aa3b-40ad-ab8e-c899b468352d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing <componentName>ClassName exports.",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-accordion/etc/react-accordion.api.md b/packages/react-components/react-accordion/etc/react-accordion.api.md
index a19a64f464eb2..d33766d3a5cda 100644
--- a/packages/react-components/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-components/react-accordion/etc/react-accordion.api.md
@@ -16,9 +16,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
 
-// @public @deprecated (undocumented)
-export const accordionClassName = "fui-Accordion";
-
 // @public (undocumented)
 export const accordionClassNames: SlotClassNames<AccordionSlots>;
 
@@ -39,9 +36,6 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-// @public @deprecated (undocumented)
-export const accordionHeaderClassName = "fui-AccordionHeader";
-
 // @public (undocumented)
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
 
@@ -86,9 +80,6 @@ export type AccordionIndex = number | number[];
 // @public
 export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-// @public @deprecated (undocumented)
-export const accordionItemClassName = "fui-AccordionItem";
-
 // @public (undocumented)
 export const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
 
@@ -126,9 +117,6 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-// @public @deprecated (undocumented)
-export const accordionPanelClassName = "fui-AccordionPanel";
-
 // @public (undocumented)
 export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
 
diff --git a/packages/react-components/react-accordion/src/components/Accordion/Accordion.test.tsx b/packages/react-components/react-accordion/src/components/Accordion/Accordion.test.tsx
index d5216f292cdde..fd88172e30ddc 100644
--- a/packages/react-components/react-accordion/src/components/Accordion/Accordion.test.tsx
+++ b/packages/react-components/react-accordion/src/components/Accordion/Accordion.test.tsx
@@ -8,7 +8,7 @@ describe('Accordion', () => {
     Component: Accordion,
     displayName: 'Accordion',
     // Accordion does not have own styles
-    disabledTests: ['make-styles-overrides-win'],
+    disabledTests: ['make-styles-overrides-win', 'component-has-static-classname-exported'],
   });
 
   /**
diff --git a/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 9bdb7be9aa8f3..50ce5c28ae312 100644
--- a/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-components/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionSlots, AccordionState } from './Accordion.types';
 
-/**
- * @deprecated Use `accordionClassNames.root` instead.
- */
-export const accordionClassName = 'fui-Accordion';
 export const accordionClassNames: SlotClassNames<AccordionSlots> = {
   root: 'fui-Accordion',
 };
diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index 625f2398a0434..13ae5c2a8e8d4 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -12,6 +12,7 @@ describe('AccordionHeader', () => {
   isConformant<AccordionHeaderProps>({
     Component: AccordionHeader,
     displayName: 'AccordionHeader',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 674deae116841..98d72be061992 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -4,10 +4,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `accordionHeaderClassNames.root` instead.
- */
-export const accordionHeaderClassName = 'fui-AccordionHeader';
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
   root: 'fui-AccordionHeader',
   button: 'fui-AccordionHeader__button',
diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.test.tsx b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.test.tsx
index 6da9384d908b8..eb977d6dfa582 100644
--- a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.test.tsx
+++ b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.test.tsx
@@ -8,7 +8,7 @@ describe('AccordionItem', () => {
     Component: AccordionItem,
     displayName: 'AccordionItem',
     // Accordion does not have own styles
-    disabledTests: ['make-styles-overrides-win'],
+    disabledTests: ['make-styles-overrides-win', 'component-has-static-classname-exported'],
   });
 
   /**
diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index def29824f8710..566ba52115428 100644
--- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
-/**
- * @deprecated Use `accordionItemClassNames.root` instead.
- */
-export const accordionItemClassName = 'fui-AccordionItem';
 export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
   root: 'fui-AccordionItem',
 };
diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx
index 004cf68dc4ac0..a7b1d6b08271b 100644
--- a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx
+++ b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx
@@ -14,6 +14,7 @@ describe('AccordionPanel', () => {
   isConformant({
     Component: AccordionPanel,
     displayName: 'AccordionPanel',
+    disabledTests: ['component-has-static-classname-exported'],
     renderOptions: { wrapper: Wrapper },
   });
 
diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index b7e1d98bb25f9..b554401024027 100644
--- a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
-/**
- * @deprecated Use `accordionPanelClassNames.root` instead.
- */
-export const accordionPanelClassName = 'fui-AccordionPanel';
 export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
   root: 'fui-AccordionPanel',
 };
diff --git a/packages/react-components/react-accordion/src/index.ts b/packages/react-components/react-accordion/src/index.ts
index d7b0ca103245a..38b6cb743ec33 100644
--- a/packages/react-components/react-accordion/src/index.ts
+++ b/packages/react-components/react-accordion/src/index.ts
@@ -1,8 +1,6 @@
 export {
   Accordion,
   AccordionContext,
-  // eslint-disable-next-line deprecation/deprecation
-  accordionClassName,
   accordionClassNames,
   renderAccordion_unstable,
   useAccordionContextValues_unstable,
@@ -23,8 +21,6 @@ export type {
 export {
   AccordionItem,
   AccordionItemContext,
-  // eslint-disable-next-line deprecation/deprecation
-  accordionItemClassName,
   accordionItemClassNames,
   renderAccordionItem_unstable,
   useAccordionItemContextValues_unstable,
@@ -42,8 +38,6 @@ export type {
 } from './AccordionItem';
 export {
   AccordionHeader,
-  // eslint-disable-next-line deprecation/deprecation
-  accordionHeaderClassName,
   accordionHeaderClassNames,
   renderAccordionHeader_unstable,
   useAccordionHeaderContextValues_unstable,
@@ -61,8 +55,6 @@ export type {
 } from './AccordionHeader';
 export {
   AccordionPanel,
-  // eslint-disable-next-line deprecation/deprecation
-  accordionPanelClassName,
   accordionPanelClassNames,
   renderAccordionPanel_unstable,
   useAccordionPanelStyles_unstable,
diff --git a/packages/react-components/react-alert/etc/react-alert.api.md b/packages/react-components/react-alert/etc/react-alert.api.md
index c2da06e36a805..4b08805f9b057 100644
--- a/packages/react-components/react-alert/etc/react-alert.api.md
+++ b/packages/react-components/react-alert/etc/react-alert.api.md
@@ -15,9 +15,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Alert: ForwardRefComponent<AlertProps>;
 
-// @public (undocumented)
-export const alertClassName = "fui-Alert";
-
 // @public (undocumented)
 export const alertClassNames: SlotClassNames<AlertSlots>;
 
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
index 45d1cdd6d19ce..4245bd8f982e6 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
@@ -9,21 +9,7 @@ describe('Alert', () => {
   isConformant({
     Component: Alert,
     displayName: 'Alert',
-    // TODO - Follow up on the best option here
-    // testOptions: {
-    //   'has-static-classnames': [
-    //     {
-    //       props: {
-    //         action: { children: 'Test button ' },
-    //       },
-    //     },
-    //   ],
-    // },
-    disabledTests: [
-      // 'component-has-static-classname',
-      // 'component-has-static-classname-exported',
-      'component-has-static-classnames-object',
-    ],
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   // TODO - create visual regression tests in /apps/vr-tests
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index f8baef436875c..c9b662f4447f2 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -4,7 +4,6 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-export const alertClassName = 'fui-Alert';
 export const alertClassNames: SlotClassNames<AlertSlots> = {
   root: 'fui-Alert',
   icon: 'fui-Alert__icon',
diff --git a/packages/react-components/react-alert/src/index.ts b/packages/react-components/react-alert/src/index.ts
index c7549ed9594fd..e212953908242 100644
--- a/packages/react-components/react-alert/src/index.ts
+++ b/packages/react-components/react-alert/src/index.ts
@@ -1,9 +1,2 @@
-export {
-  Alert,
-  alertClassName,
-  alertClassNames,
-  renderAlert_unstable,
-  useAlertStyles_unstable,
-  useAlert_unstable,
-} from './Alert';
+export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';
 export type { AlertProps, AlertSlots, AlertState } from './Alert';
diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 9b8d2f3870bad..3a2f868d08170 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -18,9 +18,6 @@ import { TooltipProps } from '@fluentui/react-tooltip';
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;
 
-// @public @deprecated (undocumented)
-export const avatarClassName = "fui-Avatar";
-
 // @public (undocumented)
 export const avatarClassNames: SlotClassNames<AvatarSlots>;
 
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
index ad5096b27f10f..e08dc8b0b2317 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -8,6 +8,7 @@ describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
index cee260dfe61a6..a3af2c74dd008 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `avatarClassNames.root` instead.
- */
-export const avatarClassName = 'fui-Avatar';
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {
   root: 'fui-Avatar',
   image: 'fui-Avatar__image',
diff --git a/packages/react-components/react-avatar/src/index.ts b/packages/react-components/react-avatar/src/index.ts
index c065f7f35aae4..cd159e303a8e7 100644
--- a/packages/react-components/react-avatar/src/index.ts
+++ b/packages/react-components/react-avatar/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Avatar,
-  // eslint-disable-next-line deprecation/deprecation
-  avatarClassName,
   avatarClassNames,
   renderAvatar_unstable,
   useAvatarStyles_unstable,
diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md
index e391ea4bec006..94ff740911135 100644
--- a/packages/react-components/react-badge/etc/react-badge.api.md
+++ b/packages/react-components/react-badge/etc/react-badge.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;
 
-// @public @deprecated (undocumented)
-export const badgeClassName = "fui-Badge";
-
 // @public (undocumented)
 export const badgeClassNames: SlotClassNames<BadgeSlots>;
 
@@ -41,9 +38,6 @@ export type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps,
 // @public
 export const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
-// @public @deprecated (undocumented)
-export const counterBadgeClassName = "fui-CounterBadge";
-
 // @public (undocumented)
 export const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
 
@@ -64,9 +58,6 @@ export type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape
 // @public
 export const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
-// @public @deprecated (undocumented)
-export const presenceBadgeClassName = "fui-PresenceBadge";
-
 // @public (undocumented)
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
 
diff --git a/packages/react-components/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-components/react-badge/src/components/Badge/Badge.test.tsx
index e5195b010141f..c19209ae60609 100644
--- a/packages/react-components/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-components/react-badge/src/components/Badge/Badge.test.tsx
@@ -8,6 +8,7 @@ describe('Badge', () => {
   isConformant({
     Component: Badge,
     displayName: 'Badge',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
index c27f6ff76e2dd..4a082d6132859 100644
--- a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { BadgeSlots, BadgeState } from './Badge.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `badgeClassNames.root` instead.
- */
-export const badgeClassName = 'fui-Badge';
 export const badgeClassNames: SlotClassNames<BadgeSlots> = {
   root: 'fui-Badge',
   icon: 'fui-Badge__icon',
diff --git a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index b5dfdcfdae22f..bb1288e0dc52a 100644
--- a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -8,6 +8,7 @@ describe('CounterBadge', () => {
   isConformant({
     Component: CounterBadge,
     displayName: 'CounterBadge',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index c53c714cb421f..89c99e4026046 100644
--- a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -4,10 +4,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
 import type { CounterBadgeState } from './CounterBadge.types';
 
-/**
- * @deprecated Use `counterBadgeClassNames.root` instead.
- */
-export const counterBadgeClassName = 'fui-CounterBadge';
 export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
   root: 'fui-CounterBadge',
   icon: 'fui-CounterBadge__icon',
diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.test.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.test.tsx
index e837a7d9ab283..b73061bb32d02 100644
--- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.test.tsx
+++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.test.tsx
@@ -8,6 +8,7 @@ describe('PresenceBadge', () => {
   isConformant({
     Component: PresenceBadge,
     displayName: 'PresenceBadge',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 21a592fe83802..e4881ec9ac552 100644
--- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -4,10 +4,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
 import type { PresenceBadgeState } from './PresenceBadge.types';
 
-/**
- * @deprecated Use `presenceBadgeClassNames.root` instead.
- */
-export const presenceBadgeClassName = 'fui-PresenceBadge';
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
   root: 'fui-PresenceBadge',
   icon: 'fui-PresenceBadge__icon',
diff --git a/packages/react-components/react-badge/src/index.ts b/packages/react-components/react-badge/src/index.ts
index 5ea9d1ebf6f57..5291f513c2fb9 100644
--- a/packages/react-components/react-badge/src/index.ts
+++ b/packages/react-components/react-badge/src/index.ts
@@ -1,17 +1,7 @@
-export {
-  Badge,
-  // eslint-disable-next-line deprecation/deprecation
-  badgeClassName,
-  badgeClassNames,
-  renderBadge_unstable,
-  useBadgeStyles_unstable,
-  useBadge_unstable,
-} from './Badge';
+export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';
 export type { BadgeProps, BadgeSlots, BadgeState } from './Badge';
 export {
   PresenceBadge,
-  // eslint-disable-next-line deprecation/deprecation
-  presenceBadgeClassName,
   presenceBadgeClassNames,
   usePresenceBadgeStyles_unstable,
   usePresenceBadge_unstable,
@@ -19,8 +9,6 @@ export {
 export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';
 export {
   CounterBadge,
-  // eslint-disable-next-line deprecation/deprecation
-  counterBadgeClassName,
   counterBadgeClassNames,
   useCounterBadgeStyles_unstable,
   useCounterBadge_unstable,
diff --git a/packages/react-components/react-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md
index c098a7c86e472..eb579b0497d69 100644
--- a/packages/react-components/react-button/etc/react-button.api.md
+++ b/packages/react-components/react-button/etc/react-button.api.md
@@ -15,9 +15,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Button: ForwardRefComponent<ButtonProps>;
 
-// @public @deprecated (undocumented)
-export const buttonClassName: string;
-
 // @public (undocumented)
 export const buttonClassNames: SlotClassNames<ButtonSlots>;
 
@@ -45,9 +42,6 @@ export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProp
 // @public
 export const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-// @public @deprecated (undocumented)
-export const compoundButtonClassName: string;
-
 // @public (undocumented)
 export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
 
@@ -66,9 +60,6 @@ export type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<But
 // @public
 export const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-// @public @deprecated (undocumented)
-export const menuButtonClassName: string;
-
 // @public (undocumented)
 export const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
 
@@ -100,9 +91,6 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen
 // @public
 export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-// @public @deprecated (undocumented)
-export const splitButtonClassName: string;
-
 // @public (undocumented)
 export const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
@@ -122,9 +110,6 @@ export type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonSta
 // @public
 export const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-// @public @deprecated (undocumented)
-export const toggleButtonClassName: string;
-
 // @public (undocumented)
 export const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
 
diff --git a/packages/react-components/react-button/src/components/Button/Button.test.tsx b/packages/react-components/react-button/src/components/Button/Button.test.tsx
index f5c6db9a5c44e..0ec7a1e4660eb 100644
--- a/packages/react-components/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-components/react-button/src/components/Button/Button.test.tsx
@@ -10,6 +10,7 @@ describe('Button', () => {
   isConformant({
     Component: Button as React.FunctionComponent<ButtonProps>,
     displayName: 'Button',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-button/src/components/Button/index.ts b/packages/react-components/react-button/src/components/Button/index.ts
index 2055cfbd68b48..aed7aa52a83e2 100644
--- a/packages/react-components/react-button/src/components/Button/index.ts
+++ b/packages/react-components/react-button/src/components/Button/index.ts
@@ -3,9 +3,4 @@ export * from './Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export {
-  /* eslint-disable-next-line deprecation/deprecation */
-  buttonClassName,
-  buttonClassNames,
-  useButtonStyles_unstable,
-} from './useButtonStyles';
+export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 5da2fb1e84a11..789f6ad22cfe1 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -9,10 +9,6 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
   root: 'fui-Button',
   icon: 'fui-Button__icon',
 };
-/**
- * @deprecated Use `buttonClassNames.root` instead.
- */
-export const buttonClassName = buttonClassNames.root;
 
 const iconSpacingVar = '--fui-Button__icon--spacing';
 
diff --git a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index 16995ef1d6aad..9de3e2b7e8c86 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -9,6 +9,7 @@ describe('CompoundButton', () => {
   isConformant({
     Component: CompoundButton as React.FunctionComponent<CompoundButtonProps>,
     displayName: 'CompoundButton',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-button/src/components/CompoundButton/index.ts b/packages/react-components/react-button/src/components/CompoundButton/index.ts
index 9482a3b93c198..c03cf9a82ace7 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/index.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/index.ts
@@ -2,9 +2,4 @@ export * from './CompoundButton';
 export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export {
-  /* eslint-disable-next-line deprecation/deprecation */
-  compoundButtonClassName,
-  compoundButtonClassNames,
-  useCompoundButtonStyles_unstable,
-} from './useCompoundButtonStyles';
+export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index b12bca594663c..91df262e213d2 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -11,11 +11,6 @@ export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {
   secondaryContent: 'fui-CompoundButton__secondaryContent',
 };
 
-/**
- * @deprecated Use `compoundButtonClassName.root` instead.
- */
-export const compoundButtonClassName = compoundButtonClassNames.root;
-
 const useRootStyles = makeStyles({
   // Base styles
   base: {
diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx
index 4868d5ba482f3..f339f31a01e6e 100644
--- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx
@@ -10,6 +10,7 @@ describe('MenuButton', () => {
   isConformant({
     Component: MenuButton as React.FunctionComponent<MenuButtonProps>,
     displayName: 'MenuButton',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-button/src/components/MenuButton/index.ts b/packages/react-components/react-button/src/components/MenuButton/index.ts
index c24584a6715c0..1a2f243d7c1b3 100644
--- a/packages/react-components/react-button/src/components/MenuButton/index.ts
+++ b/packages/react-components/react-button/src/components/MenuButton/index.ts
@@ -2,9 +2,4 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export {
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuButtonClassName,
-  menuButtonClassNames,
-  useMenuButtonStyles_unstable,
-} from './useMenuButtonStyles';
+export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index 314b461c33e19..c40a8e257e7ee 100644
--- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -10,11 +10,6 @@ export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
   menuIcon: 'fui-MenuButton__menuIcon',
 };
 
-/**
- * @deprecated Use `menuButtonClassName.root` instead.
- */
-export const menuButtonClassName = menuButtonClassNames.root;
-
 const useMenuIconStyles = makeStyles({
   base: {
     lineHeight: 0,
diff --git a/packages/react-components/react-button/src/components/SplitButton/SplitButton.test.tsx b/packages/react-components/react-button/src/components/SplitButton/SplitButton.test.tsx
index e8fb53269a723..2f675ef4d8566 100644
--- a/packages/react-components/react-button/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-components/react-button/src/components/SplitButton/SplitButton.test.tsx
@@ -9,6 +9,7 @@ describe('SplitButton', () => {
   isConformant({
     Component: SplitButton as React.FunctionComponent<SplitButtonProps>,
     displayName: 'SplitButton',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-button/src/components/SplitButton/index.ts b/packages/react-components/react-button/src/components/SplitButton/index.ts
index aacb3025669cd..916cfacdcab8d 100644
--- a/packages/react-components/react-button/src/components/SplitButton/index.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/index.ts
@@ -2,9 +2,4 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export {
-  /* eslint-disable-next-line deprecation/deprecation */
-  splitButtonClassName,
-  splitButtonClassNames,
-  useSplitButtonStyles_unstable,
-} from './useSplitButtonStyles';
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 96e31224f8039..28451982af625 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -10,11 +10,6 @@ export const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {
   primaryActionButton: 'fui-SplitButton__primaryActionButton',
 };
 
-/**
- * @deprecated Use `splitButtonClassName.root` instead.
- */
-export const splitButtonClassName = splitButtonClassNames.root;
-
 const useFocusStyles = makeStyles({
   primaryActionButton: createCustomFocusIndicatorStyle({
     borderTopRightRadius: 0,
diff --git a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.test.tsx
index 30e69ac356b48..b003dbe80f3af 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.test.tsx
@@ -15,6 +15,7 @@ describe('ToggleButton', () => {
   isConformant({
     Component: ToggleButton as React.FunctionComponent<ToggleButtonProps>,
     displayName: 'ToggleButton',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-button/src/components/ToggleButton/index.ts b/packages/react-components/react-button/src/components/ToggleButton/index.ts
index d6d157426c7c3..f73efaf513065 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/index.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/index.ts
@@ -2,9 +2,4 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export {
-  /* eslint-disable-next-line deprecation/deprecation */
-  toggleButtonClassName,
-  toggleButtonClassNames,
-  useToggleButtonStyles_unstable,
-} from './useToggleButtonStyles';
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index 3b13f126c4b16..b91b59ff4bb30 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -11,11 +11,6 @@ export const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {
   icon: 'fui-ToggleButton__icon',
 };
 
-/**
- * @deprecated Use `toggleButtonClassName.root` instead.
- */
-export const toggleButtonClassName = toggleButtonClassNames.root;
-
 export const useCheckedStyles = makeStyles({
   // Base styles
   base: {
diff --git a/packages/react-components/react-button/src/index.ts b/packages/react-components/react-button/src/index.ts
index ea75fc75505c7..75ce388e1dfe9 100644
--- a/packages/react-components/react-button/src/index.ts
+++ b/packages/react-components/react-button/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Button,
-  // eslint-disable-next-line deprecation/deprecation
-  buttonClassName,
   buttonClassNames,
   renderButton_unstable,
   useButtonStyles_unstable,
@@ -10,8 +8,6 @@ export {
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button';
 export {
   CompoundButton,
-  // eslint-disable-next-line deprecation/deprecation
-  compoundButtonClassName,
   compoundButtonClassNames,
   renderCompoundButton_unstable,
   useCompoundButtonStyles_unstable,
@@ -20,8 +16,6 @@ export {
 export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';
 export {
   MenuButton,
-  // eslint-disable-next-line deprecation/deprecation
-  menuButtonClassName,
   menuButtonClassNames,
   renderMenuButton_unstable,
   useMenuButtonStyles_unstable,
@@ -31,8 +25,6 @@ export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuBu
 export {
   SplitButton,
   renderSplitButton_unstable,
-  // eslint-disable-next-line deprecation/deprecation
-  splitButtonClassName,
   splitButtonClassNames,
   useSplitButtonStyles_unstable,
   useSplitButton_unstable,
@@ -41,8 +33,6 @@ export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './Spl
 export {
   ToggleButton,
   renderToggleButton_unstable,
-  // eslint-disable-next-line deprecation/deprecation
-  toggleButtonClassName,
   toggleButtonClassNames,
   useToggleButtonStyles_unstable,
   useToggleButton_unstable,
diff --git a/packages/react-components/react-card/etc/react-card.api.md b/packages/react-components/react-card/etc/react-card.api.md
index 229778a40e599..e88ce5e097df6 100644
--- a/packages/react-components/react-card/etc/react-card.api.md
+++ b/packages/react-components/react-card/etc/react-card.api.md
@@ -14,18 +14,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Card: ForwardRefComponent<CardProps>;
 
-// @public @deprecated (undocumented)
-export const cardClassName = "fui-Card";
-
 // @public (undocumented)
 export const cardClassNames: SlotClassNames<CardSlots>;
 
 // @public
 export const CardFooter: ForwardRefComponent<CardFooterProps>;
 
-// @public @deprecated (undocumented)
-export const cardFooterClassName = "fui-CardFooter";
-
 // @public (undocumented)
 export const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 
@@ -44,9 +38,6 @@ export type CardFooterState = ComponentState<CardFooterSlots>;
 // @public
 export const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
-// @public @deprecated (undocumented)
-export const cardHeaderClassName = "fui-CardHeader";
-
 // @public (undocumented)
 export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 
@@ -69,9 +60,6 @@ export type CardHeaderState = ComponentState<CardHeaderSlots>;
 // @public
 export const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
-// @public @deprecated (undocumented)
-export const cardPreviewClassName = "fui-CardPreview";
-
 // @public (undocumented)
 export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 
diff --git a/packages/react-components/react-card/src/components/Card/Card.test.tsx b/packages/react-components/react-card/src/components/Card/Card.test.tsx
index 5c791958cff0a..a41df2ed9c75d 100644
--- a/packages/react-components/react-card/src/components/Card/Card.test.tsx
+++ b/packages/react-components/react-card/src/components/Card/Card.test.tsx
@@ -7,6 +7,7 @@ describe('Card', () => {
   isConformant({
     Component: Card,
     displayName: 'Card',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.ts
index 6d1a5058f4dc6..21f56921a2101 100644
--- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-components/react-card/src/components/Card/useCardStyles.ts
@@ -4,10 +4,6 @@ import { cardPreviewClassNames } from '../CardPreview/index';
 import type { CardSlots, CardState } from './Card.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `cardClassNames.root` instead.
- */
-export const cardClassName = 'fui-Card';
 export const cardClassNames: SlotClassNames<CardSlots> = {
   root: 'fui-Card',
 };
diff --git a/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx b/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
index faf4af2bb6342..3ccbf904aeea6 100644
--- a/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
+++ b/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
@@ -7,6 +7,7 @@ describe('CardFooter', () => {
   isConformant({
     Component: CardFooter,
     displayName: 'CardFooter',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts
index 312647b728503..667b999f8c0b9 100644
--- a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
-/**
- * @deprecated Use `cardFooterClassNames.root` instead.
- */
-export const cardFooterClassName = 'fui-CardFooter';
 export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
   root: 'fui-CardFooter',
   action: 'fui-CardFooter__action',
diff --git a/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
index ed14bdd020135..1d05cb0d7ccc8 100644
--- a/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -7,6 +7,7 @@ describe('CardHeader', () => {
   isConformant({
     Component: CardHeader,
     displayName: 'CardHeader',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 384c1a3e386a2..634ec797541a0 100644
--- a/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
-/**
- * @deprecated Use `cardHeaderClassNames.root` instead.
- */
-export const cardHeaderClassName = 'fui-CardHeader';
 export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
   root: 'fui-CardHeader',
   image: 'fui-CardHeader__image',
diff --git a/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
index 4aa45bb0642c3..024da0e4785a2 100644
--- a/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -7,6 +7,7 @@ describe('CardPreview', () => {
   isConformant({
     Component: CardPreview,
     displayName: 'CardPreview',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 319336067983b..5f03c7c17a6df 100644
--- a/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
-/**
- * @deprecated Use `cardPreviewClassNames.root` instead.
- */
-export const cardPreviewClassName = 'fui-CardPreview';
 export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {
   root: 'fui-CardPreview',
   logo: 'fui-CardPreview__logo',
diff --git a/packages/react-components/react-card/src/index.ts b/packages/react-components/react-card/src/index.ts
index a67db3eeccf80..4889d4bd85e42 100644
--- a/packages/react-components/react-card/src/index.ts
+++ b/packages/react-components/react-card/src/index.ts
@@ -1,17 +1,7 @@
-/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/
-
-export {
-  Card,
-  cardClassName,
-  cardClassNames,
-  renderCard_unstable,
-  useCardStyles_unstable,
-  useCard_unstable,
-} from './Card';
+export { Card, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
 export type { CardProps, CardSlots, CardState } from './Card';
 export {
   CardFooter,
-  cardFooterClassName,
   cardFooterClassNames,
   renderCardFooter_unstable,
   useCardFooterStyles_unstable,
@@ -20,7 +10,6 @@ export {
 export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
 export {
   CardHeader,
-  cardHeaderClassName,
   cardHeaderClassNames,
   renderCardHeader_unstable,
   useCardHeaderStyles_unstable,
@@ -29,7 +18,6 @@ export {
 export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
 export {
   CardPreview,
-  cardPreviewClassName,
   cardPreviewClassNames,
   renderCardPreview_unstable,
   useCardPreviewStyles_unstable,
diff --git a/packages/react-components/react-checkbox/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/etc/react-checkbox.api.md
index bb86bfebe2b19..1b5abf23f4e6a 100644
--- a/packages/react-components/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-components/react-checkbox/etc/react-checkbox.api.md
@@ -15,9 +15,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-// @public @deprecated (undocumented)
-export const checkboxClassName = "fui-Checkbox";
-
 // @public (undocumented)
 export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
 
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 23312cc623134..9e80836d6b8a5 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -15,6 +15,7 @@ describe('Checkbox', () => {
   isConformant({
     Component: Checkbox,
     displayName: 'Checkbox',
+    disabledTests: ['component-has-static-classname-exported'],
     primarySlot: 'input',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 3f4aa39332f19..072eb919bb603 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -4,10 +4,6 @@ import { tokens } from '@fluentui/react-theme';
 import { CheckboxSlots, CheckboxState } from './Checkbox.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `checkboxClassNames.root` instead.
- */
-export const checkboxClassName = 'fui-Checkbox';
 export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {
   root: 'fui-Checkbox',
   label: 'fui-Checkbox__label',
diff --git a/packages/react-components/react-checkbox/src/index.ts b/packages/react-components/react-checkbox/src/index.ts
index ccff4e2208938..1bb3babd0ea8b 100644
--- a/packages/react-components/react-checkbox/src/index.ts
+++ b/packages/react-components/react-checkbox/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Checkbox,
-  // eslint-disable-next-line deprecation/deprecation
-  checkboxClassName,
   checkboxClassNames,
   renderCheckbox_unstable,
   useCheckboxStyles_unstable,
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index 67350f7b26efb..b8907e3eb2a02 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -6,13 +6,11 @@
 
 import { __styles } from '@griffel/react';
 import { Accordion } from '@fluentui/react-accordion';
-import { accordionClassName } from '@fluentui/react-accordion';
 import { accordionClassNames } from '@fluentui/react-accordion';
 import { AccordionContext } from '@fluentui/react-accordion';
 import { AccordionContextValue } from '@fluentui/react-accordion';
 import { AccordionContextValues } from '@fluentui/react-accordion';
 import { AccordionHeader } from '@fluentui/react-accordion';
-import { accordionHeaderClassName } from '@fluentui/react-accordion';
 import { accordionHeaderClassNames } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValue } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValues } from '@fluentui/react-accordion';
@@ -23,7 +21,6 @@ import { AccordionHeaderSlots } from '@fluentui/react-accordion';
 import { AccordionHeaderState } from '@fluentui/react-accordion';
 import { AccordionIndex } from '@fluentui/react-accordion';
 import { AccordionItem } from '@fluentui/react-accordion';
-import { accordionItemClassName } from '@fluentui/react-accordion';
 import { accordionItemClassNames } from '@fluentui/react-accordion';
 import { AccordionItemContext } from '@fluentui/react-accordion';
 import { AccordionItemContextValue } from '@fluentui/react-accordion';
@@ -33,7 +30,6 @@ import { AccordionItemSlots } from '@fluentui/react-accordion';
 import { AccordionItemState } from '@fluentui/react-accordion';
 import { AccordionItemValue } from '@fluentui/react-accordion';
 import { AccordionPanel } from '@fluentui/react-accordion';
-import { accordionPanelClassName } from '@fluentui/react-accordion';
 import { accordionPanelClassNames } from '@fluentui/react-accordion';
 import { AccordionPanelProps } from '@fluentui/react-accordion';
 import { AccordionPanelSlots } from '@fluentui/react-accordion';
@@ -46,7 +42,6 @@ import { AccordionToggleEvent } from '@fluentui/react-accordion';
 import { AccordionToggleEventHandler } from '@fluentui/react-accordion';
 import { arrowHeights } from '@fluentui/react-popover';
 import { Avatar } from '@fluentui/react-avatar';
-import { avatarClassName } from '@fluentui/react-avatar';
 import { avatarClassNames } from '@fluentui/react-avatar';
 import { AvatarNamedColor } from '@fluentui/react-avatar';
 import { AvatarProps } from '@fluentui/react-avatar';
@@ -54,7 +49,6 @@ import { AvatarSizes } from '@fluentui/react-avatar';
 import { AvatarSlots } from '@fluentui/react-avatar';
 import { AvatarState } from '@fluentui/react-avatar';
 import { Badge } from '@fluentui/react-badge';
-import { badgeClassName } from '@fluentui/react-badge';
 import { badgeClassNames } from '@fluentui/react-badge';
 import { BadgeProps } from '@fluentui/react-badge';
 import { BadgeSlots } from '@fluentui/react-badge';
@@ -64,7 +58,6 @@ import { body1ClassNames } from '@fluentui/react-text';
 import { BorderRadiusTokens } from '@fluentui/react-theme';
 import { BrandVariants } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
-import { buttonClassName } from '@fluentui/react-button';
 import { buttonClassNames } from '@fluentui/react-button';
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
@@ -74,7 +67,6 @@ import { caption1ClassNames } from '@fluentui/react-text';
 import { Caption2 } from '@fluentui/react-text';
 import { caption2ClassNames } from '@fluentui/react-text';
 import { Checkbox } from '@fluentui/react-checkbox';
-import { checkboxClassName } from '@fluentui/react-checkbox';
 import { checkboxClassNames } from '@fluentui/react-checkbox';
 import { CheckboxOnChangeData } from '@fluentui/react-checkbox';
 import { CheckboxProps } from '@fluentui/react-checkbox';
@@ -85,13 +77,11 @@ import { ColorTokens } from '@fluentui/react-theme';
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import { CompoundButton } from '@fluentui/react-button';
-import { compoundButtonClassName } from '@fluentui/react-button';
 import { compoundButtonClassNames } from '@fluentui/react-button';
 import { CompoundButtonProps } from '@fluentui/react-button';
 import { CompoundButtonSlots } from '@fluentui/react-button';
 import { CompoundButtonState } from '@fluentui/react-button';
 import { CounterBadge } from '@fluentui/react-badge';
-import { counterBadgeClassName } from '@fluentui/react-badge';
 import { counterBadgeClassNames } from '@fluentui/react-badge';
 import { CounterBadgeProps } from '@fluentui/react-badge';
 import { CounterBadgeState } from '@fluentui/react-badge';
@@ -108,7 +98,6 @@ import { CurveTokens } from '@fluentui/react-theme';
 import { Display } from '@fluentui/react-text';
 import { displayClassNames } from '@fluentui/react-text';
 import { Divider } from '@fluentui/react-divider';
-import { dividerClassName } from '@fluentui/react-divider';
 import { dividerClassNames } from '@fluentui/react-divider';
 import { DividerProps } from '@fluentui/react-divider';
 import { DividerSlots } from '@fluentui/react-divider';
@@ -116,7 +105,6 @@ import { DividerState } from '@fluentui/react-divider';
 import { DurationTokens } from '@fluentui/react-theme';
 import { elementContains } from '@fluentui/react-portal';
 import { FluentProvider } from '@fluentui/react-provider';
-import { fluentProviderClassName } from '@fluentui/react-provider';
 import { fluentProviderClassNames } from '@fluentui/react-provider';
 import { FluentProviderContextValues } from '@fluentui/react-provider';
 import { FluentProviderProps } from '@fluentui/react-provider';
@@ -133,7 +121,6 @@ import { getSlots } from '@fluentui/react-utilities';
 import { GriffelStyle } from '@griffel/react';
 import { HorizontalSpacingTokens } from '@fluentui/react-theme';
 import { Image as Image_2 } from '@fluentui/react-image';
-import { imageClassName } from '@fluentui/react-image';
 import { imageClassNames } from '@fluentui/react-image';
 import { ImageProps } from '@fluentui/react-image';
 import { ImageSlots } from '@fluentui/react-image';
@@ -146,7 +133,6 @@ import { InputProps } from '@fluentui/react-input';
 import { InputSlots } from '@fluentui/react-input';
 import { InputState } from '@fluentui/react-input';
 import { Label } from '@fluentui/react-label';
-import { labelClassName } from '@fluentui/react-label';
 import { labelClassNames } from '@fluentui/react-label';
 import { LabelProps } from '@fluentui/react-label';
 import { LabelSlots } from '@fluentui/react-label';
@@ -155,7 +141,6 @@ import { LargeTitle } from '@fluentui/react-text';
 import { largeTitleClassNames } from '@fluentui/react-text';
 import { LineHeightTokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
-import { linkClassName } from '@fluentui/react-link';
 import { linkClassNames } from '@fluentui/react-link';
 import { LinkProps } from '@fluentui/react-link';
 import { LinkSlots } from '@fluentui/react-link';
@@ -164,7 +149,6 @@ import { makeStaticStyles } from '@griffel/react';
 import { makeStyles } from '@griffel/react';
 import { Menu } from '@fluentui/react-menu';
 import { MenuButton } from '@fluentui/react-button';
-import { menuButtonClassName } from '@fluentui/react-button';
 import { menuButtonClassNames } from '@fluentui/react-button';
 import { MenuButtonProps } from '@fluentui/react-button';
 import { MenuButtonSlots } from '@fluentui/react-button';
@@ -175,19 +159,16 @@ import { MenuContext } from '@fluentui/react-menu';
 import { MenuContextValue } from '@fluentui/react-menu';
 import { MenuContextValues } from '@fluentui/react-menu';
 import { MenuDivider } from '@fluentui/react-menu';
-import { menuDividerClassName } from '@fluentui/react-menu';
 import { menuDividerClassNames } from '@fluentui/react-menu';
 import { MenuDividerProps } from '@fluentui/react-menu';
 import { MenuDividerSlots } from '@fluentui/react-menu';
 import { MenuDividerState } from '@fluentui/react-menu';
 import { MenuGroup } from '@fluentui/react-menu';
-import { menuGroupClassName } from '@fluentui/react-menu';
 import { menuGroupClassNames } from '@fluentui/react-menu';
 import { MenuGroupContextProvider } from '@fluentui/react-menu';
 import { MenuGroupContextValue } from '@fluentui/react-menu';
 import { MenuGroupContextValues } from '@fluentui/react-menu';
 import { MenuGroupHeader } from '@fluentui/react-menu';
-import { menuGroupHeaderClassName } from '@fluentui/react-menu';
 import { menuGroupHeaderClassNames } from '@fluentui/react-menu';
 import { MenuGroupHeaderProps } from '@fluentui/react-menu';
 import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
@@ -197,15 +178,12 @@ import { MenuGroupSlots } from '@fluentui/react-menu';
 import { MenuGroupState } from '@fluentui/react-menu';
 import { MenuItem } from '@fluentui/react-menu';
 import { MenuItemCheckbox } from '@fluentui/react-menu';
-import { menuItemCheckboxClassName } from '@fluentui/react-menu';
 import { menuItemCheckboxClassNames } from '@fluentui/react-menu';
 import { MenuItemCheckboxProps } from '@fluentui/react-menu';
 import { MenuItemCheckboxState } from '@fluentui/react-menu';
-import { menuItemClassName } from '@fluentui/react-menu';
 import { menuItemClassNames } from '@fluentui/react-menu';
 import { MenuItemProps } from '@fluentui/react-menu';
 import { MenuItemRadio } from '@fluentui/react-menu';
-import { menuItemRadioClassName } from '@fluentui/react-menu';
 import { menuItemRadioClassNames } from '@fluentui/react-menu';
 import { MenuItemRadioProps } from '@fluentui/react-menu';
 import { MenuItemRadioState } from '@fluentui/react-menu';
@@ -214,7 +192,6 @@ import { MenuItemSelectableState } from '@fluentui/react-menu';
 import { MenuItemSlots } from '@fluentui/react-menu';
 import { MenuItemState } from '@fluentui/react-menu';
 import { MenuList } from '@fluentui/react-menu';
-import { menuListClassName } from '@fluentui/react-menu';
 import { menuListClassNames } from '@fluentui/react-menu';
 import { MenuListContext } from '@fluentui/react-menu';
 import { MenuListContextValue } from '@fluentui/react-menu';
@@ -226,7 +203,6 @@ import { MenuListState } from '@fluentui/react-menu';
 import { MenuOpenChangeData } from '@fluentui/react-menu';
 import { MenuOpenEvents } from '@fluentui/react-menu';
 import { MenuPopover } from '@fluentui/react-menu';
-import { menuPopoverClassName } from '@fluentui/react-menu';
 import { menuPopoverClassNames } from '@fluentui/react-menu';
 import { MenuPopoverProps } from '@fluentui/react-menu';
 import { MenuPopoverSlots } from '@fluentui/react-menu';
@@ -235,7 +211,6 @@ import { MenuProps } from '@fluentui/react-menu';
 import { MenuProvider } from '@fluentui/react-menu';
 import { MenuSlots } from '@fluentui/react-menu';
 import { MenuSplitGroup } from '@fluentui/react-menu';
-import { menuSplitGroupClassName } from '@fluentui/react-menu';
 import { menuSplitGroupClassNames } from '@fluentui/react-menu';
 import { MenuSplitGroupProps } from '@fluentui/react-menu';
 import { MenuSplitGroupSlots } from '@fluentui/react-menu';
@@ -258,7 +233,6 @@ import { PopoverProps } from '@fluentui/react-popover';
 import { PopoverSize } from '@fluentui/react-popover';
 import { PopoverState } from '@fluentui/react-popover';
 import { PopoverSurface } from '@fluentui/react-popover';
-import { popoverSurfaceClassName } from '@fluentui/react-popover';
 import { popoverSurfaceClassNames } from '@fluentui/react-popover';
 import { PopoverSurfaceProps } from '@fluentui/react-popover';
 import { PopoverSurfaceSlots } from '@fluentui/react-popover';
@@ -273,16 +247,13 @@ import { PositioningProps } from '@fluentui/react-positioning';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import { PositioningShorthandValue } from '@fluentui/react-positioning';
 import { PresenceBadge } from '@fluentui/react-badge';
-import { presenceBadgeClassName } from '@fluentui/react-badge';
 import { presenceBadgeClassNames } from '@fluentui/react-badge';
 import { PresenceBadgeProps } from '@fluentui/react-badge';
 import { PresenceBadgeState } from '@fluentui/react-badge';
 import { PresenceBadgeStatus } from '@fluentui/react-badge';
 import { Radio } from '@fluentui/react-radio';
-import { radioClassName } from '@fluentui/react-radio';
 import { radioClassNames } from '@fluentui/react-radio';
 import { RadioGroup } from '@fluentui/react-radio';
-import { radioGroupClassName } from '@fluentui/react-radio';
 import { radioGroupClassNames } from '@fluentui/react-radio';
 import { RadioGroupContext } from '@fluentui/react-radio';
 import { RadioGroupContextValue } from '@fluentui/react-radio';
@@ -369,7 +340,6 @@ import { SpinnerProps } from '@fluentui/react-spinner';
 import { SpinnerSlots } from '@fluentui/react-spinner';
 import { SpinnerState } from '@fluentui/react-spinner';
 import { SplitButton } from '@fluentui/react-button';
-import { splitButtonClassName } from '@fluentui/react-button';
 import { splitButtonClassNames } from '@fluentui/react-button';
 import { SplitButtonProps } from '@fluentui/react-button';
 import { SplitButtonSlots } from '@fluentui/react-button';
@@ -387,10 +357,8 @@ import { SwitchProps } from '@fluentui/react-switch';
 import { SwitchSlots } from '@fluentui/react-switch';
 import { SwitchState } from '@fluentui/react-switch';
 import { Tab } from '@fluentui/react-tabs';
-import { tabClassName } from '@fluentui/react-tabs';
 import { tabClassNames } from '@fluentui/react-tabs';
 import { TabList } from '@fluentui/react-tabs';
-import { tabListClassName } from '@fluentui/react-tabs';
 import { tabListClassNames } from '@fluentui/react-tabs';
 import { TabListContextValue } from '@fluentui/react-tabs';
 import { TabListContextValues } from '@fluentui/react-tabs';
@@ -424,13 +392,11 @@ import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
 import { title3ClassNames } from '@fluentui/react-text';
 import { ToggleButton } from '@fluentui/react-button';
-import { toggleButtonClassName } from '@fluentui/react-button';
 import { toggleButtonClassNames } from '@fluentui/react-button';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
 import { tokens } from '@fluentui/react-theme';
 import { Tooltip } from '@fluentui/react-tooltip';
-import { tooltipClassName } from '@fluentui/react-tooltip';
 import { tooltipClassNames } from '@fluentui/react-tooltip';
 import { TooltipProps } from '@fluentui/react-tooltip';
 import { TooltipSlots } from '@fluentui/react-tooltip';
@@ -565,8 +531,6 @@ export { __styles }
 
 export { Accordion }
 
-export { accordionClassName }
-
 export { accordionClassNames }
 
 export { AccordionContext }
@@ -577,8 +541,6 @@ export { AccordionContextValues }
 
 export { AccordionHeader }
 
-export { accordionHeaderClassName }
-
 export { accordionHeaderClassNames }
 
 export { AccordionHeaderContextValue }
@@ -599,8 +561,6 @@ export { AccordionIndex }
 
 export { AccordionItem }
 
-export { accordionItemClassName }
-
 export { accordionItemClassNames }
 
 export { AccordionItemContext }
@@ -619,8 +579,6 @@ export { AccordionItemValue }
 
 export { AccordionPanel }
 
-export { accordionPanelClassName }
-
 export { accordionPanelClassNames }
 
 export { AccordionPanelProps }
@@ -645,8 +603,6 @@ export { arrowHeights }
 
 export { Avatar }
 
-export { avatarClassName }
-
 export { avatarClassNames }
 
 export { AvatarNamedColor }
@@ -661,8 +617,6 @@ export { AvatarState }
 
 export { Badge }
 
-export { badgeClassName }
-
 export { badgeClassNames }
 
 export { BadgeProps }
@@ -681,8 +635,6 @@ export { BrandVariants }
 
 export { Button }
 
-export { buttonClassName }
-
 export { buttonClassNames }
 
 export { ButtonProps }
@@ -701,8 +653,6 @@ export { caption2ClassNames }
 
 export { Checkbox }
 
-export { checkboxClassName }
-
 export { checkboxClassNames }
 
 export { CheckboxOnChangeData }
@@ -723,8 +673,6 @@ export { ComponentState }
 
 export { CompoundButton }
 
-export { compoundButtonClassName }
-
 export { compoundButtonClassNames }
 
 export { CompoundButtonProps }
@@ -735,8 +683,6 @@ export { CompoundButtonState }
 
 export { CounterBadge }
 
-export { counterBadgeClassName }
-
 export { counterBadgeClassNames }
 
 export { CounterBadgeProps }
@@ -769,8 +715,6 @@ export { displayClassNames }
 
 export { Divider }
 
-export { dividerClassName }
-
 export { dividerClassNames }
 
 export { DividerProps }
@@ -785,8 +729,6 @@ export { elementContains }
 
 export { FluentProvider }
 
-export { fluentProviderClassName }
-
 export { fluentProviderClassNames }
 
 export { FluentProviderContextValues }
@@ -819,8 +761,6 @@ export { HorizontalSpacingTokens }
 
 export { Image_2 as Image }
 
-export { imageClassName }
-
 export { imageClassNames }
 
 export { ImageProps }
@@ -845,8 +785,6 @@ export { InputState }
 
 export { Label }
 
-export { labelClassName }
-
 export { labelClassNames }
 
 export { LabelProps }
@@ -863,8 +801,6 @@ export { LineHeightTokens }
 
 export { Link }
 
-export { linkClassName }
-
 export { linkClassNames }
 
 export { LinkProps }
@@ -881,8 +817,6 @@ export { Menu }
 
 export { MenuButton }
 
-export { menuButtonClassName }
-
 export { menuButtonClassNames }
 
 export { MenuButtonProps }
@@ -903,8 +837,6 @@ export { MenuContextValues }
 
 export { MenuDivider }
 
-export { menuDividerClassName }
-
 export { menuDividerClassNames }
 
 export { MenuDividerProps }
@@ -915,8 +847,6 @@ export { MenuDividerState }
 
 export { MenuGroup }
 
-export { menuGroupClassName }
-
 export { menuGroupClassNames }
 
 export { MenuGroupContextProvider }
@@ -927,8 +857,6 @@ export { MenuGroupContextValues }
 
 export { MenuGroupHeader }
 
-export { menuGroupHeaderClassName }
-
 export { menuGroupHeaderClassNames }
 
 export { MenuGroupHeaderProps }
@@ -947,24 +875,18 @@ export { MenuItem }
 
 export { MenuItemCheckbox }
 
-export { menuItemCheckboxClassName }
-
 export { menuItemCheckboxClassNames }
 
 export { MenuItemCheckboxProps }
 
 export { MenuItemCheckboxState }
 
-export { menuItemClassName }
-
 export { menuItemClassNames }
 
 export { MenuItemProps }
 
 export { MenuItemRadio }
 
-export { menuItemRadioClassName }
-
 export { menuItemRadioClassNames }
 
 export { MenuItemRadioProps }
@@ -981,8 +903,6 @@ export { MenuItemState }
 
 export { MenuList }
 
-export { menuListClassName }
-
 export { menuListClassNames }
 
 export { MenuListContext }
@@ -1005,8 +925,6 @@ export { MenuOpenEvents }
 
 export { MenuPopover }
 
-export { menuPopoverClassName }
-
 export { menuPopoverClassNames }
 
 export { MenuPopoverProps }
@@ -1023,8 +941,6 @@ export { MenuSlots }
 
 export { MenuSplitGroup }
 
-export { menuSplitGroupClassName }
-
 export { menuSplitGroupClassNames }
 
 export { MenuSplitGroupProps }
@@ -1069,8 +985,6 @@ export { PopoverState }
 
 export { PopoverSurface }
 
-export { popoverSurfaceClassName }
-
 export { popoverSurfaceClassNames }
 
 export { PopoverSurfaceProps }
@@ -1099,8 +1013,6 @@ export { PositioningShorthandValue }
 
 export { PresenceBadge }
 
-export { presenceBadgeClassName }
-
 export { presenceBadgeClassNames }
 
 export { PresenceBadgeProps }
@@ -1111,14 +1023,10 @@ export { PresenceBadgeStatus }
 
 export { Radio }
 
-export { radioClassName }
-
 export { radioClassNames }
 
 export { RadioGroup }
 
-export { radioGroupClassName }
-
 export { radioGroupClassNames }
 
 export { RadioGroupContext }
@@ -1291,8 +1199,6 @@ export { SpinnerState }
 
 export { SplitButton }
 
-export { splitButtonClassName }
-
 export { splitButtonClassNames }
 
 export { SplitButtonProps }
@@ -1327,14 +1233,10 @@ export { SwitchState }
 
 export { Tab }
 
-export { tabClassName }
-
 export { tabClassNames }
 
 export { TabList }
 
-export { tabListClassName }
-
 export { tabListClassNames }
 
 export { TabListContextValue }
@@ -1401,8 +1303,6 @@ export { title3ClassNames }
 
 export { ToggleButton }
 
-export { toggleButtonClassName }
-
 export { toggleButtonClassNames }
 
 export { ToggleButtonProps }
@@ -1413,8 +1313,6 @@ export { tokens }
 
 export { Tooltip }
 
-export { tooltipClassName }
-
 export { tooltipClassNames }
 
 export { TooltipProps }
diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md
index b1a3cac66802f..837d18faae937 100644
--- a/packages/react-components/react-components/etc/react-components.unstable.api.md
+++ b/packages/react-components/react-components/etc/react-components.unstable.api.md
@@ -5,22 +5,18 @@
 ```ts
 
 import { Card } from '@fluentui/react-card';
-import { cardClassName } from '@fluentui/react-card';
 import { cardClassNames } from '@fluentui/react-card';
 import { CardFooter } from '@fluentui/react-card';
-import { cardFooterClassName } from '@fluentui/react-card';
 import { cardFooterClassNames } from '@fluentui/react-card';
 import { CardFooterProps } from '@fluentui/react-card';
 import { CardFooterSlots } from '@fluentui/react-card';
 import { CardFooterState } from '@fluentui/react-card';
 import { CardHeader } from '@fluentui/react-card';
-import { cardHeaderClassName } from '@fluentui/react-card';
 import { cardHeaderClassNames } from '@fluentui/react-card';
 import { CardHeaderProps } from '@fluentui/react-card';
 import { CardHeaderSlots } from '@fluentui/react-card';
 import { CardHeaderState } from '@fluentui/react-card';
 import { CardPreview } from '@fluentui/react-card';
-import { cardPreviewClassName } from '@fluentui/react-card';
 import { cardPreviewClassNames } from '@fluentui/react-card';
 import { CardPreviewProps } from '@fluentui/react-card';
 import { CardPreviewSlots } from '@fluentui/react-card';
@@ -55,14 +51,10 @@ import { useSpinButtonStyles_unstable } from '@fluentui/react-spinbutton';
 
 export { Card }
 
-export { cardClassName }
-
 export { cardClassNames }
 
 export { CardFooter }
 
-export { cardFooterClassName }
-
 export { cardFooterClassNames }
 
 export { CardFooterProps }
@@ -73,8 +65,6 @@ export { CardFooterState }
 
 export { CardHeader }
 
-export { cardHeaderClassName }
-
 export { cardHeaderClassNames }
 
 export { CardHeaderProps }
@@ -85,8 +75,6 @@ export { CardHeaderState }
 
 export { CardPreview }
 
-export { cardPreviewClassName }
-
 export { cardPreviewClassNames }
 
 export { CardPreviewProps }
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 7bb5e7ab5ca3e..1d19884a18223 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -12,8 +12,6 @@ export {
 export type { GriffelStyle } from '@griffel/react';
 export {
   FluentProvider,
-  /* eslint-disable-next-line deprecation/deprecation */
-  fluentProviderClassName,
   fluentProviderClassNames,
   renderFluentProvider_unstable,
   useFluent,
@@ -29,12 +27,8 @@ export type {
 } from '@fluentui/react-provider';
 export {
   Radio,
-  /* eslint-disable-next-line deprecation/deprecation */
-  radioClassName,
   radioClassNames,
   RadioGroup,
-  /* eslint-disable-next-line deprecation/deprecation */
-  radioGroupClassName,
   radioGroupClassNames,
   RadioGroupContext,
   renderRadio_unstable,
@@ -144,14 +138,6 @@ export {
   AccordionItem,
   AccordionItemContext,
   AccordionPanel,
-  /* eslint-disable-next-line deprecation/deprecation */
-  accordionClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  accordionHeaderClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  accordionItemClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  accordionPanelClassName,
   accordionClassNames,
   accordionHeaderClassNames,
   accordionItemClassNames,
@@ -202,8 +188,6 @@ export type {
 } from '@fluentui/react-accordion';
 export {
   Avatar,
-  /* eslint-disable-next-line deprecation/deprecation */
-  avatarClassName,
   avatarClassNames,
   renderAvatar_unstable,
   useAvatar_unstable,
@@ -214,12 +198,6 @@ export {
   Badge,
   CounterBadge,
   PresenceBadge,
-  /* eslint-disable-next-line deprecation/deprecation */
-  badgeClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  counterBadgeClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  presenceBadgeClassName,
   badgeClassNames,
   counterBadgeClassNames,
   presenceBadgeClassNames,
@@ -246,12 +224,6 @@ export {
   MenuButton,
   SplitButton,
   ToggleButton,
-  /* eslint-disable-next-line deprecation/deprecation */
-  buttonClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  compoundButtonClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuButtonClassName,
   buttonClassNames,
   compoundButtonClassNames,
   menuButtonClassNames,
@@ -260,10 +232,6 @@ export {
   renderMenuButton_unstable,
   renderSplitButton_unstable,
   renderToggleButton_unstable,
-  /* eslint-disable-next-line deprecation/deprecation */
-  splitButtonClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  toggleButtonClassName,
   splitButtonClassNames,
   toggleButtonClassNames,
   useButton_unstable,
@@ -296,8 +264,6 @@ export type {
 } from '@fluentui/react-button';
 export {
   Checkbox,
-  /* eslint-disable-next-line deprecation/deprecation */
-  checkboxClassName,
   checkboxClassNames,
   renderCheckbox_unstable,
   useCheckbox_unstable,
@@ -306,8 +272,6 @@ export {
 export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from '@fluentui/react-checkbox';
 export {
   Divider,
-  /* eslint-disable-next-line deprecation/deprecation */
-  dividerClassName,
   dividerClassNames,
   renderDivider_unstable,
   useDivider_unstable,
@@ -326,8 +290,6 @@ export {
 export type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';
 export {
   Image,
-  /* eslint-disable-next-line deprecation/deprecation */
-  imageClassName,
   imageClassNames,
   renderImage_unstable,
   useImage_unstable,
@@ -336,8 +298,6 @@ export {
 export type { ImageProps, ImageSlots, ImageState } from '@fluentui/react-image';
 export {
   Label,
-  /* eslint-disable-next-line deprecation/deprecation */
-  labelClassName,
   labelClassNames,
   renderLabel_unstable,
   useLabel_unstable,
@@ -346,8 +306,6 @@ export {
 export type { LabelProps, LabelSlots, LabelState } from '@fluentui/react-label';
 export {
   Link,
-  /* eslint-disable-next-line deprecation/deprecation */
-  linkClassName,
   linkClassNames,
   renderLink_unstable,
   useLink_unstable,
@@ -373,24 +331,6 @@ export {
   MenuSplitGroup,
   MenuTrigger,
   MenuTriggerContextProvider,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuDividerClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuGroupClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuGroupHeaderClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuItemCheckboxClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuItemClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuItemRadioClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuListClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuPopoverClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  menuSplitGroupClassName,
   menuDividerClassNames,
   menuGroupClassNames,
   menuGroupHeaderClassNames,
@@ -493,8 +433,6 @@ export {
   PopoverSurface,
   PopoverTrigger,
   arrowHeights,
-  /* eslint-disable-next-line deprecation/deprecation */
-  popoverSurfaceClassName,
   popoverSurfaceClassNames,
   renderPopover_unstable,
   renderPopoverSurface_unstable,
@@ -554,13 +492,11 @@ export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from '
 export {
   renderTab_unstable,
   Tab,
-  tabClassName,
   tabClassNames,
   useTabStyles_unstable,
   useTab_unstable,
   renderTabList_unstable,
   TabList,
-  tabListClassName,
   tabListClassNames,
   useTabListStyles_unstable,
   useTabList_unstable,
@@ -620,8 +556,6 @@ export type { TextareaProps, TextareaSlots, TextareaState } from '@fluentui/reac
 export {
   Tooltip,
   renderTooltip_unstable,
-  /* eslint-disable-next-line deprecation/deprecation */
-  tooltipClassName,
   tooltipClassNames,
   useTooltip_unstable,
   useTooltipStyles_unstable,
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index d327f2ab08aca..cffc914d02b92 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -5,14 +5,6 @@ export {
   CardFooter,
   CardHeader,
   CardPreview,
-  /* eslint-disable-next-line deprecation/deprecation */
-  cardClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  cardFooterClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  cardHeaderClassName,
-  /* eslint-disable-next-line deprecation/deprecation */
-  cardPreviewClassName,
   cardClassNames,
   cardFooterClassNames,
   cardHeaderClassNames,
diff --git a/packages/react-components/react-dialog/etc/react-dialog.api.md b/packages/react-components/react-dialog/etc/react-dialog.api.md
index 5e93fa9c7cded..b2fb41fd1dc44 100644
--- a/packages/react-components/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-components/react-dialog/etc/react-dialog.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;
 
-// @public @deprecated (undocumented)
-export const dialogClassName = "fui-Dialog";
-
 // @public (undocumented)
 export const dialogClassNames: SlotClassNames<DialogSlots>;
 
diff --git a/packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx b/packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx
index 596c471f7f769..1f9d7d94fa1f4 100644
--- a/packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx
+++ b/packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx
@@ -7,6 +7,7 @@ describe('Dialog', () => {
   isConformant({
     Component: Dialog,
     displayName: 'Dialog',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-components/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-components/react-dialog/src/components/Dialog/useDialogStyles.ts
index ae69ee89849f4..15b3ef6765b1f 100644
--- a/packages/react-components/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-components/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogSlots, DialogState } from './Dialog.types';
 
-/**
- * @deprecated Use `dialogClassNames.root` instead.
- */
-export const dialogClassName = 'fui-Dialog';
 export const dialogClassNames: SlotClassNames<DialogSlots> = {
   root: 'fui-Dialog',
 };
diff --git a/packages/react-components/react-dialog/src/index.ts b/packages/react-components/react-dialog/src/index.ts
index 3e7b255db1a1d..0de05da73985b 100644
--- a/packages/react-components/react-dialog/src/index.ts
+++ b/packages/react-components/react-dialog/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Dialog,
-  // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851
-  dialogClassName,
   dialogClassNames,
   renderDialog_unstable,
   useDialogStyles_unstable,
diff --git a/packages/react-components/react-divider/etc/react-divider.api.md b/packages/react-components/react-divider/etc/react-divider.api.md
index dea8fcfaf104b..317c5e1cd0370 100644
--- a/packages/react-components/react-divider/etc/react-divider.api.md
+++ b/packages/react-components/react-divider/etc/react-divider.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;
 
-// @public @deprecated (undocumented)
-export const dividerClassName = "fui-Divider";
-
 // @public (undocumented)
 export const dividerClassNames: SlotClassNames<DividerSlots>;
 
diff --git a/packages/react-components/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-components/react-divider/src/components/Divider/Divider.test.tsx
index cff1ab61fab56..4db42139415ea 100644
--- a/packages/react-components/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-components/react-divider/src/components/Divider/Divider.test.tsx
@@ -12,6 +12,7 @@ describe('Divider', () => {
   isConformant({
     Component: Divider,
     displayName: 'Divider',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts
index 12226549ad1b2..2385b35762ded 100644
--- a/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import { DividerSlots, DividerState } from './Divider.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `dividerClassNames.root` instead.
- */
-export const dividerClassName = 'fui-Divider';
 export const dividerClassNames: SlotClassNames<DividerSlots> = {
   root: 'fui-Divider',
   wrapper: 'fui-Divider__wrapper',
diff --git a/packages/react-components/react-divider/src/index.ts b/packages/react-components/react-divider/src/index.ts
index 4a41da90d3526..06f68c86265e1 100644
--- a/packages/react-components/react-divider/src/index.ts
+++ b/packages/react-components/react-divider/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Divider,
-  // eslint-disable-next-line deprecation/deprecation
-  dividerClassName,
   dividerClassNames,
   renderDivider_unstable,
   useDividerStyles_unstable,
diff --git a/packages/react-components/react-image/etc/react-image.api.md b/packages/react-components/react-image/etc/react-image.api.md
index 875ce79199fb8..91979a3a0ee12 100644
--- a/packages/react-components/react-image/etc/react-image.api.md
+++ b/packages/react-components/react-image/etc/react-image.api.md
@@ -15,9 +15,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-// @public @deprecated (undocumented)
-export const imageClassName = "fui-Image";
-
 // @public (undocumented)
 export const imageClassNames: SlotClassNames<ImageSlots>;
 
diff --git a/packages/react-components/react-image/src/components/Image/Image.test.tsx b/packages/react-components/react-image/src/components/Image/Image.test.tsx
index e062245b574b2..0605ef17902a6 100644
--- a/packages/react-components/react-image/src/components/Image/Image.test.tsx
+++ b/packages/react-components/react-image/src/components/Image/Image.test.tsx
@@ -7,6 +7,7 @@ describe('Image', () => {
   isConformant({
     Component: Image,
     displayName: 'Image',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-image/src/components/Image/useImageStyles.ts b/packages/react-components/react-image/src/components/Image/useImageStyles.ts
index 5a328d2149f67..a56109413ef22 100644
--- a/packages/react-components/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-components/react-image/src/components/Image/useImageStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { ImageSlots, ImageState } from './Image.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `imageClassNames.root` instead.
- */
-export const imageClassName = 'fui-Image';
 export const imageClassNames: SlotClassNames<ImageSlots> = {
   root: 'fui-Image',
 };
diff --git a/packages/react-components/react-image/src/index.ts b/packages/react-components/react-image/src/index.ts
index 10ce1dbbc7503..38129bc38ced2 100644
--- a/packages/react-components/react-image/src/index.ts
+++ b/packages/react-components/react-image/src/index.ts
@@ -1,10 +1,2 @@
-export {
-  Image,
-  // eslint-disable-next-line deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851
-  imageClassName,
-  imageClassNames,
-  renderImage_unstable,
-  useImageStyles_unstable,
-  useImage_unstable,
-} from './Image';
+export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
 export type { ImageProps, ImageSlots, ImageState } from './Image';
diff --git a/packages/react-components/react-input/etc/react-input.api.md b/packages/react-components/react-input/etc/react-input.api.md
index cdbefc31f276f..061405ebad19b 100644
--- a/packages/react-components/react-input/etc/react-input.api.md
+++ b/packages/react-components/react-input/etc/react-input.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Input: ForwardRefComponent<InputProps>;
 
-// @public @deprecated (undocumented)
-export const inputClassName = "fui-Input";
-
 // @public (undocumented)
 export const inputClassNames: SlotClassNames<InputSlots>;
 
diff --git a/packages/react-components/react-input/src/components/Input/Input.test.tsx b/packages/react-components/react-input/src/components/Input/Input.test.tsx
index bcbc681f988cf..64a8e4be76d7e 100644
--- a/packages/react-components/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-components/react-input/src/components/Input/Input.test.tsx
@@ -20,6 +20,7 @@ describe('Input', () => {
   isConformant({
     Component: Input,
     displayName: 'Input',
+    disabledTests: ['component-has-static-classname-exported'],
     primarySlot: 'input',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
index 7e83681ffed2b..8444587862e27 100644
--- a/packages/react-components/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
@@ -3,10 +3,6 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { InputSlots, InputState } from './Input.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `inputClassNames.root` instead.
- */
-export const inputClassName = 'fui-Input';
 export const inputClassNames: SlotClassNames<InputSlots> = {
   root: 'fui-Input',
   input: 'fui-Input__input',
diff --git a/packages/react-components/react-input/src/index.ts b/packages/react-components/react-input/src/index.ts
index c589cdad568f9..3deb992114c00 100644
--- a/packages/react-components/react-input/src/index.ts
+++ b/packages/react-components/react-input/src/index.ts
@@ -1,10 +1,2 @@
-export {
-  Input,
-  // eslint-disable-next-line deprecation/deprecation
-  inputClassName,
-  inputClassNames,
-  renderInput_unstable,
-  useInputStyles_unstable,
-  useInput_unstable,
-} from './Input';
+export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';
 export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';
diff --git a/packages/react-components/react-label/etc/react-label.api.md b/packages/react-components/react-label/etc/react-label.api.md
index bed0572e7e132..aa4f57f139fbc 100644
--- a/packages/react-components/react-label/etc/react-label.api.md
+++ b/packages/react-components/react-label/etc/react-label.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
-// @public @deprecated (undocumented)
-export const labelClassName = "fui-Label";
-
 // @public (undocumented)
 export const labelClassNames: SlotClassNames<LabelSlots>;
 
diff --git a/packages/react-components/react-label/src/components/Label/Label.test.tsx b/packages/react-components/react-label/src/components/Label/Label.test.tsx
index 8c67ef1964f60..ce19a708866f4 100644
--- a/packages/react-components/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-components/react-label/src/components/Label/Label.test.tsx
@@ -7,6 +7,7 @@ describe('Label', () => {
   isConformant({
     Component: Label,
     displayName: 'Label',
+    disabledTests: ['component-has-static-classname-exported'],
     requiredProps: { children: "I'm a label." },
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-label/src/components/Label/useLabelStyles.ts b/packages/react-components/react-label/src/components/Label/useLabelStyles.ts
index 8b1b3284ac133..f1d37782dbd9d 100644
--- a/packages/react-components/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-components/react-label/src/components/Label/useLabelStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { LabelSlots, LabelState } from './Label.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `labelClassNames.root` instead.
- */
-export const labelClassName = 'fui-Label';
 export const labelClassNames: SlotClassNames<LabelSlots> = {
   root: 'fui-Label',
   required: 'fui-Label__required',
diff --git a/packages/react-components/react-label/src/index.ts b/packages/react-components/react-label/src/index.ts
index eb87fb37c8351..749bc37c52c2d 100644
--- a/packages/react-components/react-label/src/index.ts
+++ b/packages/react-components/react-label/src/index.ts
@@ -1,10 +1,2 @@
-export {
-  Label,
-  // eslint-disable-next-line deprecation/deprecation
-  labelClassName,
-  labelClassNames,
-  renderLabel_unstable,
-  useLabelStyles_unstable,
-  useLabel_unstable,
-} from './Label';
+export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';
 export type { LabelProps, LabelSlots, LabelState } from './Label';
diff --git a/packages/react-components/react-link/etc/react-link.api.md b/packages/react-components/react-link/etc/react-link.api.md
index 20842ce0cc34f..d9ffda7868791 100644
--- a/packages/react-components/react-link/etc/react-link.api.md
+++ b/packages/react-components/react-link/etc/react-link.api.md
@@ -14,9 +14,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Link: ForwardRefComponent<LinkProps>;
 
-// @public @deprecated (undocumented)
-export const linkClassName = "fui-Link";
-
 // @public (undocumented)
 export const linkClassNames: SlotClassNames<LinkSlots>;
 
diff --git a/packages/react-components/react-link/src/components/Link/Link.test.tsx b/packages/react-components/react-link/src/components/Link/Link.test.tsx
index 6e84ced5b59b5..73add6e26e095 100644
--- a/packages/react-components/react-link/src/components/Link/Link.test.tsx
+++ b/packages/react-components/react-link/src/components/Link/Link.test.tsx
@@ -9,6 +9,7 @@ describe('Link', () => {
   isConformant<LinkProps>({
     Component: Link,
     displayName: 'Link',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   describe('meets accessibility requirements', () => {
diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts
index 34ab6ef3ec403..dfad5ccba37a4 100644
--- a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts
@@ -4,10 +4,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { LinkSlots, LinkState } from './Link.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `linkClassNames.root` instead.
- */
-export const linkClassName = 'fui-Link';
 export const linkClassNames: SlotClassNames<LinkSlots> = {
   root: 'fui-Link',
 };
diff --git a/packages/react-components/react-link/src/index.ts b/packages/react-components/react-link/src/index.ts
index fdd9539f55213..67f9fea1a4751 100644
--- a/packages/react-components/react-link/src/index.ts
+++ b/packages/react-components/react-link/src/index.ts
@@ -1,7 +1,5 @@
 export {
   Link,
-  // eslint-disable-next-line deprecation/deprecation
-  linkClassName,
   linkClassNames,
   renderLink_unstable,
   useLinkState_unstable,
diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md
index 3f7804bf19cee..be21c8403c4cd 100644
--- a/packages/react-components/react-menu/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -45,9 +45,6 @@ export type MenuContextValues = {
 // @public
 export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
-// @public @deprecated (undocumented)
-export const menuDividerClassName = "fui-MenuDivider";
-
 // @public (undocumented)
 export const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
 
@@ -65,9 +62,6 @@ export type MenuDividerState = ComponentState<MenuDividerSlots>;
 // @public
 export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
-// @public @deprecated (undocumented)
-export const menuGroupClassName = "fui-MenuGroup";
-
 // @public (undocumented)
 export const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
 
@@ -87,9 +81,6 @@ export type MenuGroupContextValues = {
 // @public
 export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
-// @public @deprecated (undocumented)
-export const menuGroupHeaderClassName = "fui-MenuGroupHeader";
-
 // @public (undocumented)
 export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
 
@@ -123,9 +114,6 @@ export const MenuItem: ForwardRefComponent<MenuItemProps>;
 // @public
 export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
-// @public @deprecated (undocumented)
-export const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
-
 // @public (undocumented)
 export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
 
@@ -135,9 +123,6 @@ export type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 // @public (undocumented)
 export type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-// @public @deprecated (undocumented)
-export const menuItemClassName = "fui-MenuItem";
-
 // @public (undocumented)
 export const menuItemClassNames: SlotClassNames<MenuItemSlots>;
 
@@ -151,9 +136,6 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
 // @public
 export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
-// @public @deprecated (undocumented)
-export const menuItemRadioClassName = "fui-MenuItemRadio";
-
 // @public (undocumented)
 export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
 
@@ -192,9 +174,6 @@ export type MenuItemState = ComponentState<MenuItemSlots> & Pick<MenuItemProps,
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
 
-// @public @deprecated (undocumented)
-export const menuListClassName = "fui-MenuList";
-
 // @public (undocumented)
 export const menuListClassNames: SlotClassNames<MenuListSlots>;
 
@@ -250,9 +229,6 @@ export type MenuOpenEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLEl
 // @public
 export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
-// @public @deprecated (undocumented)
-export const menuPopoverClassName = "fui-MenuPopover";
-
 // @public (undocumented)
 export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
 
@@ -292,9 +268,6 @@ export type MenuSlots = {};
 // @public
 export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
-// @public @deprecated (undocumented)
-export const menuSplitGroupClassName = "fui-MenuSplitGroup";
-
 // @public (undocumented)
 export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
 
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.test.tsx b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.test.tsx
index e40b7d1b66130..c3f94602b2b47 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.test.tsx
@@ -6,6 +6,7 @@ import { isConformant } from '../../common/isConformant';
 describe('MenuDivider', () => {
   isConformant({
     Component: MenuDivider,
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuDivider',
   });
 
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 374e5a1a9a61f..52b05a371e19d 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `menuDividerClassNames.root` instead.
- */
-export const menuDividerClassName = 'fui-MenuDivider';
 export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
   root: 'fui-MenuDivider',
 };
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.test.tsx b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.test.tsx
index bdba2f975b5bf..72a8bbfe46bdc 100644
--- a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.test.tsx
@@ -10,6 +10,7 @@ describe('MenuGroup', () => {
     Component: MenuGroup,
     displayName: 'MenuGroup',
     disabledTests: [
+      'component-has-static-classname-exported',
       // MenuGroup does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index ef2460760d836..998e17d46adf1 100644
--- a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
-/**
- * @deprecated Use `menuGroupClassNames.root` instead.
- */
-export const menuGroupClassName = 'fui-MenuGroup';
 export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
   root: 'fui-MenuGroup',
 };
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
index 71d3562f1fc1f..3f6446b8bc2ea 100644
--- a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
@@ -8,6 +8,7 @@ import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
 describe('MenuGroupHeader', () => {
   isConformant({
     Component: MenuGroupHeader,
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuGroupHeader',
   });
 
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index 2f5140653bc5d..fdf5990056442 100644
--- a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `menuGroupHeaderClassNames.root` instead.
- */
-export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
 export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
   root: 'fui-MenuGroupHeader',
 };
diff --git a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.test.tsx
index ed5ce32d66375..b1c943bafbcc9 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -13,6 +13,7 @@ jest.mock('../../contexts/menuContext');
 describe('MenuItem', () => {
   isConformant({
     Component: MenuItem,
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuItem',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 65e2d08eecc78..d495ca7a65cd4 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -7,10 +7,6 @@ import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
 import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `menuItemClassNames.root` instead.
- */
-export const menuItemClassName = 'fui-MenuItem';
 export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
   root: 'fui-MenuItem',
   icon: 'fui-MenuItem__icon',
diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index bf02772003f98..2e3dd7a9f4ce4 100644
--- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -17,6 +17,7 @@ describe('MenuItemCheckbox conformance', () => {
       name: 'checkbox',
       value: '1',
     },
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuItemCheckbox',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 5674c6fd9bfda..c15df7f5f74f9 100644
--- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -5,10 +5,6 @@ import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
-/**
- * @deprecated Use `menuItemCheckboxClassNames.root` instead.
- */
-export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
 export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
   root: 'fui-MenuItemCheckbox',
   icon: 'fui-MenuItemCheckbox__icon',
diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index accb416c5a2e0..0f25f14f3eae1 100644
--- a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -14,6 +14,7 @@ describe('MenuItemRadio', () => {
       name: 'radio',
       value: '1',
     },
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuItemRadio',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index 926650e72e771..18acac6c2758b 100644
--- a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -5,10 +5,6 @@ import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
-/**
- * @deprecated Use `menuItemRadioClassNames.root` instead.
- */
-export const menuItemRadioClassName = 'fui-MenuItemRadio';
 export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
   root: 'fui-MenuItemRadio',
   icon: 'fui-MenuItemRadio__icon',
diff --git a/packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx b/packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx
index ae15108fc7eef..2d9c43d74bf3d 100644
--- a/packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx
@@ -11,6 +11,7 @@ describe('MenuList', () => {
     Component: MenuList,
     displayName: 'MenuList',
     disabledTests: [
+      'component-has-static-classname-exported',
       // MenuTrigger does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts
index 20fe6074c1c65..e445d37c291f8 100644
--- a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -2,10 +2,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
-/**
- * @deprecated Use `menuListClassNames.root` instead.
- */
-export const menuListClassName = 'fui-MenuList';
 export const menuListClassNames: SlotClassNames<MenuListSlots> = {
   root: 'fui-MenuList',
 };
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.test.tsx b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.test.tsx
index e0b6725bd8d1a..3cb78e13deef1 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.test.tsx
@@ -9,6 +9,7 @@ describe('MenuPopover', () => {
 
   isConformant({
     Component: MenuPopover,
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuPopover',
     requiredProps: { 'data-testid': testid } as MenuPopoverProps,
     getTargetElement: result => result.getByTestId(testid),
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 734c509bc1cd2..b6a5d6e4a0cee 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `menuPopoverClassNames.root` instead.
- */
-export const menuPopoverClassName = 'fui-MenuPopover';
 export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
   root: 'fui-MenuPopover',
 };
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx
index 9693beab12855..c8f1657506d94 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx
@@ -6,6 +6,7 @@ import { isConformant } from '../../common/isConformant';
 describe('MenuSplitGroup', () => {
   isConformant({
     Component: MenuSplitGroup,
+    disabledTests: ['component-has-static-classname-exported'],
     displayName: 'MenuSplitGroup',
   });
 
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index d99162a19e864..04990e573936a 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -4,10 +4,6 @@ import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
 import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `menuSplitGroupClassNames.root` instead.
- */
-export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
 export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {
   root: 'fui-MenuSplitGroup',
 };
diff --git a/packages/react-components/react-menu/src/index.ts b/packages/react-components/react-menu/src/index.ts
index bed9600eced15..89b13ab421129 100644
--- a/packages/react-components/react-menu/src/index.ts
+++ b/packages/react-components/react-menu/src/index.ts
@@ -10,8 +10,6 @@ export { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unsta
 export type { MenuContextValues, MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuSlots, MenuState } from './Menu';
 export {
   MenuDivider,
-  // eslint-disable-next-line deprecation/deprecation
-  menuDividerClassName,
   menuDividerClassNames,
   renderMenuDivider_unstable,
   useMenuDividerStyles_unstable,
@@ -20,8 +18,6 @@ export {
 export type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider';
 export {
   MenuGroup,
-  // eslint-disable-next-line deprecation/deprecation
-  menuGroupClassName,
   menuGroupClassNames,
   renderMenuGroup_unstable,
   useMenuGroupContextValues_unstable,
@@ -31,8 +27,6 @@ export {
 export type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup';
 export {
   MenuGroupHeader,
-  // eslint-disable-next-line deprecation/deprecation
-  menuGroupHeaderClassName,
   menuGroupHeaderClassNames,
   renderMenuGroupHeader_unstable,
   useMenuGroupHeaderStyles_unstable,
@@ -41,8 +35,6 @@ export {
 export type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader';
 export {
   MenuItem,
-  // eslint-disable-next-line deprecation/deprecation
-  menuItemClassName,
   menuItemClassNames,
   renderMenuItem_unstable,
   useMenuItemStyles_unstable,
@@ -51,8 +43,6 @@ export {
 export type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem';
 export {
   MenuItemCheckbox,
-  // eslint-disable-next-line deprecation/deprecation
-  menuItemCheckboxClassName,
   menuItemCheckboxClassNames,
   renderMenuItemCheckbox_unstable,
   useMenuItemCheckboxStyles_unstable,
@@ -61,8 +51,6 @@ export {
 export type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox';
 export {
   MenuItemRadio,
-  // eslint-disable-next-line deprecation/deprecation
-  menuItemRadioClassName,
   menuItemRadioClassNames,
   renderMenuItemRadio_unstable,
   useMenuItemRadioStyles_unstable,
@@ -71,8 +59,6 @@ export {
 export type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio';
 export {
   MenuList,
-  // eslint-disable-next-line deprecation/deprecation
-  menuListClassName,
   menuListClassNames,
   renderMenuList_unstable,
   useMenuListContextValues_unstable,
@@ -90,8 +76,6 @@ export type {
 } from './MenuList';
 export {
   MenuPopover,
-  // eslint-disable-next-line deprecation/deprecation
-  menuPopoverClassName,
   menuPopoverClassNames,
   renderMenuPopover_unstable,
   useMenuPopoverStyles_unstable,
@@ -100,8 +84,6 @@ export {
 export type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover';
 export {
   MenuSplitGroup,
-  // eslint-disable-next-line deprecation/deprecation
-  menuSplitGroupClassName,
   menuSplitGroupClassNames,
   renderMenuSplitGroup_unstable,
   useMenuSplitGroupStyles_unstable,
diff --git a/packages/react-components/react-popover/etc/react-popover.api.md b/packages/react-components/react-popover/etc/react-popover.api.md
index f7d053f16f654..57751f66b8e99 100644
--- a/packages/react-components/react-popover/etc/react-popover.api.md
+++ b/packages/react-components/react-popover/etc/react-popover.api.md
@@ -78,9 +78,6 @@ export type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'noAr
 // @public
 export const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
 
-// @public @deprecated (undocumented)
-export const popoverSurfaceClassName = "fui-PopoverSurface";
-
 // @public (undocumented)
 export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
 
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx
index 28e20767799a2..a2bbb00956cf2 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx
@@ -17,6 +17,7 @@ describe('PopoverSurface', () => {
   isConformant({
     Component: PopoverSurface,
     displayName: 'PopoverSurface',
+    disabledTests: ['component-has-static-classname-exported'],
     requiredProps: props as PopoverSurfaceProps,
     getTargetElement: result => result.getByTestId(testid),
   });
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index fabed5309c279..e5d0887ea3546 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -5,10 +5,6 @@ import type { PopoverSize } from '../Popover/Popover.types';
 import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `popoverSurfaceClassNames.root` instead.
- */
-export const popoverSurfaceClassName = 'fui-PopoverSurface';
 export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {
   root: 'fui-PopoverSurface',
 };
diff --git a/packages/react-components/react-popover/src/index.ts b/packages/react-components/react-popover/src/index.ts
index a7456726fe3de..a9fd001080112 100644
--- a/packages/react-components/react-popover/src/index.ts
+++ b/packages/react-components/react-popover/src/index.ts
@@ -3,8 +3,6 @@ export type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, Po
 export {
   PopoverSurface,
   arrowHeights,
-  // eslint-disable-next-line deprecation/deprecation
-  popoverSurfaceClassName,
   popoverSurfaceClassNames,
   renderPopoverSurface_unstable,
   usePopoverSurfaceStyles_unstable,
diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index 56d750243ec68..c112191ecf7ae 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -24,9 +24,6 @@ export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentPro
     theme?: Partial<Theme> | undefined;
 } & React_2.RefAttributes<HTMLElement>>;
 
-// @public @deprecated (undocumented)
-export const fluentProviderClassName = "fui-FluentProvider";
-
 // @public (undocumented)
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index be52bebf70eab..5279e7d4360ef 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -13,7 +13,7 @@ describe('FluentProvider', () => {
   });
 
   isConformant({
-    disabledTests: ['component-handles-classname'],
+    disabledTests: ['component-handles-classname', 'component-has-static-classname-exported'],
     Component: FluentProvider,
     displayName: 'FluentProvider',
   });
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index dc94f0c32d771..5d773baf15bed 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -3,10 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `fluentProviderClassNames.root` instead.
- */
-export const fluentProviderClassName = 'fui-FluentProvider';
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
   root: 'fui-FluentProvider',
 };
diff --git a/packages/react-components/react-provider/src/index.ts b/packages/react-components/react-provider/src/index.ts
index a5778f5f72513..418243261e632 100644
--- a/packages/react-components/react-provider/src/index.ts
+++ b/packages/react-components/react-provider/src/index.ts
@@ -1,6 +1,4 @@
 export {
-  // eslint-disable-next-line deprecation/deprecation
-  fluentProviderClassName,
   fluentProviderClassNames,
   FluentProvider,
   renderFluentProvider_unstable,
diff --git a/packages/react-components/react-radio/etc/react-radio.api.md b/packages/react-components/react-radio/etc/react-radio.api.md
index 30b27213a5147..113743ecc0ee5 100644
--- a/packages/react-components/react-radio/etc/react-radio.api.md
+++ b/packages/react-components/react-radio/etc/react-radio.api.md
@@ -16,18 +16,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
-// @public @deprecated (undocumented)
-export const radioClassName = "fui-Radio";
-
 // @public (undocumented)
 export const radioClassNames: SlotClassNames<RadioSlots>;
 
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
-// @public @deprecated (undocumented)
-export const radioGroupClassName = "fui-RadioGroup";
-
 // @public (undocumented)
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 
diff --git a/packages/react-components/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-components/react-radio/src/components/Radio/Radio.test.tsx
index 8e92f1d3db62d..6d69972360971 100644
--- a/packages/react-components/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-components/react-radio/src/components/Radio/Radio.test.tsx
@@ -10,6 +10,7 @@ describe('Radio', () => {
   isConformant({
     Component: Radio,
     displayName: 'Radio',
+    disabledTests: ['component-has-static-classname-exported'],
     primarySlot: 'input',
     testOptions: {
       'has-static-classnames': [
diff --git a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts
index 9565698a2a6ea..bd8834e43335a 100644
--- a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts
@@ -4,10 +4,6 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `radioClassNames.root` instead.
- */
-export const radioClassName = 'fui-Radio';
 export const radioClassNames: SlotClassNames<RadioSlots> = {
   root: 'fui-Radio',
   indicator: 'fui-Radio__indicator',
diff --git a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.test.tsx b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.test.tsx
index f05ba1a0b8c07..c66f0747a9dfa 100644
--- a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.test.tsx
+++ b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.test.tsx
@@ -9,6 +9,7 @@ describe('RadioGroup', () => {
   isConformant({
     Component: RadioGroup,
     displayName: 'RadioGroup',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index fd197c004dce3..85ab55a19a289 100644
--- a/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -2,10 +2,6 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `radioGroupClassNames.root` instead.
- */
-export const radioGroupClassName = 'fui-RadioGroup';
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
   root: 'fui-RadioGroup',
 };
diff --git a/packages/react-components/react-radio/src/index.ts b/packages/react-components/react-radio/src/index.ts
index 8b432ddbfe861..ab416201ec9e2 100644
--- a/packages/react-components/react-radio/src/index.ts
+++ b/packages/react-components/react-radio/src/index.ts
@@ -1,7 +1,5 @@
 export {
   RadioGroup,
-  /* eslint-disable-next-line deprecation/deprecation */
-  radioGroupClassName,
   radioGroupClassNames,
   renderRadioGroup_unstable,
   useRadioGroupStyles_unstable,
@@ -15,14 +13,6 @@ export type {
   RadioGroupSlots,
   RadioGroupState,
 } from './RadioGroup';
-export {
-  Radio,
-  /* eslint-disable-next-line deprecation/deprecation */
-  radioClassName,
-  radioClassNames,
-  renderRadio_unstable,
-  useRadioStyles_unstable,
-  useRadio_unstable,
-} from './Radio';
+export { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';
 export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
 export { RadioGroupContext, useRadioGroupContextValues } from './contexts/index';
diff --git a/packages/react-components/react-select/etc/react-select.api.md b/packages/react-components/react-select/etc/react-select.api.md
index c48fa6aba15ef..4bff2ff0c38b9 100644
--- a/packages/react-components/react-select/etc/react-select.api.md
+++ b/packages/react-components/react-select/etc/react-select.api.md
@@ -17,9 +17,6 @@ export const renderSelect_unstable: (state: SelectState) => JSX.Element;
 // @public
 export const Select: ForwardRefComponent<SelectProps>;
 
-// @public @deprecated (undocumented)
-export const selectClassName = "fui-Select";
-
 // @public (undocumented)
 export const selectClassNames: SlotClassNames<SelectSlots>;
 
diff --git a/packages/react-components/react-select/src/components/Select/Select.test.tsx b/packages/react-components/react-select/src/components/Select/Select.test.tsx
index 9bb0e5bbd9bae..9a7384812a68f 100644
--- a/packages/react-components/react-select/src/components/Select/Select.test.tsx
+++ b/packages/react-components/react-select/src/components/Select/Select.test.tsx
@@ -7,6 +7,7 @@ describe('Select', () => {
   isConformant({
     Component: Select,
     displayName: 'Select',
+    disabledTests: ['component-has-static-classname-exported'],
     primarySlot: 'select',
   });
 
diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
index f7ddfbff37bc6..dbb8a7e8ee1fe 100644
--- a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
@@ -3,10 +3,6 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import type { SelectSlots, SelectState } from './Select.types';
 
-/**
- * @deprecated Use `selectClassNames.root` instead.
- */
-export const selectClassName = 'fui-Select';
 export const selectClassNames: SlotClassNames<SelectSlots> = {
   root: 'fui-Select',
   select: 'fui-Select__select',
diff --git a/packages/react-components/react-select/src/index.ts b/packages/react-components/react-select/src/index.ts
index 4ed07660dfc1b..91dd31e442178 100644
--- a/packages/react-components/react-select/src/index.ts
+++ b/packages/react-components/react-select/src/index.ts
@@ -1,9 +1,7 @@
 export {
   Select,
-  renderSelect_unstable,
-  // eslint-disable-next-line deprecation/deprecation
-  selectClassName,
   selectClassNames,
+  renderSelect_unstable,
   useSelectStyles_unstable,
   useSelect_unstable,
 } from './Select';
diff --git a/packages/react-components/react-tabs/etc/react-tabs.api.md b/packages/react-components/react-tabs/etc/react-tabs.api.md
index 67a9d68338948..f0fbcd191e0bf 100644
--- a/packages/react-components/react-tabs/etc/react-tabs.api.md
+++ b/packages/react-components/react-tabs/etc/react-tabs.api.md
@@ -34,18 +34,12 @@ export type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData)
 // @public
 export const Tab: ForwardRefComponent<TabProps>;
 
-// @public (undocumented)
-export const tabClassName: string;
-
 // @public (undocumented)
 export const tabClassNames: SlotClassNames<TabSlots>;
 
 // @public
 export const TabList: ForwardRefComponent<TabListProps>;
 
-// @public (undocumented)
-export const tabListClassName: string;
-
 // @public (undocumented)
 export const tabListClassNames: SlotClassNames<TabListSlots>;
 
diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx
index 949660c966acd..8cd20cd95f036 100644
--- a/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx
@@ -10,6 +10,7 @@ describe('Tab', () => {
   isConformant({
     Component: Tab,
     displayName: 'Tab',
+    disabledTests: ['component-has-static-classname-exported'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
index 784e38dfbb7fa..1da0c08b7683b 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
@@ -12,9 +12,6 @@ export const tabClassNames: SlotClassNames<TabSlots> = {
   content: 'fui-Tab__content',
 };
 
-// TODO temporary export to pass conformance test.
-export const tabClassName = tabClassNames.root;
-
 /**
  * Styles for the root slot
  */
diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.test.tsx b/packages/react-components/react-tabs/src/components/TabList/TabList.test.tsx
index 6ed614d7b4b21..28b36bfdfed77 100644
--- a/packages/react-components/react-tabs/src/components/TabList/TabList.test.tsx
+++ b/packages/react-components/react-tabs/src/components/TabList/TabList.test.tsx
@@ -8,6 +8,7 @@ describe('TabList', () => {
   isConformant({
     Component: TabList,
     displayName: 'TabList',
+    disabledTests: ['component-has-static-classname-exported'],
   });
 
   it('renders with tabs', () => {
diff --git a/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts
index baf4a01ba1c16..4056ecad32eaf 100644
--- a/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -6,9 +6,6 @@ export const tabListClassNames: SlotClassNames<TabListSlots> = {
   root: 'fui-TabList',
 };
 
-// TODO temporary export to pass conformance test.
-export const tabListClassName = tabListClassNames.root;
-
 /**
  * Styles for the root slot
  */
@@ -39,7 +36,7 @@ export const useTabListStyles_unstable = (state: TabListState): TabListState =>
   const styles = useStyles();
 
   state.root.className = mergeClasses(
-    tabListClassName,
+    tabListClassNames.root,
     styles.root,
     vertical ? styles.vertical : styles.horizontal,
     state.root.className,
diff --git a/packages/react-components/react-tabs/src/index.ts b/packages/react-components/react-tabs/src/index.ts
index 7a4279271f4e2..4bc4fc872de3f 100644
--- a/packages/react-components/react-tabs/src/index.ts
+++ b/packages/react-components/react-tabs/src/index.ts
@@ -1,5 +1,5 @@
 export type { TabProps, TabSlots, TabState, TabValue } from './Tab';
-export { renderTab_unstable, Tab, tabClassName, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';
+export { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';
 export type {
   TabRegisterData,
   RegisterTabEventHandler,
@@ -15,7 +15,6 @@ export type {
 export {
   renderTabList_unstable,
   TabList,
-  tabListClassName,
   tabListClassNames,
   useTabListStyles_unstable,
   useTabList_unstable,
diff --git a/packages/react-components/react-tooltip/etc/react-tooltip.api.md b/packages/react-components/react-tooltip/etc/react-tooltip.api.md
index 78e87e292e878..63c725a8e9a0a 100644
--- a/packages/react-components/react-tooltip/etc/react-tooltip.api.md
+++ b/packages/react-components/react-tooltip/etc/react-tooltip.api.md
@@ -24,9 +24,6 @@ export const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
 // @public
 export const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
 
-// @public @deprecated (undocumented)
-export const tooltipClassName = "fui-Tooltip";
-
 // @public (undocumented)
 export const tooltipClassNames: SlotClassNames<TooltipSlots>;
 
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index c02c1bc4227d6..142679d127c3b 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -38,6 +38,8 @@ describe('Tooltip', () => {
       'component-handles-ref',
       'component-has-root-ref',
       'component-handles-classname',
+      'component-has-static-classname',
+      'component-has-static-classname-exported',
     ],
   });
 
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index 5e9fb1b7c4f4f..6f2b6fcd6aab5 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -5,10 +5,6 @@ import { arrowHeight } from './private/constants';
 import type { TooltipSlots, TooltipState } from './Tooltip.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-/**
- * @deprecated Use `tooltipClassNames.root` instead.
- */
-export const tooltipClassName = 'fui-Tooltip';
 export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
   content: 'fui-Tooltip__content',
 };
@@ -57,8 +53,6 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
   const styles = useStyles();
 
   state.content.className = mergeClasses(
-    /* eslint-disable-next-line deprecation/deprecation */
-    tooltipClassName,
     tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
diff --git a/packages/react-components/react-tooltip/src/index.ts b/packages/react-components/react-tooltip/src/index.ts
index 4da95e0294b4c..30d94643aa076 100644
--- a/packages/react-components/react-tooltip/src/index.ts
+++ b/packages/react-components/react-tooltip/src/index.ts
@@ -1,8 +1,6 @@
 export {
   Tooltip,
   renderTooltip_unstable,
-  // eslint-disable-next-line deprecation/deprecation
-  tooltipClassName,
   tooltipClassNames,
   useTooltipStyles_unstable,
   useTooltip_unstable,

From a795ce38158eb477c529bfdc952b359d62643943 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 19 May 2022 16:19:37 -0700
Subject: [PATCH 06/11] BREAKING: Update string unions to `spinal-case`
 (#23001)

* react-avatar: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-input: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-radio: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-select: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-spinbutton: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-tabster: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-textarea: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-badge: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* react-combobox: update unions to use spinal-case

BREAKING

Per https://github.com/microsoft/fluentui/pull/22596 all string
unions are being updated to use spinal-case

* add change files for spinal-case update

* react-card: update tabster tab behaviors

Updates the `useCard()` implementation after the `react-tabster`
spinal-case breaking change.

* vr-tests: update types for v9 tests

* react-avatar: update badge types in stories

Avatar stories were using the old, camelCase PresenceBadge types.

* react-badge: fix style that broke with spinal-case change

One of the "doNotDisturb" cases was missed due to the non-typesafe way
we tested the PresenceBadge status in styles.

This test has been changed to a typesafe function call instead.

* react-combobox: update props in appearance story

Change filledDarker and filledLighter to filled-darker and filled-lighter
respectively.

* react-badge: update camelCase to spinal-case for strings
---
 .../src/stories/Avatar.stories.tsx            | 20 +++++++++----------
 .../src/stories/Input.stories.tsx             |  6 +++---
 .../src/stories/PresenceBadge.stories.tsx     |  4 ++--
 .../src/stories/Radio.stories.tsx             |  4 ++--
 .../src/stories/SpinButton.stories.tsx        |  6 +++---
 .../src/stories/Textarea.stories.tsx          |  6 +++---
 ...-108ebfab-22bf-4ae7-9a06-d0207433402c.json |  7 +++++++
 ...-1770dc6e-974e-4c0b-b0b3-8272689fafcb.json |  7 +++++++
 ...-a96fa288-c087-490f-b625-eac5a232d7c8.json |  7 +++++++
 ...-8a1a92fd-9560-40c3-89b1-ff4b6f5007cd.json |  7 +++++++
 ...-ade4b854-6756-48d3-bfcc-379a04fbda52.json |  7 +++++++
 ...-c8eb939d-1971-4b32-a52b-bdfb4a4fcd9e.json |  7 +++++++
 ...-91d36763-0952-4ea2-90c8-5b5c5939a374.json |  7 +++++++
 ...-9b6765e5-c9d6-4735-9345-9d3fb6ff72e3.json |  7 +++++++
 .../react-avatar/etc/react-avatar.api.md      |  2 +-
 .../src/components/Avatar/Avatar.types.ts     |  8 ++++----
 .../src/components/Avatar/useAvatar.tsx       |  8 ++++----
 .../src/components/Avatar/useAvatarStyles.ts  |  8 ++++----
 .../src/stories/AvatarBadge.stories.tsx       |  8 ++++----
 .../stories/AvatarColorPalette.stories.tsx    |  8 ++++----
 .../react-badge/etc/react-badge.api.md        |  2 +-
 .../PresenceBadge/PresenceBadge.types.ts      |  4 ++--
 .../PresenceBadge/usePresenceBadge.tsx        |  8 ++++----
 .../PresenceBadge/usePresenceBadgeStyles.ts   | 19 +++++++++++++-----
 .../PresenceBadgeOutOfOffice.stories.tsx      |  8 ++++----
 .../stories/PresenceBadgeStatus.stories.tsx   |  8 ++++----
 .../react-card/src/components/Card/useCard.ts |  2 +-
 .../react-combobox/etc/react-combobox.api.md  |  4 ++--
 .../ComboButton/ComboButton.types.ts          |  2 +-
 .../ComboButton/useComboButtonStyles.ts       |  4 ++--
 .../src/components/Combobox/Combobox.types.ts |  2 +-
 .../stories/ComboboxAppearance.stories.tsx    |  8 ++++----
 .../react-input/etc/react-input.api.md        |  2 +-
 .../src/components/Input/Input.types.ts       |  2 +-
 .../src/components/Input/useInputStyles.ts    |  4 ++--
 .../src/stories/InputAppearance.stories.tsx   |  4 ++--
 .../react-radio/etc/react-radio.api.md        |  2 +-
 .../src/components/Radio/useRadio.tsx         |  2 +-
 .../components/RadioGroup/RadioGroup.types.ts |  2 +-
 .../RadioGroupHorizontalStacked.stories.tsx   |  6 +++---
 .../react-select/etc/react-select.api.md      |  4 ++--
 .../src/components/Select/Select.types.ts     |  2 +-
 .../src/components/Select/useSelectStyles.ts  |  4 ++--
 .../src/stories/SelectAppearance.stories.tsx  |  4 ++--
 .../etc/react-spinbutton.api.md               |  2 +-
 .../components/SpinButton/SpinButton.types.ts |  2 +-
 .../SpinButton/useSpinButtonStyles.ts         |  8 ++++----
 .../stories/SpinButtonAppearance.stories.tsx  |  4 ++--
 .../react-tabster/etc/react-tabster.api.md    |  2 +-
 .../src/hooks/useFocusableGroup.ts            |  4 ++--
 .../react-textarea/etc/react-textarea.api.md  |  2 +-
 .../src/components/Textarea/Textarea.types.ts |  2 +-
 .../components/Textarea/useTextareaStyles.ts  |  4 ++--
 .../stories/TextareaAppearance.stories.tsx    |  4 ++--
 54 files changed, 176 insertions(+), 111 deletions(-)
 create mode 100644 change/@fluentui-react-avatar-108ebfab-22bf-4ae7-9a06-d0207433402c.json
 create mode 100644 change/@fluentui-react-badge-1770dc6e-974e-4c0b-b0b3-8272689fafcb.json
 create mode 100644 change/@fluentui-react-card-a96fa288-c087-490f-b625-eac5a232d7c8.json
 create mode 100644 change/@fluentui-react-input-8a1a92fd-9560-40c3-89b1-ff4b6f5007cd.json
 create mode 100644 change/@fluentui-react-radio-ade4b854-6756-48d3-bfcc-379a04fbda52.json
 create mode 100644 change/@fluentui-react-spinbutton-c8eb939d-1971-4b32-a52b-bdfb4a4fcd9e.json
 create mode 100644 change/@fluentui-react-tabster-91d36763-0952-4ea2-90c8-5b5c5939a374.json
 create mode 100644 change/@fluentui-react-textarea-9b6765e5-c9d6-4735-9345-9d3fb6ff72e3.json

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 83daaf98bee0d..f19cc9bb55fae 100644
--- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
@@ -49,20 +49,20 @@ const examples = {
     { status: 'available' },
     { status: 'away' },
     { status: 'busy' },
-    { status: 'doNotDisturb' },
+    { status: 'do-not-disturb' },
     { status: 'offline' },
-    { status: 'outOfOffice' },
+    { status: 'out-of-office' },
     { status: 'available', outOfOffice: true },
     { status: 'away', outOfOffice: true },
     { status: 'busy', outOfOffice: true },
-    { status: 'doNotDisturb', outOfOffice: true },
+    { status: 'do-not-disturb', outOfOffice: true },
     { status: 'offline', outOfOffice: true },
-    { status: 'outOfOffice', outOfOffice: true },
+    { status: 'out-of-office', outOfOffice: true },
   ],
   activeDisplay: ['ring', 'ring-shadow', 'shadow'],
   color: ['neutral', 'brand', 'colorful'],
   namedColors: [
-    'darkRed',
+    'dark-red',
     'cranberry',
     'red',
     'pumpkin',
@@ -73,12 +73,12 @@ const examples = {
     'brown',
     'forest',
     'seafoam',
-    'darkGreen',
-    'lightTeal',
+    'dark-green',
+    'light-teal',
     'teal',
     'steel',
     'blue',
-    'royalBlue',
+    'royal-blue',
     'cornflower',
     'navy',
     'lavender',
@@ -190,8 +190,8 @@ storiesOf('Avatar Converged', module)
     { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
   )
   .addStory('size+name', () => <AvatarList names={examples.name} />)
-  .addStory('size+icon+badge+square', () => <AvatarList badge={{ status: 'outOfOffice' }} shape="square" />)
-  .addStory('size+image+badge', () => <AvatarList images={examples.image} badge={{ status: 'doNotDisturb' }} />)
+  .addStory('size+icon+badge+square', () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />)
+  .addStory('size+image+badge', () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />)
   .addStory('size+inactive+badge', () => (
     <AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
   ))
diff --git a/apps/vr-tests-react-components/src/stories/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input.stories.tsx
index 1e3f05330c458..0ec55bb53aaee 100644
--- a/apps/vr-tests-react-components/src/stories/Input.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Input.stories.tsx
@@ -23,11 +23,11 @@ storiesOf('Input Converged', module)
   ))
   .addStory('Appearance: outline (default)', () => <Input placeholder="Placeholder" />)
   .addStory('Appearance: underline', () => <Input appearance="underline" placeholder="Placeholder" />)
-  .addStory('Appearance: filledDarker', () => <Input appearance="filledDarker" placeholder="Placeholder" />)
-  .addStory('Appearance: filledLighter', () => (
+  .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="filledLighter" placeholder="Placeholder" />
+      <Input appearance="filled-lighter" placeholder="Placeholder" />
     </div>
   ))
   .addStory('Disabled', () => <Input disabled />)
diff --git a/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
index 66cc5ad2656d5..537d44061f264 100644
--- a/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
@@ -6,9 +6,9 @@ const statuses: PresenceBadgeProps['status'][] = [
   'available',
   'away',
   'busy',
-  'doNotDisturb',
+  'do-not-disturb',
   'offline',
-  'outOfOffice',
+  'out-of-office',
   'unknown',
 ];
 
diff --git a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
index 198d27769f223..c64c4054c4444 100644
--- a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
@@ -85,9 +85,9 @@ storiesOf('Radio Converged', module)
     { includeRtl: true },
   )
   .addStory(
-    'group-horizontalStacked',
+    'group-horizontal-stacked',
     () => (
-      <RadioGroup layout="horizontalStacked">
+      <RadioGroup layout="horizontal-stacked">
         <Radio value="A" label="Option A" defaultChecked />
         <Radio value="B" label="Option B" />
         <Radio value="C" label="Option C" />
diff --git a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
index 22b7831800097..71d8244ee8776 100644
--- a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
@@ -49,17 +49,17 @@ storiesOf('SpinButton Converged', module)
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Appearance: filledDarker', () => <SpinButton appearance="filledDarker" value={10} />, {
+  .addStory('Appearance: filled-darker', () => <SpinButton appearance="filled-darker" value={10} />, {
     includeRtl: true,
     includeHighContrast: true,
     includeDarkMode: true,
   })
   .addStory(
-    'Appearance: filledLighter',
+    'Appearance: filled-lighter',
     () => (
       // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
       <div style={{ background: '#f5f5f5', padding: '10px' }}>
-        <SpinButton value={10} />
+        <SpinButton appearance="filled-lighter" value={10} />
       </div>
     ),
     { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
index 71230c1410cc4..e0d46bd934085 100644
--- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
@@ -21,10 +21,10 @@ storiesOf('Textarea Converged', module)
     </Screener>
   ))
   .addStory('Appearance: outline (default)', () => <Textarea placeholder="Placeholder" />)
-  .addStory('Appearance: filledDarker', () => <Textarea appearance="filledDarker" placeholder="Placeholder" />)
-  .addStory('Appearance: filledLighter', () => (
+  .addStory('Appearance: filled-darker', () => <Textarea appearance="filled-darker" placeholder="Placeholder" />)
+  .addStory('Appearance: filled-lighter', () => (
     <div style={{ background: '#f5f5f5', padding: '10px' }}>
-      <Textarea appearance="filledLighter" placeholder="Placeholder" />
+      <Textarea appearance="filled-lighter" placeholder="Placeholder" />
     </div>
   ))
   .addStory('Disabled', () => <Textarea disabled />)
diff --git a/change/@fluentui-react-avatar-108ebfab-22bf-4ae7-9a06-d0207433402c.json b/change/@fluentui-react-avatar-108ebfab-22bf-4ae7-9a06-d0207433402c.json
new file mode 100644
index 0000000000000..fb6dfa0f50d0a
--- /dev/null
+++ b/change/@fluentui-react-avatar-108ebfab-22bf-4ae7-9a06-d0207433402c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-avatar",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-1770dc6e-974e-4c0b-b0b3-8272689fafcb.json b/change/@fluentui-react-badge-1770dc6e-974e-4c0b-b0b3-8272689fafcb.json
new file mode 100644
index 0000000000000..3b051f177d15f
--- /dev/null
+++ b/change/@fluentui-react-badge-1770dc6e-974e-4c0b-b0b3-8272689fafcb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-badge",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-a96fa288-c087-490f-b625-eac5a232d7c8.json b/change/@fluentui-react-card-a96fa288-c087-490f-b625-eac5a232d7c8.json
new file mode 100644
index 0000000000000..e929d654a51dd
--- /dev/null
+++ b/change/@fluentui-react-card-a96fa288-c087-490f-b625-eac5a232d7c8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update tabster tab behaviors",
+  "packageName": "@fluentui/react-card",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-8a1a92fd-9560-40c3-89b1-ff4b6f5007cd.json b/change/@fluentui-react-input-8a1a92fd-9560-40c3-89b1-ff4b6f5007cd.json
new file mode 100644
index 0000000000000..afb1a3973e3db
--- /dev/null
+++ b/change/@fluentui-react-input-8a1a92fd-9560-40c3-89b1-ff4b6f5007cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-input",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-ade4b854-6756-48d3-bfcc-379a04fbda52.json b/change/@fluentui-react-radio-ade4b854-6756-48d3-bfcc-379a04fbda52.json
new file mode 100644
index 0000000000000..2f64917757961
--- /dev/null
+++ b/change/@fluentui-react-radio-ade4b854-6756-48d3-bfcc-379a04fbda52.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-radio",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinbutton-c8eb939d-1971-4b32-a52b-bdfb4a4fcd9e.json b/change/@fluentui-react-spinbutton-c8eb939d-1971-4b32-a52b-bdfb4a4fcd9e.json
new file mode 100644
index 0000000000000..4b73d1f30c3c1
--- /dev/null
+++ b/change/@fluentui-react-spinbutton-c8eb939d-1971-4b32-a52b-bdfb4a4fcd9e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabster-91d36763-0952-4ea2-90c8-5b5c5939a374.json b/change/@fluentui-react-tabster-91d36763-0952-4ea2-90c8-5b5c5939a374.json
new file mode 100644
index 0000000000000..f64e1cfbb8df8
--- /dev/null
+++ b/change/@fluentui-react-tabster-91d36763-0952-4ea2-90c8-5b5c5939a374.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-tabster",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-textarea-9b6765e5-c9d6-4735-9345-9d3fb6ff72e3.json b/change/@fluentui-react-textarea-9b6765e5-c9d6-4735-9345-9d3fb6ff72e3.json
new file mode 100644
index 0000000000000..1474e22083186
--- /dev/null
+++ b/change/@fluentui-react-textarea-9b6765e5-c9d6-4735-9345-9d3fb6ff72e3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update string unions to use spinal-case",
+  "packageName": "@fluentui/react-textarea",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
index 3a2f868d08170..82825f1fb20b1 100644
--- a/packages/react-components/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -49,7 +49,7 @@ export type AvatarGroupState = ComponentState<AvatarGroupSlots> & {
 };
 
 // @public
-export type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
+export type AvatarNamedColor = 'dark-red' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'dark-green' | 'light-teal' | 'teal' | 'steel' | 'blue' | 'royal-blue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
 // @public
 export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
index c16f4a6ec2d98..5c68e0636cc6e 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
@@ -38,7 +38,7 @@ export type AvatarSlots = {
  * A specific named color for the Avatar
  */
 export type AvatarNamedColor =
-  | 'darkRed'
+  | 'dark-red'
   | 'cranberry'
   | 'red'
   | 'pumpkin'
@@ -49,12 +49,12 @@ export type AvatarNamedColor =
   | 'brown'
   | 'forest'
   | 'seafoam'
-  | 'darkGreen'
-  | 'lightTeal'
+  | 'dark-green'
+  | 'light-teal'
   | 'teal'
   | 'steel'
   | 'blue'
-  | 'royalBlue'
+  | 'royal-blue'
   | 'cornflower'
   | 'navy'
   | 'lavender'
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index 9cf5880d519d0..10f0ba54ad72a 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -136,7 +136,7 @@ const getBadgeSize = (size: AvatarState['size']) => {
 };
 
 const avatarColors: AvatarNamedColor[] = [
-  'darkRed',
+  'dark-red',
   'cranberry',
   'red',
   'pumpkin',
@@ -147,12 +147,12 @@ const avatarColors: AvatarNamedColor[] = [
   'brown',
   'forest',
   'seafoam',
-  'darkGreen',
-  'lightTeal',
+  'dark-green',
+  'light-teal',
   'teal',
   'steel',
   'blue',
-  'royalBlue',
+  'royal-blue',
   'cornflower',
   'navy',
   'lavender',
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
index a3af2c74dd008..0aaa8e4eb5b75 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -238,7 +238,7 @@ const useColorStyles = makeStyles({
     color: tokens.colorNeutralForegroundInverted,
     backgroundColor: tokens.colorBrandBackgroundStatic,
   },
-  darkRed: {
+  'dark-red': {
     color: tokens.colorPaletteDarkRedForeground2,
     backgroundColor: tokens.colorPaletteDarkRedBackground2,
   },
@@ -282,11 +282,11 @@ const useColorStyles = makeStyles({
     color: tokens.colorPaletteSeafoamForeground2,
     backgroundColor: tokens.colorPaletteSeafoamBackground2,
   },
-  darkGreen: {
+  'dark-green': {
     color: tokens.colorPaletteDarkGreenForeground2,
     backgroundColor: tokens.colorPaletteDarkGreenBackground2,
   },
-  lightTeal: {
+  'light-teal': {
     color: tokens.colorPaletteLightTealForeground2,
     backgroundColor: tokens.colorPaletteLightTealBackground2,
   },
@@ -302,7 +302,7 @@ const useColorStyles = makeStyles({
     color: tokens.colorPaletteBlueForeground2,
     backgroundColor: tokens.colorPaletteBlueBackground2,
   },
-  royalBlue: {
+  'royal-blue': {
     color: tokens.colorPaletteRoyalBlueForeground2,
     backgroundColor: tokens.colorPaletteRoyalBlueBackground2,
   },
diff --git a/packages/react-components/react-avatar/src/stories/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarBadge.stories.tsx
index 44ed01c80b8ce..de5306f3f4d53 100644
--- a/packages/react-components/react-avatar/src/stories/AvatarBadge.stories.tsx
+++ b/packages/react-components/react-avatar/src/stories/AvatarBadge.stories.tsx
@@ -5,16 +5,16 @@ export const Badge = () => (
   <>
     <Avatar name="Lydia Bauer" badge={{ status: 'available', 'aria-label': 'available' }} />
     <Avatar name="Amanda Brady" badge={{ status: 'busy', 'aria-label': 'busy' }} />
-    <Avatar name="Henry Brill" badge={{ status: 'outOfOffice', 'aria-label': 'out of office' }} />
+    <Avatar name="Henry Brill" badge={{ status: 'out-of-office', 'aria-label': 'out of office' }} />
     <Avatar name="Robin Counts" badge={{ status: 'away', 'aria-label': 'away' }} />
     <Avatar name="Tim Deboer" badge={{ status: 'offline', 'aria-label': 'offline' }} />
-    <Avatar name="Cameron Evans" badge={{ status: 'doNotDisturb', 'aria-label': 'do not disturb' }} />
+    <Avatar name="Cameron Evans" badge={{ status: 'do-not-disturb', 'aria-label': 'do not disturb' }} />
     <Avatar
       name="Mona Kane"
       badge={{ status: 'available', outOfOffice: true, 'aria-label': 'available out of office' }}
     />
     <Avatar name="Allan Munger" badge={{ status: 'busy', outOfOffice: true, 'aria-label': 'busy out of office' }} />
-    <Avatar name="Erik Nason" badge={{ status: 'outOfOffice', outOfOffice: true, 'aria-label': 'out of office' }} />
+    <Avatar name="Erik Nason" badge={{ status: 'out-of-office', outOfOffice: true, 'aria-label': 'out of office' }} />
     <Avatar name="Daisy Phillips" badge={{ status: 'away', outOfOffice: true, 'aria-label': 'away out of office' }} />
     <Avatar
       name="Kevin Sturgis"
@@ -22,7 +22,7 @@ export const Badge = () => (
     />
     <Avatar
       name="Elliot Woodward"
-      badge={{ status: 'doNotDisturb', outOfOffice: true, 'aria-label': 'do not disturb out of office' }}
+      badge={{ status: 'do-not-disturb', outOfOffice: true, 'aria-label': 'do not disturb out of office' }}
     />
   </>
 );
diff --git a/packages/react-components/react-avatar/src/stories/AvatarColorPalette.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarColorPalette.stories.tsx
index 93aaeb6561fd1..437e7478ea12e 100644
--- a/packages/react-components/react-avatar/src/stories/AvatarColorPalette.stories.tsx
+++ b/packages/react-components/react-avatar/src/stories/AvatarColorPalette.stories.tsx
@@ -3,7 +3,7 @@ import { Avatar } from '../index';
 
 export const ColorPalette = () => (
   <>
-    <Avatar initials="DR" color="darkRed" name="darkRed avatar" />
+    <Avatar initials="DR" color="dark-red" name="darkRed avatar" />
     <Avatar initials="CR" color="cranberry" name="cranberry avatar" />
     <Avatar initials="RE" color="red" name="red avatar" />
     <Avatar initials="PU" color="pumpkin" name="pumpkin avatar" />
@@ -14,12 +14,12 @@ export const ColorPalette = () => (
     <Avatar initials="BR" color="brown" name="brown avatar" />
     <Avatar initials="FO" color="forest" name="forest avatar" />
     <Avatar initials="SE" color="seafoam" name="seafoam avatar" />
-    <Avatar initials="DG" color="darkGreen" name="darkGreen avatar" />
-    <Avatar initials="LT" color="lightTeal" name="lightTeal avatar" />
+    <Avatar initials="DG" color="dark-green" name="darkGreen avatar" />
+    <Avatar initials="LT" color="light-teal" name="lightTeal avatar" />
     <Avatar initials="TE" color="teal" name="teal avatar" />
     <Avatar initials="ST" color="steel" name="steel avatar" />
     <Avatar initials="BL" color="blue" name="blue avatar" />
-    <Avatar initials="RB" color="royalBlue" name="royalBlue avatar" />
+    <Avatar initials="RB" color="royal-blue" name="royalBlue avatar" />
     <Avatar initials="CO" color="cornflower" name="cornflower avatar" />
     <Avatar initials="NA" color="navy" name="navy avatar" />
     <Avatar initials="LA" color="lavender" name="lavender avatar" />
diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md
index 94ff740911135..d465f365e1742 100644
--- a/packages/react-components/react-badge/etc/react-badge.api.md
+++ b/packages/react-components/react-badge/etc/react-badge.api.md
@@ -71,7 +71,7 @@ export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | '
 export type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
 
 // @public (undocumented)
-export type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
+export type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown';
 
 // @public (undocumented)
 export const renderBadge_unstable: (state: BadgeState) => JSX.Element;
diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts
index 7c81496ace84a..76a0898523e01 100644
--- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts
+++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts
@@ -3,11 +3,11 @@ import type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';
 
 export type PresenceBadgeStatus =
   | 'busy'
-  | 'outOfOffice'
+  | 'out-of-office'
   | 'away'
   | 'available'
   | 'offline'
-  | 'doNotDisturb'
+  | 'do-not-disturb'
   | 'unknown';
 
 export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &
diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx
index 4a703a48fc664..e1c83c303bcd4 100644
--- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx
+++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx
@@ -26,11 +26,11 @@ const iconMap = (
       return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];
     case 'busy':
       return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];
-    case 'doNotDisturb':
+    case 'do-not-disturb':
       return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];
     case 'offline':
       return presenceOfflineRegular[size];
-    case 'outOfOffice':
+    case 'out-of-office':
       return presenceOofRegular[size];
     case 'unknown':
       return presenceUnknownRegular[size];
@@ -39,11 +39,11 @@ const iconMap = (
 
 const DEFAULT_STRINGS = {
   busy: 'busy',
-  outOfOffice: 'out of office',
+  'out-of-office': 'out of office',
   away: 'away',
   available: 'available',
   offline: 'offline',
-  doNotDisturb: 'do not disturb',
+  'do-not-disturb': 'do not disturb',
   unknown: 'unknown',
 };
 
diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index e4881ec9ac552..45248f8a3543a 100644
--- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -2,13 +2,21 @@ import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
-import type { PresenceBadgeState } from './PresenceBadge.types';
+import type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';
 
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
   root: 'fui-PresenceBadge',
   icon: 'fui-PresenceBadge__icon',
 };
 
+const getIsBusy = (status: PresenceBadgeStatus): boolean => {
+  if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {
+    return true;
+  }
+
+  return false;
+};
+
 const useStyles = makeStyles({
   root: {
     ...shorthands.padding(0),
@@ -85,20 +93,21 @@ const useStyles = makeStyles({
  */
 export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {
   const styles = useStyles();
+  const isBusy = getIsBusy(state.status);
   state.root.className = mergeClasses(
     presenceBadgeClassNames.root,
     styles.root,
-    ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,
+    isBusy && styles.statusBusy,
     state.status === 'away' && styles.statusAway,
     state.status === 'available' && styles.statusAvailable,
     state.status === 'offline' && styles.statusOffline,
-    state.status === 'outOfOffice' && styles.statusOutOfOffice,
+    state.status === 'out-of-office' && styles.statusOutOfOffice,
     state.outOfOffice && styles.outOfOffice,
     state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,
-    state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy,
+    state.outOfOffice && isBusy && styles.outOfOfficeBusy,
     state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,
     state.outOfOffice && state.status === 'offline' && styles.statusOffline,
-    state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,
+    state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,
     state.size === 'tiny' && styles.tiny,
     state.size === 'large' && styles.large,
     state.size === 'extra-large' && styles.extraLarge,
diff --git a/packages/react-components/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx b/packages/react-components/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx
index 3b0022e66997c..900a2b902daec 100644
--- a/packages/react-components/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx
+++ b/packages/react-components/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx
@@ -8,9 +8,9 @@ export const OutOfOffice = () => {
       <PresenceBadge outOfOffice status="available" />
       <PresenceBadge outOfOffice status="away" />
       <PresenceBadge outOfOffice status="busy" />
-      <PresenceBadge outOfOffice status="doNotDisturb" />
+      <PresenceBadge outOfOffice status="do-not-disturb" />
       <PresenceBadge outOfOffice status="offline" />
-      <PresenceBadge outOfOffice status="outOfOffice" />
+      <PresenceBadge outOfOffice status="out-of-office" />
       <PresenceBadge outOfOffice status="unknown" />
     </>
   );
@@ -20,8 +20,8 @@ OutOfOffice.parameters = {
   docs: {
     description: {
       story:
-        'A presence badge supports `available`, `away`, `busy`, `doNotDisturb`, ' +
-        '`offline`, `outOfOffice` and `unknown` status when `outOfOffice` is set.',
+        'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' +
+        '`offline`, `out-of-office` and `unknown` status when `outOfOffice` is set.',
     },
   },
 };
diff --git a/packages/react-components/react-badge/src/stories/PresenceBadgeStatus.stories.tsx b/packages/react-components/react-badge/src/stories/PresenceBadgeStatus.stories.tsx
index 25bc537d6f727..3f595e4667093 100644
--- a/packages/react-components/react-badge/src/stories/PresenceBadgeStatus.stories.tsx
+++ b/packages/react-components/react-badge/src/stories/PresenceBadgeStatus.stories.tsx
@@ -8,9 +8,9 @@ export const Status = () => {
       <PresenceBadge status="available" />
       <PresenceBadge status="away" />
       <PresenceBadge status="busy" />
-      <PresenceBadge status="doNotDisturb" />
+      <PresenceBadge status="do-not-disturb" />
       <PresenceBadge status="offline" />
-      <PresenceBadge status="outOfOffice" />
+      <PresenceBadge status="out-of-office" />
       <PresenceBadge status="unknown" />
     </>
   );
@@ -20,8 +20,8 @@ Status.parameters = {
   docs: {
     description: {
       story:
-        'A presence badge supports `available`, `away`, `busy`, `doNotDisturb`, ' +
-        '`offline`, `outOfOffice` and `unknown` status.' +
+        'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' +
+        '`offline`, `out-of-office` and `unknown` status.' +
         ' The default is `available`.',
     },
   },
diff --git a/packages/react-components/react-card/src/components/Card/useCard.ts b/packages/react-components/react-card/src/components/Card/useCard.ts
index 656377c29d09d..6a1232a859f51 100644
--- a/packages/react-components/react-card/src/components/Card/useCard.ts
+++ b/packages/react-components/react-card/src/components/Card/useCard.ts
@@ -17,7 +17,7 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>):
 
   const focusMap = {
     off: undefined,
-    'no-tab': 'limitedTrapFocus',
+    'no-tab': 'limited-trap-focus',
     'tab-exit': 'limited',
     'tab-only': 'unlimited',
   } as const;
diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md
index 27710a62f6656..7c91a1f1e825d 100644
--- a/packages/react-components/react-combobox/etc/react-combobox.api.md
+++ b/packages/react-components/react-combobox/etc/react-combobox.api.md
@@ -33,7 +33,7 @@ export type ComboboxOpenEvents = React_2.FocusEvent<HTMLElement> | React_2.Keybo
 
 // @public
 export type ComboboxProps = ComponentProps<Partial<ComboboxSlots>, 'trigger'> & SelectionProps & {
-    appearance?: 'filledDarker' | 'filledLighter' | 'outline' | 'underline';
+    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
     defaultOpen?: boolean;
     defaultValue?: string;
     inline?: boolean;
@@ -66,7 +66,7 @@ export const comboButtonClassNames: SlotClassNames<ComboButtonSlots>;
 
 // @public
 export type ComboButtonProps = Partial<ComponentProps<ComboButtonSlots, 'content'>> & {
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     placeholder?: string;
     value?: string;
 };
diff --git a/packages/react-components/react-combobox/src/components/ComboButton/ComboButton.types.ts b/packages/react-components/react-combobox/src/components/ComboButton/ComboButton.types.ts
index 85f31589820b5..dc6520f9291d8 100644
--- a/packages/react-components/react-combobox/src/components/ComboButton/ComboButton.types.ts
+++ b/packages/react-components/react-combobox/src/components/ComboButton/ComboButton.types.ts
@@ -20,7 +20,7 @@ export type ComboButtonProps = Partial<ComponentProps<ComboButtonSlots, 'content
    * Controls the colors and borders of the combobox.
    * @default 'outline'
    */
-  appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
 
   /**
    * If set, the placeholder will show when value is undefined
diff --git a/packages/react-components/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-components/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index d3be121fe08c4..bcb4f5a31fad6 100644
--- a/packages/react-components/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-components/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -102,10 +102,10 @@ const useStyles = makeStyles({
     ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),
     ...shorthands.borderRadius(0),
   },
-  filledLighter: {
+  'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
   },
-  filledDarker: {
+  'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
   },
 });
diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts
index e09e644d553df..89d78cb035c55 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts
+++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts
@@ -27,7 +27,7 @@ export type ComboboxProps = ComponentProps<Partial<ComboboxSlots>, 'trigger'> &
      * Controls the colors and borders of the combobox.
      * @default 'outline'
      */
-    appearance?: 'filledDarker' | 'filledLighter' | 'outline' | 'underline';
+    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
 
     /**
      * The default open state when open is uncontrolled
diff --git a/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx b/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx
index 53d5f55913360..1bd6db8c9daa6 100644
--- a/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx
+++ b/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx
@@ -57,7 +57,7 @@ export const Appearance = (props: Partial<ComboboxProps>) => {
         <Combobox
           aria-labelledby={`${comboId}-filledDarker`}
           placeholder="Select a color"
-          appearance="filledDarker"
+          appearance="filled-darker"
           {...props}
         >
           <Option>Red</Option>
@@ -71,7 +71,7 @@ export const Appearance = (props: Partial<ComboboxProps>) => {
         <Combobox
           aria-labelledby={`${comboId}-filledLighter`}
           placeholder="Select a color"
-          appearance="filledLighter"
+          appearance="filled-lighter"
           {...props}
         >
           <Option>Red</Option>
@@ -90,8 +90,8 @@ Appearance.parameters = {
         'A Combobox can have the following `appearance` variants:\n' +
         '- `outline` (default): has a border around all four sides.\n' +
         '- `underline`: only has a bottom border.\n' +
-        '- `filledDarker`: no border, only a subtle background color difference against a white page.\n' +
-        '- `filledLighter`: no border, and a white background.\n',
+        '- `filled-darker`: no border, only a subtle background color difference against a white page.\n' +
+        '- `filled-lighter`: no border, and a white background.\n',
     },
   },
 };
diff --git a/packages/react-components/react-input/etc/react-input.api.md b/packages/react-components/react-input/etc/react-input.api.md
index 061405ebad19b..76bd327b93d95 100644
--- a/packages/react-components/react-input/etc/react-input.api.md
+++ b/packages/react-components/react-input/etc/react-input.api.md
@@ -26,7 +26,7 @@ export type InputOnChangeData = {
 export type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
     children?: never;
     size?: 'small' | 'medium' | 'large';
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     defaultValue?: string;
     value?: string;
     onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
diff --git a/packages/react-components/react-input/src/components/Input/Input.types.ts b/packages/react-components/react-input/src/components/Input/Input.types.ts
index 305648a7072cd..d0bb12f9b59c3 100644
--- a/packages/react-components/react-input/src/components/Input/Input.types.ts
+++ b/packages/react-components/react-input/src/components/Input/Input.types.ts
@@ -48,7 +48,7 @@ export type InputProps = Omit<
    * Controls the colors and borders of the input.
    * @default 'outline'
    */
-  appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
 
   /**
    * Default value of the input. Provide this if the input should be an uncontrolled component
diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
index 8444587862e27..4cf0be66967ed 100644
--- a/packages/react-components/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
@@ -144,10 +144,10 @@ const useRootStyles = makeStyles({
       ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
     },
   },
-  filledDarker: {
+  'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
   },
-  filledLighter: {
+  'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
   },
   disabled: {
diff --git a/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx b/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx
index 722a05a9d2f83..31efa058228b0 100644
--- a/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx
+++ b/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx
@@ -52,12 +52,12 @@ export const Appearance = () => {
 
       <div className={mergeClasses(styles.field, styles.filledLighter)}>
         <Label htmlFor={filledLighterId}>Filled Lighter Input Appearance </Label>
-        <Input appearance="filledLighter" id={filledLighterId} />
+        <Input appearance="filled-lighter" id={filledLighterId} />
       </div>
 
       <div className={mergeClasses(styles.field, styles.filledDarker)}>
         <Label htmlFor={filledDarkerId}>Filled Darker Input Appearance </Label>
-        <Input appearance="filledDarker" id={filledDarkerId} />
+        <Input appearance="filled-darker" id={filledDarkerId} />
       </div>
     </div>
   );
diff --git a/packages/react-components/react-radio/etc/react-radio.api.md b/packages/react-components/react-radio/etc/react-radio.api.md
index 113743ecc0ee5..d444f8cfb064a 100644
--- a/packages/react-components/react-radio/etc/react-radio.api.md
+++ b/packages/react-components/react-radio/etc/react-radio.api.md
@@ -47,7 +47,7 @@ export type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'on
     value?: string;
     defaultValue?: string;
     onChange?: (ev: React_2.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;
-    layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
+    layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';
     disabled?: boolean;
     required?: boolean;
 };
diff --git a/packages/react-components/react-radio/src/components/Radio/useRadio.tsx b/packages/react-components/react-radio/src/components/Radio/useRadio.tsx
index b24cdd2eae94b..1be6b3e646e2d 100644
--- a/packages/react-components/react-radio/src/components/Radio/useRadio.tsx
+++ b/packages/react-components/react-radio/src/components/Radio/useRadio.tsx
@@ -27,7 +27,7 @@ export const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputEle
     name = nameGroup,
     checked = value !== undefined ? value === props.value : undefined,
     defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
-    labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
+    labelPosition = layout === 'horizontal-stacked' ? 'below' : 'after',
     disabled = disabledGroup,
     required = requiredGroup,
     onChange,
diff --git a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.types.ts b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.types.ts
index db4497fc5d416..ed62e713b658a 100644
--- a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.types.ts
+++ b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.types.ts
@@ -40,7 +40,7 @@ export type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'on
    *
    * @default vertical
    */
-  layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
+  layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';
 
   /**
    * Disable all Radio items in this group.
diff --git a/packages/react-components/react-radio/src/stories/RadioGroupHorizontalStacked.stories.tsx b/packages/react-components/react-radio/src/stories/RadioGroupHorizontalStacked.stories.tsx
index 012d8b52f05f6..bcdb66b4d55b1 100644
--- a/packages/react-components/react-radio/src/stories/RadioGroupHorizontalStacked.stories.tsx
+++ b/packages/react-components/react-radio/src/stories/RadioGroupHorizontalStacked.stories.tsx
@@ -10,7 +10,7 @@ export const HorizontalStacked = () => {
   return (
     <div style={{ display: 'grid', gridRowGap: tokens.spacingVerticalS }}>
       <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup layout="horizontalStacked" aria-labelledby={labelId}>
+      <RadioGroup layout="horizontal-stacked" aria-labelledby={labelId}>
         <Radio value="apple" label="Apple" />
         <Radio value="pear" label="Pear" />
         <Radio value="banana" label="Banana" />
@@ -19,11 +19,11 @@ export const HorizontalStacked = () => {
     </div>
   );
 };
-HorizontalStacked.storyName = 'Layout: horizontalStacked';
+HorizontalStacked.storyName = 'Layout: horizontal-stacked';
 HorizontalStacked.parameters = {
   docs: {
     description: {
-      story: 'The `horizontalStacked` layout places each radio item in a row, with labels below the radio indicator.',
+      story: 'The `horizontal-stacked` layout places each radio item in a row, with labels below the radio indicator.',
     },
   },
 };
diff --git a/packages/react-components/react-select/etc/react-select.api.md b/packages/react-components/react-select/etc/react-select.api.md
index 4bff2ff0c38b9..c367eb54ce0a9 100644
--- a/packages/react-components/react-select/etc/react-select.api.md
+++ b/packages/react-components/react-select/etc/react-select.api.md
@@ -21,8 +21,8 @@ export const Select: ForwardRefComponent<SelectProps>;
 export const selectClassNames: SlotClassNames<SelectSlots>;
 
 // @public (undocumented)
-export type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+export interface SelectCommons {
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     inline?: boolean;
     size?: 'small' | 'medium' | 'large';
 };
diff --git a/packages/react-components/react-select/src/components/Select/Select.types.ts b/packages/react-components/react-select/src/components/Select/Select.types.ts
index ff3e554ca78f5..2fe939a5b735a 100644
--- a/packages/react-components/react-select/src/components/Select/Select.types.ts
+++ b/packages/react-components/react-select/src/components/Select/Select.types.ts
@@ -21,7 +21,7 @@ export type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, '
    *
    * @default 'outline'
    */
-  appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
 
   /**
    * If true, the Select will have an inline `display`, allowing it to be inline with other content.
diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
index dbb8a7e8ee1fe..9e593cbe7a473 100644
--- a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
@@ -119,10 +119,10 @@ const useSelectStyles = makeStyles({
     ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),
     ...shorthands.borderRadius(0),
   },
-  filledLighter: {
+  'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
   },
-  filledDarker: {
+  'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
   },
 });
diff --git a/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx b/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx
index 2eb938fa718d8..d6d64501b6010 100644
--- a/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx
+++ b/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx
@@ -58,7 +58,7 @@ export const Appearance = () => {
 
       <div className={mergeClasses(styles.field, styles.filledLighter)}>
         <label htmlFor={`${selectId}-filledLighter`}>Filled Lighter</label>
-        <Select id={`${selectId}-filledLighter`} appearance="filledLighter">
+        <Select id={`${selectId}-filledLighter`} appearance="filled-lighter">
           <option>Red</option>
           <option>Green</option>
           <option>Blue</option>
@@ -67,7 +67,7 @@ export const Appearance = () => {
 
       <div className={mergeClasses(styles.field, styles.filledDarker)}>
         <label htmlFor={`${selectId}-filledDarker`}>Filled Darker</label>
-        <Select id={`${selectId}-filledDarker`} appearance="filledDarker">
+        <Select id={`${selectId}-filledDarker`} appearance="filled-darker">
           <option>Red</option>
           <option>Green</option>
           <option>Blue</option>
diff --git a/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md b/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md
index 2dad44df1019d..b14466e8f210b 100644
--- a/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md
+++ b/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md
@@ -34,7 +34,7 @@ export type SpinButtonOnChangeData = {
 
 // @public
 export type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & {
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     defaultValue?: number;
     displayValue?: string;
     max?: number;
diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts
index 193776dd1a75d..e1f274cadce7b 100644
--- a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts
+++ b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts
@@ -37,7 +37,7 @@ export type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'inp
    * Controls the colors and borders of the input.
    * @default 'outline'
    */
-  appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
 
   /**
    * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 57c34d4c178e7..7e39395bcf395 100644
--- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -263,7 +263,7 @@ const useButtonStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
     },
   },
-  filledDarker: {
+  'filled-darker': {
     backgroundColor: 'transparent',
     color: tokens.colorNeutralForeground3,
 
@@ -285,7 +285,7 @@ const useButtonStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
     },
   },
-  filledLighter: {
+  'filled-lighter': {
     backgroundColor: 'transparent',
     color: tokens.colorNeutralForeground3,
 
@@ -352,7 +352,7 @@ const useButtonDisabledStyles = makeStyles({
     },
   },
 
-  filledDarker: {
+  'filled-darker': {
     color: tokens.colorNeutralForegroundDisabled,
     ':enabled': {
       ':hover': {
@@ -370,7 +370,7 @@ const useButtonDisabledStyles = makeStyles({
     },
   },
 
-  filledLighter: {
+  'filled-lighter': {
     color: tokens.colorNeutralForegroundDisabled,
     ':enabled': {
       ':hover': {
diff --git a/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx b/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx
index fe8523190ce8e..0da2b3886b848 100644
--- a/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx
+++ b/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx
@@ -55,12 +55,12 @@ export const Appearance = () => {
 
       <div className={mergeClasses(styles.field, styles.filledLighter)}>
         <Label htmlFor={filledLighterId}>Filled Lighter</Label>
-        <SpinButton appearance="filledLighter" id={filledLighterId} />
+        <SpinButton appearance="filled-lighter" id={filledLighterId} />
       </div>
 
       <div className={mergeClasses(styles.field, styles.filledDarker)}>
         <Label htmlFor={filledDarkerId}>Filled Darker</Label>
-        <SpinButton appearance="filledDarker" id={filledDarkerId} />
+        <SpinButton appearance="filled-darker" id={filledDarkerId} />
       </div>
     </div>
   );
diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md
index 04abc3eaede65..7dca55159a335 100644
--- a/packages/react-components/react-tabster/etc/react-tabster.api.md
+++ b/packages/react-components/react-tabster/etc/react-tabster.api.md
@@ -53,7 +53,7 @@ export const useFocusableGroup: (options?: UseFocusableGroupOptions | undefined)
 
 // @public (undocumented)
 export interface UseFocusableGroupOptions {
-    tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';
+    tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';
 }
 
 // @public
diff --git a/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts b/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
index d2a259eaa4a6f..b000e28328fab 100644
--- a/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
+++ b/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
@@ -6,7 +6,7 @@ export interface UseFocusableGroupOptions {
   /**
    * Behavior for the Tab key.
    */
-  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';
+  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';
 }
 
 /**
@@ -35,7 +35,7 @@ const getTabbability = (
       return Types.GroupperTabbabilities.Unlimited;
     case 'limited':
       return Types.GroupperTabbabilities.Limited;
-    case 'limitedTrapFocus':
+    case 'limited-trap-focus':
       return Types.GroupperTabbabilities.LimitedTrapFocus;
     default:
       return undefined;
diff --git a/packages/react-components/react-textarea/etc/react-textarea.api.md b/packages/react-components/react-textarea/etc/react-textarea.api.md
index 557171b548ca0..bb5841e720352 100644
--- a/packages/react-components/react-textarea/etc/react-textarea.api.md
+++ b/packages/react-components/react-textarea/etc/react-textarea.api.md
@@ -22,7 +22,7 @@ export const textareaClassNames: SlotClassNames<TextareaSlots>;
 
 // @public
 export type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
-    appearance?: 'outline' | 'filledDarker' | 'filledLighter';
+    appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
     defaultValue?: string;
     onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
     resize?: 'none' | 'horizontal' | 'vertical' | 'both';
diff --git a/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts b/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
index e46dbefe1bb50..ef54e1aced954 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
@@ -28,7 +28,7 @@ export type TextareaProps = Omit<
    *
    * @default outline
    */
-  appearance?: 'outline' | 'filledDarker' | 'filledLighter';
+  appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
 
   /**
    * The default value of the Textarea.
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
index 6ab75efd23853..7cafda7aac04a 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -89,12 +89,12 @@ const useRootStyles = makeStyles({
     },
   },
 
-  filledDarker: {
+  'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
   },
 
-  filledLighter: {
+  'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
   },
diff --git a/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx
index 72456dd703a55..b5a3c28ca4f78 100644
--- a/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx
+++ b/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx
@@ -49,12 +49,12 @@ export const Appearance = () => {
 
       <div className={styles.filledDarker}>
         <Label htmlFor={filledDarkerId}>Textarea with Filled Darker appearance.</Label>
-        <Textarea id={filledDarkerId} appearance="filledDarker" placeholder="type here..." resize="both" />
+        <Textarea id={filledDarkerId} appearance="filled-darker" placeholder="type here..." resize="both" />
       </div>
 
       <div className={styles.filledLighter}>
         <Label htmlFor={filledLighterId}>Textarea with Filled Lighter appearance.</Label>
-        <Textarea id={filledLighterId} appearance="filledLighter" placeholder="type here..." resize="both" />
+        <Textarea id={filledLighterId} appearance="filled-lighter" placeholder="type here..." resize="both" />
       </div>
     </div>
   );

From 9bc831249393208b7eebd0eede3a9e8e4beab31f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 20 May 2022 07:54:19 -0700
Subject: [PATCH 07/11] fix: missing inputClassName in merge conflict
 resolution

---
 packages/react-components/react-components/src/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 1d19884a18223..f90ba5052eabe 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -280,8 +280,6 @@ export {
 export type { DividerProps, DividerSlots, DividerState } from '@fluentui/react-divider';
 export {
   Input,
-  /* eslint-disable-next-line deprecation/deprecation */
-  inputClassName,
   inputClassNames,
   renderInput_unstable,
   useInput_unstable,

From aa2bc5f9f31d6843f569d1a8d04d102e190ddb96 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 20 May 2022 08:04:46 -0700
Subject: [PATCH 08/11] react-select: update api snapshot

---
 packages/react-components/react-select/etc/react-select.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-select/etc/react-select.api.md b/packages/react-components/react-select/etc/react-select.api.md
index c367eb54ce0a9..fb1c4fa414d60 100644
--- a/packages/react-components/react-select/etc/react-select.api.md
+++ b/packages/react-components/react-select/etc/react-select.api.md
@@ -21,7 +21,7 @@ export const Select: ForwardRefComponent<SelectProps>;
 export const selectClassNames: SlotClassNames<SelectSlots>;
 
 // @public (undocumented)
-export interface SelectCommons {
+export type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
     appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     inline?: boolean;
     size?: 'small' | 'medium' | 'large';

From 5d0c5bf173bd0d4d600b286b2227da9508f3761e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 20 May 2022 08:33:57 -0700
Subject: [PATCH 09/11] react-alert: update conformance tests

---
 .../src/components/Alert/Alert.test.tsx          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
index 4245bd8f982e6..890cc406ac308 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
@@ -4,12 +4,28 @@ import { render, screen } from '@testing-library/react';
 
 import { isConformant } from '../../common/isConformant';
 import { Alert } from './Alert';
+import { alertClassNames } from './useAlertStyles';
 
 describe('Alert', () => {
   isConformant({
     Component: Alert,
     displayName: 'Alert',
     disabledTests: ['component-has-static-classname-exported'],
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            action: 'Test Action',
+          },
+          expectedClassNames: {
+            root: alertClassNames.root,
+            icon: alertClassNames.icon,
+            action: alertClassNames.action,
+          },
+        },
+      ],
+    },
   });
 
   // TODO - create visual regression tests in /apps/vr-tests

From ca223baa6872ba92b65c918684a045ecda1effdb Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 20 May 2022 10:38:52 -0700
Subject: [PATCH 10/11] fix: update react-components api snapshot

---
 .../react-components/etc/react-components.api.md               | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index b8907e3eb2a02..890cba6d26a8f 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -126,7 +126,6 @@ import { ImageProps } from '@fluentui/react-image';
 import { ImageSlots } from '@fluentui/react-image';
 import { ImageState } from '@fluentui/react-image';
 import { Input } from '@fluentui/react-input';
-import { inputClassName } from '@fluentui/react-input';
 import { inputClassNames } from '@fluentui/react-input';
 import { InputOnChangeData } from '@fluentui/react-input';
 import { InputProps } from '@fluentui/react-input';
@@ -771,8 +770,6 @@ export { ImageState }
 
 export { Input }
 
-export { inputClassName }
-
 export { inputClassNames }
 
 export { InputOnChangeData }

From 968737ed6fee8d8dc8bbfa76e9d585fd32f5a35d Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Fri, 20 May 2022 20:27:53 +0200
Subject: [PATCH 11/11] BREAKING CHANGE: Encapsulate Popper API (#22586)

* BREAKING CHANGE: Encapsulate Popper API

Updates `@fluentui/react-positioning` so that none of the popper API and
types leak anymore

* changefiles

* update test

* update stories

* positioned to positionedElement

* update api

* remove getBasePlacement

* add tests

* virtual element and boundary

* fix types

* PR fixes

* update md

* fix type

* changefile

* Update packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

* Update packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

* rename popperOptions to positioningOptions

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
---
 .../src/stories/Positioning.stories.tsx       | 86 ++++++++++---------
 ...-32c8a8cd-7699-4ece-a6ba-5948d8756911.json |  7 ++
 ...-292bb857-a078-4a67-99cb-b32ba4c706b2.json |  7 ++
 ...-578166cb-fb28-4329-8277-212fd1d42006.json |  7 ++
 ...-3e2ab78f-6406-456c-98f6-4a56ddebbca1.json |  7 ++
 ...-fc9c4cbb-3dfa-4a5b-9b74-dcaa1b26d326.json |  7 ++
 .../src/components/Combobox/useCombobox.ts    |  8 +-
 .../etc/react-components.api.md               |  6 ++
 ...itioningImperativeAnchorTarget.stories.tsx | 12 +--
 ...ioningImperativePositionUpdate.stories.tsx | 10 +--
 .../PositioningOffsetFunction.stories.tsx     |  4 +-
 .../PositioningOffsetValue.stories.tsx        | 19 ++--
 .../react-components/src/index.ts             |  8 +-
 .../react-menu/etc/react-menu.api.md          |  6 +-
 .../src/components/Menu/Menu.types.ts         |  6 +-
 .../src/components/Menu/useMenu.tsx           |  8 +-
 .../stories/MenuAnchorToTarget.stories.tsx    | 10 +--
 .../react-popover/etc/react-popover.api.md    |  8 +-
 .../src/components/Popover/Popover.types.ts   | 10 ++-
 .../src/components/Popover/usePopover.ts      | 42 ++++-----
 .../PopoverAnchorToCustomTarget.stories.tsx   | 10 +--
 .../bundle-size/usePopper.fixture.js          |  6 +-
 .../etc/react-positioning.api.md              | 70 ++++++++-------
 .../src/createVirtualElementFromClick.ts      |  9 +-
 .../react-positioning/src/index.ts            | 11 +--
 .../react-positioning/src/types.ts            | 67 ++++++++++-----
 .../src/{usePopper.ts => usePositioning.ts}   | 25 +++---
 ...Target.ts => usePositioningMouseTarget.ts} | 10 ++-
 .../src/utils/fromPopperPlacement.test.ts     | 34 ++++++++
 .../src/utils/fromPopperPlacement.ts          | 36 ++++++++
 .../src/utils/getBasePlacement.test.ts        | 21 -----
 .../src/utils/getBasePlacement.ts             | 11 ---
 .../src/utils/getPopperOffset.test.ts         | 65 ++++++++++++++
 .../src/utils/getPopperOffset.ts              | 55 ++++++++++++
 .../react-positioning/src/utils/index.ts      |  2 +-
 .../src/utils/mergeArrowOffset.test.ts        | 60 +++++++++----
 .../src/utils/mergeArrowOffset.ts             | 35 ++++----
 .../src/utils/parsePopperPlacement.ts         | 15 ++++
 .../src/utils/positioningHelper.test.ts       |  9 +-
 .../src/utils/positioningHelper.ts            |  7 +-
 .../src/components/Tooltip/useTooltip.tsx     | 12 +--
 41 files changed, 572 insertions(+), 276 deletions(-)
 create mode 100644 change/@fluentui-react-components-32c8a8cd-7699-4ece-a6ba-5948d8756911.json
 create mode 100644 change/@fluentui-react-menu-292bb857-a078-4a67-99cb-b32ba4c706b2.json
 create mode 100644 change/@fluentui-react-popover-578166cb-fb28-4329-8277-212fd1d42006.json
 create mode 100644 change/@fluentui-react-positioning-3e2ab78f-6406-456c-98f6-4a56ddebbca1.json
 create mode 100644 change/@fluentui-react-tooltip-fc9c4cbb-3dfa-4a5b-9b74-dcaa1b26d326.json
 rename packages/react-components/react-positioning/src/{usePopper.ts => usePositioning.ts} (95%)
 rename packages/react-components/react-positioning/src/{usePopperMouseTarget.ts => usePositioningMouseTarget.ts} (75%)
 create mode 100644 packages/react-components/react-positioning/src/utils/fromPopperPlacement.test.ts
 create mode 100644 packages/react-components/react-positioning/src/utils/fromPopperPlacement.ts
 delete mode 100644 packages/react-components/react-positioning/src/utils/getBasePlacement.test.ts
 delete mode 100644 packages/react-components/react-positioning/src/utils/getBasePlacement.ts
 create mode 100644 packages/react-components/react-positioning/src/utils/getPopperOffset.test.ts
 create mode 100644 packages/react-components/react-positioning/src/utils/getPopperOffset.ts
 create mode 100644 packages/react-components/react-positioning/src/utils/parsePopperPlacement.ts

diff --git a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
index 011ad534f042e..b0dc75cc97dc7 100644
--- a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  usePopper,
+  usePositioning,
   createArrowStyles,
   PositioningProps,
-  PopperVirtualElement,
-  PopperRefHandle,
+  PositioningVirtualElement,
+  PositioningImperativeRef,
 } from '@fluentui/react-positioning';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useMergedRefs } from '@fluentui/react-utilities';
@@ -103,17 +103,17 @@ const Box = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement
 
 const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ positionFixed }) => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
-    const popperOptions: PositioningProps = { position: cur[0], align: cur[1] };
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
+    const positioningOptions: PositioningProps = { position: cur[0], align: cur[1] };
     // positionFixed is not public yet
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    popperOptions.positionFixed = positionFixed;
+    positioningOptions.positionFixed = positionFixed;
 
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper(popperOptions);
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning(positioningOptions);
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -131,11 +131,15 @@ const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ position
 
 const Offset = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: [10, 10] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({
+      position: cur[0],
+      align: cur[1],
+      offset: { crossAxis: 10, mainAxis: 10 },
+    });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -153,11 +157,15 @@ const Offset = () => {
 
 const OffsetFunction = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: () => [10, 10] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({
+      position: cur[0],
+      align: cur[1],
+      offset: () => ({ crossAxis: 10, mainAxis: 10 }),
+    });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -175,11 +183,11 @@ const OffsetFunction = () => {
 
 const CoverTarget = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], coverTarget: true });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({ position: cur[0], align: cur[1], coverTarget: true });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -198,8 +206,8 @@ const CoverTarget = () => {
 const VerticalFlip = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const topPopper = usePopper({ position: 'above', flipBoundary: boundary ?? undefined });
-  const bottomPopper = usePopper({ position: 'below', flipBoundary: boundary ?? undefined });
+  const topPopper = usePositioning({ position: 'above', flipBoundary: boundary ?? undefined });
+  const bottomPopper = usePositioning({ position: 'below', flipBoundary: boundary ?? undefined });
 
   return (
     <div
@@ -221,8 +229,8 @@ const VerticalFlip = () => {
 const HorizontalFlip = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const startPopper = usePopper({ position: 'before', flipBoundary: boundary ?? undefined });
-  const endPopper = usePopper({ position: 'after', flipBoundary: boundary ?? undefined });
+  const startPopper = usePositioning({ position: 'before', flipBoundary: boundary ?? undefined });
+  const endPopper = usePositioning({ position: 'after', flipBoundary: boundary ?? undefined });
   const { dir } = useFluent();
   const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight';
 
@@ -242,8 +250,8 @@ const HorizontalFlip = () => {
 const VerticalOverflow = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const topPopper = usePopper({ position: 'after', overflowBoundary: boundary ?? undefined });
-  const bottomPopper = usePopper({ position: 'after', overflowBoundary: boundary ?? undefined });
+  const topPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined });
+  const bottomPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined });
 
   return (
     <div
@@ -265,8 +273,8 @@ const VerticalOverflow = () => {
 const HorizontalOverflow = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const startPopper = usePopper({ position: 'below', overflowBoundary: boundary ?? undefined });
-  const endPopper = usePopper({ position: 'below', overflowBoundary: boundary ?? undefined });
+  const startPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined });
+  const endPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined });
   const { dir } = useFluent();
   const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight';
 
@@ -290,7 +298,7 @@ const HorizontalOverflow = () => {
 const Pinned = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'above',
     flipBoundary: boundary ?? undefined,
     pinned: true,
@@ -310,11 +318,11 @@ const Pinned = () => {
 
 const Arrow: React.FC = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({ position: cur[0], align: cur[1] });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -335,7 +343,7 @@ const Arrow: React.FC = () => {
 
 const AutoSize = () => {
   const styles = useStyles();
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'below',
     autoSize: true,
   });
@@ -375,7 +383,7 @@ const AutoSize = () => {
 
 const DisableTether = () => {
   const styles = useStyles();
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'above',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -411,14 +419,14 @@ const DisableTether = () => {
 const VirtualElement = () => {
   const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'below',
     align: 'end',
   });
 
   React.useEffect(() => {
     if (target) {
-      const virtualElement: PopperVirtualElement = {
+      const virtualElement: PositioningVirtualElement = {
         getBoundingClientRect: () => target.getBoundingClientRect(),
       };
 
@@ -437,7 +445,7 @@ const VirtualElement = () => {
 const TargetProp = () => {
   const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
-  const { containerRef } = usePopper({
+  const { containerRef } = usePositioning({
     target,
     position: 'below',
     align: 'end',
@@ -452,18 +460,18 @@ const TargetProp = () => {
 };
 
 const ImperativeTarget = () => {
-  const popperRef = React.useRef<PopperRefHandle>({ updatePosition: () => null, setTarget: () => null });
+  const positioningRef = React.useRef<PositioningImperativeRef>({ updatePosition: () => null, setTarget: () => null });
   const ref = React.useRef<HTMLButtonElement>(null);
 
-  const { containerRef } = usePopper({
-    popperRef,
+  const { containerRef } = usePositioning({
+    positioningRef,
     position: 'below',
     align: 'end',
   });
 
   React.useEffect(() => {
     if (ref.current) {
-      popperRef.current.setTarget(ref.current);
+      positioningRef.current.setTarget(ref.current);
     }
   }, []);
 
@@ -477,7 +485,7 @@ const ImperativeTarget = () => {
 
 const VisibilityModifiers = () => {
   const styles = useStyles();
-  const popper = usePopper({ align: 'center', position: 'above' });
+  const popper = usePositioning({ align: 'center', position: 'above' });
 
   return (
     <>
diff --git a/change/@fluentui-react-components-32c8a8cd-7699-4ece-a6ba-5948d8756911.json b/change/@fluentui-react-components-32c8a8cd-7699-4ece-a6ba-5948d8756911.json
new file mode 100644
index 0000000000000..f632a5a132903
--- /dev/null
+++ b/change/@fluentui-react-components-32c8a8cd-7699-4ece-a6ba-5948d8756911.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Rename positioning types and APIs to avoid references to third party API",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-292bb857-a078-4a67-99cb-b32ba4c706b2.json b/change/@fluentui-react-menu-292bb857-a078-4a67-99cb-b32ba4c706b2.json
new file mode 100644
index 0000000000000..95f0fc42e1ac7
--- /dev/null
+++ b/change/@fluentui-react-menu-292bb857-a078-4a67-99cb-b32ba4c706b2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: changes to positioning prop",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-578166cb-fb28-4329-8277-212fd1d42006.json b/change/@fluentui-react-popover-578166cb-fb28-4329-8277-212fd1d42006.json
new file mode 100644
index 0000000000000..5e305c8a35364
--- /dev/null
+++ b/change/@fluentui-react-popover-578166cb-fb28-4329-8277-212fd1d42006.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: changes to positioning prop",
+  "packageName": "@fluentui/react-popover",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-positioning-3e2ab78f-6406-456c-98f6-4a56ddebbca1.json b/change/@fluentui-react-positioning-3e2ab78f-6406-456c-98f6-4a56ddebbca1.json
new file mode 100644
index 0000000000000..03223ecd46ddf
--- /dev/null
+++ b/change/@fluentui-react-positioning-3e2ab78f-6406-456c-98f6-4a56ddebbca1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING CHANGE: Encapsulate Popper API",
+  "packageName": "@fluentui/react-positioning",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-fc9c4cbb-3dfa-4a5b-9b74-dcaa1b26d326.json b/change/@fluentui-react-tooltip-fc9c4cbb-3dfa-4a5b-9b74-dcaa1b26d326.json
new file mode 100644
index 0000000000000..91deec7778ae6
--- /dev/null
+++ b/change/@fluentui-react-tooltip-fc9c4cbb-3dfa-4a5b-9b74-dcaa1b26d326.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: changes to positioning prop",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts
index f4e1251de0e57..57e42372e56a6 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts
+++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Offset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
+import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import {
   getPartitionedNativeProps,
   resolveShorthand,
@@ -52,10 +52,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLBu
   const ignoreTriggerBlur = React.useRef(false);
 
   // popper
-  const popperOptions = {
+  const positioningOptions = {
     position: 'below' as const,
     align: 'start' as const,
-    offset: [0, 2] as Offset,
+    offset: 2,
     ...resolvePositioningShorthand(positioning),
   };
 
@@ -65,7 +65,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLBu
   }: {
     targetRef: React.MutableRefObject<HTMLButtonElement>;
     containerRef: React.MutableRefObject<HTMLDivElement>;
-  } = usePopper(popperOptions);
+  } = usePositioning(positioningOptions);
 
   // update value based on selectedOptions
   const isFirstMount = useFirstMount();
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index 890cba6d26a8f..f2ef6d62e904c 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -242,9 +242,11 @@ import { PopoverTriggerState } from '@fluentui/react-popover';
 import { Portal } from '@fluentui/react-portal';
 import { PortalProps } from '@fluentui/react-portal';
 import { PortalState } from '@fluentui/react-portal';
+import { PositioningImperativeRef } from '@fluentui/react-positioning';
 import { PositioningProps } from '@fluentui/react-positioning';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningVirtualElement } from '@fluentui/react-positioning';
 import { PresenceBadge } from '@fluentui/react-badge';
 import { presenceBadgeClassNames } from '@fluentui/react-badge';
 import { PresenceBadgeProps } from '@fluentui/react-badge';
@@ -1002,12 +1004,16 @@ export { PortalProps }
 
 export { PortalState }
 
+export { PositioningImperativeRef }
+
 export { PositioningProps }
 
 export { PositioningShorthand }
 
 export { PositioningShorthandValue }
 
+export { PositioningVirtualElement }
+
 export { PresenceBadge }
 
 export { presenceBadgeClassNames }
diff --git a/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativeAnchorTarget.stories.tsx b/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativeAnchorTarget.stories.tsx
index feb5e4554f189..1311e0ce4e72f 100644
--- a/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativeAnchorTarget.stories.tsx
+++ b/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativeAnchorTarget.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-components';
-import { PopperRefHandle, PopperVirtualElement } from '@fluentui/react-positioning';
+import { PositioningImperativeRef, PositioningVirtualElement } from '@fluentui/react-positioning';
 
 export const ImperativeAnchorTarget = () => {
-  const popperRef = React.useRef<PopperRefHandle>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
   const [open, setOpen] = React.useState(false);
 
   const onMouseMove = React.useCallback((e: React.MouseEvent) => {
@@ -19,10 +19,10 @@ export const ImperativeAnchorTarget = () => {
         y,
       });
     };
-    const virtualElement: PopperVirtualElement = {
+    const virtualElement: PositioningVirtualElement = {
       getBoundingClientRect: getRect(e.clientX, e.clientY),
     };
-    popperRef.current?.setTarget(virtualElement);
+    positioningRef.current?.setTarget(virtualElement);
   }, []);
 
   const onMouseEnter = React.useCallback(() => {
@@ -40,7 +40,7 @@ export const ImperativeAnchorTarget = () => {
     <>
       <Tooltip
         visible={open}
-        positioning={{ popperRef, offset: [0, 15] }}
+        positioning={{ positioningRef, offset: { crossAxis: 0, mainAxis: 15 } }}
         content="Follows the cursor"
         relationship="label"
       />
@@ -68,7 +68,7 @@ ImperativeAnchorTarget.parameters = {
   docs: {
     description: {
       story: [
-        'The `popperRef` positioning prop provides an [imperative handle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)',
+        'The `positioningRef` positioning prop provides an [imperative handle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)',
         'to manually position an element. The target can be a normal HTML element or a virtual element such as a',
         'coordinate on the viewport',
         'This can be useful to reduce the number of renders required, for example when the positioned element',
diff --git a/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativePositionUpdate.stories.tsx b/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativePositionUpdate.stories.tsx
index 4669ebacd4aed..923f7870382fe 100644
--- a/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativePositionUpdate.stories.tsx
+++ b/packages/react-components/react-components/src/Concepts/Positioning/PositioningImperativePositionUpdate.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface, PopoverProps } from '@fluentui/react-popover';
 import { Button } from '@fluentui/react-button';
-import { PopperRefHandle } from '@fluentui/react-positioning';
+import { PositioningImperativeRef } from '@fluentui/react-positioning';
 
 export const ImperativePositionUpdate = () => {
   const [loading, setLoading] = React.useState(true);
-  const popperRef = React.useRef<PopperRefHandle>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
   const timeoutRef = React.useRef(0);
 
   const onOpenChange = React.useCallback<NonNullable<PopoverProps['onOpenChange']>>((e, data) => {
@@ -19,7 +19,7 @@ export const ImperativePositionUpdate = () => {
 
   React.useEffect(() => {
     if (!loading) {
-      popperRef.current?.updatePosition();
+      positioningRef.current?.updatePosition();
     }
   }, [loading]);
 
@@ -28,7 +28,7 @@ export const ImperativePositionUpdate = () => {
   });
 
   return (
-    <Popover positioning={{ position: 'below', popperRef }} noArrow onOpenChange={onOpenChange}>
+    <Popover positioning={{ position: 'below', positioningRef }} noArrow onOpenChange={onOpenChange}>
       <PopoverTrigger>
         <Button appearance="primary">Click me</Button>
       </PopoverTrigger>
@@ -43,7 +43,7 @@ ImperativePositionUpdate.parameters = {
   docs: {
     description: {
       story: [
-        'The `popperRef` positioning prop provides an [imperative handle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)',
+        'The `positioningRef` positioning prop provides an [imperative handle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)',
         'to reposition the positioned element. This can be useful for scenarios where content is dynamically loaded.',
         '',
         'In this example, you can move your mouse in the red boundary and the tooltip will follow the mouse cursor',
diff --git a/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetFunction.stories.tsx b/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetFunction.stories.tsx
index 1bc296aaa2388..65514e055802a 100644
--- a/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetFunction.stories.tsx
+++ b/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetFunction.stories.tsx
@@ -4,8 +4,8 @@ import { Button } from '@fluentui/react-button';
 import { PositioningProps } from '@fluentui/react-positioning';
 
 export const OffsetFunction = () => {
-  const offset: PositioningProps['offset'] = ({ popper, reference, placement }) => {
-    return [10, popper.width / 2];
+  const offset: PositioningProps['offset'] = ({ positionedRect, targetRect, position, alignment }) => {
+    return { crossAxis: 10, mainAxis: positionedRect.width / 2 };
   };
 
   return (
diff --git a/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetValue.stories.tsx b/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetValue.stories.tsx
index 8d3b04814bbfd..8c307ee3fd322 100644
--- a/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetValue.stories.tsx
+++ b/packages/react-components/react-components/src/Concepts/Positioning/PositioningOffsetValue.stories.tsx
@@ -3,34 +3,37 @@ import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover
 import { Button } from '@fluentui/react-button';
 
 export const OffsetValue = () => {
-  const [offsetY, setOffsetY] = React.useState(10);
-  const [offsetX, setOffsetX] = React.useState(10);
+  const [offsetCross, setOffsetCross] = React.useState(10);
+  const [offsetMain, setOffsetMain] = React.useState(10);
 
   const onChangeY = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOffsetY(parseInt(e.target.value, 10));
+    setOffsetCross(parseInt(e.target.value, 10));
   };
 
   const onChangeX = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOffsetX(parseInt(e.target.value, 10));
+    setOffsetMain(parseInt(e.target.value, 10));
   };
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
       <label style={{ display: 'flex', gap: 10 }}>
         Offset Y
-        <input onChange={onChangeY} value={offsetY} type="number" />
+        <input onChange={onChangeY} value={offsetCross} type="number" />
       </label>
       <label style={{ display: 'flex', gap: 10 }}>
         Offset X
-        <input onChange={onChangeX} value={offsetX} type="number" />
+        <input onChange={onChangeX} value={offsetMain} type="number" />
       </label>
-      <Popover positioning={{ position: 'after', offset: [offsetY, offsetX] }} noArrow>
+      <Popover positioning={{ position: 'after', offset: { crossAxis: offsetCross, mainAxis: offsetMain } }} noArrow>
         <PopoverTrigger>
           <Button appearance="primary">Click me</Button>
         </PopoverTrigger>
 
         <PopoverSurface style={{ minWidth: 100 }}>Container</PopoverSurface>
       </Popover>
-      <Popover positioning={{ position: 'after', offset: () => [offsetY, offsetX] }} noArrow>
+      <Popover
+        positioning={{ position: 'after', offset: () => ({ crossAxis: offsetCross, mainAxis: offsetMain }) }}
+        noArrow
+      >
         <PopoverTrigger>
           <Button appearance="primary">Click me</Button>
         </PopoverTrigger>
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index f90ba5052eabe..b5961e34f750c 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -566,4 +566,10 @@ export type {
   TooltipTriggerProps,
 } from '@fluentui/react-tooltip';
 
-export type { PositioningProps, PositioningShorthand, PositioningShorthandValue } from '@fluentui/react-positioning';
+export type {
+  PositioningProps,
+  PositioningShorthand,
+  PositioningShorthandValue,
+  PositioningImperativeRef,
+  PositioningVirtualElement,
+} from '@fluentui/react-positioning';
diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md
index be21c8403c4cd..1a1dcdef353df 100644
--- a/packages/react-components/react-menu/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -14,7 +14,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { usePopperMouseTarget } from '@fluentui/react-positioning';
+import { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
 // @public
 export const Menu: React_2.FC<MenuProps>;
@@ -284,12 +284,12 @@ export type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
 
 // @public (undocumented)
 export type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'inline' | 'onOpenChange' | 'openOnContext' | 'persistOnItemClick'> & Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover'>> & {
-    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    contextTarget: ReturnType<typeof usePositioningMouseTarget>[0];
     isSubmenu: boolean;
     menuPopover: React_2.ReactNode;
     menuPopoverRef: React_2.MutableRefObject<HTMLElement>;
     menuTrigger: React_2.ReactNode;
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
     setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
     triggerId: string;
     triggerRef: React_2.MutableRefObject<HTMLElement>;
diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/src/components/Menu/Menu.types.ts
index 9ad3b0a3e0dde..13469cb88b96b 100644
--- a/packages/react-components/react-menu/src/components/Menu/Menu.types.ts
+++ b/packages/react-components/react-menu/src/components/Menu/Menu.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePopperMouseTarget } from '@fluentui/react-positioning';
+import { usePositioningMouseTarget } from '@fluentui/react-positioning';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { MenuContextValue } from '../../contexts/menuContext';
@@ -96,7 +96,7 @@ export type MenuState = ComponentState<MenuSlots> &
     /**
      * Anchors the popper to the mouse click for context events
      */
-    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    contextTarget: ReturnType<typeof usePositioningMouseTarget>[0];
 
     /**
      * Whether this menu is a submenu
@@ -121,7 +121,7 @@ export type MenuState = ComponentState<MenuSlots> &
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
 
     /**
      * Callback to open/close the popup
diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
index a02a4d68d43ba..7f52991312798 100644
--- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePopperMouseTarget, usePopper, resolvePositioningShorthand } from '@fluentui/react-positioning';
+import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
 import { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
@@ -20,9 +20,9 @@ import type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from '.
 export const useMenu_unstable = (props: MenuProps): MenuState => {
   const triggerId = useId('menu');
   const isSubmenu = useIsSubmenu();
-  const [contextTarget, setContextTarget] = usePopperMouseTarget();
+  const [contextTarget, setContextTarget] = usePositioningMouseTarget();
 
-  const popperState = {
+  const positioningState = {
     position: isSubmenu ? ('after' as const) : ('below' as const),
     align: isSubmenu ? ('top' as const) : ('start' as const),
     target: props.openOnContext ? contextTarget : undefined,
@@ -51,7 +51,7 @@ export const useMenu_unstable = (props: MenuProps): MenuState => {
   } else if (children.length === 1) {
     menuPopover = children[0];
   }
-  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePopper(popperState);
+  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);
 
   const initialState = {
     hoverDelay: 500,
diff --git a/packages/react-components/react-menu/src/stories/MenuAnchorToTarget.stories.tsx b/packages/react-components/react-menu/src/stories/MenuAnchorToTarget.stories.tsx
index 0259f817d5efd..28195bcfb52a9 100644
--- a/packages/react-components/react-menu/src/stories/MenuAnchorToTarget.stories.tsx
+++ b/packages/react-components/react-menu/src/stories/MenuAnchorToTarget.stories.tsx
@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Menu, MenuList, MenuItem, MenuPopover, MenuProps } from '../index';
 
 import { Button } from '@fluentui/react-button';
-import { PopperRefHandle } from '@fluentui/react-positioning';
+import { PositioningImperativeRef } from '@fluentui/react-positioning';
 
 export const AnchorToCustomTarget = () => {
   const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const popperRef = React.useRef<PopperRefHandle>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
   const [open, setOpen] = React.useState(false);
   const onOpenChange: MenuProps['onOpenChange'] = (e, data) => {
     setOpen(data.open);
@@ -15,9 +15,9 @@ export const AnchorToCustomTarget = () => {
 
   React.useEffect(() => {
     if (buttonRef.current) {
-      popperRef.current?.setTarget(buttonRef.current);
+      positioningRef.current?.setTarget(buttonRef.current);
     }
-  }, [buttonRef, popperRef]);
+  }, [buttonRef, positioningRef]);
 
   return (
     <>
@@ -25,7 +25,7 @@ export const AnchorToCustomTarget = () => {
       <Button ref={buttonRef} onClick={() => setOpen(s => !s)}>
         Custom target
       </Button>
-      <Menu open={open} onOpenChange={onOpenChange} positioning={{ popperRef }}>
+      <Menu open={open} onOpenChange={onOpenChange} positioning={{ positioningRef }}>
         <MenuPopover>
           <MenuList>
             <MenuItem>New </MenuItem>
diff --git a/packages/react-components/react-popover/etc/react-popover.api.md b/packages/react-components/react-popover/etc/react-popover.api.md
index 57751f66b8e99..3b67c3c52bc8b 100644
--- a/packages/react-components/react-popover/etc/react-popover.api.md
+++ b/packages/react-components/react-popover/etc/react-popover.api.md
@@ -11,14 +11,14 @@ import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
-import type { PopperVirtualElement } from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { usePopperMouseTarget } from '@fluentui/react-positioning';
+import type { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)
 export const arrowHeights: Record<PopoverSize, number>;
@@ -65,10 +65,10 @@ export type PopoverSize = 'small' | 'medium' | 'large';
 export type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'noArrow' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
     arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
     contentRef: React_2.MutableRefObject<HTMLElement | null>;
-    contextTarget: PopperVirtualElement | undefined;
+    contextTarget: PositioningVirtualElement | undefined;
     popoverSurface: React_2.ReactElement | undefined;
     popoverTrigger: React_2.ReactElement | undefined;
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
     setOpen: (e: OpenPopoverEvents, open: boolean) => void;
     size: NonNullable<PopoverProps['size']>;
     toggleOpen: (e: OpenPopoverEvents) => void;
diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.types.ts b/packages/react-components/react-popover/src/components/Popover/Popover.types.ts
index d964fe26734fd..1ad6bd68197fd 100644
--- a/packages/react-components/react-popover/src/components/Popover/Popover.types.ts
+++ b/packages/react-components/react-popover/src/components/Popover/Popover.types.ts
@@ -1,6 +1,10 @@
 import * as React from 'react';
+import type {
+  PositioningVirtualElement,
+  PositioningShorthand,
+  usePositioningMouseTarget,
+} from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
-import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
 
 /**
  * Determines popover padding and arrow size
@@ -123,7 +127,7 @@ export type PopoverState = Pick<
     /**
      * Anchors the popper to the mouse click for context events
      */
-    contextTarget: PopperVirtualElement | undefined;
+    contextTarget: PositioningVirtualElement | undefined;
 
     popoverSurface: React.ReactElement | undefined;
 
@@ -132,7 +136,7 @@ export type PopoverState = Pick<
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
 
     /**
      * Callback to open/close the Popover
diff --git a/packages/react-components/react-popover/src/components/Popover/usePopover.ts b/packages/react-components/react-popover/src/components/Popover/usePopover.ts
index 8219aad832687..47aa41eb66cb6 100644
--- a/packages/react-components/react-popover/src/components/Popover/usePopover.ts
+++ b/packages/react-components/react-popover/src/components/Popover/usePopover.ts
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { elementContains } from '@fluentui/react-portal';
-import {
-  mergeArrowOffset,
-  resolvePositioningShorthand,
-  usePopper,
-  usePopperMouseTarget,
-} from '@fluentui/react-positioning';
-import { useFluent } from '@fluentui/react-shared-contexts';
-import { useFocusFinders } from '@fluentui/react-tabster';
 import {
   useControllableState,
   useEventCallback,
   useOnClickOutside,
   useOnScrollOutside,
 } from '@fluentui/react-utilities';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import {
+  usePositioning,
+  resolvePositioningShorthand,
+  mergeArrowOffset,
+  usePositioningMouseTarget,
+} from '@fluentui/react-positioning';
+import { elementContains } from '@fluentui/react-portal';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { arrowHeights } from '../PopoverSurface/index';
 import type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';
 
@@ -26,7 +26,7 @@ import type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.ty
  * @param props - props from this instance of Popover
  */
 export const usePopover_unstable = (props: PopoverProps): PopoverState => {
-  const [contextTarget, setContextTarget] = usePopperMouseTarget();
+  const [contextTarget, setContextTarget] = usePositioningMouseTarget();
   const initialState = {
     size: 'medium',
     contextTarget,
@@ -95,14 +95,14 @@ export const usePopover_unstable = (props: PopoverProps): PopoverState => {
     [setOpen, open],
   );
 
-  const popperRefs = usePopoverRefs(initialState);
+  const positioningRefs = usePopoverRefs(initialState);
 
   const { targetDocument } = useFluent();
   useOnClickOutside({
     contains: elementContains,
     element: targetDocument,
     callback: ev => setOpen(ev, false),
-    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
     disabled: !open,
   });
 
@@ -112,22 +112,22 @@ export const usePopover_unstable = (props: PopoverProps): PopoverState => {
     contains: elementContains,
     element: targetDocument,
     callback: ev => setOpen(ev, false),
-    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
     disabled: !open || !closeOnScroll,
   });
 
   const { findFirstFocusable } = useFocusFinders();
 
   React.useEffect(() => {
-    if (open && popperRefs.contentRef.current) {
-      const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);
+    if (open && positioningRefs.contentRef.current) {
+      const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);
       firstFocusable?.focus();
     }
-  }, [findFirstFocusable, open, popperRefs.contentRef]);
+  }, [findFirstFocusable, open, positioningRefs.contentRef]);
 
   return {
     ...initialState,
-    ...popperRefs,
+    ...positioningRefs,
     popoverTrigger,
     popoverSurface,
     open,
@@ -187,7 +187,7 @@ function useOpenState(
 function usePopoverRefs(
   state: Pick<PopoverState, 'size' | 'contextTarget'> & Pick<PopoverProps, 'positioning' | 'openOnContext' | 'noArrow'>,
 ) {
-  const popperOptions = {
+  const positioningOptions = {
     position: 'above' as const,
     align: 'center' as const,
     target: state.openOnContext ? state.contextTarget : undefined,
@@ -195,15 +195,15 @@ function usePopoverRefs(
   };
 
   // no reason to render arrow when covering the target
-  if (popperOptions.coverTarget) {
+  if (positioningOptions.coverTarget) {
     state.noArrow = true;
   }
 
   if (!state.noArrow) {
-    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);
+    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
   }
 
-  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);
+  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);
 
   return {
     triggerRef,
diff --git a/packages/react-components/react-popover/src/stories/PopoverAnchorToCustomTarget.stories.tsx b/packages/react-components/react-popover/src/stories/PopoverAnchorToCustomTarget.stories.tsx
index 5dd9890a6fe04..d4615347971cf 100644
--- a/packages/react-components/react-popover/src/stories/PopoverAnchorToCustomTarget.stories.tsx
+++ b/packages/react-components/react-popover/src/stories/PopoverAnchorToCustomTarget.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from '@fluentui/react-button';
 import { makeStyles, shorthands } from '@griffel/react';
 
 import { Popover, PopoverTrigger, PopoverSurface } from '../index';
-import { PopperRefHandle } from '@fluentui/react-positioning';
+import { PositioningImperativeRef } from '@fluentui/react-positioning';
 
 const useStyles = makeStyles({
   container: {
@@ -29,18 +29,18 @@ const ExampleContent = () => {
 
 export const AnchorToCustomTarget = () => {
   const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const popperRef = React.useRef<PopperRefHandle>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
   const styles = useStyles();
 
   React.useEffect(() => {
     if (buttonRef.current) {
-      popperRef.current?.setTarget(buttonRef.current);
+      positioningRef.current?.setTarget(buttonRef.current);
     }
-  }, [buttonRef, popperRef]);
+  }, [buttonRef, positioningRef]);
 
   return (
     <div className={styles.container}>
-      <Popover positioning={{ popperRef }}>
+      <Popover positioning={{ positioningRef }}>
         <PopoverTrigger>
           <Button>Popover trigger</Button>
         </PopoverTrigger>
diff --git a/packages/react-components/react-positioning/bundle-size/usePopper.fixture.js b/packages/react-components/react-positioning/bundle-size/usePopper.fixture.js
index 58f9b1b4f92a6..4416f77f0e8ee 100644
--- a/packages/react-components/react-positioning/bundle-size/usePopper.fixture.js
+++ b/packages/react-components/react-positioning/bundle-size/usePopper.fixture.js
@@ -1,7 +1,7 @@
-import { usePopper } from '@fluentui/react-positioning';
+import { usePositioning } from '@fluentui/react-positioning';
 
-console.log(usePopper);
+console.log(usePositioning);
 
 export default {
-  name: 'usePopper',
+  name: 'usePositioning',
 };
diff --git a/packages/react-components/react-positioning/etc/react-positioning.api.md b/packages/react-components/react-positioning/etc/react-positioning.api.md
index fa41fb518e3c5..cf9dc8c10758c 100644
--- a/packages/react-components/react-positioning/etc/react-positioning.api.md
+++ b/packages/react-components/react-positioning/etc/react-positioning.api.md
@@ -5,7 +5,6 @@
 ```ts
 
 import type { GriffelStyle } from '@griffel/react';
-import * as PopperJs from '@popperjs/core';
 import * as React_2 from 'react';
 
 // @public (undocumented)
@@ -15,7 +14,7 @@ export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 export type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 
 // @public (undocumented)
-export type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
+export type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
 
 // @public
 export function createArrowHeightStyles(arrowHeight: number): {
@@ -35,55 +34,47 @@ export type CreateArrowStylesOptions = {
 };
 
 // @public
-export function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
+export function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
 
 // @public
 export function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
 
 // @public (undocumented)
-export type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
+export type Offset = OffsetFunction | OffsetObject | OffsetShorthand;
 
 // @public (undocumented)
-export type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
+export type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
 
 // @public (undocumented)
 export type OffsetFunctionParam = {
-    popper: PopperJs.Rect;
-    reference: PopperJs.Rect;
-    placement: PopperJs.Placement;
+    positionedRect: Rect;
+    targetRect: Rect;
+    position: Position;
+    alignment?: Alignment;
 };
 
 // @public (undocumented)
-export interface PopperOptions {
-    align?: Alignment;
-    arrowPadding?: number;
-    autoSize?: AutoSize;
-    coverTarget?: boolean;
-    flipBoundary?: Boundary;
-    offset?: Offset;
-    overflowBoundary?: Boundary;
-    pinned?: boolean;
-    position?: Position;
-    positionFixed?: boolean;
-    unstable_disableTether?: boolean | 'all';
-}
-
-// @public (undocumented)
-export type PopperRefHandle = {
-    updatePosition: () => void;
-    setTarget: (target: HTMLElement | PopperVirtualElement) => void;
+export type OffsetObject = {
+    crossAxis?: number;
+    mainAxis: number;
 };
 
 // @public (undocumented)
-export type PopperVirtualElement = PopperJs.VirtualElement;
+export type OffsetShorthand = number;
 
 // @public (undocumented)
 export type Position = 'above' | 'below' | 'before' | 'after';
 
 // @public (undocumented)
-export interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
-    popperRef?: React_2.Ref<PopperRefHandle>;
-    target?: HTMLElement | PopperVirtualElement | null;
+export type PositioningImperativeRef = {
+    updatePosition: () => void;
+    setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
+};
+
+// @public (undocumented)
+export interface PositioningProps extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {
+    positioningRef?: React_2.Ref<PositioningImperativeRef>;
+    target?: HTMLElement | PositioningVirtualElement | null;
 }
 
 // @public (undocumented)
@@ -92,18 +83,33 @@ export type PositioningShorthand = PositioningProps | PositioningShorthandValue;
 // @public (undocumented)
 export type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
 
+// @public (undocumented)
+export type PositioningVirtualElement = {
+    getBoundingClientRect: () => {
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+    };
+    contextElement?: Element;
+};
+
 // @public (undocumented)
 export function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
 
 // @public
-export function usePopper(options?: UsePopperOptions): {
+export function usePositioning(options?: UsePopperOptions): {
     targetRef: React_2.MutableRefObject<any>;
     containerRef: React_2.MutableRefObject<any>;
     arrowRef: React_2.MutableRefObject<any>;
 };
 
 // @public
-export const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
+export const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/react-components/react-positioning/src/createVirtualElementFromClick.ts b/packages/react-components/react-positioning/src/createVirtualElementFromClick.ts
index 5d531eadca6e0..974f29473ccbd 100644
--- a/packages/react-components/react-positioning/src/createVirtualElementFromClick.ts
+++ b/packages/react-components/react-positioning/src/createVirtualElementFromClick.ts
@@ -1,22 +1,23 @@
-import type { PopperVirtualElement } from './types';
+import type { PositioningVirtualElement } from './types';
 
 /**
  * Creates a virtual element based on the position of a click event
  * Can be used as a target for popper in scenarios such as context menus
  */
-export function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement {
+export function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {
   const left = nativeEvent.clientX;
   const top = nativeEvent.clientY;
   const right = left + 1;
   const bottom = top + 1;
 
-  function getBoundingClientRect(): ClientRect {
+  function getBoundingClientRect() {
     return {
       left,
       top,
       right,
       bottom,
-
+      x: left,
+      y: top,
       height: 1,
       width: 1,
     };
diff --git a/packages/react-components/react-positioning/src/index.ts b/packages/react-components/react-positioning/src/index.ts
index dd6112117aeba..23ed0f051bc7c 100644
--- a/packages/react-components/react-positioning/src/index.ts
+++ b/packages/react-components/react-positioning/src/index.ts
@@ -1,8 +1,8 @@
 export { createVirtualElementFromClick } from './createVirtualElementFromClick';
 export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
 export type { CreateArrowStylesOptions } from './createArrowStyles';
-export { usePopper } from './usePopper';
-export { usePopperMouseTarget } from './usePopperMouseTarget';
+export { usePositioning } from './usePositioning';
+export { usePositioningMouseTarget } from './usePositioningMouseTarget';
 export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export type {
   Alignment,
@@ -11,11 +11,12 @@ export type {
   Offset,
   OffsetFunction,
   OffsetFunctionParam,
-  PopperOptions,
-  PopperRefHandle,
-  PopperVirtualElement,
+  OffsetObject,
+  OffsetShorthand,
   Position,
+  PositioningImperativeRef,
   PositioningProps,
   PositioningShorthand,
   PositioningShorthandValue,
+  PositioningVirtualElement,
 } from './types';
diff --git a/packages/react-components/react-positioning/src/types.ts b/packages/react-components/react-positioning/src/types.ts
index 62143648461b5..0b5ad8bc102c7 100644
--- a/packages/react-components/react-positioning/src/types.ts
+++ b/packages/react-components/react-positioning/src/types.ts
@@ -1,26 +1,37 @@
-import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 
+type Rect = {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
 export type OffsetFunctionParam = {
-  popper: PopperJs.Rect;
-  reference: PopperJs.Rect;
-  placement: PopperJs.Placement;
+  positionedRect: Rect;
+  targetRect: Rect;
+  position: Position;
+  alignment?: Alignment;
 };
 
-export type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
+export type OffsetObject = { crossAxis?: number; mainAxis: number };
+
+export type OffsetShorthand = number;
 
-export type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
+export type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
+
+export type Offset = OffsetFunction | OffsetObject | OffsetShorthand;
 
 export type Position = 'above' | 'below' | 'before' | 'after';
 export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
 export type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 
-export type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
+export type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
 
-export type PopperRefHandle = {
+export type PositioningImperativeRef = {
   /**
-   * Updates the position of the popper imperatively.
+   * Updates the position imperatively.
    * Useful when the position of the target changes from other factors than scrolling of window resize.
    */
   updatePosition: () => void;
@@ -29,19 +40,31 @@ export type PopperRefHandle = {
    * Sets the target and updates positioning imperatively.
    * Useful for avoiding double renders with the target option.
    */
-  setTarget: (target: HTMLElement | PopperVirtualElement) => void;
+  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
 };
 
-export type PopperVirtualElement = PopperJs.VirtualElement;
+export type PositioningVirtualElement = {
+  getBoundingClientRect: () => {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  contextElement?: Element;
+};
 
-export interface PopperOptions {
+export interface PositioningOptions {
   /** Alignment for the component. Only has an effect if used with the @see position option */
   align?: Alignment;
 
-  /** The element which will define the boundaries of the popper position for the flip behavior. */
+  /** The element which will define the boundaries of the positioned element for the flip behavior. */
   flipBoundary?: Boundary;
 
-  /** The element which will define the boundaries of the popper position for the overflow behavior. */
+  /** The element which will define the boundaries of the positioned element for the overflow behavior. */
   overflowBoundary?: Boundary;
 
   /**
@@ -53,13 +76,13 @@ export interface PopperOptions {
   position?: Position;
 
   /**
-   * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+   * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
    * @default false
    */
   positionFixed?: boolean;
 
   /**
-   * Lets you displace a popper element from its reference element.
+   * Lets you displace a positioned element from its reference element.
    * This can be useful if you need to apply some margin between them or if you need to fine tune the
    * position according to some custom logic.
    */
@@ -72,7 +95,7 @@ export interface PopperOptions {
   arrowPadding?: number;
 
   /**
-   * Applies max-height and max-width on popper to fit it within the available space in viewport.
+   * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.
    * true enables this for both width and height when overflow happens.
    * 'always' applies `max-height`/`max-width` regardless of overflow.
    * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
@@ -92,7 +115,7 @@ export interface PopperOptions {
   pinned?: boolean;
 
   /**
-   * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+   * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
    * "all" enables this behavior for all axis.
    */
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -101,14 +124,14 @@ export interface PopperOptions {
 
 export interface PositioningProps
   // "positionFixed" & "unstable_disableTether" are not exported as public API (yet)
-  extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
+  extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {
   /** An imperative handle to Popper methods. */
-  popperRef?: React.Ref<PopperRefHandle>;
+  positioningRef?: React.Ref<PositioningImperativeRef>;
 
   /**
-   * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
+   * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
    */
-  target?: HTMLElement | PopperVirtualElement | null;
+  target?: HTMLElement | PositioningVirtualElement | null;
 }
 
 export type PositioningShorthandValue =
diff --git a/packages/react-components/react-positioning/src/usePopper.ts b/packages/react-components/react-positioning/src/usePositioning.ts
similarity index 95%
rename from packages/react-components/react-positioning/src/usePopper.ts
rename to packages/react-components/react-positioning/src/usePositioning.ts
index 39b9cb6b6c98b..a326f77406ba6 100644
--- a/packages/react-components/react-positioning/src/usePopper.ts
+++ b/packages/react-components/react-positioning/src/usePositioning.ts
@@ -11,9 +11,10 @@ import {
   getReactFiberFromNode,
   getBoundary,
   useCallbackRef,
-  getBasePlacement,
+  parsePopperPlacement,
 } from './utils/index';
-import type { PopperVirtualElement, PopperOptions, PositioningProps } from './types';
+import type { PositioningVirtualElement, PositioningOptions, PositioningProps } from './types';
+import { getPopperOffset } from './utils/getPopperOffset';
 
 type PopperInstance = PopperJs.Instance & { isFirstRun?: boolean };
 
@@ -59,7 +60,7 @@ function hasAutofocusFilter(node: Node) {
  * A callback is used there intentionally as some of Popper.js modifiers require DOM nodes (targer, container, arrow)
  * that can't be resolved properly during an initial rendering.
  */
-function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: React.MutableRefObject<string>) {
+function usePopperOptions(options: PositioningOptions, popperOriginalPositionRef: React.MutableRefObject<string>) {
   const {
     align,
     arrowPadding,
@@ -84,7 +85,7 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea
       offset
         ? {
             name: 'offset',
-            options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
+            options: { offset: isRtl ? applyRtlToOffset(getPopperOffset(offset)) : getPopperOffset(offset) },
           }
         : null,
     [offset, isRtl],
@@ -188,7 +189,7 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea
             const overflow = PopperJs.detectOverflow(state, modifierOptions);
             const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
             const { width, height } = state.rects.popper;
-            const basePlacement = getBasePlacement(state.placement);
+            const basePlacement = parsePopperPlacement(state.placement).basePlacement;
 
             const widthProp: keyof PopperJs.SideObject = basePlacement === 'left' ? 'left' : 'right';
             const heightProp: keyof PopperJs.SideObject = basePlacement === 'top' ? 'top' : 'bottom';
@@ -230,7 +231,7 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea
           phase: 'main',
           requiresIfExists: ['offset', 'preventOverflow', 'flip'],
           fn({ state }: PopperJs.ModifierArguments<{}>) {
-            const basePlacement = getBasePlacement(state.placement);
+            const basePlacement = parsePopperPlacement(state.placement).basePlacement;
             switch (basePlacement) {
               case 'bottom':
                 state.modifiersData.popperOffsets!.y -= state.rects.reference.height;
@@ -284,7 +285,7 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
  *   to avoid focus jumps
  */
-export function usePopper(
+export function usePositioning(
   options: UsePopperOptions = {},
 ): {
   // React refs are supposed to be contravariant
@@ -370,15 +371,19 @@ export function usePopper(
   const arrowRef = useCallbackRef<HTMLElement | null>(null, handlePopperUpdate, true);
 
   // Stores external target from options.target or setTarget
-  const overrideTargetRef = useCallbackRef<HTMLElement | PopperVirtualElement | null>(null, handlePopperUpdate, true);
+  const overrideTargetRef = useCallbackRef<HTMLElement | PositioningVirtualElement | null>(
+    null,
+    handlePopperUpdate,
+    true,
+  );
 
   React.useImperativeHandle(
-    options.popperRef,
+    options.positioningRef,
     () => ({
       updatePosition: () => {
         popperInstanceRef.current?.update();
       },
-      setTarget: (target: HTMLElement | PopperVirtualElement) => {
+      setTarget: (target: HTMLElement | PositioningVirtualElement) => {
         if (options.target && process.env.NODE_ENV !== 'production') {
           const err = new Error();
           // eslint-disable-next-line no-console
diff --git a/packages/react-components/react-positioning/src/usePopperMouseTarget.ts b/packages/react-components/react-positioning/src/usePositioningMouseTarget.ts
similarity index 75%
rename from packages/react-components/react-positioning/src/usePopperMouseTarget.ts
rename to packages/react-components/react-positioning/src/usePositioningMouseTarget.ts
index 8fd292613484c..049186f3cc451 100644
--- a/packages/react-components/react-positioning/src/usePopperMouseTarget.ts
+++ b/packages/react-components/react-positioning/src/usePositioningMouseTarget.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createVirtualElementFromClick } from './createVirtualElementFromClick';
-import * as PopperJs from '@popperjs/core';
+import { PositioningVirtualElement } from './types';
 
 /**
  * A state hook that manages a popper virtual element from mouseevents.
@@ -10,8 +10,10 @@ import * as PopperJs from '@popperjs/core';
  * @param initialState - initializes a user provided state similare to useState
  * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
  */
-export const usePopperMouseTarget = (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement)) => {
-  const [virtualElement, setVirtualElement] = React.useState<PopperJs.VirtualElement | undefined>(initialState);
+export const usePositioningMouseTarget = (
+  initialState?: PositioningVirtualElement | (() => PositioningVirtualElement),
+) => {
+  const [virtualElement, setVirtualElement] = React.useState<PositioningVirtualElement | undefined>(initialState);
 
   const setVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => {
     if (event === undefined || event === null) {
@@ -28,7 +30,7 @@ export const usePopperMouseTarget = (initialState?: PopperJs.VirtualElement | ((
 
     if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
-      console.error('usePopperMouseTarget should only be used with MouseEvent');
+      console.error('usePositioningMouseTarget should only be used with MouseEvent');
     }
 
     const contextTarget = createVirtualElementFromClick(mouseevent);
diff --git a/packages/react-components/react-positioning/src/utils/fromPopperPlacement.test.ts b/packages/react-components/react-positioning/src/utils/fromPopperPlacement.test.ts
new file mode 100644
index 0000000000000..81485ab7d6b42
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/fromPopperPlacement.test.ts
@@ -0,0 +1,34 @@
+import { fromPopperPlacement } from './fromPopperPlacement';
+import type { Placement } from '@popperjs/core';
+
+describe('fromPopperPlacement', () => {
+  it.each([
+    //[align, position, placement]
+    ['top-start', 'start', 'above'],
+    ['top', undefined, 'above'],
+    ['top-end', 'end', 'above'],
+    ['bottom-start', 'start', 'below'],
+    ['bottom', undefined, 'below'],
+    ['bottom-end', 'end', 'below'],
+    ['left-start', 'top', 'before'],
+    ['left', undefined, 'before'],
+    ['left-end', 'bottom', 'before'],
+    ['right-start', 'top', 'after'],
+    ['right', undefined, 'after'],
+    ['right-end', 'bottom', 'after'],
+    ['top', undefined, 'above'],
+    ['bottom', undefined, 'below'],
+    ['left', undefined, 'before'],
+    ['right', undefined, 'after'],
+  ])(
+    'should use placement %s and return position: %s and alignment: %s',
+    (placement, expectedAlignment, expectedPosition) => {
+      // Act
+      const { position, alignment } = fromPopperPlacement(placement as Placement);
+
+      // Assert
+      expect(position).toEqual(expectedPosition);
+      expect(alignment).toEqual(expectedAlignment);
+    },
+  );
+});
diff --git a/packages/react-components/react-positioning/src/utils/fromPopperPlacement.ts b/packages/react-components/react-positioning/src/utils/fromPopperPlacement.ts
new file mode 100644
index 0000000000000..0f6029e462ce7
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/fromPopperPlacement.ts
@@ -0,0 +1,36 @@
+import type { Variation as PopperAlignment, Placement } from '@popperjs/core';
+import type { Alignment, Position } from '../types';
+import { parsePopperPlacement } from './parsePopperPlacement';
+
+const positionMap = {
+  top: 'above',
+  bottom: 'below',
+  right: 'after',
+  left: 'before',
+} as const;
+
+const getAlignmentMap = (position: Position): Record<PopperAlignment, Alignment> => {
+  if (position === 'above' || position === 'below') {
+    return {
+      start: 'start',
+      end: 'end',
+    };
+  }
+
+  return {
+    start: 'top',
+    end: 'bottom',
+  };
+};
+
+/**
+ * Maps Popper.js placement to positioning values
+ * @see positioningHelper.test.ts for expected placement values
+ */
+export const fromPopperPlacement = (placement: Placement): { position: Position; alignment?: Alignment } => {
+  const { basePlacement, alignment: popperAlignment } = parsePopperPlacement(placement);
+  const position = positionMap[basePlacement];
+  const alignment = popperAlignment && getAlignmentMap(position)[popperAlignment];
+
+  return { position, alignment };
+};
diff --git a/packages/react-components/react-positioning/src/utils/getBasePlacement.test.ts b/packages/react-components/react-positioning/src/utils/getBasePlacement.test.ts
deleted file mode 100644
index 505bf3756ab03..0000000000000
--- a/packages/react-components/react-positioning/src/utils/getBasePlacement.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as PopperJs from '@popperjs/core';
-import { getBasePlacement } from './getBasePlacement';
-
-describe('getBasePlacement', () => {
-  it.each([
-    ['top', 'top'],
-    ['bottom', 'bottom'],
-    ['right', 'right'],
-    ['left', 'left'],
-    ['top-start', 'top'],
-    ['top-end', 'top'],
-    ['bottom-start', 'bottom'],
-    ['bottom-end', 'bottom'],
-    ['right-start', 'right'],
-    ['right-end', 'right'],
-    ['left-start', 'left'],
-    ['left-end', 'left'],
-  ])('should return %s from %s', (placement, basePlacement) => {
-    expect(getBasePlacement((placement as unknown) as PopperJs.Placement)).toEqual(basePlacement);
-  });
-});
diff --git a/packages/react-components/react-positioning/src/utils/getBasePlacement.ts b/packages/react-components/react-positioning/src/utils/getBasePlacement.ts
deleted file mode 100644
index 419d9b6fd5ab3..0000000000000
--- a/packages/react-components/react-positioning/src/utils/getBasePlacement.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as PopperJs from '@popperjs/core';
-
-/**
- * Returns the base placement value
- * @param placement - the popper placement (i.e. bottom-start)
- *
- * @returns bottom-start -> bottom
- */
-export function getBasePlacement(placement: PopperJs.Placement): PopperJs.BasePlacement {
-  return placement.split('-')[0] as PopperJs.BasePlacement;
-}
diff --git a/packages/react-components/react-positioning/src/utils/getPopperOffset.test.ts b/packages/react-components/react-positioning/src/utils/getPopperOffset.test.ts
new file mode 100644
index 0000000000000..f87a0b3fcb8ca
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/getPopperOffset.test.ts
@@ -0,0 +1,65 @@
+import { OffsetFunction } from '../types';
+import type { Rect } from '@popperjs/core';
+import { PopperOffsetFunction, getPopperOffset } from './getPopperOffset';
+
+describe('getPopperOffset', () => {
+  it('should ignore object offsets', () => {
+    const transformedOffset = getPopperOffset({ crossAxis: 10, mainAxis: 10 });
+    expect(transformedOffset).toEqual([10, 10]);
+  });
+
+  it('should ignore number offsets', () => {
+    const transformedOffset = getPopperOffset(10);
+    expect(transformedOffset).toEqual([0, 10]);
+  });
+
+  it('should keep function offset as function', () => {
+    const dummyRect: Rect = { x: 0, y: 0, width: 0, height: 0 };
+    const offset = { crossAxis: 10, mainAxis: 10 };
+    const transformedOffset = getPopperOffset(() => offset) as PopperOffsetFunction;
+    expect(transformedOffset({ popper: dummyRect, reference: dummyRect, placement: 'top' })).toEqual([
+      offset.crossAxis,
+      offset.mainAxis,
+    ]);
+  });
+
+  it('should transform placement argument in function offset', () => {
+    const dummyRect: Rect = { x: 0, y: 0, width: 0, height: 0 };
+    const offsetFn: OffsetFunction = ({ position, alignment }) => {
+      if (position === 'above' && alignment === 'start') {
+        return 1;
+      }
+
+      return -1;
+    };
+    const transformedOffset = getPopperOffset(offsetFn) as PopperOffsetFunction;
+    expect(transformedOffset({ popper: dummyRect, reference: dummyRect, placement: 'top-start' })).toEqual([0, 1]);
+    expect(transformedOffset({ popper: dummyRect, reference: dummyRect, placement: 'bottom-end' })).toEqual([0, -1]);
+  });
+
+  it('should rename popper property to positionedRect', () => {
+    const dummyRect: Rect = { x: 0, y: 0, width: 0, height: 0 };
+    const offsetFn: OffsetFunction = ({ positionedRect }) => {
+      if (positionedRect === dummyRect) {
+        return 1;
+      }
+
+      return -1;
+    };
+    const transformedOffset = getPopperOffset(offsetFn) as PopperOffsetFunction;
+    expect(transformedOffset({ popper: dummyRect, reference: dummyRect, placement: 'top-start' })).toEqual([0, 1]);
+  });
+
+  it('should rename reference property to targetRect', () => {
+    const dummyRect: Rect = { x: 0, y: 0, width: 0, height: 0 };
+    const offsetFn: OffsetFunction = ({ targetRect }) => {
+      if (targetRect === dummyRect) {
+        return 1;
+      }
+
+      return -1;
+    };
+    const transformedOffset = getPopperOffset(offsetFn) as PopperOffsetFunction;
+    expect(transformedOffset({ popper: dummyRect, reference: dummyRect, placement: 'top-start' })).toEqual([0, 1]);
+  });
+});
diff --git a/packages/react-components/react-positioning/src/utils/getPopperOffset.ts b/packages/react-components/react-positioning/src/utils/getPopperOffset.ts
new file mode 100644
index 0000000000000..ff21a27561b24
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/getPopperOffset.ts
@@ -0,0 +1,55 @@
+import type { Offset } from '../types';
+import type { Rect, Placement } from '@popperjs/core';
+import { fromPopperPlacement } from './fromPopperPlacement';
+/**
+ * Type taken from Popper since it is not exported
+ */
+export type PopperOffsetValue = [number | null | undefined, number | null | undefined];
+
+/**
+ * Type taken from Popper since it is not exported
+ */
+export type PopperOffset = PopperOffsetValue | PopperOffsetFunction;
+
+/**
+ * Type taken from Popper.js since it is not exported
+ */
+export type PopperOffsetFunctionParam = {
+  popper: Rect;
+  reference: Rect;
+  placement: Placement;
+};
+
+/**
+ * Type taken from Popper.js since it is not exported
+ */
+export type PopperOffsetFunction = (args: { popper: Rect; reference: Rect; placement: Placement }) => PopperOffsetValue;
+
+/**
+ * Shim to transform offset values from this library to Popper.js
+ * @param rawOffset Offset from this library
+ * @returns An offset value compatible with Popper.js
+ */
+export function getPopperOffset(rawOffset: Offset | undefined): PopperOffsetValue | PopperOffsetFunction | undefined {
+  if (rawOffset === undefined || rawOffset === null) {
+    return rawOffset;
+  }
+
+  if (typeof rawOffset === 'number') {
+    return [0, rawOffset];
+  }
+
+  if (typeof rawOffset === 'object') {
+    return [rawOffset.crossAxis, rawOffset.mainAxis];
+  }
+
+  return ({ popper, reference, placement }) => {
+    const { position, alignment } = fromPopperPlacement(placement);
+    const computedOffset = rawOffset({ positionedRect: popper, targetRect: reference, position, alignment });
+    if (typeof computedOffset === 'number') {
+      return [0, computedOffset];
+    }
+
+    return [computedOffset.crossAxis, computedOffset.mainAxis];
+  };
+}
diff --git a/packages/react-components/react-positioning/src/utils/index.ts b/packages/react-components/react-positioning/src/utils/index.ts
index 403f4a058ad62..17768c481a875 100644
--- a/packages/react-components/react-positioning/src/utils/index.ts
+++ b/packages/react-components/react-positioning/src/utils/index.ts
@@ -1,4 +1,3 @@
-export * from './getBasePlacement';
 export * from './getBoundary';
 export * from './getReactFiberFromNode';
 export * from './getScrollParent';
@@ -6,3 +5,4 @@ export * from './mergeArrowOffset';
 export * from './positioningHelper';
 export * from './resolvePositioningShorthand';
 export * from './useCallbackRef';
+export * from './parsePopperPlacement';
diff --git a/packages/react-components/react-positioning/src/utils/mergeArrowOffset.test.ts b/packages/react-components/react-positioning/src/utils/mergeArrowOffset.test.ts
index 8c04e24583595..46869d03476c0 100644
--- a/packages/react-components/react-positioning/src/utils/mergeArrowOffset.test.ts
+++ b/packages/react-components/react-positioning/src/utils/mergeArrowOffset.test.ts
@@ -1,37 +1,63 @@
 import { mergeArrowOffset } from './mergeArrowOffset';
-import type { Offset } from '../types';
+import type { OffsetFunction, OffsetObject } from '../types';
 
 describe('mergeArrowOffset', () => {
   it.each([null, undefined])('should return arrow offset when user offset is %s', userOffset => {
-    expect(mergeArrowOffset(userOffset, 1)).toEqual([0, 1]);
+    expect(mergeArrowOffset(userOffset, 1)).toEqual({ mainAxis: 1 });
   });
 
-  it.each([
+  const cases = [
     [
-      [0, 0],
-      [0, 1],
+      { crossAxis: 0, mainAxis: 0 },
+      { crossAxis: 0, mainAxis: 1 },
     ],
     [
-      [0, 1],
-      [0, 2],
+      { crossAxis: 0, mainAxis: 1 },
+      { crossAxis: 0, mainAxis: 2 },
     ],
     [
-      [0, undefined],
-      [0, 1],
+      { crossAxis: 0, mainAxis: undefined },
+      { crossAxis: 0, mainAxis: 1 },
     ],
     [
-      [0, null],
-      [0, 1],
+      { crossAxis: 0, mainAxis: null },
+      { crossAxis: 0, mainAxis: 1 },
     ],
     [
-      [undefined, 0],
-      [undefined, 1],
+      { crossAxis: undefined, mainAxis: 0 },
+      { crossAxis: undefined, mainAxis: 1 },
     ],
     [
-      [null, 0],
-      [null, 1],
+      { crossAxis: null, mainAxis: 0 },
+      { crossAxis: null, mainAxis: 1 },
     ],
-  ])('should return arrow offset when user offset is %s', (userOffset, expectedOffset) => {
-    expect(mergeArrowOffset((userOffset as unknown) as Offset, 1)).toEqual(expectedOffset);
+  ] as const;
+
+  it.each(cases)('should return arrow offset when user offset object is %s', (userOffset, expectedOffset) => {
+    const mergedOffsetObject = mergeArrowOffset(userOffset as OffsetObject, 1) as OffsetObject;
+
+    expect(mergedOffsetObject).toEqual(expectedOffset);
+  });
+
+  it.each(cases)('should return arrow offset when user offset function returns %s', (userOffset, expectedOffset) => {
+    const offsetFn = () => userOffset;
+    const mergedOffsetFn = mergeArrowOffset(offsetFn as OffsetFunction, 1) as OffsetFunction;
+
+    expect(
+      mergedOffsetFn({
+        positionedRect: { height: 0, x: 0, y: 0, width: 0 },
+        position: 'above',
+        alignment: 'start',
+        targetRect: { height: 0, x: 0, y: 0, width: 0 },
+      }),
+    ).toEqual(expectedOffset);
+  });
+
+  it.each(cases)('should return arrow offset when user offset number shorthand is %s', (userOffset, expectedOffset) => {
+    const shorthand = userOffset.mainAxis;
+    const mergedOffset = mergeArrowOffset(shorthand, 1) as OffsetObject;
+
+    const expectedOffsetWithoutCrossAxis = { mainAxis: expectedOffset.mainAxis };
+    expect(mergedOffset).toEqual(expectedOffsetWithoutCrossAxis);
   });
 });
diff --git a/packages/react-components/react-positioning/src/utils/mergeArrowOffset.ts b/packages/react-components/react-positioning/src/utils/mergeArrowOffset.ts
index c72e6a1f6fff6..351b1295b74e4 100644
--- a/packages/react-components/react-positioning/src/utils/mergeArrowOffset.ts
+++ b/packages/react-components/react-positioning/src/utils/mergeArrowOffset.ts
@@ -1,4 +1,4 @@
-import type { Offset } from '../types';
+import type { Offset, OffsetObject } from '../types';
 
 /**
  * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
@@ -9,33 +9,28 @@ import type { Offset } from '../types';
  * @returns User offset augmented with arrow height
  */
 export function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset {
-  let offsetWithArrow = userOffset;
-  if (!userOffset) {
-    return [0, arrowHeight];
+  if (typeof userOffset === 'number') {
+    return addArrowOffset(userOffset, arrowHeight);
   }
 
-  if (Array.isArray(offsetWithArrow)) {
-    setArrowOffset(offsetWithArrow, arrowHeight);
-    return offsetWithArrow;
+  if (typeof userOffset === 'object' && userOffset !== null) {
+    return addArrowOffset(userOffset, arrowHeight);
   }
 
-  if (typeof offsetWithArrow === 'function') {
-    const userOffsetFn = offsetWithArrow;
-    offsetWithArrow = offsetParams => {
-      const offset = userOffsetFn(offsetParams);
-      setArrowOffset(offset, arrowHeight);
-      return offset;
+  if (typeof userOffset === 'function') {
+    return offsetParams => {
+      const offset = userOffset(offsetParams);
+      return addArrowOffset(offset, arrowHeight);
     };
   }
 
-  // This should never happen
-  return [0, 0] as never;
+  return { mainAxis: arrowHeight };
 }
 
-const setArrowOffset = (offset: [number | null | undefined, number | null | undefined], arrowHeight: number) => {
-  if (offset[1] !== null && offset[1] !== undefined) {
-    offset[1] += arrowHeight;
-  } else {
-    offset[1] = arrowHeight;
+const addArrowOffset = (offset: OffsetObject | number, arrowHeight: number): OffsetObject => {
+  if (typeof offset === 'number') {
+    return { mainAxis: offset + arrowHeight };
   }
+
+  return { ...offset, mainAxis: (offset.mainAxis ?? 0) + arrowHeight };
 };
diff --git a/packages/react-components/react-positioning/src/utils/parsePopperPlacement.ts b/packages/react-components/react-positioning/src/utils/parsePopperPlacement.ts
new file mode 100644
index 0000000000000..a61f71375f0a2
--- /dev/null
+++ b/packages/react-components/react-positioning/src/utils/parsePopperPlacement.ts
@@ -0,0 +1,15 @@
+import type { BasePlacement, Placement, Variation } from '@popperjs/core';
+
+/**
+ * Parses Popper placement and returns the different components
+ * @param placement - the Popper.js placement (i.e. bottom-start)
+ *
+ * @returns side and alignment components of the placement
+ */
+export function parsePopperPlacement(placement: Placement): { basePlacement: BasePlacement; alignment: Variation } {
+  const tokens = placement.split('-');
+  return {
+    basePlacement: tokens[0] as BasePlacement,
+    alignment: tokens[1] as Variation,
+  };
+}
diff --git a/packages/react-components/react-positioning/src/utils/positioningHelper.test.ts b/packages/react-components/react-positioning/src/utils/positioningHelper.test.ts
index f8fa611a4cc5e..c0e6ee74eb99a 100644
--- a/packages/react-components/react-positioning/src/utils/positioningHelper.test.ts
+++ b/packages/react-components/react-positioning/src/utils/positioningHelper.test.ts
@@ -1,5 +1,6 @@
 import { getPlacement, applyRtlToOffset } from './positioningHelper';
-import type { Alignment, Position, OffsetFunction, OffsetFunctionParam } from '../types';
+import type { Alignment, Position } from '../types';
+import { PopperOffsetFunction, PopperOffsetFunctionParam } from './getPopperOffset';
 
 describe('getPlacement', () => {
   it.each([
@@ -42,10 +43,10 @@ describe('applyRtlOffset', () => {
 
   it('flips an axis value RTL for a function', () => {
     // Arrange
-    const offsetFn: OffsetFunction = () => [10, 10];
-    const flippedFn = applyRtlToOffset(offsetFn) as OffsetFunction;
+    const offsetFn: PopperOffsetFunction = () => [10, 10];
+    const flippedFn = applyRtlToOffset(offsetFn) as PopperOffsetFunction;
 
     // Assert
-    expect(flippedFn(({} as unknown) as OffsetFunctionParam)).toEqual([-10, 10]);
+    expect(flippedFn(({} as unknown) as PopperOffsetFunctionParam)).toEqual([-10, 10]);
   });
 });
diff --git a/packages/react-components/react-positioning/src/utils/positioningHelper.ts b/packages/react-components/react-positioning/src/utils/positioningHelper.ts
index 19e9a13866ed1..cc7fd160e58f2 100644
--- a/packages/react-components/react-positioning/src/utils/positioningHelper.ts
+++ b/packages/react-components/react-positioning/src/utils/positioningHelper.ts
@@ -1,5 +1,6 @@
 import * as PopperJs from '@popperjs/core';
-import type { Alignment, Offset, OffsetFunction, OffsetFunctionParam, Position } from '../types';
+import type { Alignment, Position } from '../types';
+import { PopperOffset, PopperOffsetFunction, PopperOffsetFunctionParam } from './getPopperOffset';
 
 type PlacementPosition = 'top' | 'bottom' | 'left' | 'right';
 type PlacementAlign = 'start' | 'end' | ''; // '' represents center
@@ -42,7 +43,7 @@ export const getPlacement = (align?: Alignment, position?: Position, rtl?: boole
   return computedPosition || ('auto' as PopperJs.Placement);
 };
 
-export const applyRtlToOffset = (offset: Offset | undefined): Offset | undefined => {
+export const applyRtlToOffset = (offset: PopperOffset | undefined): PopperOffset | undefined => {
   if (typeof offset === 'undefined') {
     return undefined;
   }
@@ -53,5 +54,5 @@ export const applyRtlToOffset = (offset: Offset | undefined): Offset | undefined
     return offset;
   }
 
-  return ((param: OffsetFunctionParam) => applyRtlToOffset(offset(param))) as OffsetFunction;
+  return ((param: PopperOffsetFunctionParam) => applyRtlToOffset(offset(param))) as PopperOffsetFunction;
 };
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx
index c0034dbbf5ee4..50f2313fe70af 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
+import { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
 import {
   applyTriggerPropsToChildren,
@@ -81,17 +81,17 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
 
   state.content.id = useId('tooltip-', state.content.id);
 
-  const popperOptions = {
+  const positioningOptions = {
     enabled: state.visible,
     arrowPadding: 2 * tooltipBorderRadius,
     position: 'above' as const,
     align: 'center' as const,
-    offset: [0, 4] as [number, number],
+    offset: 4,
     ...resolvePositioningShorthand(state.positioning),
   };
 
   if (state.withArrow) {
-    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeight);
+    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
   }
 
   const {
@@ -102,7 +102,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
     targetRef: React.MutableRefObject<unknown>;
     containerRef: React.MutableRefObject<HTMLDivElement>;
     arrowRef: React.MutableRefObject<HTMLDivElement>;
-  } = usePopper(popperOptions);
+  } = usePositioning(positioningOptions);
 
   state.content.ref = useMergedRefs(state.content.ref, containerRef);
   state.arrowRef = arrowRef;
@@ -216,7 +216,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
     ...triggerAriaProps,
     ...child?.props,
     // If the target prop is not provided, attach targetRef to the trigger element's ref prop
-    ref: popperOptions.target === undefined ? childTargetRef : child?.ref,
+    ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,
     onPointerEnter: useMergedEventCallbacks(child?.props?.onPointerEnter, onEnterTrigger),
     onPointerLeave: useMergedEventCallbacks(child?.props?.onPointerLeave, onLeaveTrigger),
     onFocus: useMergedEventCallbacks(child?.props?.onFocus, onEnterTrigger),