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

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

@@ -1,27 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { navItemTokens } from '../sharedNavStyles.styles';
-export const navDrawerClassNames = {
-    root: 'fui-NavDrawer'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        backgroundColor: 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: `${navItemTokens.defaultDrawerWidth}px`
-    }
-});
-/**
- * Apply styling to the NavDrawer slots based on the state
- */ export const useNavDrawerStyles_unstable = (state)=>{
-    'use no memo';
-    const { size } = state;
-    const styles = useStyles();
-    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,cAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,CAAC,EAAEP,cAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,GAAGd,aACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}

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

@@ -1,26 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
-export const navDrawerBodyClassNames = {
-    root: 'fui-NavDrawerBody'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,
-        alignItems: 'unset',
-        display: 'flex',
-        flexDirection: 'column',
-        rowGap: tokens.spacingVerticalXXS
-    }
-});
-/**
- * Apply styling to the NavDrawerBody slots based on the state
- */ export const useNavDrawerBodyStyles_unstable = (state)=>{
-    'use no memo';
-    useDrawerBodyStyles_unstable(state);
-    const styles = useStyles();
-    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,OAAOM,mBAAmB,CAAC,GAAG,EAAEN,OAAOO,uBAAuB,CAAC,CAAC;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,OAAOY,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAb,6BAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}

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

@@ -1,25 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';
-export const navDrawerFooterClassNames = {
-    root: 'fui-NavDrawerFooter'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,
-        display: 'flex',
-        flexDirection: 'column',
-        rowGap: tokens.spacingVerticalXXS
-    }
-});
-/**
- * Apply styling to the NavDrawerFooter slots based on the state
- */ export const useNavDrawerFooterStyles_unstable = (state)=>{
-    'use no memo';
-    useDrawerFooterStyles_unstable(state);
-    const styles = useStyles();
-    state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAEL,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOO,mBAAmB,CAAC,CAAC,EAAEP,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOQ,iBAAiB,CAAC,EAAE,EAAER,OAAOS,uBAAuB,CAAC,CAAC;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,OAAOM,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+BAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}

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

@@ -1,23 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';
-export const navDrawerHeaderClassNames = {
-    root: 'fui-NavDrawerHeader'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        margin: 'unset',
-        paddingInlineStart: '14px',
-        paddingBlock: '5px'
-    }
-});
-/**
- * Apply styling to the NavDrawerHeader slots based on the state
- */ export const useNavDrawerHeaderStyles_unstable = (state)=>{
-    'use no memo';
-    useDrawerHeaderStyles_unstable(state);
-    const styles = useStyles();
-    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","margin","paddingInlineStart","paddingBlock","useNavDrawerHeaderStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAKxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEAR,+BAA+BQ;IAC/B,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}

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

@@ -1,22 +0,0 @@
-import { mergeClasses } from '@griffel/react';
-import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
-export const navItemClassNames = {
-    root: 'fui-NavItem',
-    icon: 'fui-NavItem__icon'
-};
-/**
- * Apply styling to the NavItem slots based on the state
- */ export const useNavItemStyles_unstable = (state)=>{
-    'use no memo';
-    const rootDefaultClassName = useRootDefaultClassName();
-    const smallStyles = useSmallStyles();
-    const contentStyles = useContentStyles();
-    const indicatorStyles = useIndicatorStyles();
-    const iconStyles = useIconStyles();
-    const { selected, density } = state;
-    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);
-    if (state.icon) {
-        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
-    }
-    return state;
-};

package/lib/components/NavItem/useNavItemStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"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":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBP;IAC7B,MAAMQ,cAAcP;IACpB,MAAMQ,gBAAgBZ;IACtB,MAAMa,kBAAkBX;IACxB,MAAMY,aAAab;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9BA,MAAMH,IAAI,CAACW,SAAS,GAAGlB,aACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,GAAGlB,aACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}

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

@@ -1,22 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { typographyStyles } from '@fluentui/react-theme';
-export const navSectionHeaderClassNames = {
-    root: 'fui-NavSectionHeader'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        marginInlineStart: `10px`,
-        marginBlock: '8px',
-        ...typographyStyles.caption1Strong
-    }
-});
-/**
- * Apply styling to the NavSectionHeader slots based on the state
- */ export const useNavSectionHeaderStyles_unstable = (state)=>{
-    'use no memo';
-    const styles = useStyles();
-    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}

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

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

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnCP,MAAMT,IAAI,CAACkB,SAAS,GAAGzB,aACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}

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

@@ -1,20 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-export const navSubItemGroupClassNames = {
-    root: 'fui-NavSubItemGroup'
-};
-/**
- * Styles for the root slot
- */ const useStyles = makeStyles({
-    root: {
-        transform: 'translateZ(0)',
-        overflow: 'hidden'
-    }
-});
-/**
- * Apply styling to the NavSubItemGroup slots based on the state
- */ export const useNavSubItemGroupStyles_unstable = (state)=>{
-    'use no memo';
-    const styles = useStyles();
-    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,0BAA0BC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAErG,OAAOF;AACT,EAAE"}

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

@@ -1,98 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { motionTokens } from '@fluentui/react-motion';
-import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
-export 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 = makeStyles({
-    baseRoot: {
-        display: 'flex',
-        gap: 'unset',
-        alignItems: 'stretch',
-        padding: 'unset',
-        textAlign: 'unset',
-        backgroundColor: navItemTokens.backgroundColor,
-        ...navItemTokens.transitionTokens,
-        ':hover': {
-            backgroundColor: navItemTokens.backgroundColorHover,
-            ...buttonHoverStyles
-        },
-        ':focus-within': buttonHoverStyles,
-        ':active': {
-            backgroundColor: 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: 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 ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,
-        willChange: 'opacity'
-    }
-});
-/**
- * Apply styling to the SplitNavItem slots based on the state
- */ export const useSplitNavItemStyles_unstable = (state)=>{
-    'use no memo';
-    const splitNavItemStyles = useSplitNaveItemStyles();
-    const sharedRootClassNames = useRootDefaultClassName();
-    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
-    if (state.navItem) {
-        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
-    }
-    if (state.actionButton) {
-        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
-    }
-    if (state.toggleButton) {
-        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
-    }
-    if (state.menuButton) {
-        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
-    }
-    return state;
-};

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

@@ -1 +0,0 @@
-{"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":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/sharedNavStyles.styles.raw.js

@@ -1,153 +0,0 @@
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles } from '@griffel/react';
-// Styles shared by several nav components.
-export const navItemTokens = {
-    defaultDrawerWidth: 260,
-    indicatorOffset: 16,
-    indicatorWidth: 4,
-    indicatorHeight: 20,
-    backgroundColor: tokens.colorNeutralBackground4,
-    backgroundColorHover: tokens.colorNeutralBackground4Hover,
-    backgroundColorPressed: tokens.colorNeutralBackground4Pressed,
-    animationTokens: {
-        animationDuration: tokens.durationFaster,
-        animationFillMode: 'both',
-        animationTimingFunction: tokens.curveLinear
-    },
-    transitionTokens: {
-        transitionDuration: tokens.durationFaster,
-        transitionTimingFunction: tokens.curveLinear,
-        transitionProperty: 'background'
-    }
-};
-/**
- * Styles for the root slot
- * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
- */ export const useRootDefaultClassName = makeResetStyles({
-    display: 'flex',
-    textTransform: 'none',
-    position: 'relative',
-    justifyContent: 'start',
-    alignItems: 'flex-start',
-    textAlign: 'left',
-    gap: tokens.spacingVerticalL,
-    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,
-    backgroundColor: navItemTokens.backgroundColor,
-    borderRadius: tokens.borderRadiusMedium,
-    color: tokens.colorNeutralForeground2,
-    textDecorationLine: 'none',
-    border: 'none',
-    // this element can change between a button and an anchor
-    // so we need to reset box sizing to prevent horizontal overflow
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    transitionDuration: navItemTokens.animationTokens.animationDuration,
-    transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,
-    transitionProperty: 'background',
-    width: '100%',
-    ...typographyStyles.body1,
-    ':hover': {
-        backgroundColor: navItemTokens.backgroundColorHover
-    },
-    // Use custom insert focus indicator
-    '&:focus-visible': {
-        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
-        outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`
-    }
-});
-export const useSmallStyles = makeStyles({
-    root: {
-        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`
-    }
-});
-/**
- * Styles for the content slot (children)
- * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
- */ export const useContentStyles = makeStyles({
-    selected: typographyStyles.body1Strong
-});
-/**
- * French fry styles
- * Shared across NavItem, NavCategoryItem, and NavSubItem
- */ export const useIndicatorStyles = makeStyles({
-    base: {
-        '::after': {
-            position: 'absolute',
-            ...navItemTokens.animationTokens,
-            animationName: {
-                '0%': {
-                    background: 'transparent'
-                },
-                '100%': {
-                    background: tokens.colorCompoundBrandForeground1
-                }
-            },
-            marginInlineStart: `-${navItemTokens.indicatorOffset}px`,
-            backgroundColor: tokens.colorCompoundBrandForeground1,
-            height: `${navItemTokens.indicatorHeight}px`,
-            width: `${navItemTokens.indicatorWidth}px`,
-            borderRadius: tokens.borderRadiusCircular,
-            content: '""'
-        },
-        '@media (forced-colors: active)': {
-            '::after': {
-                outline: `solid 2px ${tokens.colorTransparentStroke}`,
-                outlineOffset: '-2px'
-            }
-        }
-    }
-});
-/**
- * Styles for the icon slot
- * Shared across NavItem, NavCategoryItem, and NavSubItem
- * We use the grid trick to stack the filled and regular icons on top of each other
- */ export const useIconStyles = makeStyles({
-    base: {
-        display: 'grid',
-        gridTemplateAreas: 'overlay-area',
-        minHeight: '20px',
-        minWidth: '20px',
-        alignItems: 'top',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        [`& .${iconFilledClassName}`]: {
-            gridArea: 'overlay-area',
-            color: 'transparent',
-            display: 'none'
-        },
-        [`& .${iconRegularClassName}`]: {
-            gridArea: 'overlay-area',
-            display: 'inline'
-        }
-    },
-    selected: {
-        [`& .${iconFilledClassName}`]: {
-            ...navItemTokens.animationTokens,
-            display: 'inline',
-            animationName: {
-                '0%': {
-                    opacity: 0,
-                    color: 'transparent'
-                },
-                '100%': {
-                    opacity: 1,
-                    color: tokens.colorNeutralForeground2BrandSelected
-                }
-            }
-        },
-        [`& .${iconRegularClassName}`]: {
-            ...navItemTokens.animationTokens,
-            animationName: {
-                '0%': {
-                    opacity: 1,
-                    color: tokens.colorNeutralForeground2
-                },
-                '100%': {
-                    opacity: 0,
-                    color: 'transparent'
-                }
-            }
-        }
-    }
-});

package/lib/components/sharedNavStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n  defaultDrawerWidth: 260,\n  indicatorOffset: 16,\n  indicatorWidth: 4,\n  indicatorHeight: 20,\n  backgroundColor: tokens.colorNeutralBackground4,\n  backgroundColorHover: tokens.colorNeutralBackground4Hover,\n  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n  animationTokens: {\n    animationDuration: tokens.durationFaster,\n    animationFillMode: 'both',\n    animationTimingFunction: tokens.curveLinear,\n  },\n  transitionTokens: {\n    transitionDuration: tokens.durationFaster,\n    transitionTimingFunction: tokens.curveLinear,\n    transitionProperty: 'background',\n  },\n};\n\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */\nexport const useRootDefaultClassName = makeResetStyles({\n  display: 'flex',\n  textTransform: 'none',\n  position: 'relative',\n  justifyContent: 'start',\n  alignItems: 'flex-start',\n  textAlign: 'left',\n  gap: tokens.spacingVerticalL,\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n  backgroundColor: navItemTokens.backgroundColor,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  textDecorationLine: 'none',\n  border: 'none',\n  // this element can change between a button and an anchor\n  // so we need to reset box sizing to prevent horizontal overflow\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n\n  transitionDuration: navItemTokens.animationTokens.animationDuration,\n  transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n  transitionProperty: 'background',\n\n  width: '100%',\n  ...typographyStyles.body1,\n  ':hover': {\n    backgroundColor: navItemTokens.backgroundColorHover,\n  },\n\n  // Use custom insert focus indicator\n  '&:focus-visible': {\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n  },\n});\n\nexport const useSmallStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n  },\n});\n\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */\nexport const useContentStyles = makeStyles({\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */\nexport const useIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      position: 'absolute',\n      ...navItemTokens.animationTokens,\n      animationName: {\n        '0%': { background: 'transparent' },\n        '100%': { background: tokens.colorCompoundBrandForeground1 },\n      },\n\n      marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n      backgroundColor: tokens.colorCompoundBrandForeground1,\n      height: `${navItemTokens.indicatorHeight}px`,\n      width: `${navItemTokens.indicatorWidth}px`,\n      borderRadius: tokens.borderRadiusCircular,\n      content: '\"\"',\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        outline: `solid 2px ${tokens.colorTransparentStroke}`,\n        outlineOffset: '-2px',\n      },\n    },\n  },\n});\n\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n  base: {\n    display: 'grid',\n    gridTemplateAreas: 'overlay-area',\n    minHeight: '20px',\n    minWidth: '20px',\n    alignItems: 'top',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    [`& .${iconFilledClassName}`]: {\n      gridArea: 'overlay-area',\n      color: 'transparent',\n      display: 'none',\n    },\n    [`& .${iconRegularClassName}`]: {\n      gridArea: 'overlay-area',\n      display: 'inline',\n    },\n  },\n  selected: {\n    [`& .${iconFilledClassName}`]: {\n      ...navItemTokens.animationTokens,\n      display: 'inline',\n      animationName: {\n        '0%': {\n          opacity: 0,\n          color: 'transparent',\n        },\n        '100%': {\n          opacity: 1,\n          color: tokens.colorNeutralForeground2BrandSelected,\n        },\n      },\n    },\n    [`& .${iconRegularClassName}`]: {\n      ...navItemTokens.animationTokens,\n      animationName: {\n        '0%': {\n          opacity: 1,\n          color: tokens.colorNeutralForeground2,\n        },\n        '100%': {\n          opacity: 0,\n          color: 'transparent',\n        },\n      },\n    },\n  },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","makeResetStyles","makeStyles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","useSmallStyles","root","spacingVerticalXS","useContentStyles","selected","body1Strong","useIndicatorStyles","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","useIconStyles","gridTemplateAreas","minHeight","minWidth","overflow","gridArea","opacity","colorNeutralForeground2BrandSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,59 +0,0 @@
-"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, {
-    appItemClassNames: function() {
-        return appItemClassNames;
-    },
-    useAppItemStyles: function() {
-        return useAppItemStyles;
-    },
-    useAppItemStyles_unstable: function() {
-        return useAppItemStyles_unstable;
-    }
-});
-const _react = require("@griffel/react");
-const _reacttheme = require("@fluentui/react-theme");
-const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
-const appItemClassNames = {
-    root: 'fui-AppItem',
-    icon: 'fui-AppItem__icon'
-};
-const useAppItemStyles = (0, _react.makeStyles)({
-    root: {
-        marginInline: '4px',
-        width: 'revert',
-        alignItems: 'center',
-        gap: '10px',
-        marginInlineStart: '-6px',
-        marginInlineEnd: '0px',
-        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalMNudge}`,
-        ..._reacttheme.typographyStyles.subtitle2
-    },
-    small: {
-        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalS} 14px`,
-        gap: '14px'
-    },
-    absentIconRootAdjustment: {
-        paddingInlineStart: '16px'
-    }
-});
-const useAppItemStyles_unstable = (state)=>{
-    'use no memo';
-    const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
-    const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
-    const appItemSpecificStyles = useAppItemStyles();
-    const { density, icon } = state;
-    state.root.className = (0, _react.mergeClasses)(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
-    if (state.icon) {
-        state.icon.className = (0, _react.mergeClasses)(appItemClassNames.icon, iconStyles.base, state.icon.className);
-    }
-    return state;
-};