feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/NavSubItem/NavSubItem.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSubItem_unstable } from './useNavSubItem';
+import { renderNavSubItem_unstable } from './renderNavSubItem';
+import { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';
+/**
+ * NavSubItem component - a sub-item within a navigation structure.
+ */ export const NavSubItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSubItem_unstable(props, ref);
+    useNavSubItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);
+    return renderNavSubItem_unstable(state);
+});
+NavSubItem.displayName = 'NavSubItem';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.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 { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - a sub-item within a navigation structure.\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering NavSubItem
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.types.ts"],"sourcesContent":["import { NavItemValue } from '../NavContext.types';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\nexport type NavSubItemSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * NavSubItem Props\n */\nexport type NavSubItemProps = ComponentProps<NavSubItemSlots> & {\n  href?: string;\n  /**\n   * The value that identifies this NavSubItem when selected.\n   */\n  value: NavItemValue;\n};\n\n/**\n * State used in rendering NavSubItem\n */\nexport type NavSubItemState = ComponentState<NavSubItemSlots> &\n  Pick<NavSubItemProps, 'value'> & {\n    /**\n     * If this NavSubItem is selected\n     */\n    selected: boolean;\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n"],"names":[],"mappings":"AAqBA;;CAEC,GACD,WAYI"}

node_modules/@fluentui/react-nav/lib/components/NavSubItem/index.js

@@ -0,0 +1,4 @@
+export { NavSubItem } from './NavSubItem';
+export { renderNavSubItem_unstable } from './renderNavSubItem';
+export { useNavSubItem_unstable } from './useNavSubItem';
+export { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/index.ts"],"sourcesContent":["export { NavSubItem } from './NavSubItem';\nexport type { NavSubItemSlots, NavSubItemProps, NavSubItemState } from './NavSubItem.types';\nexport { renderNavSubItem_unstable } from './renderNavSubItem';\nexport { useNavSubItem_unstable } from './useNavSubItem';\nexport { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';\n"],"names":["NavSubItem","renderNavSubItem_unstable","useNavSubItem_unstable","useNavSubItemStyles_unstable","navSubItemClassNames"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,EAAEC,oBAAoB,QAAQ,+BAA+B"}

node_modules/@fluentui/react-nav/lib/components/NavSubItem/renderNavSubItem.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavSubItem
+ */ export const renderNavSubItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItem/renderNavSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/renderNavSubItem.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 { NavSubItemState, NavSubItemSlots } from './NavSubItem.types';\n\n/**\n * Render the final JSX of NavSubItem\n */\nexport const renderNavSubItem_unstable = (state: NavSubItemState): JSXElement => {\n  assertSlots<NavSubItemSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderNavSubItem_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItem.js

@@ -0,0 +1,70 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useNavContext_unstable } from '../NavContext';
+import { useNavCategoryContext_unstable } from '../NavCategoryContext';
+/**
+ * Create the state required to render NavSubItem.
+ *
+ * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,
+ * before being passed to renderNavSubItem_unstable.
+ *
+ * @param props - props from this instance of NavSubItem
+ * @param ref - reference to root HTMLButtonElement of NavSubItem
+ */ export const useNavSubItem_unstable = (props, ref)=>{
+    const { onClick, value: subItemValue, as, href } = props;
+    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();
+    const { value: parentCategoryValue } = useNavCategoryContext_unstable();
+    const rootElementType = as || (href ? 'a' : 'button');
+    const selected = selectedValue === subItemValue;
+    const innerRef = React.useRef(null);
+    const onNavSubItemClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            onSelect(event, {
+                type: 'click',
+                event,
+                value: subItemValue,
+                categoryValue: parentCategoryValue
+            });
+        }
+    });
+    const root = slot.always(getIntrinsicElementProps(rootElementType, useARIAButtonProps(rootElementType, {
+        'aria-current': selected ? 'page' : 'false',
+        ...props
+    })), {
+        elementType: rootElementType,
+        defaultProps: {
+            ref: ref,
+            type: rootElementType
+        }
+    });
+    root.onClick = onNavSubItemClick;
+    React.useEffect(()=>{
+        onRegister({
+            value: subItemValue,
+            ref: innerRef
+        });
+        return ()=>{
+            onUnregister({
+                value: subItemValue,
+                ref: innerRef
+            });
+        };
+    }, [
+        onRegister,
+        onUnregister,
+        innerRef,
+        subItemValue
+    ]);
+    return {
+        components: {
+            root: rootElementType
+        },
+        root,
+        selected,
+        value: subItemValue,
+        density
+    };
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n  props: NavSubItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n  const { onClick, value: subItemValue, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === subItemValue;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\n        ...props,\n      }),\n    ),\n    {\n      elementType: rootElementType,\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: rootElementType,\n      },\n    },\n  );\n\n  root.onClick = onNavSubItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value: subItemValue,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value: subItemValue, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n  return {\n    components: {\n      root: rootElementType,\n    },\n    root,\n    selected,\n    value: subItemValue,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","density","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,8BAA8B,QAAQ,wBAAwB;AAKvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAEnD,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGd;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,kBAAkBR,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,MAAMyB,MAAM,CAAc;IAE3C,MAAMC,oBAAyDvB,iBAAiBwB,CAAAA;QAC9EhB,oBAAAA,8BAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIxB,cAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,KAAK+B,MAAM,CACtBhC,yBACEqB,iBACAjB,mBAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACEyB,aAAaZ;QACba,cAAc;YACZzB,KAAKA;YACLoB,MAAMR;QACR;IACF;IAGFU,KAAKrB,OAAO,GAAGe;IAEf1B,MAAMoC,SAAS,CAAC;QACdnB,WAAW;YACTL,OAAOC;YACPH,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN,OAAOC;gBAAcH,KAAKc;YAAS;QACpD;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUX;KAAa;IAErD,OAAO;QACLwB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAX,OAAOC;QACPO;IACF;AACF,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItemStyles.styles.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
+export const navSubItemClassNames = {
+  root: 'fui-NavSubItem'
+};
+/**
+ * Styles for the content slot (children)
+ */
+const useNavSubItemSpecificStyles = /*#__PURE__*/__styles({
+  base: {
+    B1hrpyx: "fqo71ku"
+  },
+  smallBase: {
+    B1hrpyx: "f17f9sv1"
+  },
+  selectedIndicator: {
+    rjyhj6: "f1f74g36"
+  }
+}, {
+  d: [".fqo71ku{-webkit-padding-start:46px;padding-inline-start:46px;}", ".f17f9sv1{-webkit-padding-start:40px;padding-inline-start:40px;}", ".f1f74g36::after{-webkit-margin-start:-52px;margin-inline-start:-52px;}"]
+});
+/**
+ * Apply styling to the NavSubItem slots based on the state
+ */
+export const useNavSubItemStyles_unstable = state => {
+  'use no memo';
+
+  const rootDefaultClassName = useRootDefaultClassName();
+  const smallStyles = useSmallStyles();
+  const contentStyles = useContentStyles();
+  const indicatorStyles = useIndicatorStyles();
+  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
+  const {
+    selected,
+    density
+  } = state;
+  const isSmallDensity = density === 'small';
+  state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n    root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n    base: {\n        paddingInlineStart: '46px'\n    },\n    smallBase: {\n        paddingInlineStart: '40px'\n    },\n    selectedIndicator: {\n        '::after': {\n            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n        }\n    }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n    const { selected, density } = state;\n    const isSmallDensity = density === 'small';\n    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItemStyles.styles.raw.js

@@ -0,0 +1,35 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
+export const navSubItemClassNames = {
+    root: 'fui-NavSubItem'
+};
+/**
+ * Styles for the content slot (children)
+ */ const useNavSubItemSpecificStyles = makeStyles({
+    base: {
+        paddingInlineStart: '46px'
+    },
+    smallBase: {
+        paddingInlineStart: '40px'
+    },
+    selectedIndicator: {
+        '::after': {
+            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`
+        }
+    }
+});
+/**
+ * Apply styling to the NavSubItem slots based on the state
+ */ export const useNavSubItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootDefaultClassName = useRootDefaultClassName();
+    const smallStyles = useSmallStyles();
+    const contentStyles = useContentStyles();
+    const indicatorStyles = useIndicatorStyles();
+    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
+    const { selected, density } = state;
+    const isSmallDensity = density === 'small';
+    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItem/useNavSubItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n  navItemTokens,\n  useContentStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n  root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n  base: {\n    paddingInlineStart: '46px',\n  },\n  smallBase: {\n    paddingInlineStart: '40px',\n  },\n  selectedIndicator: {\n    '::after': {\n      marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n    },\n  },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n  const { selected, density } = state;\n  const isSmallDensity = density === 'small';\n\n  state.root.className = mergeClasses(\n    navSubItemClassNames.root,\n    rootDefaultClassName,\n    isSmallDensity && smallStyles.root,\n    isSmallDensity && navSubItemSpecificStyles.smallBase,\n    navSubItemSpecificStyles.base,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    selected && navSubItemSpecificStyles.selectedIndicator,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnCP,MAAMT,IAAI,CAACkB,SAAS,GAAGzB,aACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}