diff --git a/demo/index.html b/demo/index.html
index f655db7f2d4..559202c138e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="rooster-min.js"></script>
         <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>
diff --git a/demo/scripts/utils/cssMonitor.ts b/demo/scripts/utils/cssMonitor.ts
index bd0cf25b0f3..dcb09c25dae 100644
--- a/demo/scripts/utils/cssMonitor.ts
+++ b/demo/scripts/utils/cssMonitor.ts
@@ -1,4 +1,4 @@
-import { Stylesheet } from '@fluentui/merge-styles/lib/Stylesheet';
+import { Stylesheet } from '@fluentui/merge-styles';
 
 let isCssMonitorStarted: boolean = false;
 const activeWindows: Window[] = [];
diff --git a/index.html b/index.html
index daf62dcaad3..8befb4fc0e5 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="scripts/demo.js"></script>
     </body>
 </html>
diff --git a/package.json b/package.json
index 9dab173dd0d..8db4657e41e 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "publish": "node tools/build.js clean normalize buildcommonjs buildamd buildmjs dts pack packprod builddemo builddoc publish"
     },
     "devDependencies": {
-        "@fluentui/react": "^8.0.0",
+        "@fluentui/react": "8.122.3",
         "@microsoft/loader-load-themed-styles": "1.8.11",
         "@types/color": "3.0.0",
         "@types/dompurify": "2.2.3",
diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx
index 8b2c4d4cc57..a907ff8257f 100644
--- a/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx
+++ b/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@fluentui/react/lib/Utilities';
 import type { Emoji } from '../type/Emoji';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 /**
  * @internal
  * Emoji icon data
@@ -11,7 +11,7 @@ export interface EmojiIconProps {
     id: string;
     emoji: Emoji;
     strings: Record<string, string>;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
     onClick?: (e: React.MouseEvent<EventTarget>) => void;
     onMouseOver?: (e: React.MouseEvent<EventTarget>) => void;
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;
diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx
index 3c81f8f397b..e09bcd2d944 100644
--- a/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx
+++ b/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx
@@ -7,7 +7,7 @@ import { Icon } from '@fluentui/react/lib/Icon';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import type { EmojiFamilyKeys } from '../utils/emojiList';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 
 /**
  * @internal
@@ -18,7 +18,7 @@ export interface EmojiNavBarProps {
     currentSelected?: string;
     getTabId?: (selected: EmojiFamilyKeys) => string;
     strings: Record<string, string>;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
 }
 
 /**
diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx
index 50c855cd67a..157dec79444 100644
--- a/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx
+++ b/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx
@@ -11,6 +11,8 @@ import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { searchEmojis } from '../utils/searchEmojis';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { useTheme } from '@fluentui/react/lib/Theme';
+import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import type { EmojiFamilyKeys } from '../utils/emojiList';
 import type { EmojiIconProps } from './EmojiIcon';
 import type { EmojiNavBarProps } from './EmojiNavBar';
@@ -607,149 +609,152 @@ const calcPaneWidth = () => {
     return paneWidth.toString() + 'px';
 };
 
-const getEmojiPaneClassName = memoizeFunction((theme: Theme) => {
-    const palette = theme.palette;
-    return mergeStyleSets({
-        quickPicker: {
-            overflowY: 'hidden',
-            ':after': {
-                content: '',
-                position: 'absolute',
-                left: '0px',
-                top: '0px',
-                bottom: '0px',
-                right: '0px',
-                zIndex: 1,
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                borderColor: 'rgb(255, 255, 255)',
-                borderImage: 'initial',
-                outline: 'rgb(102, 102, 102) solid 1px',
+const getEmojiPaneClassName = memoizeFunction(
+    (theme: Theme): IProcessedStyleSet<EmojiPaneStyle> => {
+        const palette = theme.palette;
+        const styles: EmojiPaneStyle = {
+            quickPicker: {
+                overflowY: 'hidden',
+                ':after': {
+                    content: '',
+                    position: 'absolute',
+                    left: '0px',
+                    top: '0px',
+                    bottom: '0px',
+                    right: '0px',
+                    zIndex: 1,
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: 'rgb(255, 255, 255)',
+                    borderImage: 'initial',
+                    outline: 'rgb(102, 102, 102) solid 1px',
+                },
             },
-        },
 
-        tooltip: {
-            padding: '8px',
-        },
+            tooltip: {
+                padding: '8px',
+            },
 
-        emojiTextInput: {
-            padding: '6px',
-        },
+            emojiTextInput: {
+                padding: '6px',
+            },
 
-        partialList: {
-            maxHeight: calcMaxHeight(),
-            overflow: 'hidden',
-            overflowY: 'scroll',
-        },
+            partialList: {
+                maxHeight: calcMaxHeight(),
+                overflow: 'hidden',
+                overflowY: 'scroll',
+            },
 
-        fullListContent: {
-            width: calcPaneWidth(),
-        },
+            fullListContent: {
+                width: calcPaneWidth(),
+            },
 
-        fullListBody: {
-            maxHeight: calcMaxHeight(),
-            overflow: 'hidden',
-            overflowY: 'scroll',
-            height: calcMaxHeight(),
-        },
+            fullListBody: {
+                maxHeight: calcMaxHeight(),
+                overflow: 'hidden',
+                overflowY: 'scroll',
+                height: calcMaxHeight(),
+            },
 
-        fullList: {
-            position: 'relative',
-        },
+            fullList: {
+                position: 'relative',
+            },
 
-        roosterEmojiPane: {
-            padding: '1px',
-            background: palette.white,
-        },
+            roosterEmojiPane: {
+                padding: '1px',
+                background: palette.white,
+            },
 
-        emoji: {
-            fontSize: '18px',
-            width: '40px',
-            height: '40px',
-            border: '0',
-            position: 'relative',
-            background: palette.white,
-            transition: 'backgorund 0.5s ease-in-out',
-        },
+            emoji: {
+                fontSize: '18px',
+                width: '40px',
+                height: '40px',
+                border: '0',
+                position: 'relative',
+                background: palette.white,
+                transition: 'backgorund 0.5s ease-in-out',
+            },
 
-        emojiSelected: {
-            background: palette.neutralLight,
-        },
+            emojiSelected: {
+                background: palette.neutralLight,
+            },
 
-        navBar: {
-            top: '-1px',
-            zIndex: 10,
-            position: 'sticky',
-        },
+            navBar: {
+                top: '-1px',
+                zIndex: 10,
+                position: 'sticky',
+            },
 
-        navBarTooltip: {
-            display: 'inline-block',
-        },
+            navBarTooltip: {
+                display: 'inline-block',
+            },
 
-        navBarButton: {
-            height: '40px',
-            width: '40px',
-            border: '0',
-            borderBottom: 'solid 1px',
-            padding: 0,
-            marginBottom: 0,
-            display: 'inline-block',
-            color: palette.themeDark,
-            background: palette.white,
-            '&:hover': {
-                cursor: 'default',
+            navBarButton: {
+                height: '40px',
+                width: '40px',
+                border: '0',
+                borderBottom: 'solid 1px',
+                padding: 0,
+                marginBottom: 0,
+                display: 'inline-block',
+                color: palette.themeDark,
+                background: palette.white,
+                '&:hover': {
+                    cursor: 'default',
+                },
             },
-        },
 
-        selected: {
-            borderBottom: '2px solid',
-            borderBottomColor: palette.themeDark,
-        },
+            selected: {
+                borderBottom: '2px solid',
+                borderBottomColor: palette.themeDark,
+            },
 
-        statusBar: {
-            borderTop: 'solid 1px',
-            height: '50px',
-            overflow: 'hidden',
-            position: 'relative',
-            background: palette.white,
-        },
+            statusBar: {
+                borderTop: 'solid 1px',
+                height: '50px',
+                overflow: 'hidden',
+                position: 'relative',
+                background: palette.white,
+            },
 
-        statusBarIcon: {
-            padding: '4px',
-            fontSize: '25px',
-            display: 'inline-block',
-            fontStyle: 'normal',
-            fontWeight: 'normal',
-            lineHeight: '40px',
-        },
+            statusBarIcon: {
+                padding: '4px',
+                fontSize: '25px',
+                display: 'inline-block',
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                lineHeight: '40px',
+            },
 
-        statusBarDetailsContainer: {
-            padding: '0 4px',
-            lineHeight: '50px',
-            position: 'absolute',
-            display: 'inline-block',
-            left: '40px',
-            right: '0',
-            top: '0',
-        },
+            statusBarDetailsContainer: {
+                padding: '0 4px',
+                lineHeight: '50px',
+                position: 'absolute',
+                display: 'inline-block',
+                left: '40px',
+                right: '0',
+                top: '0',
+            },
 
-        statusBarDetails: {
-            fontWeight: 'bold',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        },
+            statusBarDetails: {
+                fontWeight: 'bold',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+            },
 
-        statusBarNoResultDetailsContainer: {
-            lineHeight: '50px',
-            position: 'absolute',
-            display: 'inline-block',
-            top: '0',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            left: '0',
-            padding: '0 8px',
-        },
-    });
-});
+            statusBarNoResultDetailsContainer: {
+                lineHeight: '50px',
+                position: 'absolute',
+                display: 'inline-block',
+                top: '0',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                left: '0',
+                padding: '0 8px',
+            },
+        };
+        return mergeStyleSets(styles);
+    }
+);
diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx
index 22b95434c3a..043a144978b 100644
--- a/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx
+++ b/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TooltipHost, TooltipOverflowMode } from '@fluentui/react/lib/Tooltip';
 import type { Emoji } from '../type/Emoji';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 /**
  * @internal
  * Emoji Status Bar data
@@ -11,7 +11,7 @@ export interface EmojiStatusBarProps {
     emoji: Emoji;
     strings: Record<string, string>;
     hasResult: boolean;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
 }
 
 const NO_SUGGESTIONS = 'emjDNoSuggetions';
diff --git a/packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts b/packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts
index 0b4c32f9606..d74596aee05 100644
--- a/packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts
+++ b/packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts
@@ -1,26 +1,25 @@
-import type { IStyleSet } from '@fluentui/react/lib/Styling';
 /**
  * @internal
  * EmojiPane Style classes
  */
 export interface EmojiPaneStyle {
-    quickPicker: IStyleSet;
-    tooltip: IStyleSet;
-    emojiTextInput: IStyleSet;
-    partialList: IStyleSet;
-    fullListContent: IStyleSet;
-    fullListBody: IStyleSet;
-    fullList: IStyleSet;
-    roosterEmojiPane: IStyleSet;
-    emoji: IStyleSet;
-    navBarButton: IStyleSet;
-    navBarTooltip: IStyleSet;
-    selected: IStyleSet;
-    navBar: IStyleSet;
-    statusBarDetails: IStyleSet;
-    statusBarDetailsContainer: IStyleSet;
-    statusBar: IStyleSet;
-    statusBarIcon: IStyleSet;
-    statusBarNoResultDetailsContainer: IStyleSet;
-    emojiSelected: IStyleSet;
+    quickPicker: Object;
+    tooltip: Object;
+    emojiTextInput: Object;
+    partialList: Object;
+    fullListContent: Object;
+    fullListBody: Object;
+    fullList: Object;
+    roosterEmojiPane: Object;
+    emoji: Object;
+    navBarButton: Object;
+    navBarTooltip: Object;
+    selected: Object;
+    navBar: Object;
+    statusBarDetails: Object;
+    statusBarDetailsContainer: Object;
+    statusBar: Object;
+    statusBarIcon: Object;
+    statusBarNoResultDetailsContainer: Object;
+    emojiSelected: Object;
 }
diff --git a/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx b/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx
index 0de2e7d2d44..8ccc33adfc5 100644
--- a/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx
+++ b/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx
@@ -3,6 +3,7 @@ import { CommandBar } from '@fluentui/react/lib/CommandBar';
 import { FocusZoneDirection } from '@fluentui/react/lib/FocusZone';
 import { getLocalizedString } from '../../common/utils/getLocalizedString';
 import { getObjectKeys } from 'roosterjs-content-model-dom';
+import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { moreCommands } from '../buttons/moreCommands';
 import type {
@@ -25,6 +26,8 @@ const rtlIcon = mergeStyles({
     transform: 'scaleX(-1)',
 });
 
+let iconInitialized = false;
+
 /**
  * The format ribbon component of roosterjs-react
  * @param props Properties of format ribbon component
@@ -35,6 +38,11 @@ export function Ribbon<T extends string>(props: RibbonProps<T>) {
     const [formatState, setFormatState] = React.useState<ContentModelFormatState | null>(null);
     const isRtl = dir == 'rtl';
 
+    if (!iconInitialized) {
+        iconInitialized = true;
+        initializeIcons();
+    }
+
     const onClick = React.useCallback(
         (_, item?: IContextualMenuItem) => {
             if (item) {
diff --git a/tools/buildTools/checkDependency.js b/tools/buildTools/checkDependency.js
index 60e7a7e05d3..e73a41b81f5 100644
--- a/tools/buildTools/checkDependency.js
+++ b/tools/buildTools/checkDependency.js
@@ -85,6 +85,7 @@ function findPackageName(filename) {
 const GlobalAllowedCrossPackageDependency = [
     'roosterjs-editor-types/lib/compatibleTypes',
     /@fluentui\/react(\/.*)?/,
+    /@fluentui\/font-icons-mdl2(\/.*)?/,
 ];
 
 function checkDependency() {
diff --git a/yarn.lock b/yarn.lock
index b003e590332..9e319cd6783 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -308,143 +308,153 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.50.0.tgz#9e93b850f0f3fa35f5fa59adfd03adae8488e484"
   integrity sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==
 
-"@fluentui/date-time-utilities@^8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/date-time-utilities/-/date-time-utilities-8.3.0.tgz#a51cd59ea327b948bdb76a083d9c42d95a71c98a"
-  integrity sha512-shSWwarh+ueDF22hIRL1T9bGA4epsP8QAIfYhpoK5ySr0Zg5RjqdNMM5IXzlTiXqE/LGe16CVrvyW2ksqfvQPg==
+"@fluentui/date-time-utilities@^8.6.9":
+  version "8.6.9"
+  resolved "https://registry.yarnpkg.com/@fluentui/date-time-utilities/-/date-time-utilities-8.6.9.tgz#97ff9b164aa45bf81fc145dd2e37751c5635c77f"
+  integrity sha512-dgOlVm4nXBWDLqijmvn4iAtyv1hVpQZjN6p0So74BW+7ASUTkQGe3lf8PHV/OjBiXfZa4qwONvmTQBGCheNU0w==
   dependencies:
-    "@fluentui/set-version" "^8.1.5"
+    "@fluentui/set-version" "^8.2.23"
     tslib "^2.1.0"
 
-"@fluentui/dom-utilities@^2.1.5":
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@fluentui/dom-utilities/-/dom-utilities-2.1.5.tgz#21ba77c8bfe64d15ffc16a8e055255bbb23600b2"
-  integrity sha512-OLDYV5ZGIiK/JXx/DFFib4vSa7PELvznbdAujDcX2wjt3V3Lt2N5ucv59JsVxk5LlwXjasUHJI2NZadagmnM6A==
+"@fluentui/dom-utilities@^2.3.9":
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/@fluentui/dom-utilities/-/dom-utilities-2.3.9.tgz#59b357cd9c20904b60f0867687002223b2e83a8f"
+  integrity sha512-8PPzv31VXnyMvZrzK7iSGPRx8piJjas0xV+qaNQ1tzAXHuTaLXPeADJK/gEDH1XA/e9Vaakb3lPUpRVa8tal+w==
   dependencies:
-    "@fluentui/set-version" "^8.1.5"
+    "@fluentui/set-version" "^8.2.23"
     tslib "^2.1.0"
 
-"@fluentui/font-icons-mdl2@^8.1.26":
-  version "8.1.26"
-  resolved "https://registry.yarnpkg.com/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.1.26.tgz#e74070e8ab91302539ccb23a05e0a6c792333e42"
-  integrity sha512-CmdyZ3QP5UCdyHrYwwtA2AlFyG2oG2aOav4A7quVZZ60gX/63tPUskcVK+UvB8f+zecOLBvaHFJIkTWL13fvvA==
+"@fluentui/font-icons-mdl2@^8.5.57":
+  version "8.5.57"
+  resolved "https://registry.yarnpkg.com/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.57.tgz#fc541e43d749baeb71a9a958b828fa49ecefa7ea"
+  integrity sha512-HYB+deey6wt6qHtTKdrhPhTZi7ZZVI2IwlguabK+22LzixgSdeJ0sg5Hhau5IKFwrn8ExEFOwfoaZ6KCSbcMwQ==
   dependencies:
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/style-utilities" "^8.5.8"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/style-utilities" "^8.11.6"
+    "@fluentui/utilities" "^8.15.19"
     tslib "^2.1.0"
 
-"@fluentui/foundation-legacy@^8.1.25":
-  version "8.1.25"
-  resolved "https://registry.yarnpkg.com/@fluentui/foundation-legacy/-/foundation-legacy-8.1.25.tgz#2c0c149c2ab037419458f71632504ad87a4b340e"
-  integrity sha512-keV/jdvUJAPFiMARrruvBGvXgix0kMbo+pfrdsbEFnQHs2o9m7Ha1ChsQCAkVmhv3DYrkb7shDG9R1eerPLJiw==
+"@fluentui/foundation-legacy@^8.4.23":
+  version "8.4.23"
+  resolved "https://registry.yarnpkg.com/@fluentui/foundation-legacy/-/foundation-legacy-8.4.23.tgz#18f06a119eb523a8334b987ad06428bf9c202232"
+  integrity sha512-lWFouH1+vku2LgKaZUhuBNyoXJ7DByUIMXHF7Osgq/miN8ewHt5uez8LuuSHDgCytxksCY4usCMIIL2zJD0I6w==
   dependencies:
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/style-utilities" "^8.5.8"
-    "@fluentui/utilities" "^8.5.0"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/style-utilities" "^8.11.6"
+    "@fluentui/utilities" "^8.15.19"
     tslib "^2.1.0"
 
-"@fluentui/keyboard-key@^0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@fluentui/keyboard-key/-/keyboard-key-0.3.5.tgz#af1273bbd8db3e7e08bf8ce8a303890d33d4d8b2"
-  integrity sha512-qPNPnRtkC92b8Zjx3mJ6+vRX+pdmbDYcXP8zXb2NJ/briAQXYmyqdjJLUl2riVBcAC4H3cL6dTKLR9VAyqhdYQ==
+"@fluentui/keyboard-key@^0.4.23":
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/@fluentui/keyboard-key/-/keyboard-key-0.4.23.tgz#ebaa87b1dcdfb2a9ac805c678f9520e9d9194c3c"
+  integrity sha512-9GXeyUqNJUdg5JiQUZeGPiKnRzMRi9YEUn1l9zq6X/imYdMhxHrxpVZS12129cBfgvPyxt9ceJpywSfmLWqlKA==
   dependencies:
     tslib "^2.1.0"
 
-"@fluentui/merge-styles@^8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/merge-styles/-/merge-styles-8.3.0.tgz#e27581dd43cbe1b5d54d7325e619924883dd0fd5"
-  integrity sha512-qI61vWnmSuZYopMfWbEkTuDmnedmOYmsphTwflG6zif1EPV6h5u3dDUfHnmHMahywNOLOv5MOa+zVU0SCEHSAg==
+"@fluentui/merge-styles@^8.6.13":
+  version "8.6.13"
+  resolved "https://registry.yarnpkg.com/@fluentui/merge-styles/-/merge-styles-8.6.13.tgz#c9168b39aa6952ef36318e4e5273f50a5529b023"
+  integrity sha512-IWgvi2CC+mcQ7/YlCvRjsmHL2+PUz7q+Pa2Rqk3a+QHN0V1uBvgIbKk5y/Y/awwDXy1yJHiqMCcDHjBNmS1d4A==
   dependencies:
-    "@fluentui/set-version" "^8.1.5"
+    "@fluentui/set-version" "^8.2.23"
     tslib "^2.1.0"
 
-"@fluentui/react-focus@^8.3.21":
-  version "8.3.21"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-8.3.21.tgz#01f3f9398719496fa1158c3f227cf855e4938e4e"
-  integrity sha512-MCPKvPiyifwAErjXyAAu9NWlhLEJOohcGf4y6GVKWlXi44oslSIfKQatUVrstFW83hbkcXHigDuBZmhdyTThVg==
+"@fluentui/react-focus@^8.9.20":
+  version "8.9.20"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-8.9.20.tgz#65ea82af728657147db75c46853197de9aa961e9"
+  integrity sha512-eOYKohP5v82jUAeEj7Mscqy5Tt4DhgTsVwf+cejj3AGhvLfFfmUbJFmVClooqXFdMgm1vvPGdub8SHA02REVkg==
   dependencies:
-    "@fluentui/keyboard-key" "^0.3.5"
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/style-utilities" "^8.5.8"
-    "@fluentui/utilities" "^8.5.0"
+    "@fluentui/keyboard-key" "^0.4.23"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/style-utilities" "^8.11.6"
+    "@fluentui/utilities" "^8.15.19"
     tslib "^2.1.0"
 
-"@fluentui/react-hooks@^8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-hooks/-/react-hooks-8.4.0.tgz#a4c75f97badc7d758abb36138c4e928d27842229"
-  integrity sha512-BI0lp+5rlabvXpV6uCEP+cCvCJy5srlrPZ2J63Jr1T+nWnn7CKJ5mgE2Uc+VYW9EoHRLJAFbrD0a9WYkXKZ3xA==
+"@fluentui/react-hooks@^8.8.16":
+  version "8.8.16"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-hooks/-/react-hooks-8.8.16.tgz#1843c44e51d332bbd464959967dbb9be92584b97"
+  integrity sha512-PQ1BeOp+99mdO0g7j6QLtChfXG1LxXeHG0q5CtUeD1OUGR+vUDK84h60sw7e7qU9sSmvPmHO7jn69Lg3CS+DXw==
   dependencies:
-    "@fluentui/react-window-provider" "^2.1.6"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/utilities" "^8.5.0"
+    "@fluentui/react-window-provider" "^2.2.28"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/utilities" "^8.15.19"
     tslib "^2.1.0"
 
-"@fluentui/react-window-provider@^2.1.6":
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-window-provider/-/react-window-provider-2.1.6.tgz#1e3d66842a6b1c724dcc3ee13d2bc0aa0d7028a8"
-  integrity sha512-Fr1THmtn/Kx95/WVXI1qIELX2VHpuGYVKWSpdgbpcmKukvk30h4JG6kKMGYPz3r7UeaTzpaeIw537A9CJ2hVMg==
+"@fluentui/react-portal-compat-context@^9.0.13":
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.13.tgz#98a8c78e214acc7bb25e5e750df378be42567d2d"
+  integrity sha512-N+c6Qs775jnr/4WIzsQuNaRu4v16fa+gGsOCzzU1bqxX0IR9BSjjO2oLGC6luaAOqlQP+JIwn/aumOIJICKXkA==
   dependencies:
-    "@fluentui/set-version" "^8.1.5"
+    "@swc/helpers" "^0.5.1"
+
+"@fluentui/react-window-provider@^2.2.28":
+  version "2.2.28"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz#6f1109a37f888ffba78cdf009772c642222132ed"
+  integrity sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==
+  dependencies:
+    "@fluentui/set-version" "^8.2.23"
     tslib "^2.1.0"
 
-"@fluentui/react@^8.0.0":
-  version "8.56.2"
-  resolved "https://registry.yarnpkg.com/@fluentui/react/-/react-8.56.2.tgz#6c6246f5c1a9a20cc2121e7db6bcdbf2da5f7d19"
-  integrity sha512-RMmto4/zExtfQf3r9ooQyqdC2lWSpNWQ9apvK464pW314BXWNMFO6E3mb8vDPjmfBzZ8yDYjrB0L2y6OO4ORDA==
-  dependencies:
-    "@fluentui/date-time-utilities" "^8.3.0"
-    "@fluentui/font-icons-mdl2" "^8.1.26"
-    "@fluentui/foundation-legacy" "^8.1.25"
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/react-focus" "^8.3.21"
-    "@fluentui/react-hooks" "^8.4.0"
-    "@fluentui/react-window-provider" "^2.1.6"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/style-utilities" "^8.5.8"
-    "@fluentui/theme" "^2.4.12"
-    "@fluentui/utilities" "^8.5.0"
+"@fluentui/react@8.122.3":
+  version "8.122.3"
+  resolved "https://registry.yarnpkg.com/@fluentui/react/-/react-8.122.3.tgz#b7d7c95b190a44d3c54340203290be4dac582c5d"
+  integrity sha512-XAffQFevT5+PI1fvhAO+2G7ozB5OLYIFEJGXzzpIIkIOPEbZwUMgDh/J93ajVdsBc3OOLaR+mEqaO8ed5Klutw==
+  dependencies:
+    "@fluentui/date-time-utilities" "^8.6.9"
+    "@fluentui/font-icons-mdl2" "^8.5.57"
+    "@fluentui/foundation-legacy" "^8.4.23"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/react-focus" "^8.9.20"
+    "@fluentui/react-hooks" "^8.8.16"
+    "@fluentui/react-portal-compat-context" "^9.0.13"
+    "@fluentui/react-window-provider" "^2.2.28"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/style-utilities" "^8.11.6"
+    "@fluentui/theme" "^2.6.64"
+    "@fluentui/utilities" "^8.15.19"
     "@microsoft/load-themed-styles" "^1.10.26"
     tslib "^2.1.0"
 
-"@fluentui/set-version@^8.1.5":
-  version "8.1.5"
-  resolved "https://registry.yarnpkg.com/@fluentui/set-version/-/set-version-8.1.5.tgz#68d3d8c7fbefba20b3d1aef71fcc730ca46dd353"
-  integrity sha512-AfaycaduWd/aErqEmrAUWpr2gpZrkaSe6D9noXhtVH3JlreRuFM78Ji1oE4f8cpWxSA/K5qb7BT6x4z4I2Bs+A==
+"@fluentui/set-version@^8.2.23":
+  version "8.2.23"
+  resolved "https://registry.yarnpkg.com/@fluentui/set-version/-/set-version-8.2.23.tgz#14032bc9a222a6e50a5cb166e1a39a527cfc69fd"
+  integrity sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==
   dependencies:
     tslib "^2.1.0"
 
-"@fluentui/style-utilities@^8.5.8":
-  version "8.5.8"
-  resolved "https://registry.yarnpkg.com/@fluentui/style-utilities/-/style-utilities-8.5.8.tgz#198512c3a710c71b814c5a0eba1e9f885f91a4e1"
-  integrity sha512-g6jUptGmkKrh0mDQBjKi+1wUNlJeRjpemavXmSBG+i+ZTn8PT/XjshLB9T9Q7FBriil0ccr6wBkPr11ElZC5gg==
+"@fluentui/style-utilities@^8.11.6":
+  version "8.11.6"
+  resolved "https://registry.yarnpkg.com/@fluentui/style-utilities/-/style-utilities-8.11.6.tgz#0a7c505d7b13b9671ca7b28ee7bd562789cf96a1"
+  integrity sha512-bVFu/ONP2+GZ/JzR6NhN7+1fuMHvi+LjOfgo21HQoDakY/KwFaitLiQBQFlRpbRUVcZXQDqe4Ur6EDFAlb2I7Q==
   dependencies:
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/theme" "^2.4.12"
-    "@fluentui/utilities" "^8.5.0"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/theme" "^2.6.64"
+    "@fluentui/utilities" "^8.15.19"
     "@microsoft/load-themed-styles" "^1.10.26"
     tslib "^2.1.0"
 
-"@fluentui/theme@^2.4.12":
-  version "2.4.12"
-  resolved "https://registry.yarnpkg.com/@fluentui/theme/-/theme-2.4.12.tgz#82181b786922aab142816af300f6e3f54ac83357"
-  integrity sha512-dlBmGOp3Ib08iP1F2rU8gb/DX/tsbdzNNFT0WqlO+1bjAVwnmn46xuDpsvGgMz0ZRYN4ZXfpvWkWqXpDnsHS9g==
+"@fluentui/theme@^2.6.64":
+  version "2.6.64"
+  resolved "https://registry.yarnpkg.com/@fluentui/theme/-/theme-2.6.64.tgz#6b8f1620ba1f217461441d9fab9ffd44325deb9c"
+  integrity sha512-cjzwPgq3Zsw4F6Xy7A7yN8WCeEXKTwk9lfJzEr5b00euJRuPMxkxesBbAWW43+/1l1eWVYmSm4GcEMDVD4BfXQ==
   dependencies:
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/set-version" "^8.1.5"
-    "@fluentui/utilities" "^8.5.0"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/set-version" "^8.2.23"
+    "@fluentui/utilities" "^8.15.19"
     tslib "^2.1.0"
 
-"@fluentui/utilities@^8.5.0":
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/utilities/-/utilities-8.5.0.tgz#07a2d9c1f41ca294e89a5a4f454479d51f86ff59"
-  integrity sha512-npuYmwQfCx2WggW0MHwKgpaSPdk62FtQLmw0zoCNdSNDDQ5u3lWKScwy7FR3Nn1jjL0CDaC9PnD8ults2iIeSg==
+"@fluentui/utilities@^8.15.19":
+  version "8.15.19"
+  resolved "https://registry.yarnpkg.com/@fluentui/utilities/-/utilities-8.15.19.tgz#2229d4c294d4d6b1eb618a8ea6d6ec05392c5962"
+  integrity sha512-20WoYz0wW7pkmur+7qxTwRfvkdAnHfylLdCYSm91WLupb0cwQ1wWZWIuyo+e0cjcvem1T9TC1+NjWs0kavTWBg==
   dependencies:
-    "@fluentui/dom-utilities" "^2.1.5"
-    "@fluentui/merge-styles" "^8.3.0"
-    "@fluentui/set-version" "^8.1.5"
+    "@fluentui/dom-utilities" "^2.3.9"
+    "@fluentui/merge-styles" "^8.6.13"
+    "@fluentui/react-window-provider" "^2.2.28"
+    "@fluentui/set-version" "^8.2.23"
     tslib "^2.1.0"
 
 "@humanwhocodes/config-array@^0.11.11":
@@ -610,6 +620,13 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
   integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
 
+"@swc/helpers@^0.5.1":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
 "@types/color-convert@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
@@ -6726,6 +6743,11 @@ tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tslint-eslint-rules@5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz#e488cc9181bf193fe5cd7bfca213a7695f1737b5"