@fluentui/react-nav 9.3.24 → 9.4.0

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useNavCategoryItem_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useNavCategoryItemBase_unstable: function() {
+        return useNavCategoryItemBase_unstable;
+    },
+    useNavCategoryItem_unstable: function() {
         return useNavCategoryItem_unstable;
     }
 });
@@ -25,9 +33,35 @@ const ExpandIconMotion = (0, _reactmotion.createPresenceComponentVariant)(_react
     inAngle: 180
 });
 const useNavCategoryItem_unstable = (props, ref)=>{
+    const { density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const state = useNavCategoryItemBase_unstable(props, ref);
+    return {
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            expandIconMotion: ExpandIconMotion
+        },
+        expandIcon: _reactutilities.slot.always(props.expandIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown20Regular, null),
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        }),
+        expandIconMotion: (0, _reactmotion.presenceMotionSlot)(props.expandIconMotion, {
+            elementType: ExpandIconMotion,
+            defaultProps: {
+                visible: state.open
+            }
+        }),
+        density
+    };
+};
+const useNavCategoryItemBase_unstable = (props, ref)=>{
     const { onClick, expandIcon, icon } = props;
     const { open, value } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
-    const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const { onRequestNavCategoryItemToggle, selectedCategoryValue } = (0, _NavContext.useNavContext_unstable)();
     const onNavCategoryItemClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>onRequestNavCategoryItemToggle(event, {
             type: 'click',
             event,
@@ -45,8 +79,7 @@ const useNavCategoryItem_unstable = (props, ref)=>{
         components: {
             root: 'button',
             icon: 'span',
-            expandIcon: 'span',
-            expandIconMotion: ExpandIconMotion
+            expandIcon: 'span'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
             ref,
@@ -59,20 +92,12 @@ const useNavCategoryItem_unstable = (props, ref)=>{
         }),
         expandIcon: _reactutilities.slot.always(expandIcon, {
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown20Regular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         }),
-        expandIconMotion: (0, _reactmotion.presenceMotionSlot)(props.expandIconMotion, {
-            elementType: ExpandIconMotion,
-            defaultProps: {
-                visible: open
-            }
-        }),
         icon: _reactutilities.slot.optional(icon, {
             elementType: 'span'
-        }),
-        density
+        })
     };
 };

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACkD,4BAA4B;4BACxE,wBAAwB;6BACoB,yBAAyB;oCAG3D,wBAAwB;4BAChC,gBAAgB;8CAChC,4CAA4C;AAEnE,MAAMY,uBAAmBN,2CAAAA,EAA+BK,oCAAAA,EAAQ;IAC9DE,UAAUN,yBAAAA,CAAaO,YAAY;IACnCC,QAAQR,yBAAAA,CAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAWO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,OAAGlB,kDAAAA;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,OAAGpB,kCAAAA;IAEtF,MAAMqB,6BAAyB3B,gCAAAA,MAC7BF,8BAAAA,EAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,oBAAAA,CAAKqC,MAAM,KACfvC,wCAAAA,EAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,oBAAAA,CAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACtC,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,sBAAkB/B,+BAAAA,EAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,oBAAAA,CAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n  NavCategoryItemBaseProps,\n  NavCategoryItemBaseState,\n  NavCategoryItemProps,\n  NavCategoryItemState,\n} from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const state = useNavCategoryItemBase_unstable(props, ref);\n\n  return {\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      expandIconMotion: ExpandIconMotion,\n    },\n    expandIcon: slot.always(props.expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: state.open,\n      },\n    }),\n    density,\n  };\n};\n\n/**\n * Create the base state required to render NavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItemBase_unstable = (\n  props: NavCategoryItemBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemBaseState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","density","state","useNavCategoryItemBase_unstable","components","expandIconMotion","expandIcon","always","defaultProps","children","elementType","visible","open","onClick","icon","value","onRequestNavCategoryItemToggle","selectedCategoryValue","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","root","optional"],"mappings":"AAAA;;;;;;;;;;;;mCAwEayB;eAAAA;;+BAtCAL;eAAAA;;;;iEAhCU,QAAQ;gCACkD,4BAA4B;4BACxE,wBAAwB;6BACoB,yBAAyB;oCAQ3D,wBAAwB;4BAChC,gBAAgB;8CAChC,4CAA4C;AAEnE,MAAMR,uBAAmBN,2CAAAA,EAA+BK,oCAAAA,EAAQ;IAC9DE,UAAUN,yBAAAA,CAAaO,YAAY;IACnCC,QAAQR,yBAAAA,CAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAWO,oCAAoC,CACzCE,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,OAAGb,kCAAAA;IAE/B,MAAMc,QAAQC,gCAAgCJ,OAAOC;IAErD,OAAO;QACL,GAAGE,KAAK;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBC,kBAAkBf;QACpB;QACAgB,YAAYzB,oBAAAA,CAAK0B,MAAM,CAACR,MAAMO,UAAU,EAAE;YACxCE,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC1B,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACA2B,aAAa;QACf;QACAL,sBAAkBnB,+BAAAA,EAAmBa,MAAMM,gBAAgB,EAAE;YAC3DK,aAAapB;YACbkB,cAAc;gBACZG,SAAST,MAAMU,IAAI;YACrB;QACF;QACAX;IACF;AACF,EAAE;AAQK,wCAAwC,CAC7CF,OACAC;IAEA,MAAM,EAAEa,OAAO,EAAEP,UAAU,EAAEQ,IAAI,EAAE,GAAGf;IAEtC,MAAM,EAAEa,IAAI,EAAEG,KAAK,EAAE,GAAG5B,sDAAAA;IAExB,MAAM,EAAE6B,8BAA8B,EAAEC,qBAAqB,EAAE,OAAG7B,kCAAAA;IAElE,MAAM8B,6BAAyBpC,gCAAAA,MAC7BF,8BAAAA,EAAeiC,SAASM,CAAAA,QACtBH,+BAA+BG,OAAO;YAAEC,MAAM;YAASD;YAAOJ,OAAO;YAAIM,eAAeN;QAAM;IAIlG,qCAAqC;IACrC,MAAMO,WAAWL,0BAA0BF,SAAS,CAACH;IACrD,+GAA+G;IAC/G,MAAMW,mBAAqCD,YAAY,CAACV,OAAO,SAAS;IAExE,OAAO;QACLA;QACAG;QACAO;QACAlB,YAAY;YACVoB,MAAM;YACNV,MAAM;YACNR,YAAY;QACd;QACAkB,MAAM3C,oBAAAA,CAAK0B,MAAM,KACf5B,wCAAAA,EAAyB,UAAU;YACjCqB;YACA,gBAAgBuB;YAChB,iBAAiBX;YACjB,GAAGb,KAAK;YACRc,SAASK;QACX,IACA;YAAER,aAAa;QAAS;QAE1BJ,YAAYzB,oBAAAA,CAAK0B,MAAM,CAACD,YAAY;YAClCE,cAAc;gBACZ,eAAe;YACjB;YACAE,aAAa;QACf;QACAI,MAAMjC,oBAAAA,CAAK4C,QAAQ,CAACX,MAAM;YACxBJ,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js

@@ -68,9 +68,12 @@ const useNavCategoryItemStyles_unstable = (state)=>{
     const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
     const expandIconStyles = useExpandIconStyles();
     const { selected, open, density } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
     }
     return state;

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICQ,yBAAyB;;;qCAsBY;eAAjCiB;;IAPAF,aAAa;;;;uBAlBW,gBAAgB;uCAEoD,2BAA2B;AACjI,kCAAkC;IACrCd,IAAI,EAAE,qBAAqB;IAC3BC,IAAI,EAAE,2BAA2B;IACjCC,UAAU,EAAE,iCAAiC;IAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAM3B,CAAC;AAGS,sBAAmB,WAAA,OAAGtB,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAU,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAF,CAAA,EAAA;QAAA;KAAA;AAAA,CAIhC,CAAC;AAGS,2CAA2CI,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;IAClC,MAAMK,WAAW,OAAGrB,qCAAc,CAAC,CAAC;IACpC,MAAMsB,oBAAoB,OAAGvB,8CAAuB,CAAC,CAAC;IACtD,MAAMwB,aAAa,OAAG3B,uCAAgB,CAAC,CAAC;IACxC,MAAM4B,eAAe,OAAG1B,yCAAkB,CAAC,CAAC;IAC5C,MAAM2B,UAAU,OAAG5B,oCAAa,CAAC,CAAC;IAClC,MAAM6B,gBAAgB,GAAGpB,mBAAmB,CAAC,CAAC;IAC9C,MAAM,EAAEI,QAAQ,EAAEiB,IAAI,EAAEC,OAAAA,EAAS,GAAGT,KAAK;IACzCA,KAAK,CAACjB,IAAI,CAAC2B,SAAS,OAAGnC,mBAAY,EAACO,yBAAyB,CAACC,IAAI,EAAEoB,oBAAoB,EAAEF,UAAU,CAACb,IAAI,EAAEqB,OAAO,KAAK,OAAO,IAAIP,WAAW,CAACnB,IAAI,EAAEQ,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIH,eAAe,CAACjB,IAAI,EAAEG,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIJ,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC2B,SAAS,CAAC;IACnRV,KAAK,CAACf,UAAU,CAACyB,SAAS,GAAGnC,uBAAY,EAACO,yBAAyB,CAACG,UAAU,EAAEsB,gBAAgB,CAACnB,IAAI,EAAEY,KAAK,CAACf,UAAU,CAACyB,SAAS,CAAC;IAClI,IAAIV,KAAK,CAAChB,IAAI,EAAE;QACZgB,KAAK,CAAChB,IAAI,CAAC0B,SAAS,OAAGnC,mBAAY,EAACO,yBAAyB,CAACE,IAAI,EAAEsB,UAAU,CAAClB,IAAI,EAAEG,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAChB,IAAI,CAAC0B,SAAS,CAAC;IAC/I;IACA,OAAOV,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICQ,yBAAyB;;;qCAsBY;eAAjCiB;;IAPAF,aAAa;;;;uBAlBW,gBAAgB;uCAEoD,2BAA2B;AACjI,kCAAkC;IACrCd,IAAI,EAAE,qBAAqB;IAC3BC,IAAI,EAAE,2BAA2B;IACjCC,UAAU,EAAE,iCAAiC;IAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAM3B,CAAC;AAGS,sBAAmB,WAAA,OAAGtB,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAU,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAF,CAAA,EAAA;QAAA;KAAA;AAAA,CAIhC,CAAC;AAGS,2CAA2CI,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;IAClC,MAAMK,WAAW,OAAGrB,qCAAc,CAAC,CAAC;IACpC,MAAMsB,oBAAoB,OAAGvB,8CAAuB,CAAC,CAAC;IACtD,MAAMwB,aAAa,OAAG3B,uCAAgB,CAAC,CAAC;IACxC,MAAM4B,eAAe,OAAG1B,yCAAkB,CAAC,CAAC;IAC5C,MAAM2B,UAAU,OAAG5B,oCAAa,CAAC,CAAC;IAClC,MAAM6B,gBAAgB,GAAGpB,mBAAmB,CAAC,CAAC;IAC9C,MAAM,EAAEI,QAAQ,EAAEiB,IAAI,EAAEC,OAAAA,EAAS,GAAGT,KAAK;IACzC,oDAAA;IACAA,KAAK,CAACjB,IAAI,CAAC2B,SAAS,OAAGnC,mBAAY,EAACO,yBAAyB,CAACC,IAAI,EAAEoB,oBAAoB,EAAEF,UAAU,CAACb,IAAI,EAAEqB,OAAO,KAAK,OAAO,IAAIP,WAAW,CAACnB,IAAI,EAAEQ,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIH,eAAe,CAACjB,IAAI,EAAEG,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIJ,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC2B,SAAS,CAAC;IACnR,oDAAA;IACAV,KAAK,CAACf,UAAU,CAACyB,SAAS,GAAGnC,uBAAY,EAACO,yBAAyB,CAACG,UAAU,EAAEsB,gBAAgB,CAACnB,IAAI,EAAEY,KAAK,CAACf,UAAU,CAACyB,SAAS,CAAC;IAClI,IAAIV,KAAK,CAAChB,IAAI,EAAE;QACZ,oDAAA;QACAgB,KAAK,CAAChB,IAAI,CAAC0B,SAAS,OAAGnC,mBAAY,EAACO,yBAAyB,CAACE,IAAI,EAAEsB,UAAU,CAAClB,IAAI,EAAEG,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAChB,IAAI,CAAC0B,SAAS,CAAC;IAC/I;IACA,OAAOV,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.raw.js

@@ -51,9 +51,12 @@ const useNavCategoryItemStyles_unstable = (state)=>{
     const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
     const expandIconStyles = useExpandIconStyles();
     const { selected, open, density } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
     }
     return state;

package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaQ,yBAAAA;;;qCA2BAa;eAAAA;;IATAF,aAAAA;;;;uBA/B4B,iBAAiB;4BAEzB,wBAAwB;uCAOlD,4BAA4B;AAI5B,kCAAwE;IAC7EV,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,0BAAsBb,iBAAAA,EAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,UAAUf,4BAAAA,CAAiBgB,WAAW;AACxC;AAKO,0BAAsBlB,iBAAAA,EAAW;IACtCc,MAAM;QACJM,OAAO;IACT;AACF,GAAG;AAKI,0CAA0C,CAACE;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,kBAAcjB,qCAAAA;IACpB,MAAMkB,2BAAuBnB,8CAAAA;IAC7B,MAAMoB,oBAAgBvB,uCAAAA;IACtB,MAAMwB,sBAAkBtB,yCAAAA;IACxB,MAAMuB,iBAAaxB,oCAAAA;IACnB,MAAMyB,mBAAmBhB;IAEzB,MAAM,EAAEI,QAAQ,EAAEa,IAAI,EAAEC,OAAO,EAAE,GAAGT;IAEpCA,MAAMb,IAAI,CAACuB,SAAS,OAAG/B,mBAAAA,EACrBO,0BAA0BC,IAAI,EAC9BgB,sBACAF,WAAWT,IAAI,EACfiB,YAAY,WAAWP,YAAYf,IAAI,EACvCQ,YAAYa,SAAS,SAASH,gBAAgBb,IAAI,EAClDG,YAAYa,SAAS,SAASJ,cAAcT,QAAQ,EACpDK,MAAMb,IAAI,CAACuB,SAAS;IAGtBV,MAAMX,UAAU,CAACqB,SAAS,OAAG/B,mBAAAA,EAC3BO,0BAA0BG,UAAU,EACpCkB,iBAAiBf,IAAI,EACrBQ,MAAMX,UAAU,CAACqB,SAAS;IAG5B,IAAIV,MAAMZ,IAAI,EAAE;QACdY,MAAMZ,IAAI,CAACsB,SAAS,OAAG/B,mBAAAA,EACrBO,0BAA0BE,IAAI,EAC9BkB,WAAWd,IAAI,EACfG,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMZ,IAAI,CAACsB,SAAS;IAExB;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaQ,yBAAAA;;;IA2BAa,iCAAAA;;;IATAF,aAAAA;;;;uBA/B4B,iBAAiB;4BAEzB,wBAAwB;uCAOlD,4BAA4B;AAI5B,kCAAwE;IAC7EV,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,0BAAsBb,iBAAAA,EAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,UAAUf,4BAAAA,CAAiBgB,WAAW;AACxC;AAKO,0BAAsBlB,iBAAAA,EAAW;IACtCc,MAAM;QACJM,OAAO;IACT;AACF,GAAG;AAKI,0CAA0C,CAACE;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,kBAAcjB,qCAAAA;IACpB,MAAMkB,2BAAuBnB,8CAAAA;IAC7B,MAAMoB,oBAAgBvB,uCAAAA;IACtB,MAAMwB,kBAAkBtB,6CAAAA;IACxB,MAAMuB,iBAAaxB,oCAAAA;IACnB,MAAMyB,mBAAmBhB;IAEzB,MAAM,EAAEI,QAAQ,EAAEa,IAAI,EAAEC,OAAO,EAAE,GAAGT;IAEpC,oDAAoD;IACpDA,MAAMb,IAAI,CAACuB,SAAS,GAAG/B,uBAAAA,EACrBO,0BAA0BC,IAAI,EAC9BgB,sBACAF,WAAWT,IAAI,EACfiB,YAAY,WAAWP,YAAYf,IAAI,EACvCQ,YAAYa,SAAS,SAASH,gBAAgBb,IAAI,EAClDG,YAAYa,SAAS,SAASJ,cAAcT,QAAQ,EACpDK,MAAMb,IAAI,CAACuB,SAAS;IAGtB,oDAAoD;IACpDV,MAAMX,UAAU,CAACqB,SAAS,OAAG/B,mBAAAA,EAC3BO,0BAA0BG,UAAU,EACpCkB,iBAAiBf,IAAI,EACrBQ,MAAMX,UAAU,CAACqB,SAAS;IAG5B,IAAIV,MAAMZ,IAAI,EAAE;QACd,oDAAoD;QACpDY,MAAMZ,IAAI,CAACsB,SAAS,OAAG/B,mBAAAA,EACrBO,0BAA0BE,IAAI,EAC9BkB,WAAWd,IAAI,EACfG,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMZ,IAAI,CAACsB,SAAS;IAExB;IAEA,OAAOV;AACT,EAAE"}

package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.js

@@ -39,7 +39,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useNavDividerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDividerClassNames.root, styles.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.wrapper.className = (0, _react.mergeClasses)(navDividerClassNames.wrapper, state.wrapper.className);
     (0, _reactdivider.useDividerStyles_unstable)(state);
     return state;

package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nexport const navDividerClassNames = {\n    root: 'fui-NavDivider',\n    wrapper: 'fui-NavDivider__wrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        flexGrow: 0,\n        marginTop: '4px',\n        marginBottom: '4px'\n    }\n});\n/**\n * Apply styling to the NavDivider slots based on the state\n */ export const useNavDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n    useDividerStyles_unstable(state);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","Bh6795r","B6of3ja","jrapky","d","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;gCAaY;;;;uBAfJ,gBAAgB;8BACf,yBAAyB;AAC5D,6BAA6B;IAChCC,IAAI,EAAE,gBAAgB;IACtBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMjB,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAACR,IAAI,CAACU,SAAS,OAAGb,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjGF,KAAK,CAACP,OAAO,CAACS,SAAS,OAAGb,mBAAY,EAACE,oBAAoB,CAACE,OAAO,EAAEO,KAAK,CAACP,OAAO,CAACS,SAAS,CAAC;QAC7FZ,uCAAyB,EAACU,KAAK,CAAC;IAChC,OAAOA,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nexport const navDividerClassNames = {\n    root: 'fui-NavDivider',\n    wrapper: 'fui-NavDivider__wrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        flexGrow: 0,\n        marginTop: '4px',\n        marginBottom: '4px'\n    }\n});\n/**\n * Apply styling to the NavDivider slots based on the state\n */ export const useNavDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n    useDividerStyles_unstable(state);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","Bh6795r","B6of3ja","jrapky","d","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,oBAAoB;;;gCAaY;;;;uBAfJ,gBAAgB;8BACf,yBAAyB;AAC5D,6BAA6B;IAChCC,IAAI,EAAE,gBAAgB;IACtBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMjB,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAM,KAAK,CAACR,IAAI,CAACU,SAAS,OAAGb,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjG,oDAAA;IACAF,KAAK,CAACP,OAAO,CAACS,SAAS,OAAGb,mBAAY,EAACE,oBAAoB,CAACE,OAAO,EAAEO,KAAK,CAACP,OAAO,CAACS,SAAS,CAAC;QAC7FZ,uCAAyB,EAACU,KAAK,CAAC;IAChC,OAAOA,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.raw.js

@@ -33,7 +33,9 @@ const useStyles = (0, _react.makeStyles)({
 const useNavDividerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDividerClassNames.root, styles.root, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.wrapper.className = (0, _react.mergeClasses)(navDividerClassNames.wrapper, state.wrapper.className);
     (0, _reactdivider.useDividerStyles_unstable)(state);
     return state;

package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDividerState } from './NavDivider.types';\n\nexport const navDividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-NavDivider',\n  wrapper: 'fui-NavDivider__wrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 0,\n    marginTop: '4px',\n    marginBottom: '4px',\n  },\n});\n\n/**\n * Apply styling to the NavDivider slots based on the state\n */\nexport const useNavDividerStyles_unstable = (state: NavDividerState): NavDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n\n  useDividerStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","flexGrow","marginTop","marginBottom","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,oBAAAA;;;IAgBAO,4BAAAA;;;;uBArB4B,iBAAiB;8BACG,0BAA0B;AAIhF,6BAA2D;IAChEN,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;QAE5FX,uCAAAA,EAA0BS;IAC1B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDividerState } from './NavDivider.types';\n\nexport const navDividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-NavDivider',\n  wrapper: 'fui-NavDivider__wrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 0,\n    marginTop: '4px',\n    marginBottom: '4px',\n  },\n});\n\n/**\n * Apply styling to the NavDivider slots based on the state\n */\nexport const useNavDividerStyles_unstable = (state: NavDividerState): NavDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n\n  useDividerStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","flexGrow","marginTop","marginBottom","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,oBAAAA;;;IAgBAO,4BAAAA;;;;uBArB4B,iBAAiB;8BACG,0BAA0B;AAIhF,6BAA2D;IAChEN,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChG,oDAAoD;IACpDF,MAAMN,OAAO,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;QAE5FX,uCAAAA,EAA0BS;IAC1B,OAAOA;AACT,EAAE"}

package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.js

@@ -42,6 +42,7 @@ const useNavDrawerStyles_unstable = (state)=>{
     'use no memo';
     const { size } = state;
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n    root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: navItemTokens.backgroundColor,\n        alignItems: 'unset'\n    },\n    // seperate style so it can be applied conditionally\n    // if size is not set, use default width from the token.\n    defaultWidth: {\n        width: `${navItemTokens.defaultDrawerWidth}px`\n    }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;+BAkBY;eAA3BQ;;;uBApBwB,gBAAgB;AAElD,4BAA4B;IAC/BP,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,qCAAqCE,KAAK,IAAG;IACpD,aAAa;IACb,MAAM,EAAEC,IAAAA,EAAM,GAAGD,KAAK;IACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BO,KAAK,CAACR,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;IAC9H,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n    root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: navItemTokens.backgroundColor,\n        alignItems: 'unset'\n    },\n    // seperate style so it can be applied conditionally\n    // if size is not set, use default width from the token.\n    defaultWidth: {\n        width: `${navItemTokens.defaultDrawerWidth}px`\n    }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;+BAkBY;eAA3BQ;;;uBApBwB,gBAAgB;AAElD,4BAA4B;IAC/BP,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGL,mBAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,oCAAqCE,KAAK,IAAG;IACpD,aAAa;IACb,MAAM,EAAEC,IAAAA,EAAM,GAAGD,KAAK;IACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAO,KAAK,CAACR,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;IAC9H,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.raw.js

@@ -39,6 +39,7 @@ const useNavDrawerStyles_unstable = (state)=>{
     'use no memo';
     const { size } = state;
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: navItemTokens.backgroundColor,\n    alignItems: 'unset',\n  },\n  // seperate style so it can be applied conditionally\n  // if size is not set, use default width from the token.\n  defaultWidth: {\n    width: `${navItemTokens.defaultDrawerWidth}px`,\n  },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n  'use no memo';\n\n  const { size } = state;\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    navDrawerClassNames.root,\n    styles.root,\n    !size && styles.defaultWidth,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,mBAAAA;;;IAsBAQ,2BAAAA;;;;uBA5B4B,iBAAiB;uCAI5B,4BAA4B;AAEnD,4BAAsF;IAC3FP,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,oCAAAA,CAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,oCAAAA,CAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAKO,oCAAoC,CAACE;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: navItemTokens.backgroundColor,\n    alignItems: 'unset',\n  },\n  // seperate style so it can be applied conditionally\n  // if size is not set, use default width from the token.\n  defaultWidth: {\n    width: `${navItemTokens.defaultDrawerWidth}px`,\n  },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n  'use no memo';\n\n  const { size } = state;\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    navDrawerClassNames.root,\n    styles.root,\n    !size && styles.defaultWidth,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,mBAAAA;;;IAsBAQ,2BAAAA;;;;uBA5B4B,iBAAiB;uCAI5B,4BAA4B;AAEnD,4BAAsF;IAC3FP,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,oCAAAA,CAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,oCAAAA,CAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAKO,oCAAoC,CAACE;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js

@@ -63,6 +63,7 @@ const useNavDrawerBodyStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerBodyStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerBodyClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerBodyClassNames = {\n    root: 'fui-NavDrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n        alignItems: 'unset',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */ export const useNavDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerBodyStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bt984gj","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,uBAAuB;;;mCAgBY;eAA/Bc;;;uBAnBwB,gBAAgB;6BAEZ,wBAAwB;AAC9D,gCAAgC;IACnCb,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,wCAAyCE,KAAK,IAAG;IACxD,aAAa;QACbhB,yCAA4B,EAACgB,KAAK,CAAC;IACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;IACpG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerBodyClassNames = {\n    root: 'fui-NavDrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n        alignItems: 'unset',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */ export const useNavDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerBodyStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bt984gj","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,uBAAuB;;;mCAgBY;eAA/Bc;;;uBAnBwB,gBAAgB;6BAEZ,wBAAwB;AAC9D,gCAAgC;IACnCb,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;QACbhB,yCAA4B,EAACgB,KAAK,CAAC;IACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAa,KAAK,CAACd,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;IACpG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js

@@ -38,6 +38,7 @@ const useNavDrawerBodyStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerBodyStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerBodyClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\n\nexport const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {\n  root: 'fui-NavDrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n    alignItems: 'unset',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */\nexport const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {\n  'use no memo';\n\n  useDrawerBodyStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,uBAAAA;;;IAoBAW,+BAAAA;;;;uBA1B4B,iBAAiB;4BACnC,wBAAwB;6BACF,yBAAyB;AAI/D,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,kBAAAA,CAAOM,mBAAmB,CAAC,GAAG,EAAEN,kBAAAA,CAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,kBAAAA,CAAOY,kBAAkB;IACnC;AACF;AAKO,wCAAwC,CAACE;IAC9C;QAEAb,yCAAAA,EAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\n\nexport const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {\n  root: 'fui-NavDrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n    alignItems: 'unset',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */\nexport const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {\n  'use no memo';\n\n  useDrawerBodyStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,uBAAAA;;;IAoBAW,+BAAAA;;;;uBA1B4B,iBAAiB;4BACnC,wBAAwB;6BACF,yBAAyB;AAI/D,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,kBAAAA,CAAOM,mBAAmB,CAAC,GAAG,EAAEN,kBAAAA,CAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,kBAAAA,CAAOY,kBAAkB;IACnC;AACF;AAKO,wCAAwC,CAACE;IAC9C;QAEAb,yCAAAA,EAA6Ba;IAC7B,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js

@@ -52,6 +52,7 @@ const useNavDrawerFooterStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerFooterStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerFooterClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n    root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerFooterStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,yBAAyB;;;IAerBa,iCAAiC;;;;uBAlBT,gBAAgB;6BAEV,wBAAwB;AAChE,kCAAkC;IACrCZ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;QACbf,2CAA8B,EAACe,KAAK,CAAC;IACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGnB,mBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n    root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerFooterStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,yBAAyB;;;qCAeY;;;;uBAlBT,gBAAgB;6BAEV,wBAAwB;AAChE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;QACbf,2CAA8B,EAACe,KAAK,CAAC;IACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGnB,mBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js

@@ -37,6 +37,7 @@ const useNavDrawerFooterStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerFooterStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerFooterClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n  root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n  'use no memo';\n\n  useDrawerFooterStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,yBAAAA;;;qCAmBAW;;;;uBAzB4B,iBAAiB;4BACnC,wBAAwB;6BACA,yBAAyB;AAIjE,kCAAwE;IAC7EV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOO,mBAAmB,CAAC,CAAC,EAAEP,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOQ,iBAAiB,CAAC,EAAE,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,kBAAAA,CAAOM,kBAAkB;IACnC;AACF;AAKO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+CAAAA,EAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n  root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n  'use no memo';\n\n  useDrawerFooterStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,yBAAAA;;;qCAmBAW;eAAAA;;;uBAzB4B,iBAAiB;4BACnC,wBAAwB;6BACA,yBAAyB;AAIjE,kCAAwE;IAC7EV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOO,mBAAmB,CAAC,CAAC,EAAEP,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOQ,iBAAiB,CAAC,EAAE,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,kBAAAA,CAAOM,kBAAkB;IACnC;AACF;AAKO,0CAA0C,CAACQ;IAChD;QAEAb,2CAAAA,EAA+Ba;IAC/B,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js

@@ -57,6 +57,7 @@ const useNavDrawerHeaderStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerHeaderStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerHeaderClassNames = {\n    root: 'fui-NavDrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        margin: 'unset',\n        paddingInlineStart: '14px',\n        paddingBlock: '5px'\n    }\n});\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */ export const useNavDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerHeaderStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B1hrpyx","Dbcxam","rjzwhg","Bblux5w","d","p","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,yBAAyB;;;qCAcY;;;;uBAhBT,gBAAgB;6BACV,wBAAwB;AAChE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;QACbhB,2CAA8B,EAACgB,KAAK,CAAC;IACrC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,OAAGnB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerHeaderClassNames = {\n    root: 'fui-NavDrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        margin: 'unset',\n        paddingInlineStart: '14px',\n        paddingBlock: '5px'\n    }\n});\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */ export const useNavDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerHeaderStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B1hrpyx","Dbcxam","rjzwhg","Bblux5w","d","p","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,yBAAyB;;;qCAcY;eAAjCc;;;uBAhBwB,gBAAgB;6BACV,wBAAwB;AAChE,kCAAkC;IACrCb,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;QACbhB,2CAA8B,EAACgB,KAAK,CAAC;IACrC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAa,KAAK,CAACd,IAAI,CAACgB,SAAS,OAAGnB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js

@@ -35,6 +35,7 @@ const useNavDrawerHeaderStyles_unstable = (state)=>{
     'use no memo';
     (0, _reactdrawer.useDrawerHeaderStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navDrawerHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerHeaderSlots, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\nexport const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {\n  root: 'fui-NavDrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    margin: 'unset',\n    paddingInlineStart: '14px',\n    paddingBlock: '5px',\n  },\n});\n\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */\nexport const useNavDrawerHeaderStyles_unstable = (state: NavDrawerHeaderState): NavDrawerHeaderState => {\n  'use no memo';\n\n  useDrawerHeaderStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","margin","paddingInlineStart","paddingBlock","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,yBAAAA;;;qCAkBAM;eAAAA;;;uBAxB4B,iBAAiB;6BACX,yBAAyB;AAKjE,kCAAwE;IAC7EL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAKO,0CAA0C,CAACE;IAChD;QAEAR,2CAAAA,EAA+BQ;IAC/B,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerHeaderSlots, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\nexport const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {\n  root: 'fui-NavDrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    margin: 'unset',\n    paddingInlineStart: '14px',\n    paddingBlock: '5px',\n  },\n});\n\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */\nexport const useNavDrawerHeaderStyles_unstable = (state: NavDrawerHeaderState): NavDrawerHeaderState => {\n  'use no memo';\n\n  useDrawerHeaderStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","margin","paddingInlineStart","paddingBlock","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,yBAAAA;;;qCAkBAM;eAAAA;;;uBAxB4B,iBAAiB;6BACX,yBAAyB;AAKjE,kCAAwE;IAC7EL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAKO,0CAA0C,CAACE;IAChD;QAEAR,2CAAAA,EAA+BQ;IAC/B,MAAMC,SAASN;IACf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/NavItem/NavItem.types.js

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

package/lib-commonjs/components/NavItem/NavItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/NavItem.types.ts"],"sourcesContent":["import type { NavItemValue } from '../NavContext.types';\nimport type { NavDensity } from '../Nav/Nav.types';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavItemSlots = {\n  /**\n   * The root element of the NavItem.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * NavItem Props\n */\nexport type NavItemProps = ComponentProps<NavItemSlots> & {\n  /**\n   * Destination where the nav item points to.\n   */\n  href?: string;\n  /**\n   * The value that identifies this navCategoryItem when selected.\n   */\n  value: NavItemValue;\n};\n\n/**\n * State used in rendering NavItem\n */\nexport type NavItemState = ComponentState<NavItemSlots> &\n  Pick<NavItemProps, 'value'> & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n"],"names":[],"mappings":"AA+BA;;CAEC,GACD,WAaI"}
+{"version":3,"sources":["../src/components/NavItem/NavItem.types.ts"],"sourcesContent":["import type { NavItemValue } from '../NavContext.types';\nimport type { NavDensity } from '../Nav/Nav.types';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavItemSlots = {\n  /**\n   * The root element of the NavItem.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * NavItem Props\n */\nexport type NavItemProps = ComponentProps<NavItemSlots> & {\n  /**\n   * Destination where the nav item points to.\n   */\n  href?: string;\n  /**\n   * The value that identifies this navCategoryItem when selected.\n   */\n  value: NavItemValue;\n};\n\nexport type NavItemBaseProps = NavItemProps;\n\n/**\n * State used in rendering NavItem\n */\nexport type NavItemState = ComponentState<NavItemSlots> &\n  Pick<NavItemProps, 'value'> & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n\nexport type NavItemBaseState = Omit<NavItemState, 'density'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/NavItem/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderNavItem_unstable: function() {
         return _renderNavItem.renderNavItem_unstable;
     },
+    useNavItemBase_unstable: function() {
+        return _useNavItem.useNavItemBase_unstable;
+    },
     useNavItemStyles_unstable: function() {
         return _useNavItemStylesstyles.useNavItemStyles_unstable;
     },

package/lib-commonjs/components/NavItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/index.ts"],"sourcesContent":["export { NavItem } from './NavItem';\nexport type { NavItemSlots, NavItemProps, NavItemState } from './NavItem.types';\nexport { renderNavItem_unstable } from './renderNavItem';\nexport { useNavItem_unstable } from './useNavItem';\nexport { useNavItemStyles_unstable, navItemClassNames } from './useNavItemStyles.styles';\n"],"names":["NavItem","renderNavItem_unstable","useNavItem_unstable","useNavItemStyles_unstable","navItemClassNames"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIoBI,yCAAiB;;;eAF5CH,qCAAsB;;;eAEtBE,iDAAyB;;;eADzBD,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
+{"version":3,"sources":["../src/components/NavItem/index.ts"],"sourcesContent":["export { NavItem } from './NavItem';\nexport type { NavItemSlots, NavItemProps, NavItemState, NavItemBaseProps, NavItemBaseState } from './NavItem.types';\nexport { renderNavItem_unstable } from './renderNavItem';\nexport { useNavItem_unstable, useNavItemBase_unstable } from './useNavItem';\nexport { useNavItemStyles_unstable, navItemClassNames } from './useNavItemStyles.styles';\n"],"names":["NavItem","renderNavItem_unstable","useNavItem_unstable","useNavItemBase_unstable","useNavItemStyles_unstable","navItemClassNames"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIoBK,yCAAiB;;;eAF5CJ,qCAAsB;;;eACDE,mCAAuB;;;eAC5CC,iDAAyB;;;eADzBF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

package/lib-commonjs/components/NavItem/useNavItem.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useNavItem_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useNavItemBase_unstable: function() {
+        return useNavItemBase_unstable;
+    },
+    useNavItem_unstable: function() {
         return useNavItem_unstable;
     }
 });
@@ -15,8 +23,16 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactaria = require("@fluentui/react-aria");
 const _NavContext = require("../NavContext");
 const useNavItem_unstable = (props, ref)=>{
+    const { density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const state = useNavItemBase_unstable(props, ref);
+    return {
+        ...state,
+        density
+    };
+};
+const useNavItemBase_unstable = (props, ref)=>{
     const { onClick, value, icon, as, href } = props;
-    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const { selectedValue, onRegister, onUnregister, onSelect } = (0, _NavContext.useNavContext_unstable)();
     const rootElementType = as || (href ? 'a' : 'button');
     const selected = selectedValue === value;
     const innerRef = _react.useRef(null);
@@ -68,7 +84,6 @@ const useNavItem_unstable = (props, ref)=>{
             elementType: 'span'
         }),
         selected,
-        value,
-        density
+        value
     };
 };

package/lib-commonjs/components/NavItem/useNavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/useNavItem.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';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavItemProps, NavItemState } from './NavItem.types';\n\n/**\n * Create the state required to render NavItem.\n *\n * The returned state can be modified with hooks such as useNavItemStyles_unstable,\n * before being passed to renderNavItem_unstable.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItem_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemState => {\n  const { onClick, value, icon, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === value;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value });\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 = onNavItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: { root: rootElementType, icon: 'span' },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    selected,\n    value,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavItem_unstable","props","ref","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","density","rootElementType","selected","innerRef","useRef","onNavItemClick","event","defaultPrevented","target","type","root","always","elementType","defaultProps","useEffect","components","optional"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;gCACiD,4BAA4B;2BACzE,uBAAuB;4BACnB,gBAAgB;AAchD,4BAA4B,CACjCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAE3C,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,OAAGb,kCAAAA;IAElF,MAAMc,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAA,CAAO;IAEnD,MAAMO,WAAWN,kBAAkBJ;IAEnC,MAAMW,WAAWtB,OAAMuB,MAAM,CAAc;IAE3C,MAAMC,qBAAsDrB,gCAAAA,EAAiBsB,CAAAA;QAC3Ef,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,QAAItB,6BAAAA,EAAcqB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd;YAAM;QAChD;IACF;IAEA,MAAMkB,OAAO3B,oBAAAA,CAAK4B,MAAM,KACtB7B,wCAAAA,EACEmB,qBACAf,6BAAAA,EAAmBe,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGb,KAAK;IACV,KAEF;QACEuB,aAAaX;QACbY,cAAc;YACZvB,KAAKA;YACLmB,MAAMR;QACR;IACF;IAGFS,KAAKnB,OAAO,GAAGc;IAEfxB,OAAMiC,SAAS,CAAC;QACdjB,WAAW;YACTL;YACAF,KAAKa;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN;gBAAOF,KAAKa;YAAS;QACtC;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUX;KAAM;IAE9C,OAAO;QACLuB,YAAY;YAAEL,MAAMT;YAAiBR,MAAM;QAAO;QAClDiB;QACAjB,MAAMV,oBAAAA,CAAKiC,QAAQ,CAACvB,MAAM;YACxBmB,aAAa;QACf;QACAV;QACAV;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavItem/useNavItem.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';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavItemBaseState, NavItemProps, NavItemState } from './NavItem.types';\n\n/**\n * Create the state required to render NavItem.\n *\n * The returned state can be modified with hooks such as useNavItemStyles_unstable,\n * before being passed to renderNavItem_unstable.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItem_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemState => {\n  const { density = 'medium' } = useNavContext_unstable();\n  const state = useNavItemBase_unstable(props, ref);\n\n  return {\n    ...state,\n    density,\n  };\n};\n\n/**\n * NavItemBaseState is the base state used in rendering NavItem,\n * excluding any design-related properties such as `density`.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItemBase_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemBaseState => {\n  const { onClick, value, icon, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect } = useNavContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === value;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value });\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 = onNavItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: { root: rootElementType, icon: 'span' },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    selected,\n    value,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavItem_unstable","props","ref","density","state","useNavItemBase_unstable","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","rootElementType","selected","innerRef","useRef","onNavItemClick","event","defaultPrevented","target","type","root","always","elementType","defaultProps","useEffect","components","optional"],"mappings":"AAAA;;;;;;;;;;;;2BAuCaY;eAAAA;;uBApBAL;;;;;iEAjBU,QAAQ;gCACiD,4BAA4B;2BACzE,uBAAuB;4BACnB,gBAAgB;AAchD,MAAMA,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,OAAGJ,kCAAAA;IAC/B,MAAMK,QAAQC,wBAAwBJ,OAAOC;IAE7C,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AASK,gCAAgC,CACrCF,OACAC;IAEA,MAAM,EAAEI,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGT;IAE3C,MAAM,EAAEU,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAE,OAAGf,kCAAAA;IAE9D,MAAMgB,kBAAkBN,MAAOC,CAAAA,OAAO,MAAM,QAAA,CAAO;IAEnD,MAAMM,WAAWL,kBAAkBJ;IAEnC,MAAMU,WAAWxB,OAAMyB,MAAM,CAAc;IAE3C,MAAMC,qBAAsDvB,gCAAAA,EAAiBwB,CAAAA;QAC3Ed,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUc;QAEV,IAAI,CAACA,MAAMC,gBAAgB,QAAIxB,6BAAAA,EAAcuB,MAAME,MAAM,GAAG;YAC1DR,SAASM,OAAO;gBAAEG,MAAM;gBAASH;gBAAOb;YAAM;QAChD;IACF;IAEA,MAAMiB,OAAO7B,oBAAAA,CAAK8B,MAAM,KACtB/B,wCAAAA,EACEqB,qBACAjB,6BAAAA,EAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGf,KAAK;IACV,KAEF;QACEyB,aAAaX;QACbY,cAAc;YACZzB,KAAKA;YACLqB,MAAMR;QACR;IACF;IAGFS,KAAKlB,OAAO,GAAGa;IAEf1B,OAAMmC,SAAS,CAAC;QACdhB,WAAW;YACTL;YACAL,KAAKe;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAEN;gBAAOL,KAAKe;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUV;KAAM;IAE9C,OAAO;QACLsB,YAAY;YAAEL,MAAMT;YAAiBP,MAAM;QAAO;QAClDgB;QACAhB,MAAMb,oBAAAA,CAAKmC,QAAQ,CAACtB,MAAM;YACxBkB,aAAa;QACf;QACAV;QACAT;IACF;AACF,EAAE"}

package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js

@@ -31,8 +31,10 @@ const useNavItemStyles_unstable = (state)=>{
     const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
     const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
     const { selected, density } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
     }
     return state;

package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navItemClassNames = {\n    root: 'fui-NavItem',\n    icon: 'fui-NavItem__icon'\n};\n/**\n * Apply styling to the NavItem slots based on the state\n */ export const useNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const { selected, density } = state;\n    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,iBAAiB;;;6BAMY;;;;uBARb,gBAAgB;uCACgE,2BAA2B;AACjI,0BAA0B;IAC7BC,IAAI,EAAE,aAAa;IACnBC,IAAI,EAAE;AACV,CAAC;AAGU,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,oBAAoB,OAAGP,8CAAuB,CAAC,CAAC;IACtD,MAAMQ,WAAW,OAAGP,qCAAc,CAAC,CAAC;IACpC,MAAMQ,aAAa,OAAGZ,uCAAgB,CAAC,CAAC;IACxC,MAAMa,eAAe,OAAGX,yCAAkB,CAAC,CAAC;IAC5C,MAAMY,UAAU,OAAGb,oCAAa,CAAC,CAAC;IAClC,MAAM,EAAEc,QAAQ,EAAEC,OAAAA,EAAS,GAAGP,KAAK;IACnCA,KAAK,CAACH,IAAI,CAACW,SAAS,OAAGlB,mBAAY,EAACM,iBAAiB,CAACC,IAAI,EAAEI,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACL,IAAI,EAAES,QAAQ,IAAIF,eAAe,CAACK,IAAI,EAAEH,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEN,KAAK,CAACH,IAAI,CAACW,SAAS,CAAC;IACtN,IAAIR,KAAK,CAACF,IAAI,EAAE;QACZE,KAAK,CAACF,IAAI,CAACU,SAAS,OAAGlB,mBAAY,EAACM,iBAAiB,CAACE,IAAI,EAAEO,UAAU,CAACI,IAAI,EAAEH,QAAQ,IAAID,UAAU,CAACC,QAAQ,EAAEN,KAAK,CAACF,IAAI,CAACU,SAAS,CAAC;IACvI;IACA,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navItemClassNames = {\n    root: 'fui-NavItem',\n    icon: 'fui-NavItem__icon'\n};\n/**\n * Apply styling to the NavItem slots based on the state\n */ export const useNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const { selected, density } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,iBAAiB;;;IAMbG,yBAAyB;;;;uBARb,gBAAgB;uCACgE,2BAA2B;AACjI,0BAA0B;IAC7BF,IAAI,EAAE,aAAa;IACnBC,IAAI,EAAE;AACV,CAAC;AAGU,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,oBAAoB,OAAGP,8CAAuB,CAAC,CAAC;IACtD,MAAMQ,WAAW,OAAGP,qCAAc,CAAC,CAAC;IACpC,MAAMQ,aAAa,OAAGZ,uCAAgB,CAAC,CAAC;IACxC,MAAMa,eAAe,OAAGX,yCAAkB,CAAC,CAAC;IAC5C,MAAMY,UAAU,OAAGb,oCAAa,CAAC,CAAC;IAClC,MAAM,EAAEc,QAAQ,EAAEC,OAAAA,EAAS,GAAGP,KAAK;IACnC,oDAAA;IACAA,KAAK,CAACH,IAAI,CAACW,SAAS,OAAGlB,mBAAY,EAACM,iBAAiB,CAACC,IAAI,EAAEI,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACL,IAAI,EAAES,QAAQ,IAAIF,eAAe,CAACK,IAAI,EAAEH,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEN,KAAK,CAACH,IAAI,CAACW,SAAS,CAAC;IACtN,IAAIR,KAAK,CAACF,IAAI,EAAE;QACZ,oDAAA;QACAE,KAAK,CAACF,IAAI,CAACU,SAAS,OAAGlB,mBAAY,EAACM,iBAAiB,CAACE,IAAI,EAAEO,UAAU,CAACI,IAAI,EAAEH,QAAQ,IAAID,UAAU,CAACC,QAAQ,EAAEN,KAAK,CAACF,IAAI,CAACU,SAAS,CAAC;IACvI;IACA,OAAOR,KAAK;AAChB,CAAC"}