Initial commit

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

@@ -0,0 +1,23 @@
+"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":["import * 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":["MenuItem","React","forwardRef","props","ref","state","useMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","renderMenuItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACc;gCACG;yCACG;qCAGC;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAE3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,OAAOI,IAAAA,uCAAAA,EAAwBJ;AACjC;AAEAL,SAASU,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":[],"rangeMappings":"","mappings":""}

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

@@ -0,0 +1,31 @@
+"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;
+    },
+    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 } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAIRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAHJ;gCAEe;6BACH;yCAC0B"}

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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\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":["renderMenuItem_unstable","state","assertSlots","_jsxs","root","checkmark","_jsx","icon","content","children","subText","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;4BAPb;gCAC4B;AAMrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,OAAO,IAAA,WAAA,GACZL,IAAAA,gBAAA,EAACF,MAAMO,OAAO,EAAA;;oBACXP,MAAMO,OAAO,CAACC,QAAQ;oBACtBR,MAAMS,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMS,OAAO,EAAA,CAAA;;;YAGnCT,MAAMU,gBAAgB,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACL,MAAMU,gBAAgB,EAAA,CAAA;YACjDV,MAAMW,gBAAgB,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACL,MAAMW,gBAAgB,EAAA,CAAA;;;AAGxD"}

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

@@ -0,0 +1,29 @@
+"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":["import * 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>) => {\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":["useCharacterSearch","state","ref","setFocusByFirstCharacter","useMenuListContext_unstable","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;iCACqB;AAIrC,MAAMA,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BC,IAAAA,4CAAAA,EAA4BC,CAAAA,UAAWA,QAAQF,wBAAwB;IAExG,MAAM,EAAEG,WAAWC,iBAAiB,EAAE,GAAGN,MAAMO,IAAI;IAEnDP,MAAMO,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAG,AAAHA,MAAG,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAM,AAANA,IAAS,GAAG;YACrB;QACF;QAEA,IAAIT,IAAIU,OAAO,EAAE;YACfT,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BM,GAAGP,IAAIU,OAAO;QAC3C;IACF;IAEA,OAAOX;AACT"}

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

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMenuItem_unstable", {
+    enumerable: true,
+    get: 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 ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
+const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
+const useMenuItem_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 } = props;
+    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
+        hasSubmenu
+    });
+    const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
+    useNotifySplitItemMultiline({
+        multiline: !!props.subText,
+        hasSubmenu
+    });
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const innerRef = _react.useRef(null);
+    const dismissedWithKeyboardRef = _react.useRef(false);
+    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',
+            ...props,
+            disabled: false,
+            disabledFocusable: disabled,
+            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
+            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,
+            defaultProps: {
+                children: dir === 'ltr' ? /*#__PURE__*/ _react.createElement(ChevronRightIcon, null) : /*#__PURE__*/ _react.createElement(ChevronLeftIcon, null)
+            },
+            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
+    };
+};

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

@@ -0,0 +1,253 @@
+"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",
+        B2d53fq: "fcvwxyo",
+        iro3zm: "f1to34ca",
+        t0hwav: "ft33916",
+        Bbusuzp: "f1dcs8yz",
+        ze5xyy: "f1kc2mi9",
+        Bqrx1nm: "fkavljg",
+        Bctn1xl: "fk56vqo",
+        h5esng: "ff3wi9b",
+        Bh6z0a4: "f1ikwg0d",
+        Bh953qp: "f10l1t5h"
+    }
+}, {
+    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);}",
+        ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"
+    ],
+    f: [
+        ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fkavljg:hover{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.ff3wi9b:hover .fui-MenuItem__icon{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f10l1t5h:focus{background-color:Canvas;}}",
+            {
+                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 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, !state.disabled && secondaryContentBaseStyles, 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.subText.className, subtextBaseStyles);
+    }
+    (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
+};