feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/MenuButton.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuButton", {
+    enumerable: true,
+    get: function() {
+        return MenuButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderMenuButton = require("./renderMenuButton");
+const _useMenuButton = require("./useMenuButton");
+const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const MenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMenuButton.useMenuButton_unstable)(props, ref);
+    (0, _useMenuButtonStylesstyles.useMenuButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuButtonStyles_unstable')(state);
+    return (0, _renderMenuButton.renderMenuButton_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+MenuButton.displayName = 'MenuButton';

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;qCAGhC,kCAAkC;AAMvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQP,qCAAAA,EAAuBK,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOR,2CAAAA,EAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/MenuButton.types.js

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

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/MenuButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/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, {
+    MenuButton: function() {
+        return _MenuButton.MenuButton;
+    },
+    menuButtonClassNames: function() {
+        return _useMenuButtonStylesstyles.menuButtonClassNames;
+    },
+    renderMenuButton_unstable: function() {
+        return _renderMenuButton.renderMenuButton_unstable;
+    },
+    useMenuButtonStyles_unstable: function() {
+        return _useMenuButtonStylesstyles.useMenuButtonStyles_unstable;
+    },
+    useMenuButton_unstable: function() {
+        return _useMenuButton.useMenuButton_unstable;
+    }
+});
+const _MenuButton = require("./MenuButton");
+const _renderMenuButton = require("./renderMenuButton");
+const _useMenuButton = require("./useMenuButton");
+const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,sBAAU;;;eAGVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAEHG,uDAA4B;;;eADlDF,qCAAsB;;;4BAFJ,eAAe;kCACA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/renderMenuButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderMenuButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderMenuButton_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderMenuButton_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    const { icon, iconOnly } = state;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            !iconOnly && state.root.children,
+            (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuIcon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/renderMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState): JSXElement => {\n  assertSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMC,IAAI,IAAA,WAAA,OAAI,eAAA,EAACD,MAAMC,IAAI,EAAA,CAAA;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;aAC/B,CAACF,YAAY,EAACD,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMG,QAAAA,CAAQ,CAAD,IAAMJ,MAAMK,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,QAAQ,EAAA,CAAA;;;AAG1E,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/useMenuButton.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMenuButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMenuButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacticons = require("@fluentui/react-icons");
+const _reactutilities = require("@fluentui/react-utilities");
+const _index = require("../Button/index");
+const useMenuButton_unstable = (props, ref)=>{
+    const { menuIcon, ...buttonProps } = props;
+    const buttonState = (0, _index.useButton_unstable)(buttonProps, ref);
+    return {
+        ...buttonState,
+        iconOnly: Boolean(!props.children),
+        // Slots definition
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...buttonState.components,
+            menuIcon: 'span'
+        },
+        root: {
+            ...buttonState.root,
+            // force aria-expanded to be a boolean, not a string
+            'aria-expanded': props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false
+        },
+        menuIcon: _reactutilities.slot.optional(menuIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/useMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","defaultProps","renderByDefault","elementType"],"mappings":"AAAA;;;;;+BAWaI;;;;;;;iEATU,QAAQ;4BACI,wBAAwB;gCACtC,4BAA4B;uBACd,kBAAkB;AAM9C,+BAA+B,CACpCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,kBAAcN,yBAAAA,EAAmBK,aAAaF;IAEpD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUL,oBAAAA,CAAKa,QAAQ,CAACR,UAAU;YAChCS,cAAc;gBACZJ,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACX,8BAAAA,EAAAA;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js

@@ -0,0 +1,192 @@
+'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, {
+    menuButtonClassNames: function() {
+        return menuButtonClassNames;
+    },
+    useMenuButtonStyles_unstable: function() {
+        return useMenuButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        D0sxk3: "fxoiby5",
+        t6yez3: "f15q0o9g"
+    },
+    outline: {
+        g2u3we: "f1ly1fcm",
+        h3c5rm: [
+            "fi8bssc",
+            "fj6btzu"
+        ],
+        B9xav0g: "f1s9tnsa",
+        zhjwy3: [
+            "fj6btzu",
+            "fi8bssc"
+        ],
+        B4j52fo: "fgx37oo",
+        Bekrc4i: [
+            "f130t4y6",
+            "f1efpmoh"
+        ],
+        Bn0qgzm: "fv51ejd",
+        ibv6hh: [
+            "f1efpmoh",
+            "f130t4y6"
+        ],
+        sj55zd: "f14nttnl"
+    },
+    primary: {
+        De3pzq: "f8w4g0q"
+    },
+    secondary: {
+        De3pzq: "f1nfm20t",
+        g2u3we: "f1ly1fcm",
+        h3c5rm: [
+            "fi8bssc",
+            "fj6btzu"
+        ],
+        B9xav0g: "f1s9tnsa",
+        zhjwy3: [
+            "fj6btzu",
+            "fi8bssc"
+        ],
+        sj55zd: "f14nttnl"
+    },
+    subtle: {
+        De3pzq: "fq5gl1p",
+        sj55zd: "f1eryozh"
+    },
+    transparent: {
+        De3pzq: "f1q9pm1r",
+        sj55zd: "f1qj7y59"
+    }
+}, {
+    d: [
+        ".fxoiby5 .fui-Icon-filled{display:inline;}",
+        ".f15q0o9g .fui-Icon-regular{display:none;}",
+        ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}",
+        ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}",
+        ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}",
+        ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}",
+        ".fgx37oo{border-top-width:var(--strokeWidthThicker);}",
+        ".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
+        ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
+        ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
+        ".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
+        ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}",
+        ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
+        ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
+        ".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
+        ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
+        ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
+    ]
+});
+const useIconExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
+    outline: {
+        sj55zd: "f14nttnl"
+    },
+    primary: {},
+    secondary: {
+        sj55zd: "f14nttnl"
+    },
+    subtle: {
+        sj55zd: "f1qj7y59"
+    },
+    transparent: {
+        sj55zd: "f1qj7y59"
+    },
+    highContrast: {
+        Bahaeuw: "f1v3eptx"
+    }
+}, {
+    d: [
+        ".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
+        ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bg96gwp: "fez10in"
+    },
+    small: {
+        Be2twd7: "f1ugzwwg",
+        Bqenvij: "fvblgha",
+        Bg96gwp: "fwrc4pm",
+        a9b677: "frx94fk"
+    },
+    medium: {
+        Be2twd7: "f1ugzwwg",
+        Bqenvij: "fvblgha",
+        Bg96gwp: "fwrc4pm",
+        a9b677: "frx94fk"
+    },
+    large: {
+        Be2twd7: "f4ybsrx",
+        Bqenvij: "fd461yt",
+        Bg96gwp: "faaz57k",
+        a9b677: "fjw5fx7"
+    },
+    notIconOnly: {
+        Frg6f3: [
+            "fbyavb5",
+            "fm0x6gh"
+        ]
+    }
+}, {
+    d: [
+        ".fez10in{line-height:0;}",
+        ".f1ugzwwg{font-size:12px;}",
+        ".fvblgha{height:12px;}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".frx94fk{width:12px;}",
+        ".f4ybsrx{font-size:16px;}",
+        ".fd461yt{height:16px;}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".fjw5fx7{width:16px;}",
+        ".fbyavb5{margin-left:var(--spacingHorizontalXS);}",
+        ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"
+    ]
+});
+const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootExpandedStyles = useRootExpandedStyles();
+    const iconExpandedStyles = useIconExpandedStyles();
+    const menuIconStyles = useMenuIconStyles();
+    state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)({
+        ...state,
+        iconPosition: 'before'
+    });
+    return state;
+};

node_modules/@fluentui/react-button/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js

@@ -0,0 +1,130 @@
+'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, {
+    menuButtonClassNames: function() {
+        return menuButtonClassNames;
+    },
+    useMenuButtonStyles_unstable: function() {
+        return useMenuButtonStyles_unstable;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = (0, _react.makeStyles)({
+    base: {
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    // Appearance variations
+    outline: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected
+    },
+    secondary: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2Selected
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useIconExpandedStyles = (0, _react.makeStyles)({
+    // Appearance variations
+    outline: {
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    primary: {},
+    secondary: {
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    },
+    transparent: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    },
+    highContrast: {
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight'
+            }
+        }
+    }
+});
+const useMenuIconStyles = (0, _react.makeStyles)({
+    base: {
+        lineHeight: 0
+    },
+    // Size appearance
+    small: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        width: '12px'
+    },
+    medium: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        width: '12px'
+    },
+    large: {
+        fontSize: '16px',
+        height: '16px',
+        lineHeight: _reacttheme.tokens.lineHeightBase400,
+        width: '16px'
+    },
+    // Not-icon only
+    notIconOnly: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalXS
+    }
+});
+const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootExpandedStyles = useRootExpandedStyles();
+    const iconExpandedStyles = useIconExpandedStyles();
+    const menuIconStyles = useMenuIconStyles();
+    state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)({
+        ...state,
+        iconPosition: 'before'
+    });
+    return state;
+};