feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/SplitNavItem.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SplitNavItem", {
+    enumerable: true,
+    get: function() {
+        return SplitNavItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useSplitNavItem = require("./useSplitNavItem");
+const _renderSplitNavItem = require("./renderSplitNavItem");
+const _useSplitNavItemStylesstyles = require("./useSplitNavItemStyles.styles");
+const SplitNavItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSplitNavItem.useSplitNavItem_unstable)(props, ref);
+    (0, _useSplitNavItemStylesstyles.useSplitNavItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSplitNavItemStyles_unstable')(state);
+    return (0, _renderSplitNavItem.renderSplitNavItem_unstable)(state);
+});
+SplitNavItem.displayName = 'SplitNavItem';

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/SplitNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["React","useCustomStyleHook_unstable","useSplitNavItem_unstable","renderSplitNavItem_unstable","useSplitNavItemStyles_unstable","SplitNavItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;iCAErC,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;AAMzE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;QAC/BR,gDAAAA,EAA4B,kCAAkCQ;IAE9D,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/SplitNavItem.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering SplitNavItem
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/SplitNavItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavItemProps } from '../NavItem/NavItem.types';\nimport { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\nimport { NavDensity } from '../Nav/Nav.types';\nimport { NavSubItemProps } from '../NavSubItem/NavSubItem.types';\n\nexport type SplitNavItemSlots = {\n  /**\n   * Root of the component, wrapping the children.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * The NavItem Slot.\n   * Will behave as a SubNavItem if it's in an a SubGroup.\n   */\n  navItem?: NonNullable<Slot<NavItemProps & NavSubItemProps>>;\n\n  /**\n   * Basic button slot.\n   */\n  actionButton?: Slot<ButtonProps>;\n\n  /**\n   * Toggle button slot\n   */\n  toggleButton?: Slot<ToggleButtonProps>;\n\n  /**\n   * Menu button slot to stuff more things in when the other two aren't enough.\n   */\n  menuButton?: Slot<MenuButtonProps>;\n\n  /**\n   * Tooltip for the action button.\n   */\n  actionButtonTooltip?: Slot<TooltipProps>;\n\n  /**\n   * Tooltip for the toggle button.\n   */\n  toggleButtonTooltip?: Slot<TooltipProps>;\n\n  /**\n   * Tooltip for the menu button.\n   */\n  menuButtonTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * SplitNavItem Props\n */\nexport type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;\n\n/**\n * State used in rendering SplitNavItem\n */\nexport type SplitNavItemState = ComponentState<SplitNavItemSlots> & {\n  /**\n   * The density of the NavItem\n   *\n   * @default 'medium'\n   */\n  density: NavDensity;\n\n  /**\n   * A boolean that represents if the main item in the SplitNavItem is a SubNav item.\n   * If false, it's a NavItem.\n   */\n  isSubNav: boolean;\n};\n"],"names":[],"mappings":"AAuDA;;CAEC,GACD,WAaE"}

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/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, {
+    SplitNavItem: function() {
+        return _SplitNavItem.SplitNavItem;
+    },
+    renderSplitNavItem_unstable: function() {
+        return _renderSplitNavItem.renderSplitNavItem_unstable;
+    },
+    splitNavItemClassNames: function() {
+        return _useSplitNavItemStylesstyles.splitNavItemClassNames;
+    },
+    useSplitNavItemStyles_unstable: function() {
+        return _useSplitNavItemStylesstyles.useSplitNavItemStyles_unstable;
+    },
+    useSplitNavItem_unstable: function() {
+        return _useSplitNavItem.useSplitNavItem_unstable;
+    }
+});
+const _SplitNavItem = require("./SplitNavItem");
+const _renderSplitNavItem = require("./renderSplitNavItem");
+const _useSplitNavItem = require("./useSplitNavItem");
+const _useSplitNavItemStylesstyles = require("./useSplitNavItemStyles.styles");

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/index.ts"],"sourcesContent":["export { SplitNavItem } from './SplitNavItem';\nexport type { SplitNavItemProps, SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nexport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nexport { useSplitNavItem_unstable } from './useSplitNavItem';\nexport { splitNavItemClassNames, useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\n"],"names":["SplitNavItem","renderSplitNavItem_unstable","useSplitNavItem_unstable","splitNavItemClassNames","useSplitNavItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAEZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderSplitNavItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderSplitNavItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+/**
+ * Helper function to render button slots
+ *
+ * @internal
+ */ const renderButtonSlot = (Button, ButtonTooltip)=>{
+    if (!Button) {
+        return null;
+    }
+    if (ButtonTooltip) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ButtonTooltip, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Button, {})
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Button, {});
+};
+const renderSplitNavItem_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.navItem && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.navItem, {}),
+            renderButtonSlot(state.actionButton, state.actionButtonTooltip),
+            renderButtonSlot(state.menuButton, state.menuButtonTooltip),
+            renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)
+        ]
+    });
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * Helper function to render button slots\n *\n * @internal\n */\nconst renderButtonSlot = (Button?: React.ElementType, ButtonTooltip?: React.ElementType) => {\n  if (!Button) {\n    return null;\n  }\n\n  if (ButtonTooltip) {\n    return (\n      <ButtonTooltip>\n        <Button />\n      </ButtonTooltip>\n    );\n  }\n\n  return <Button />;\n};\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState): JSXElement => {\n  assertSlots<SplitNavItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.navItem && <state.navItem />}\n      {renderButtonSlot(state.actionButton, state.actionButtonTooltip)}\n      {renderButtonSlot(state.menuButton, state.menuButtonTooltip)}\n      {renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)}\n    </state.root>\n  );\n};\n"],"names":["React","assertSlots","renderButtonSlot","Button","ButtonTooltip","renderSplitNavItem_unstable","state","root","navItem","actionButton","actionButtonTooltip","menuButton","menuButtonTooltip","toggleButton","toggleButtonTooltip"],"mappings":";;;;+BAiCaK;;;;;;;4BAhCb,iCAAiD;iEAE1B,QAAQ;gCACH,4BAA4B;AAKxD;;;;CAIC,GACD,MAAMH,mBAAmB,CAACC,QAA4BC;IACpD,IAAI,CAACD,QAAQ;QACX,OAAO;IACT;IAEA,IAAIC,eAAe;QACjB,OAAA,WAAA,OACE,eAAA,EAACA,eAAAA;sBACC,WAAA,OAAA,eAAA,EAACD,QAAAA,CAAAA;;IAGP;IAEA,OAAA,WAAA,OAAO,eAAA,EAACA,QAAAA,CAAAA;AACV;AAKO,oCAAoC,CAACG;IAC1CL,+BAAAA,EAA+BK;IAE/B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,OAAO,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,OAAO,EAAA,CAAA;YAC/BN,iBAAiBI,MAAMG,YAAY,EAAEH,MAAMI,mBAAmB;YAC9DR,iBAAiBI,MAAMK,UAAU,EAAEL,MAAMM,iBAAiB;YAC1DV,iBAAiBI,MAAMO,YAAY,EAAEP,MAAMQ,mBAAmB;;;AAGrE,EAAE"}

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/useSplitNavItem.js

@@ -0,0 +1,105 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSplitNavItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSplitNavItem_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 _reacttooltip = require("@fluentui/react-tooltip");
+const _NavContext = require("../NavContext");
+const _reactbutton = require("@fluentui/react-button");
+const _reacticons = require("@fluentui/react-icons");
+const _index = require("../NavItem/index");
+const _NavSubItem = require("../NavSubItem/NavSubItem");
+const _NavCategoryContext = require("../NavCategoryContext");
+const useSplitNavItem_unstable = (props, ref)=>{
+    const { navItem, actionButton, toggleButton, menuButton, actionButtonTooltip, toggleButtonTooltip, menuButtonTooltip, children } = props;
+    const { density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const { value: potentialParenValue } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
+    const isSubNav = potentialParenValue.length > 0 ? true : false;
+    const navItemShorthand = _reactutilities.slot.always(navItem, {
+        defaultProps: {
+            children
+        },
+        elementType: isSubNav ? _NavSubItem.NavSubItem : _index.NavItem
+    });
+    const actionButtonShorthand = _reactutilities.slot.optional(actionButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ _react.createElement(_reacticons.Pin20Regular, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: _reactbutton.Button
+    });
+    const toggleButtonShorthand = _reactutilities.slot.optional(toggleButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ _react.createElement(_reacticons.Pin20Regular, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: _reactbutton.ToggleButton
+    });
+    const menuButtonShorthand = _reactutilities.slot.optional(menuButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ _react.createElement(_reacticons.MoreHorizontalFilled, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: _reactbutton.MenuButton
+    });
+    const actionButtonTooltipShorthand = _reactutilities.slot.optional(actionButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: _reacttooltip.Tooltip
+    });
+    const toggleButtonTooltipShorthand = _reactutilities.slot.optional(toggleButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: _reacttooltip.Tooltip
+    });
+    const menuButtonTooltipShorthand = _reactutilities.slot.optional(menuButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: _reacttooltip.Tooltip
+    });
+    return {
+        components: {
+            root: 'div',
+            navItem: isSubNav ? _NavSubItem.NavSubItem : _index.NavItem,
+            actionButton: _reactbutton.Button,
+            toggleButton: _reactbutton.ToggleButton,
+            menuButton: _reactbutton.MenuButton,
+            actionButtonTooltip: _reacttooltip.Tooltip,
+            toggleButtonTooltip: _reacttooltip.Tooltip,
+            menuButtonTooltip: _reacttooltip.Tooltip
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...props,
+            // because we're passing in children to the NavItem,
+            // We can be explicit about the children prop here
+            children: null
+        }), {
+            elementType: 'div'
+        }),
+        navItem: navItemShorthand,
+        actionButton: actionButtonShorthand,
+        toggleButton: toggleButtonShorthand,
+        menuButton: menuButtonShorthand,
+        actionButtonTooltip: actionButtonTooltipShorthand,
+        toggleButtonTooltip: toggleButtonTooltipShorthand,
+        menuButtonTooltip: menuButtonTooltipShorthand,
+        density,
+        isSubNav
+    };
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js

@@ -0,0 +1,200 @@
+'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, {
+    splitNavItemClassNames: function() {
+        return splitNavItemClassNames;
+    },
+    useSplitNavItemStyles_unstable: function() {
+        return useSplitNavItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const splitNavItemClassNames = {
+    root: 'fui-SplitNavItem',
+    navItem: 'fui-SplitNavItem__navItem',
+    actionButton: 'fui-SplitNavItem__actionButton',
+    toggleButton: 'fui-SplitNavItem__toggleButton',
+    menuButton: 'fui-SplitNavItem__menuButton',
+    /**
+  * Tooltips don't have a class name prop, so this is just to satisfy the linter.
+  */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
+    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
+    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
+};
+// Don't use makeResetStyles here because the sub components call it once and
+// This links says that makeResetStyles should only be called once per element
+// https://griffel.js.org/react/api/make-reset-styles/#limitations
+const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
+const buttonHoverStyles = {
+    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
+        opacity: 1,
+        pointerEvents: 'auto'
+    }
+};
+/**
+ * Styles for the root slot
+ */ const useSplitNaveItemStyles = /*#__PURE__*/ (0, _react.__styles)({
+    baseRoot: {
+        mc9l5x: "f22iagw",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "fx80lhs",
+        Bt984gj: "f1q9h2pe",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f19jm9xf",
+        fsow6f: "fgusgyc",
+        De3pzq: "f1ctqxl6",
+        B3o57yi: "fnsygzv",
+        Bkqvd7p: "f1e9ux7i",
+        Bmy1vo4: "f1xfaukr",
+        Jwef8y: "f11oyicx",
+        xwko9w: "f8z0t4e",
+        mcc9px: "f9ueil3",
+        B02v5zz: "f1g2hb8n",
+        i4x37a: "fpq6je",
+        ecr2s2: "f9fof1w"
+    },
+    baseNavItem: {
+        mc9l5x: "f22iagw",
+        B9bfxx9: "f1cxpek8",
+        qb2dma: "f1ub7u0d",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        qhf8xq: "f10pi13n",
+        Brf1p80: "f1s9ku6b",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "f1u2hskj",
+        De3pzq: "f3rmtva"
+    },
+    baseSecondary: {
+        Bf4jedk: "f107v6xj",
+        Bnt446c: "f1y335lp",
+        B1hrpyx: "f12pses1",
+        rjzwhg: "fibmr9j",
+        Bt984gj: "f1s2louj"
+    },
+    baseMedium: {
+        rjzwhg: "fjtod8q"
+    },
+    baseLarge: {
+        rjzwhg: "f16gijt3"
+    },
+    hoverAction: {
+        abs64n: "fk73vx1",
+        Bkecrkj: "f1aehjj5",
+        Bn62ygk: 0,
+        Cwk7ip: 0,
+        B3o57yi: 0,
+        Bmy1vo4: 0,
+        Bkqvd7p: 0,
+        Bi2q7bf: [
+            "fr12795",
+            "fcl876f"
+        ],
+        Es3by: "f1gqqdtu"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        [
+            ".fx80lhs{gap:unset;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1q9h2pe{align-items:stretch;}",
+        [
+            ".f19jm9xf{padding:unset;}",
+            {
+                p: -1
+            }
+        ],
+        ".fgusgyc{text-align:unset;}",
+        ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
+        ".fnsygzv{transition-duration:var(--durationFaster);}",
+        ".f1e9ux7i{transition-timing-function:var(--curveLinear);}",
+        ".f1xfaukr{transition-property:background;}",
+        ".f1cxpek8{text-transform:none;}",
+        ".f1ub7u0d{align-self:stretch;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
+        ".f10pi13n{position:relative;}",
+        ".f1s9ku6b{justify-content:start;}",
+        [
+            ".f1u2hskj{gap:var(--spacingVerticalL);}",
+            {
+                p: -1
+            }
+        ],
+        ".f3rmtva{background-color:transparent;}",
+        ".f107v6xj{min-width:28px;}",
+        ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}",
+        ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}",
+        ".fibmr9j{padding-block-start:5px;}",
+        ".f1s2louj{align-items:start;}",
+        ".fjtod8q{padding-block-start:9px;}",
+        ".f16gijt3{padding-block-start:12px;}",
+        ".fk73vx1{opacity:0;}",
+        ".f1aehjj5{pointer-events:none;}",
+        [
+            ".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1gqqdtu{will-change:opacity;}"
+    ],
+    h: [
+        ".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}",
+        ".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}",
+        ".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"
+    ],
+    w: [
+        ".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}",
+        ".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"
+    ],
+    a: [
+        ".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"
+    ]
+});
+const useSplitNavItemStyles_unstable = (state)=>{
+    'use no memo';
+    const splitNavItemStyles = useSplitNaveItemStyles();
+    const sharedRootClassNames = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    state.root.className = (0, _react.mergeClasses)(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
+    if (state.navItem) {
+        state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
+    }
+    if (state.actionButton) {
+        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+    }
+    if (state.toggleButton) {
+        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+    }
+    if (state.menuButton) {
+        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js

@@ -0,0 +1,115 @@
+'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, {
+    splitNavItemClassNames: function() {
+        return splitNavItemClassNames;
+    },
+    useSplitNavItemStyles_unstable: function() {
+        return useSplitNavItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactmotion = require("@fluentui/react-motion");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const splitNavItemClassNames = {
+    root: 'fui-SplitNavItem',
+    navItem: 'fui-SplitNavItem__navItem',
+    actionButton: 'fui-SplitNavItem__actionButton',
+    toggleButton: 'fui-SplitNavItem__toggleButton',
+    menuButton: 'fui-SplitNavItem__menuButton',
+    /**
+   * Tooltips don't have a class name prop, so this is just to satisfy the linter.
+   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
+    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
+    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
+};
+// Don't use makeResetStyles here because the sub components call it once and
+// This links says that makeResetStyles should only be called once per element
+// https://griffel.js.org/react/api/make-reset-styles/#limitations
+const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
+const buttonHoverStyles = {
+    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
+        opacity: 1,
+        pointerEvents: 'auto'
+    }
+};
+/**
+ * Styles for the root slot
+ */ const useSplitNaveItemStyles = (0, _react.makeStyles)({
+    baseRoot: {
+        display: 'flex',
+        gap: 'unset',
+        alignItems: 'stretch',
+        padding: 'unset',
+        textAlign: 'unset',
+        backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
+        ..._sharedNavStylesstyles.navItemTokens.transitionTokens,
+        ':hover': {
+            backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorHover,
+            ...buttonHoverStyles
+        },
+        ':focus-within': buttonHoverStyles,
+        ':active': {
+            backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorPressed
+        }
+    },
+    baseNavItem: {
+        // styles that we want to disagree with the default on
+        display: 'flex',
+        textTransform: 'none',
+        alignSelf: 'stretch',
+        textAlign: 'left',
+        position: 'relative',
+        justifyContent: 'start',
+        gap: _reacttheme.tokens.spacingVerticalL,
+        backgroundColor: 'transparent'
+    },
+    baseSecondary: {
+        minWidth: '28px',
+        paddingInlineEnd: '12px',
+        paddingInlineStart: '5px',
+        paddingBlockStart: '5px',
+        alignItems: 'start'
+    },
+    baseMedium: {
+        paddingBlockStart: '9px'
+    },
+    baseLarge: {
+        paddingBlockStart: '12px'
+    },
+    hoverAction: {
+        opacity: 0,
+        pointerEvents: 'none',
+        transition: `opacity ${_reactmotion.motionTokens.durationFast}ms ${_reactmotion.motionTokens.curveEasyEase}`,
+        willChange: 'opacity'
+    }
+});
+const useSplitNavItemStyles_unstable = (state)=>{
+    'use no memo';
+    const splitNavItemStyles = useSplitNaveItemStyles();
+    const sharedRootClassNames = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    state.root.className = (0, _react.mergeClasses)(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
+    if (state.navItem) {
+        state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
+    }
+    if (state.actionButton) {
+        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+    }
+    if (state.toggleButton) {
+        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+    }
+    if (state.menuButton) {
+        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+    }
+    return state;
+};