@fluentui/react-nav 9.2.3 → 9.3.0

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

@@ -0,0 +1 @@
+{"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":["navDividerClassNames","useNavDividerStyles_unstable","root","wrapper","useStyles","makeStyles","flexGrow","marginTop","marginBottom","state","styles","className","mergeClasses","useDividerStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;IAgBAC,4BAAAA;eAAAA;;;uBArB4B;8BACoB;AAItD,MAAMD,uBAAqD;IAChEE,MAAM;IACNC,SAAS;AACX;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJI,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAKO,MAAMP,+BAA+B,CAACQ;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,qBAAqBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,qBAAqBG,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;IAE5FE,IAAAA,uCAAAA,EAA0BJ;IAC1B,OAAOA;AACT"}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navDrawerClassNames: function() {
+        return navDrawerClassNames;
+    },
+    useNavDrawerStyles_unstable: function() {
+        return useNavDrawerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const navDrawerClassNames = {
+    root: 'fui-NavDrawer'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
+        alignItems: 'unset'
+    },
+    // seperate style so it can be applied conditionally
+    // if size is not set, use default width from the token.
+    defaultWidth: {
+        width: `${_sharedNavStylesstyles.navItemTokens.defaultDrawerWidth}px`
+    }
+});
+const useNavDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const { size } = state;
+    const styles = useStyles();
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["import { 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":["navDrawerClassNames","useNavDrawerStyles_unstable","root","useStyles","makeStyles","backgroundColor","navItemTokens","alignItems","defaultWidth","width","defaultDrawerWidth","state","size","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,mBAAAA;eAAAA;;IAsBAC,2BAAAA;eAAAA;;;uBA5B4B;uCAIX;AAEvB,MAAMD,sBAAgF;IAC3FE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,iBAAiBC,oCAAAA,CAAcD,eAAe;QAC9CE,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,CAAC,EAAEH,oCAAAA,CAAcI,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAKO,MAAMT,8BAA8B,CAACU;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAASV;IACfQ,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EACrBf,oBAAoBE,IAAI,EACxBW,OAAOX,IAAI,EACX,CAACU,QAAQC,OAAOL,YAAY,EAC5BG,MAAMT,IAAI,CAACY,SAAS;IAGtB,OAAOH;AACT"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navDrawerBodyClassNames: function() {
+        return navDrawerBodyClassNames;
+    },
+    useNavDrawerBodyStyles_unstable: function() {
+        return useNavDrawerBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactdrawer = require("@fluentui/react-drawer");
+const navDrawerBodyClassNames = {
+    root: 'fui-NavDrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `0 ${_reacttheme.tokens.spacingHorizontalXS} 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
+        alignItems: 'unset',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: _reacttheme.tokens.spacingVerticalXXS
+    }
+});
+const useNavDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdrawer.useDrawerBodyStyles_unstable)(state);
+    const styles = useStyles();
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["import { 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":["navDrawerBodyClassNames","useNavDrawerBodyStyles_unstable","root","useStyles","makeStyles","padding","tokens","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","state","useDrawerBodyStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,uBAAAA;eAAAA;;IAoBAC,+BAAAA;eAAAA;;;uBA1B4B;4BAClB;6BACsB;AAItC,MAAMD,0BAA8D;IACzEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS,CAAC,EAAE,EAAEC,kBAAAA,CAAOC,mBAAmB,CAAC,GAAG,EAAED,kBAAAA,CAAOE,uBAAuB,CAAC,CAAC;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;IACnC;AACF;AAKO,MAAMZ,kCAAkC,CAACa;IAC9C;IAEAC,IAAAA,yCAAAA,EAA6BD;IAC7B,MAAME,SAASb;IACfW,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,wBAAwBE,IAAI,EAAEc,OAAOd,IAAI,EAAEY,MAAMZ,IAAI,CAACe,SAAS;IACnG,OAAOH;AACT"}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navDrawerFooterClassNames: function() {
+        return navDrawerFooterClassNames;
+    },
+    useNavDrawerFooterStyles_unstable: function() {
+        return useNavDrawerFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactdrawer = require("@fluentui/react-drawer");
+const navDrawerFooterClassNames = {
+    root: 'fui-NavDrawerFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingHorizontalXS} ${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingVerticalXS}  ${_reacttheme.tokens.spacingHorizontalMNudge}`,
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: _reacttheme.tokens.spacingVerticalXXS
+    }
+});
+const useNavDrawerFooterStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdrawer.useDrawerFooterStyles_unstable)(state);
+    const styles = useStyles();
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["import { 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":["navDrawerFooterClassNames","useNavDrawerFooterStyles_unstable","root","useStyles","makeStyles","padding","tokens","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","state","useDrawerFooterStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,yBAAAA;eAAAA;;IAmBAC,iCAAAA;eAAAA;;;uBAzB4B;4BAClB;6BACwB;AAIxC,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,mBAAmB,CAAC,CAAC,EAAEF,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,EAAED,kBAAAA,CAAOG,iBAAiB,CAAC,EAAE,EAAEH,kBAAAA,CAAOI,uBAAuB,CAAC,CAAC;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQP,kBAAAA,CAAOC,kBAAkB;IACnC;AACF;AAKO,MAAMN,oCAAoC,CAACa;IAChD;IAEAC,IAAAA,2CAAAA,EAA+BD;IAC/B,MAAME,SAASb;IACfW,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,0BAA0BE,IAAI,EAAEc,OAAOd,IAAI,EAAEY,MAAMZ,IAAI,CAACe,SAAS;IAErG,OAAOH;AACT"}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navDrawerHeaderClassNames: function() {
+        return navDrawerHeaderClassNames;
+    },
+    useNavDrawerHeaderStyles_unstable: function() {
+        return useNavDrawerHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactdrawer = require("@fluentui/react-drawer");
+const navDrawerHeaderClassNames = {
+    root: 'fui-NavDrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        margin: 'unset',
+        paddingInlineStart: '14px',
+        paddingBlock: '5px'
+    }
+});
+const useNavDrawerHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdrawer.useDrawerHeaderStyles_unstable)(state);
+    const styles = useStyles();
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts"],"sourcesContent":["import { 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":["navDrawerHeaderClassNames","useNavDrawerHeaderStyles_unstable","root","useStyles","makeStyles","margin","paddingInlineStart","paddingBlock","state","useDrawerHeaderStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,yBAAAA;eAAAA;;IAkBAC,iCAAAA;eAAAA;;;uBAxB4B;6BACM;AAKxC,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAKO,MAAMN,oCAAoC,CAACO;IAChD;IAEAC,IAAAA,2CAAAA,EAA+BD;IAC/B,MAAME,SAASP;IACfK,MAAMN,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,0BAA0BE,IAAI,EAAEQ,OAAOR,IAAI,EAAEM,MAAMN,IAAI,CAACS,SAAS;IAErG,OAAOH;AACT"}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navItemClassNames: function() {
+        return navItemClassNames;
+    },
+    useNavItemStyles_unstable: function() {
+        return useNavItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const navItemClassNames = {
+    root: 'fui-NavItem',
+    icon: 'fui-NavItem__icon'
+};
+const useNavItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    const smallStyles = (0, _sharedNavStylesstyles.useSmallStyles)();
+    const contentStyles = (0, _sharedNavStylesstyles.useContentStyles)();
+    const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
+    const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
+    const { selected, density } = state;
+    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) {
+        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.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n  root: 'fui-NavItem',\n  icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n\n  const { selected, density } = state;\n\n  state.root.className = mergeClasses(\n    navItemClassNames.root,\n    rootDefaultClassName,\n    density === 'small' && smallStyles.root,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["navItemClassNames","useNavItemStyles_unstable","root","icon","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","selected","density","className","mergeClasses","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,iBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;;uBAnBgB;uCAOtB;AAIA,MAAMD,oBAAkD;IAC7DE,MAAM;IACNC,MAAM;AACR;AAKO,MAAMF,4BAA4B,CAACG;IACxC;IAEA,MAAMC,uBAAuBC,IAAAA,8CAAAA;IAC7B,MAAMC,cAAcC,IAAAA,qCAAAA;IACpB,MAAMC,gBAAgBC,IAAAA,uCAAAA;IACtB,MAAMC,kBAAkBC,IAAAA,yCAAAA;IACxB,MAAMC,aAAaC,IAAAA,oCAAAA;IAEnB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGZ;IAE9BA,MAAMF,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EACrBlB,kBAAkBE,IAAI,EACtBG,sBACAW,YAAY,WAAWT,YAAYL,IAAI,EACvCa,YAAYJ,gBAAgBQ,IAAI,EAChCJ,YAAYN,cAAcM,QAAQ,EAClCX,MAAMF,IAAI,CAACe,SAAS;IAGtB,IAAIb,MAAMD,IAAI,EAAE;QACdC,MAAMD,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EACrBlB,kBAAkBG,IAAI,EACtBU,WAAWM,IAAI,EACfJ,YAAYF,WAAWE,QAAQ,EAC/BX,MAAMD,IAAI,CAACc,SAAS;IAExB;IAEA,OAAOb;AACT"}

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navSectionHeaderClassNames: function() {
+        return navSectionHeaderClassNames;
+    },
+    useNavSectionHeaderStyles_unstable: function() {
+        return useNavSectionHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const navSectionHeaderClassNames = {
+    root: 'fui-NavSectionHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        marginInlineStart: `10px`,
+        marginBlock: '8px',
+        ..._reacttheme.typographyStyles.caption1Strong
+    }
+});
+const useNavSectionHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["navSectionHeaderClassNames","useNavSectionHeaderStyles_unstable","root","useStyles","makeStyles","marginInlineStart","marginBlock","typographyStyles","caption1Strong","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,0BAAAA;eAAAA;;IAkBAC,kCAAAA;eAAAA;;;uBAvB4B;4BAGR;AAE1B,MAAMD,6BAAoE;IAC/EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGC,4BAAAA,CAAiBC,cAAc;IACpC;AACF;AAKO,MAAMP,qCAAqC,CAACQ;IACjD;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,2BAA2BE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEtG,OAAOF;AACT"}

package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navSubItemClassNames: function() {
+        return navSubItemClassNames;
+    },
+    useNavSubItemStyles_unstable: function() {
+        return useNavSubItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const navSubItemClassNames = {
+    root: 'fui-NavSubItem'
+};
+/**
+ * Styles for the content slot (children)
+ */ const useNavSubItemSpecificStyles = (0, _react.makeStyles)({
+    base: {
+        paddingInlineStart: '46px'
+    },
+    smallBase: {
+        paddingInlineStart: '40px'
+    },
+    selectedIndicator: {
+        '::after': {
+            marginInlineStart: `-${_sharedNavStylesstyles.navItemTokens.indicatorOffset + 36}px`
+        }
+    }
+});
+const useNavSubItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    const smallStyles = (0, _sharedNavStylesstyles.useSmallStyles)();
+    const contentStyles = (0, _sharedNavStylesstyles.useContentStyles)();
+    const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
+    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
+    const { selected, density } = state;
+    const isSmallDensity = density === 'small';
+    state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
+    return state;
+};

package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n  navItemTokens,\n  useContentStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n  root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n  base: {\n    paddingInlineStart: '46px',\n  },\n  smallBase: {\n    paddingInlineStart: '40px',\n  },\n  selectedIndicator: {\n    '::after': {\n      marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n    },\n  },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n  const { selected, density } = state;\n  const isSmallDensity = density === 'small';\n\n  state.root.className = mergeClasses(\n    navSubItemClassNames.root,\n    rootDefaultClassName,\n    isSmallDensity && smallStyles.root,\n    isSmallDensity && navSubItemSpecificStyles.smallBase,\n    navSubItemSpecificStyles.base,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    selected && navSubItemSpecificStyles.selectedIndicator,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["navSubItemClassNames","useNavSubItemStyles_unstable","root","useNavSubItemSpecificStyles","makeStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","navItemTokens","indicatorOffset","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,oBAAAA;eAAAA;;IAuBAC,4BAAAA;eAAAA;;;uBAnC4B;uCAOlC;AAKA,MAAMD,uBAAwD;IACnEE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,8BAA8BC,IAAAA,iBAAAA,EAAW;IAC7CC,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEC,oCAAAA,CAAcC,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAKO,MAAMV,+BAA+B,CAACW;IAC3C;IAEA,MAAMC,uBAAuBC,IAAAA,8CAAAA;IAC7B,MAAMC,cAAcC,IAAAA,qCAAAA;IACpB,MAAMC,gBAAgBC,IAAAA,uCAAAA;IACtB,MAAMC,kBAAkBC,IAAAA,yCAAAA;IACxB,MAAMC,2BAA2BlB;IAEjC,MAAM,EAAEmB,QAAQ,EAAEC,OAAO,EAAE,GAAGX;IAC9B,MAAMY,iBAAiBD,YAAY;IAEnCX,MAAMV,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAAA,EACrB1B,qBAAqBE,IAAI,EACzBW,sBACAW,kBAAkBT,YAAYb,IAAI,EAClCsB,kBAAkBH,yBAAyBd,SAAS,EACpDc,yBAAyBhB,IAAI,EAC7BiB,YAAYH,gBAAgBd,IAAI,EAChCiB,YAAYL,cAAcK,QAAQ,EAClCA,YAAYD,yBAAyBb,iBAAiB,EACtDI,MAAMV,IAAI,CAACuB,SAAS;IAGtB,OAAOb;AACT"}

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    navSubItemGroupClassNames: function() {
+        return navSubItemGroupClassNames;
+    },
+    useNavSubItemGroupStyles_unstable: function() {
+        return useNavSubItemGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const navSubItemGroupClassNames = {
+    root: 'fui-NavSubItemGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        transform: 'translateZ(0)',
+        overflow: 'hidden'
+    }
+});
+const useNavSubItemGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["navSubItemGroupClassNames","useNavSubItemGroupStyles_unstable","root","useStyles","makeStyles","transform","overflow","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,yBAAAA;eAAAA;;IAiBAC,iCAAAA;eAAAA;;;uBArB4B;AAIlC,MAAMD,4BAA0F;IACrGE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,WAAW;QACXC,UAAU;IACZ;AACF;AAKO,MAAML,oCAAoC,CAACM;IAChD;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,0BAA0BE,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAErG,OAAOF;AACT"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\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   */\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\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst 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\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n      ...buttonHoverStyles,\n    },\n\n    ':focus-within': buttonHoverStyles,\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  baseLarge: {\n    paddingBlockStart: '12px',\n  },\n\n  hoverAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n    willChange: 'opacity',\n  },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n  'use no memo';\n\n  const splitNavItemStyles = useSplitNaveItemStyles();\n  const sharedRootClassNames = useRootDefaultClassName();\n\n  state.root.className = mergeClasses(\n    splitNavItemClassNames.root,\n    sharedRootClassNames,\n    splitNavItemStyles.baseRoot,\n    state.root.className,\n  );\n\n  if (state.navItem) {\n    state.navItem.className = mergeClasses(\n      splitNavItemClassNames.navItem,\n      splitNavItemStyles.baseNavItem,\n      state.navItem.className,\n    );\n  }\n\n  if (state.actionButton) {\n    state.actionButton.className = mergeClasses(\n      splitNavItemClassNames.actionButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.actionButton.className,\n    );\n  }\n\n  if (state.toggleButton) {\n    state.toggleButton.className = mergeClasses(\n      splitNavItemClassNames.toggleButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.toggleButton.className,\n    );\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitNavItemClassNames.menuButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.menuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["splitNavItemClassNames","useSplitNavItemStyles_unstable","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","makeStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","navItemTokens","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","tokens","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","motionTokens","durationFast","curveEasyEase","willChange","state","splitNavItemStyles","sharedRootClassNames","useRootDefaultClassName","className","mergeClasses","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}