@fluentui/react-nav 0.0.0-nightly-20250703-1103.1 → 9.0.0

package/lib-commonjs/components/SplitNavItem/SplitNavItem.js

@@ -10,14 +10,20 @@ Object.defineProperty(exports, "SplitNavItem", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useSplitNavItem = require("./useSplitNavItem");
 const _renderSplitNavItem = require("./renderSplitNavItem");
 const _useSplitNavItemStylesstyles = require("./useSplitNavItemStyles.styles");
 const SplitNavItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useSplitNavItem.useSplitNavItem_unstable)(props, ref);
     (0, _useSplitNavItemStylesstyles.useSplitNavItemStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSplitNavItemStyles_unstable')(state);
+    /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */ // useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);
     return (0, _renderSplitNavItem.renderSplitNavItem_unstable)(state);
 });
 SplitNavItem.displayName = 'SplitNavItem';

package/lib-commonjs/components/SplitNavItem/SplitNavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["SplitNavItem","React","forwardRef","props","ref","state","useSplitNavItem_unstable","useSplitNavItemStyles_unstable","useCustomStyleHook_unstable","renderSplitNavItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;iCAEH;oCACG;6CACG;AAMxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACrC;AAEAL,aAAaU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["SplitNavItem","React","forwardRef","props","ref","state","useSplitNavItem_unstable","useSplitNavItemStyles_unstable","renderSplitNavItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;iCAEkB;oCACG;6CACG;AAMxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAE/B;;;;;;;GAOC,GACD,wEAAwE;IAExE,OAAOG,IAAAA,+CAAAA,EAA4BH;AACrC;AAEAL,aAAaS,WAAW,GAAG"}

package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js

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

package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * @internal\n *\n * Helper function to render button slots\n */\nconst renderButtonSlot = (Button?: React.ElementType, ButtonTooltip?: React.ElementType) => {\n  if (!Button) {\n    return null;\n  }\n\n  if (ButtonTooltip) {\n    return (\n      <ButtonTooltip>\n        <Button />\n      </ButtonTooltip>\n    );\n  }\n\n  return <Button />;\n};\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState) => {\n  assertSlots<SplitNavItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.navItem && <state.navItem />}\n      {renderButtonSlot(state.actionButton, state.actionButtonTooltip)}\n      {renderButtonSlot(state.menuButton, state.menuButtonTooltip)}\n      {renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)}\n    </state.root>\n  );\n};\n"],"names":["renderSplitNavItem_unstable","renderButtonSlot","Button","ButtonTooltip","_jsx","state","assertSlots","_jsxs","root","navItem","actionButton","actionButtonTooltip","menuButton","menuButtonTooltip","toggleButton","toggleButtonTooltip"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgCaA;;;eAAAA;;;;4BA/Bb;iEAEuB;gCACK;AAI5B;;;;CAIC,GACD,MAAMC,mBAAmB,CAACC,QAA4BC;IACpD,IAAI,CAACD,QAAQ;QACX,OAAO;IACT;IAEA,IAAIC,eAAe;QACjB,OAAA,WAAA,GACEC,IAAAA,eAAA,EAACD,eAAAA;sBACC,WAAA,GAAAC,IAAAA,eAAA,EAACF,QAAAA,CAAAA;;IAGP;IAEA,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,QAAAA,CAAAA;AACV;AAKO,MAAMF,8BAA8B,CAACK;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,OAAO,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACC,MAAMI,OAAO,EAAA,CAAA;YAC/BR,iBAAiBI,MAAMK,YAAY,EAAEL,MAAMM,mBAAmB;YAC9DV,iBAAiBI,MAAMO,UAAU,EAAEP,MAAMQ,iBAAiB;YAC1DZ,iBAAiBI,MAAMS,YAAY,EAAET,MAAMU,mBAAmB;;;AAGrE"}
+{"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState) => {\n  assertSlots<SplitNavItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.navItem && <state.navItem />}\n      {state.actionButton && state.actionButtonTooltip && (\n        <state.actionButtonTooltip>\n          <state.actionButton />\n        </state.actionButtonTooltip>\n      )}\n      {state.actionButton && !state.actionButtonTooltip && <state.actionButton />}\n\n      {state.toggleButton && state.toggleButtonTooltip && (\n        <state.toggleButtonTooltip>\n          <state.toggleButton />\n        </state.toggleButtonTooltip>\n      )}\n      {state.toggleButton && !state.toggleButtonTooltip && <state.toggleButton />}\n\n      {state.menuButton && state.menuButtonTooltip && (\n        <state.menuButtonTooltip>\n          <state.menuButton />\n        </state.menuButtonTooltip>\n      )}\n      {state.menuButton && !state.menuButtonTooltip && <state.menuButton />}\n    </state.root>\n  );\n};\n"],"names":["renderSplitNavItem_unstable","state","assertSlots","_jsxs","root","navItem","_jsx","actionButton","actionButtonTooltip","toggleButton","toggleButtonTooltip","menuButton","menuButtonTooltip"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,8BAA8B,CAACC;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,OAAO,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,OAAO,EAAA,CAAA;YAC/BJ,MAAMM,YAAY,IAAIN,MAAMO,mBAAmB,IAAA,WAAA,GAC9CF,IAAAA,eAAA,EAACL,MAAMO,mBAAmB,EAAA;0BACxB,WAAA,GAAAF,IAAAA,eAAA,EAACL,MAAMM,YAAY,EAAA,CAAA;;YAGtBN,MAAMM,YAAY,IAAI,CAACN,MAAMO,mBAAmB,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMM,YAAY,EAAA,CAAA;YAEvEN,MAAMQ,YAAY,IAAIR,MAAMS,mBAAmB,IAAA,WAAA,GAC9CJ,IAAAA,eAAA,EAACL,MAAMS,mBAAmB,EAAA;0BACxB,WAAA,GAAAJ,IAAAA,eAAA,EAACL,MAAMQ,YAAY,EAAA,CAAA;;YAGtBR,MAAMQ,YAAY,IAAI,CAACR,MAAMS,mBAAmB,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMQ,YAAY,EAAA,CAAA;YAEvER,MAAMU,UAAU,IAAIV,MAAMW,iBAAiB,IAAA,WAAA,GAC1CN,IAAAA,eAAA,EAACL,MAAMW,iBAAiB,EAAA;0BACtB,WAAA,GAAAN,IAAAA,eAAA,EAACL,MAAMU,UAAU,EAAA,CAAA;;YAGpBV,MAAMU,UAAU,IAAI,CAACV,MAAMW,iBAAiB,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACL,MAAMU,UAAU,EAAA,CAAA;;;AAGxE"}

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js

@@ -33,13 +33,6 @@ const splitNavItemClassNames = {
 // Don't use makeResetStyles here because the sub components call it once and
 // This links says that makeResetStyles should only be called once per element
 // https://griffel.js.org/react/api/make-reset-styles/#limitations
-const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
-const buttonHoverStyles = {
-    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
-        opacity: 1,
-        pointerEvents: 'auto'
-    }
-};
 /**
  * Styles for the root slot
  */ const useSplitNaveItemStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -60,10 +53,6 @@ const buttonHoverStyles = {
         Bkqvd7p: "f1e9ux7i",
         Bmy1vo4: "f1xfaukr",
         Jwef8y: "f11oyicx",
-        xwko9w: "f8z0t4e",
-        mcc9px: "f9ueil3",
-        B02v5zz: "f1g2hb8n",
-        i4x37a: "fpq6je",
         ecr2s2: "f9fof1w"
     },
     baseNavItem: {
@@ -90,23 +79,6 @@ const buttonHoverStyles = {
     },
     baseMedium: {
         rjzwhg: "fjtod8q"
-    },
-    baseLarge: {
-        rjzwhg: "f16gijt3"
-    },
-    hoverAction: {
-        abs64n: "fk73vx1",
-        Bkecrkj: "f1aehjj5",
-        Bn62ygk: 0,
-        Cwk7ip: 0,
-        B3o57yi: 0,
-        Bmy1vo4: 0,
-        Bkqvd7p: 0,
-        Bi2q7bf: [
-            "fr12795",
-            "fcl876f"
-        ],
-        Es3by: "f1gqqdtu"
     }
 }, {
     d: [
@@ -147,32 +119,10 @@ const buttonHoverStyles = {
         ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}",
         ".fibmr9j{padding-block-start:5px;}",
         ".f1s2louj{align-items:start;}",
-        ".fjtod8q{padding-block-start:9px;}",
-        ".f16gijt3{padding-block-start:12px;}",
-        ".fk73vx1{opacity:0;}",
-        ".f1aehjj5{pointer-events:none;}",
-        [
-            ".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}",
-            {
-                p: -1
-            }
-        ],
-        [
-            ".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}",
-            {
-                p: -1
-            }
-        ],
-        ".f1gqqdtu{will-change:opacity;}"
+        ".fjtod8q{padding-block-start:9px;}"
     ],
     h: [
-        ".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}",
-        ".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}",
-        ".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"
-    ],
-    w: [
-        ".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}",
-        ".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"
+        ".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"
     ],
     a: [
         ".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"
@@ -187,13 +137,13 @@ const useSplitNavItemStyles_unstable = (state)=>{
         state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
     }
     if (state.actionButton) {
-        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
     }
     if (state.toggleButton) {
-        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
     }
     if (state.menuButton) {
-        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
     }
     return state;
 };

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n    root: 'fui-SplitNavItem',\n    navItem: 'fui-SplitNavItem__navItem',\n    actionButton: 'fui-SplitNavItem__actionButton',\n    toggleButton: 'fui-SplitNavItem__toggleButton',\n    menuButton: 'fui-SplitNavItem__menuButton',\n    /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n        opacity: 1,\n        pointerEvents: 'auto'\n    }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n    baseRoot: {\n        display: 'flex',\n        gap: 'unset',\n        alignItems: 'stretch',\n        padding: 'unset',\n        textAlign: 'unset',\n        backgroundColor: navItemTokens.backgroundColor,\n        ...navItemTokens.transitionTokens,\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover,\n            ...buttonHoverStyles\n        },\n        ':focus-within': buttonHoverStyles,\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    },\n    baseNavItem: {\n        // styles that we want to disagree with the default on\n        display: 'flex',\n        textTransform: 'none',\n        alignSelf: 'stretch',\n        textAlign: 'left',\n        position: 'relative',\n        justifyContent: 'start',\n        gap: tokens.spacingVerticalL,\n        backgroundColor: 'transparent'\n    },\n    baseSecondary: {\n        minWidth: '28px',\n        paddingInlineEnd: '12px',\n        paddingInlineStart: '5px',\n        paddingBlockStart: '5px',\n        alignItems: 'start'\n    },\n    baseMedium: {\n        paddingBlockStart: '9px'\n    },\n    baseLarge: {\n        paddingBlockStart: '12px'\n    },\n    hoverAction: {\n        opacity: 0,\n        pointerEvents: 'none',\n        transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n        willChange: 'opacity'\n    }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const splitNavItemStyles = useSplitNaveItemStyles();\n    const sharedRootClassNames = useRootDefaultClassName();\n    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n    if (state.navItem) {\n        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n    }\n    if (state.actionButton) {\n        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n    }\n    if (state.toggleButton) {\n        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n    }\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n    }\n    return state;\n};\n"],"names":["splitNavItemClassNames","useSplitNavItemStyles_unstable","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","__styles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","state","splitNavItemStyles","sharedRootClassNames","useRootDefaultClassName","className","mergeClasses","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitNavItemClassNames = {\n    root: 'fui-SplitNavItem',\n    navItem: 'fui-SplitNavItem__navItem',\n    actionButton: 'fui-SplitNavItem__actionButton',\n    toggleButton: 'fui-SplitNavItem__toggleButton',\n    menuButton: 'fui-SplitNavItem__menuButton',\n    /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n    baseRoot: {\n        display: 'flex',\n        gap: 'unset',\n        alignItems: 'stretch',\n        padding: 'unset',\n        textAlign: 'unset',\n        backgroundColor: navItemTokens.backgroundColor,\n        ...navItemTokens.transitionTokens,\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover\n        },\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    },\n    baseNavItem: {\n        // styles that we want to disagree with the default on\n        display: 'flex',\n        textTransform: 'none',\n        alignSelf: 'stretch',\n        textAlign: 'left',\n        position: 'relative',\n        justifyContent: 'start',\n        gap: tokens.spacingVerticalL,\n        backgroundColor: 'transparent'\n    },\n    baseSecondary: {\n        minWidth: '28px',\n        paddingInlineEnd: '12px',\n        paddingInlineStart: '5px',\n        paddingBlockStart: '5px',\n        alignItems: 'start'\n    },\n    baseMedium: {\n        paddingBlockStart: '9px'\n    }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const splitNavItemStyles = useSplitNaveItemStyles();\n    const sharedRootClassNames = useRootDefaultClassName();\n    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n    if (state.navItem) {\n        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n    }\n    if (state.actionButton) {\n        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n    }\n    if (state.toggleButton) {\n        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n    }\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n    }\n    return state;\n};\n"],"names":["splitNavItemClassNames","useSplitNavItemStyles_unstable","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","useSplitNaveItemStyles","__styles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","d","p","h","a","state","splitNavItemStyles","sharedRootClassNames","useRootDefaultClassName","className","mergeClasses","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/useNavContextValues.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useNavContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useNavContextValues_unstable(state) {
-    const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect } = state;
+    const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density } = state;
     const navContext = _react.useMemo(()=>({
             selectedValue,
             selectedCategoryValue,
@@ -22,8 +22,7 @@ function useNavContextValues_unstable(state) {
             onRequestNavCategoryItemToggle,
             openCategories,
             multiple,
-            density,
-            onNavItemSelect
+            density
         }), [
         selectedValue,
         selectedCategoryValue,
@@ -34,8 +33,7 @@ function useNavContextValues_unstable(state) {
         onRequestNavCategoryItemToggle,
         openCategories,
         multiple,
-        density,
-        onNavItemSelect
+        density
     ]);
     return {
         nav: navContext

package/lib-commonjs/components/useNavContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n  const {\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    openCategories,\n    multiple,\n    density,\n    onNavItemSelect,\n  } = state;\n\n  const navContext = React.useMemo<NavContextValue>(\n    () => ({\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n      onNavItemSelect,\n    }),\n    [\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n      onNavItemSelect,\n    ],\n  );\n\n  return { nav: navContext };\n}\n"],"names":["useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","navContext","React","useMemo","nav"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EAChB,GAAGX;IAEJ,MAAMY,aAAaC,OAAMC,OAAO,CAC9B,IAAO,CAAA;YACLb;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEV;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEI,KAAKH;IAAW;AAC3B"}
+{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n  const {\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    openCategories,\n    multiple,\n    density,\n  } = state;\n\n  const navContext = React.useMemo<NavContextValue>(\n    () => ({\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n    }),\n    [\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n    ],\n  );\n\n  return { nav: navContext };\n}\n"],"names":["useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","navContext","React","useMemo","nav"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACR,GAAGV;IAEJ,MAAMW,aAAaC,OAAMC,OAAO,CAC9B,IAAO,CAAA;YACLZ;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEI,KAAKH;IAAW;AAC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-nav",
-  "version": "0.0.0-nightly-20250703-1103.1",
+  "version": "9.0.0",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,24 +13,23 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250703-1103.1",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "*",
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-button": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-divider": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-drawer": "0.0.0-nightly-20250703-1103.1",
+    "@fluentui/react-aria": "^9.14.8",
+    "@fluentui/react-button": "^9.4.8",
+    "@fluentui/react-tooltip": "^9.6.9",
+    "@fluentui/react-context-selector": "^9.1.77",
+    "@fluentui/react-divider": "^9.2.87",
+    "@fluentui/react-drawer": "^9.7.11",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-motion": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-tooltip": "0.0.0-nightly-20250703-1103.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250703-1103.1",
+    "@fluentui/react-jsx-runtime": "^9.0.55",
+    "@fluentui/react-shared-contexts": "^9.23.1",
+    "@fluentui/react-tabster": "^9.24.8",
+    "@fluentui/react-theme": "^9.1.24",
+    "@fluentui/react-utilities": "^9.20.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
@@ -49,7 +48,12 @@
     },
     "./package.json": "./package.json"
   },
-  "beachball": {},
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
   "files": [
     "*.md",
     "dist/*.d.ts",

package/lib/components/AppItem/useAppItemStyles.styles.raw.js

@@ -1,42 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';
-export const appItemClassNames = {
-    root: 'fui-AppItem',
-    icon: 'fui-AppItem__icon'
-};
-/**
- * Styles for the root slot
- */ export const useAppItemStyles = makeStyles({
-    root: {
-        marginInline: '4px',
-        width: 'revert',
-        alignItems: 'center',
-        gap: '10px',
-        marginInlineStart: '-6px',
-        marginInlineEnd: '0px',
-        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,
-        ...typographyStyles.subtitle2
-    },
-    small: {
-        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,
-        gap: '14px'
-    },
-    absentIconRootAdjustment: {
-        paddingInlineStart: '16px'
-    }
-});
-/**
- * Apply styling to the AppItem slots based on the state
- */ export const useAppItemStyles_unstable = (state)=>{
-    'use no memo';
-    const rootDefaultClassName = useRootDefaultClassName();
-    const iconStyles = useIconStyles();
-    const appItemSpecificStyles = useAppItemStyles();
-    const { density, icon } = state;
-    state.root.className = mergeClasses(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
-    if (state.icon) {
-        state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);
-    }
-    return state;
-};

package/lib/components/AppItem/useAppItemStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/AppItem/useAppItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemSlots, AppItemState } from './AppItem.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemClassNames: SlotClassNames<AppItemSlots> = {\n  root: 'fui-AppItem',\n  icon: 'fui-AppItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nexport const useAppItemStyles = makeStyles({\n  root: {\n    marginInline: '4px',\n    width: 'revert',\n    alignItems: 'center',\n    gap: '10px',\n    marginInlineStart: '-6px',\n    marginInlineEnd: '0px',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n    ...typographyStyles.subtitle2,\n  },\n  small: {\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n    gap: '14px',\n  },\n  absentIconRootAdjustment: {\n    paddingInlineStart: '16px',\n  },\n});\n\n/**\n * Apply styling to the AppItem slots based on the state\n */\nexport const useAppItemStyles_unstable = (state: AppItemState): AppItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n\n  const { density, icon } = state;\n\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemClassNames.root,\n    appItemSpecificStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","marginInline","width","alignItems","gap","marginInlineStart","marginInlineEnd","padding","spacingVerticalS","spacingHorizontalS","spacingHorizontalMNudge","subtitle2","small","absentIconRootAdjustment","paddingInlineStart","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEnF,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,mBAAmBT,WAAW;IACzCO,MAAM;QACJG,cAAc;QACdC,OAAO;QACPC,YAAY;QACZC,KAAK;QACLC,mBAAmB;QACnBC,iBAAiB;QACjBC,SAAS,CAAC,EAAEd,OAAOe,gBAAgB,CAAC,CAAC,EAAEf,OAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,OAAOe,gBAAgB,CAAC,CAAC,EAAEf,OAAOiB,uBAAuB,CAAC,CAAC;QAC/H,GAAGhB,iBAAiBiB,SAAS;IAC/B;IACAC,OAAO;QACLL,SAAS,CAAC,EAAEd,OAAOe,gBAAgB,CAAC,CAAC,EAAEf,OAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,OAAOe,gBAAgB,CAAC,KAAK,CAAC;QAClGJ,KAAK;IACP;IACAS,0BAA0B;QACxBC,oBAAoB;IACtB;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBrB;IAC7B,MAAMsB,aAAavB;IACnB,MAAMwB,wBAAwBnB;IAE9B,MAAM,EAAEoB,OAAO,EAAErB,IAAI,EAAE,GAAGiB;IAE1BA,MAAMlB,IAAI,CAACuB,SAAS,GAAG7B,aACrByB,sBACApB,kBAAkBC,IAAI,EACtBqB,sBAAsBrB,IAAI,EAC1BsB,YAAY,WAAWD,sBAAsBP,KAAK,EAClD,CAACb,QAAQoB,sBAAsBN,wBAAwB,EACvDG,MAAMlB,IAAI,CAACuB,SAAS;IAGtB,IAAIL,MAAMjB,IAAI,EAAE;QACdiB,MAAMjB,IAAI,CAACsB,SAAS,GAAG7B,aAAaK,kBAAkBE,IAAI,EAAEmB,WAAWI,IAAI,EAAEN,MAAMjB,IAAI,CAACsB,SAAS;IACnG;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js

@@ -1,33 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';
-import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';
-export const appItemStaticClassNames = {
-    root: 'fui-AppItemStatic',
-    icon: 'fui-AppItemStatic__icon'
-};
-const useAppItemStaticStyles = makeStyles({
-    root: {
-        cursor: 'default',
-        ':hover': {
-            backgroundColor: 'unset'
-        },
-        ':active': {
-            backgroundColor: 'unset'
-        }
-    }
-});
-/**
- * Apply styling to the AppItemStatic slots based on the state
- */ export const useAppItemStaticStyles_unstable = (state)=>{
-    'use no memo';
-    const rootDefaultClassName = useRootDefaultClassName();
-    const iconStyles = useIconStyles();
-    const appItemSpecificStyles = useAppItemStyles();
-    const appItemStaticStyles = useAppItemStaticStyles();
-    const { density, icon } = state;
-    state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
-    if (state.icon) {
-        state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
-    }
-    return state;
-};

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n  root: 'fui-AppItemStatic',\n  icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n  root: {\n    cursor: 'default',\n    ':hover': {\n      backgroundColor: 'unset',\n    },\n    ':active': {\n      backgroundColor: 'unset',\n    },\n  },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n  const appItemStaticStyles = useAppItemStaticStyles();\n\n  const { density, icon } = state;\n\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemStaticClassNames.root,\n    appItemSpecificStyles.root,\n    appItemStaticStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","cursor","backgroundColor","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,qCAAqC;AACtE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEnF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,WAAW;IACxCM,MAAM;QACJG,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,uBAAuBT;IAC7B,MAAMU,aAAaX;IACnB,MAAMY,wBAAwBb;IAC9B,MAAMc,sBAAsBR;IAE5B,MAAM,EAAES,OAAO,EAAEV,IAAI,EAAE,GAAGK;IAE1BA,MAAMN,IAAI,CAACY,SAAS,GAAGjB,aACrBY,sBACAR,wBAAwBC,IAAI,EAC5BS,sBAAsBT,IAAI,EAC1BU,oBAAoBV,IAAI,EACxBW,YAAY,WAAWF,sBAAsBI,KAAK,EAClD,CAACZ,QAAQQ,sBAAsBK,wBAAwB,EACvDR,MAAMN,IAAI,CAACY,SAAS;IAGtB,IAAIN,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACW,SAAS,GAAGjB,aAAaI,wBAAwBE,IAAI,EAAEO,WAAWO,IAAI,EAAET,MAAML,IAAI,CAACW,SAAS;IACzG;IAEA,OAAON;AACT,EAAE"}

package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js

@@ -1,34 +0,0 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { useButtonStyles_unstable } from '@fluentui/react-button';
-import { navItemTokens } from '../sharedNavStyles.styles';
-export const hamburgerClassNames = {
-    root: 'fui-Hamburger',
-    icon: 'fui-Hamburger__icon'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        textDecorationLine: 'none',
-        backgroundColor: navItemTokens.backgroundColor,
-        ...shorthands.border('none'),
-        ':hover': {
-            backgroundColor: navItemTokens.backgroundColorHover
-        },
-        ':active': {
-            backgroundColor: navItemTokens.backgroundColorPressed
-        }
-    }
-});
-/**
- * Apply styling to the Hamburger slots based on the state
- */ export const useHamburgerStyles_unstable = (state)=>{
-    'use no memo';
-    useButtonStyles_unstable(state);
-    const styles = useStyles();
-    state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);
-    if (state.icon) {
-        state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);
-    }
-    return state;
-};

package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Hamburger',\n  icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textDecorationLine: 'none',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...shorthands.border('none'),\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n    },\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n  'use no memo';\n\n  useButtonStyles_unstable(state);\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAAsBC,wBAAwB,QAAQ,yBAAyB;AAG/E,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAmD;IAC9DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BM,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,cAAcM,eAAe;QAC9C,GAAGR,WAAWS,MAAM,CAAC,OAAO;QAC5B,UAAU;YACRD,iBAAiBN,cAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,cAAcS,sBAAsB;QACvD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAZ,yBAAyBY;IACzB,MAAMC,SAASR;IAEfO,MAAMT,IAAI,CAACW,SAAS,GAAGhB,aAAaI,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACdQ,MAAMR,IAAI,CAACU,SAAS,GAAGhB,aAAaI,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/Nav/useNavStyles.styles.raw.js

@@ -1,22 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-export const navClassNames = {
-    root: 'fui-Nav'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        display: 'flex',
-        flexDirection: 'column'
-    }
-});
-/**
- * Apply styling to the Nav slots based on the state
- */ export const useNavStyles_unstable = (state)=>{
-    'use no memo';
-    const styles = useStyles();
-    state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);
-    // TODO Add class names to slots, for example:
-    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-    return state;
-};

package/lib/components/Nav/useNavStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n  root: 'fui-Nav',\n  // TODO: add class names for all slots on NavSlots.\n  // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navClassNames","root","useStyles","display","flexDirection","useNavStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gBAA0C;IACrDC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,cAAcC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEzF,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT,EAAE"}

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

@@ -1,45 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { typographyStyles } from '@fluentui/react-theme';
-import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
-export const navCategoryItemClassNames = {
-    root: 'fui-NavCategoryItem',
-    icon: 'fui-NavCategoryItem__icon',
-    expandIcon: 'fui-NavCategoryItem__expandIcon',
-    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
-};
-const useExpandIconStyles = makeStyles({
-    base: {
-        marginInlineStart: 'auto',
-        height: '20px'
-    },
-    open: {
-        transform: 'rotate(90deg)'
-    },
-    selected: typographyStyles.body1Strong
-});
-/**
- * Styles for the root slot
- */ export const useRootStyles = makeStyles({
-    base: {
-        width: '100%'
-    }
-});
-/**
- * Apply styling to the NavCategoryItem slots based on the state
- */ export const useNavCategoryItemStyles_unstable = (state)=>{
-    'use no memo';
-    const rootStyles = useRootStyles();
-    const smallStyles = useSmallStyles();
-    const defaultRootClassName = useRootDefaultClassName();
-    const contentStyles = useContentStyles();
-    const indicatorStyles = useIndicatorStyles();
-    const iconStyles = useIconStyles();
-    const expandIconStyles = useExpandIconStyles();
-    const { selected, open, density } = state;
-    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);
-    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);
-    if (state.icon) {
-        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
-    }
-    return state;
-};

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { 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  open: {\n    transform: 'rotate(90deg)',\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.open && expandIconStyles.open,\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","open","transform","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,sBAAsBb,WAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,MAAM;QACJC,WAAW;IACb;IACAC,UAAUjB,iBAAiBkB,WAAW;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,gBAAgBrB,WAAW;IACtCc,MAAM;QACJQ,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,cAAcnB;IACpB,MAAMoB,uBAAuBrB;IAC7B,MAAMsB,gBAAgBzB;IACtB,MAAM0B,kBAAkBxB;IACxB,MAAMyB,aAAa1B;IACnB,MAAM2B,mBAAmBlB;IAEzB,MAAM,EAAEM,QAAQ,EAAEF,IAAI,EAAEe,OAAO,EAAE,GAAGR;IAEpCA,MAAMf,IAAI,CAACwB,SAAS,GAAGhC,aACrBO,0BAA0BC,IAAI,EAC9BkB,sBACAF,WAAWX,IAAI,EACfkB,YAAY,WAAWN,YAAYjB,IAAI,EACvCU,YAAYF,SAAS,SAASY,gBAAgBf,IAAI,EAClDK,YAAYF,SAAS,SAASW,cAAcT,QAAQ,EACpDK,MAAMf,IAAI,CAACwB,SAAS;IAGtBT,MAAMb,UAAU,CAACsB,SAAS,GAAGhC,aAC3BO,0BAA0BG,UAAU,EACpCoB,iBAAiBjB,IAAI,EACrBU,MAAMP,IAAI,IAAIc,iBAAiBd,IAAI,EACnCO,MAAMb,UAAU,CAACsB,SAAS;IAG5B,IAAIT,MAAMd,IAAI,EAAE;QACdc,MAAMd,IAAI,CAACuB,SAAS,GAAGhC,aACrBO,0BAA0BE,IAAI,EAC9BoB,WAAWhB,IAAI,EACfK,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMd,IAAI,CAACuB,SAAS;IAExB;IAEA,OAAOT;AACT,EAAE"}

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

@@ -1,23 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { useDividerStyles_unstable } from '@fluentui/react-divider';
-export const navDividerClassNames = {
-    root: 'fui-NavDivider',
-    wrapper: 'fui-NavDivider__wrapper'
-};
-const useStyles = makeStyles({
-    root: {
-        flexGrow: 0,
-        marginTop: '4px',
-        marginBottom: '4px'
-    }
-});
-/**
- * Apply styling to the NavDivider slots based on the state
- */ export const useNavDividerStyles_unstable = (state)=>{
-    'use no memo';
-    const styles = useStyles();
-    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
-    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);
-    useDividerStyles_unstable(state);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAA2B,0BAA0B;AAIvF,OAAO,MAAMC,uBAAqD;IAChEC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,GAAGZ,aAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;IAE5FX,0BAA0BS;IAC1B,OAAOA;AACT,EAAE"}