Fixing merge conflicts.

.github/CODEOWNERS

@@ -142,7 +142,7 @@ packages/react-menu/ @microsoft/teams-prg
 packages/react-popover/ @microsoft/teams-prg
 packages/react-portal/ @microsoft/teams-prg
 packages/react-provider/ @microsoft/teams-prg
-packages/react-radio/ @microsoft/cxe-prg
+packages/react-radio/ @microsoft/cxe-red
 packages/react-slider/ @microsoft/cxe-red @khmakoto @ecraig12345
 packages/react-switch/ @microsoft/cxe-red @behowell @khmakoto @ecraig12345 @czearing
 packages/react-text/ @microsoft/cxe-prg

apps/pr-deploy-site/just.config.ts

@@ -26,7 +26,6 @@ const dependencies = [
   '@fluentui/react-charting',
   '@fluentui/react-components',
   '@fluentui/react-experiments',
-  '@fluentui/react-input',
   '@fluentui/web-components',
   'perf-test',
   'theming-designer',

apps/pr-deploy-site/pr-deploy-site.js

@@ -54,12 +54,6 @@ var siteInfo = [
     icon: 'BarChart4',
     title: 'Charting',
   },
-  {
-    package: '@fluentui/react-input',
-    link: './react-input/storybook/index.html',
-    icon: 'TextField',
-    title: 'Input',
-  },
   {
     package: 'theming-designer',
     link: './theming-designer/index.html',

apps/vr-tests/src/stories/Badge.stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Badge, BadgeCommons } from '@fluentui/react-badge';
 import { Circle12Regular } from '@fluentui/react-icons';
 import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-make-styles';
+import { tokens } from '@fluentui/react-theme';
 
 const badgeColors: BadgeCommons['color'][] = [
   'brand',
@@ -34,9 +35,9 @@ const useStyles = makeStyles({
     marginLeft: '10px',
   },
 
-  brandContainer: theme => ({
-    backgroundColor: theme.colorBrandBackgroundStatic,
-  }),
+  brandContainer: {
+    backgroundColor: tokens.colorBrandBackgroundStatic,
+  },
 });
 
 const BadgeAppearanceTemplate: React.FC<{ appearance: BadgeCommons['appearance'] }> = ({

apps/vr-tests/src/stories/MakeStyles.stories.tsx

@@ -1,33 +1,33 @@
 import { shorthands, mergeClasses, makeStyles } from '@fluentui/react-make-styles';
 import { FluentProvider } from '@fluentui/react-provider';
-import { webLightTheme } from '@fluentui/react-theme';
+import { tokens, webLightTheme } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener, { Steps } from 'screener-storybook/src/screener';
 
 const useStyles = makeStyles({
-  box: theme => ({
-    ...shorthands.border('5px', 'solid', theme.colorNeutralStroke1),
-    ...shorthands.borderLeft('20px', 'solid', theme.colorPaletteBlueBorder2),
+  box: {
+    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBlueBorder2),
 
-    backgroundColor: theme.colorNeutralBackground1,
-    color: theme.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
 
     ...shorthands.margin('5px'),
     ...shorthands.padding('5px'),
     paddingLeft: '50px',
-  }),
+  },
 
-  container: theme => ({
-    ...shorthands.border('5px', 'solid', theme.colorNeutralStroke1),
-    ...shorthands.borderLeft('20px', 'solid', theme.colorPaletteBlueBorder2),
+  container: {
+    ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
+    ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBlueBorder2),
 
     ...shorthands.margin('5px'),
     ...shorthands.padding('5px'),
-  }),
-  containerPrimary: theme => ({
-    borderLeftColor: theme.colorPaletteDarkOrangeBorder2,
-  }),
+  },
+  containerPrimary: {
+    borderLeftColor: tokens.colorPaletteDarkOrangeBorder2,
+  },
 
   provider: {
     marginLeft: '20px',