feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/MenuItem.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuItem", {
+    enumerable: true,
+    get: function() {
+        return MenuItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useMenuItem = require("./useMenuItem");
+const _renderMenuItem = require("./renderMenuItem");
+const _useMenuItemStylesstyles = require("./useMenuItemStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const MenuItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMenuItem.useMenuItem_unstable)(props, ref);
+    (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuItemStyles_unstable')(state);
+    return (0, _renderMenuItem.renderMenuItem_unstable)(state);
+});
+MenuItem.displayName = 'MenuItem';

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItem_unstable(props, ref);\n\n  useMenuItemStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/MenuItem.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/MenuItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Additional descriptor to main content that creates a multiline layout\n   */\n  subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n  Pick<Partial<MenuItemSlots>, 'content'> & {\n    /**\n     * If the menu item is a trigger for a submenu\n     *\n     * @default false\n     */\n    hasSubmenu?: boolean;\n\n    /**\n     * Clicking on the menu item will not dismiss an open menu\n     *\n     * @default false\n     */\n    persistOnClick?: boolean;\n\n    disabled?: boolean;\n    /**\n     * @deprecated this property does nothing.\n     * disabled focusable is by default by simply using `disabled` property\n     */\n    disabledFocusable?: boolean;\n  };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MenuItem: function() {
+        return _MenuItem.MenuItem;
+    },
+    menuItemClassNames: function() {
+        return _useMenuItemStylesstyles.menuItemClassNames;
+    },
+    renderMenuItem_unstable: function() {
+        return _renderMenuItem.renderMenuItem_unstable;
+    },
+    useMenuItemBase_unstable: function() {
+        return _useMenuItem.useMenuItemBase_unstable;
+    },
+    useMenuItemStyles_unstable: function() {
+        return _useMenuItemStylesstyles.useMenuItemStyles_unstable;
+    },
+    useMenuItem_unstable: function() {
+        return _useMenuItem.useMenuItem_unstable;
+    }
+});
+const _MenuItem = require("./MenuItem");
+const _renderMenuItem = require("./renderMenuItem");
+const _useMenuItem = require("./useMenuItem");
+const _useMenuItemStylesstyles = require("./useMenuItemStyles.styles");

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/index.ts"],"sourcesContent":["export { MenuItem } from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\nexport { renderMenuItem_unstable } from './renderMenuItem';\nexport { useMenuItem_unstable, useMenuItemBase_unstable } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","useMenuItemBase_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAIRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/renderMenuItem.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderMenuItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderMenuItem_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderMenuItem_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.checkmark && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkmark, {}),
+            state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.subText, {})
+                ]
+            }),
+            state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {}),
+            state.submenuIndicator && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.submenuIndicator, {})
+        ]
+    });
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/renderMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState): JSXElement => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,OAAO,IAAA,WAAA,OACZ,gBAAA,EAACJ,MAAMI,OAAO,EAAA;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;YAGnCN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;YACjDP,MAAMQ,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/useCharacterSearch.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCharacterSearch", {
+    enumerable: true,
+    get: function() {
+        return useCharacterSearch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _menuListContext = require("../../contexts/menuListContext");
+const useCharacterSearch = (state, ref)=>{
+    'use no memo';
+    const setFocusByFirstCharacter = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.setFocusByFirstCharacter);
+    const { onKeyDown: originalOnKeyDown } = state.root;
+    state.root.onKeyDown = (e)=>{
+        var _e_key;
+        originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);
+        if (((_e_key = e.key) === null || _e_key === void 0 ? void 0 : _e_key.length) > 1) {
+            return;
+        }
+        if (ref.current) {
+            setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, ref.current);
+        }
+    };
+    return state;
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/useCharacterSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n  'use no memo';\n\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: originalOnKeyDown } = state.root;\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n    originalOnKeyDown?.(e);\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"names":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;;;;;+BAOaE;;;;;;;iEALU,QAAQ;iCACa,iCAAiC;AAItE,2BAA2B,CAACC,OAAsBC;IACvD;IAEA,MAAMC,+BAA2BJ,4CAAAA,EAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/useMenuItem.js

@@ -0,0 +1,176 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useMenuItemBase_unstable: function() {
+        return useMenuItemBase_unstable;
+    },
+    useMenuItem_unstable: function() {
+        return useMenuItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useCharacterSearch = require("./useCharacterSearch");
+const _menuTriggerContext = require("../../contexts/menuTriggerContext");
+const _reacticons = require("@fluentui/react-icons");
+const _menuListContext = require("../../contexts/menuListContext");
+const _menuContext = require("../../contexts/menuContext");
+const _reactaria = require("@fluentui/react-aria");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _menuSplitGroupContext = require("../../contexts/menuSplitGroupContext");
+const _useValidateNesting = require("../../utils/useValidateNesting");
+const ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
+const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
+const useMenuItem_unstable = (props, ref)=>{
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const state = useMenuItemBase_unstable(props, ref);
+    // Set default chevron icon
+    if (state.submenuIndicator) {
+        var _state_submenuIndicator;
+        var _children;
+        (_children = (_state_submenuIndicator = state.submenuIndicator).children) !== null && _children !== void 0 ? _children : _state_submenuIndicator.children = dir === 'rtl' ? /*#__PURE__*/ _react.createElement(ChevronLeftIcon, null) : /*#__PURE__*/ _react.createElement(ChevronRightIcon, null);
+    }
+    return state;
+};
+const useMenuItemBase_unstable = (props, ref)=>{
+    const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
+    const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
+    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
+    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
+        hasSubmenu
+    });
+    const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
+    useNotifySplitItemMultiline({
+        multiline: !!props.subText,
+        hasSubmenu
+    });
+    const innerRef = _react.useRef(null);
+    const dismissedWithKeyboardRef = _react.useRef(false);
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)(getValidateNestingComponentName(props.role));
+    const state = {
+        hasSubmenu,
+        disabled,
+        persistOnClick,
+        components: {
+            root: 'div',
+            icon: 'span',
+            checkmark: 'span',
+            submenuIndicator: 'span',
+            content: 'span',
+            secondaryContent: 'span',
+            subText: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
+            role: 'menuitem',
+            ...rest,
+            disabled: false,
+            disabledFocusable: disabled,
+            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
+            onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
+                var _props_onKeyDown;
+                (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+                if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Space || event.key === _keyboardkeys.Enter)) {
+                    dismissedWithKeyboardRef.current = true;
+                }
+            }),
+            onMouseMove: (0, _reactutilities.useEventCallback)((event)=>{
+                var _props_onMouseMove;
+                if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
+                    var _innerRef_current;
+                    (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
+                }
+                (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
+            }),
+            onClick: (0, _reactutilities.useEventCallback)((event)=>{
+                var _props_onClick;
+                if (!hasSubmenu && !persistOnClick) {
+                    setOpen(event, {
+                        open: false,
+                        keyboard: dismissedWithKeyboardRef.current,
+                        bubble: true,
+                        type: 'menuItemClick',
+                        event
+                    });
+                    dismissedWithKeyboardRef.current = false;
+                }
+                (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+            })
+        })), {
+            elementType: 'div'
+        }),
+        icon: _reactutilities.slot.optional(props.icon, {
+            renderByDefault: hasIcons,
+            elementType: 'span'
+        }),
+        checkmark: _reactutilities.slot.optional(props.checkmark, {
+            renderByDefault: hasCheckmarks,
+            elementType: 'span'
+        }),
+        submenuIndicator: _reactutilities.slot.optional(props.submenuIndicator, {
+            renderByDefault: hasSubmenu,
+            elementType: 'span'
+        }),
+        content: _reactutilities.slot.optional(props.content, {
+            renderByDefault: !!props.children,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        secondaryContent: _reactutilities.slot.optional(props.secondaryContent, {
+            elementType: 'span'
+        }),
+        subText: _reactutilities.slot.optional(props.subText, {
+            elementType: 'span'
+        })
+    };
+    (0, _useCharacterSearch.useCharacterSearch)(state, innerRef);
+    return state;
+};
+/**
+ * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
+ * Notify the parent MenuSplitGroup so that it can handle this case
+ */ const useNotifySplitItemMultiline = (options)=>{
+    const { hasSubmenu, multiline } = options;
+    const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
+    const { setMultiline } = (0, _menuSplitGroupContext.useMenuSplitGroupContext_unstable)();
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!isSplitItemTrigger) {
+            setMultiline(multiline);
+        }
+    }, [
+        setMultiline,
+        multiline,
+        isSplitItemTrigger
+    ]);
+};
+const useIconAndCheckmarkAlignment = (options)=>{
+    const { hasSubmenu } = options;
+    const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
+    const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
+    const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
+    return {
+        hasIcons: hasIcons && !isSplitItemTrigger,
+        hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
+    };
+};
+const getValidateNestingComponentName = (role)=>{
+    switch(role){
+        case 'menuitemcheckbox':
+            return 'MenuItemCheckbox';
+        case 'menuitemradio':
+            return 'MenuItemRadio';
+    }
+    return 'MenuItem';
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js

@@ -0,0 +1,305 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuItemClassNames: function() {
+        return menuItemClassNames;
+    },
+    useMenuItemStyles_unstable: function() {
+        return useMenuItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _index = require("../../selectable/index");
+const menuItemClassNames = {
+    root: 'fui-MenuItem',
+    icon: 'fui-MenuItem__icon',
+    checkmark: 'fui-MenuItem__checkmark',
+    submenuIndicator: 'fui-MenuItem__submenuIndicator',
+    content: 'fui-MenuItem__content',
+    secondaryContent: 'fui-MenuItem__secondaryContent',
+    subText: 'fui-MenuItem__subText'
+};
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rfoezjv", "r8lt3v0", {
+    r: [
+        ".rfoezjv{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
+        ".rfoezjv:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".rfoezjv:hover .fui-Icon-filled{display:inline;}",
+        ".rfoezjv:hover .fui-Icon-regular{display:none;}",
+        ".rfoezjv:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
+        ".rfoezjv:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}",
+        ".rfoezjv:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
+        ".rfoezjv:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}",
+        ".rfoezjv:focus{outline-style:none;}",
+        ".rfoezjv:focus-visible{outline-style:none;}",
+        ".rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r8lt3v0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
+        ".r8lt3v0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".r8lt3v0:hover .fui-Icon-filled{display:inline;}",
+        ".r8lt3v0:hover .fui-Icon-regular{display:none;}",
+        ".r8lt3v0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
+        ".r8lt3v0:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}",
+        ".r8lt3v0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
+        ".r8lt3v0:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}",
+        ".r8lt3v0:focus{outline-style:none;}",
+        ".r8lt3v0:focus-visible{outline-style:none;}",
+        ".r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.rfoezjv:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.rfoezjv:focus{outline-style:none;}.rfoezjv:focus-visible{outline-style:none;}.rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}",
+        "@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media (forced-colors: active){.r8lt3v0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r8lt3v0:focus{outline-style:none;}.r8lt3v0:focus-visible{outline-style:none;}.r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}",
+        "@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+    ]
+});
+const useContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ls86vo", "rpbc5dr", [
+    ".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}",
+    ".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"
+]);
+const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r12mwwux", "r1ewgu5j", [
+    ".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
+    ".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}",
+    ".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}",
+    ".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
+    ".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}",
+    ".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"
+]);
+const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ro9koqv", null, [
+    ".ro9koqv{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;flex-shrink:0;}"
+]);
+const useSubmenuIndicatorBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r9c34qo", null, [
+    ".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"
+]);
+const useSubtextBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rk2ppru", null, [
+    ".rk2ppru{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);color:var(--colorNeutralForeground3);}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    checkmark: {
+        B6of3ja: "fmnzpld"
+    },
+    splitItemMain: {
+        Bh6795r: "fqerorx"
+    },
+    splitItemTrigger: {
+        Btl43ni: [
+            "f1ozlkrg",
+            "f10ostut"
+        ],
+        Beyfa6y: [
+            "f1deotkl",
+            "f1krrbdw"
+        ],
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ],
+        Ftih45: "f1wl9k8s",
+        Ccq8qp: "f1yn80uh",
+        Baz25je: "f68mna0",
+        cmx5o7: "f1p5zmk"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Bi91k9c: "fvgxktp",
+        Jwef8y: "f1ijtazh",
+        eoavqd: "fphbwmw",
+        Bk3fhr4: "f19vpps7",
+        Bmfj8id: "fv5swzo",
+        Bg7n49j: "f1q1x1ba",
+        c7f7en: "ff3wrqt",
+        B2d53fq: "fcvwxyo",
+        iro3zm: "f1to34ca",
+        Bumww26: "fszh5vc",
+        t0hwav: "ft33916",
+        B7iucu3: "f1cyfu5x",
+        Bahaeuw: "fa9u7a5",
+        Bbkh6qg: "f1wzezsb",
+        B3ejlan: "f1egomlm",
+        B41git9: "f1wf2001",
+        Boq1n10: "fied5gk",
+        Dcq74g: "f1efp33f",
+        rxnm8d: "f1m2zpi7",
+        wxluhh: "fei14nx",
+        idgcvv: "f12hmwa5",
+        j9xr24: "f1hzwxd0"
+    }
+}, {
+    d: [
+        ".fmnzpld{margin-top:2px;}",
+        ".fqerorx{flex-grow:1;}",
+        ".f1ozlkrg{border-top-left-radius:0;}",
+        ".f10ostut{border-top-right-radius:0;}",
+        ".f1deotkl{border-bottom-left-radius:0;}",
+        ".f1krrbdw{border-bottom-right-radius:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".f1yn80uh::before{width:var(--strokeWidthThin);}",
+        ".f68mna0::before{height:24px;}",
+        ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    h: [
+        ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
+        ".fphbwmw:hover{cursor:not-allowed;}",
+        ".f19vpps7:hover .fui-Icon-filled{display:none;}",
+        ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
+        ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
+        ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}",
+        ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}",
+        ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    f: [
+        ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1wzezsb:hover{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1egomlm:hover .fui-MenuItem__icon{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1wf2001:hover .fui-MenuItem__icon{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fied5gk:hover .fui-MenuItem__subText{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1efp33f:hover:active{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1m2zpi7:hover:active{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fei14nx:hover:active .fui-MenuItem__subText{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f12hmwa5:focus{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1hzwxd0:focus{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useSubTextStyles = /*#__PURE__*/ (0, _react.__styles)({
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        B7iucu3: "f1cyfu5x"
+    }
+}, {
+    d: [
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
+    content: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62"
+    },
+    secondaryContent: {
+        qb2dma: "f7nlbp4"
+    },
+    submenuIndicator: {
+        qb2dma: "f7nlbp4"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f7nlbp4{align-self:center;}"
+    ]
+});
+const useMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const contentBaseStyles = useContentBaseStyles();
+    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    const subtextBaseStyles = useSubtextBaseStyles();
+    const subTextStyles = useSubTextStyles();
+    const multiline = !!state.subText;
+    state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+    }
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
+    }
+    if (state.submenuIndicator) {
+        state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
+    }
+    if (state.subText) {
+        state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
+    }
+    (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js

@@ -0,0 +1,260 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuItemClassNames: function() {
+        return menuItemClassNames;
+    },
+    useMenuItemStyles_unstable: function() {
+        return useMenuItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../selectable/index");
+const menuItemClassNames = {
+    root: 'fui-MenuItem',
+    icon: 'fui-MenuItem__icon',
+    checkmark: 'fui-MenuItem__checkmark',
+    submenuIndicator: 'fui-MenuItem__submenuIndicator',
+    content: 'fui-MenuItem__content',
+    secondaryContent: 'fui-MenuItem__secondaryContent',
+    subText: 'fui-MenuItem__subText'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    position: 'relative',
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    paddingRight: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingLeft: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingTop: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingBottom: _reacttheme.tokens.spacingVerticalSNudge,
+    boxSizing: 'border-box',
+    maxWidth: '290px',
+    minHeight: '32px',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'start',
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    cursor: 'pointer',
+    gap: '4px',
+    ':hover': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+        color: _reacttheme.tokens.colorNeutralForeground2Hover,
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            display: 'none'
+        },
+        [`& .${menuItemClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+        },
+        [`& .${menuItemClassNames.subText}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Hover
+        }
+    },
+    ':hover:active': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+        color: _reacttheme.tokens.colorNeutralForeground2Pressed,
+        [`& .${menuItemClassNames.subText}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Pressed
+        }
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'Canvas',
+            borderColor: 'Highlight',
+            color: 'Highlight'
+        },
+        ...(0, _reacttabster.createFocusOutlineStyle)({
+            style: {
+                outlineColor: 'Highlight'
+            }
+        })
+    },
+    userSelect: 'none',
+    ...(0, _reacttabster.createFocusOutlineStyle)()
+});
+const useContentBaseStyles = (0, _react.makeResetStyles)({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    backgroundColor: 'transparent',
+    flexGrow: 1
+});
+const useSecondaryContentBaseStyles = (0, _react.makeResetStyles)({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    ..._reacttheme.typographyStyles.caption1,
+    lineHeight: _reacttheme.tokens.lineHeightBase300,
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    ':hover': {
+        color: _reacttheme.tokens.colorNeutralForeground3Hover
+    },
+    ':focus': {
+        color: _reacttheme.tokens.colorNeutralForeground3Hover
+    }
+});
+const useIconBaseStyles = (0, _react.makeResetStyles)({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    flexShrink: 0
+});
+const useSubmenuIndicatorBaseStyles = (0, _react.makeResetStyles)({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center'
+});
+const useSubtextBaseStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.caption2,
+    color: _reacttheme.tokens.colorNeutralForeground3
+});
+const useStyles = (0, _react.makeStyles)({
+    checkmark: {
+        marginTop: '2px'
+    },
+    splitItemMain: {
+        flexGrow: 1
+    },
+    splitItemTrigger: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        paddingLeft: 0,
+        '::before': {
+            content: '""',
+            width: _reacttheme.tokens.strokeWidthThin,
+            height: '24px',
+            backgroundColor: _reacttheme.tokens.colorNeutralStroke1
+        }
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${menuItemClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            },
+            [`& .${menuItemClassNames.subText}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+            [`& .${menuItemClassNames.subText}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':focus': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            ':hover': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.icon}`]: {
+                    color: 'GrayText',
+                    backgroundColor: 'Canvas'
+                },
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':focus': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas'
+            }
+        }
+    }
+});
+const useSubTextStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+const useMultilineStyles = (0, _react.makeStyles)({
+    content: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    secondaryContent: {
+        alignSelf: 'center'
+    },
+    submenuIndicator: {
+        alignSelf: 'center'
+    }
+});
+const useMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const contentBaseStyles = useContentBaseStyles();
+    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    const subtextBaseStyles = useSubtextBaseStyles();
+    const subTextStyles = useSubTextStyles();
+    const multiline = !!state.subText;
+    state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+    }
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
+    }
+    if (state.submenuIndicator) {
+        state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
+    }
+    if (state.subText) {
+        state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
+    }
+    (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
+};