@fluentui/react-nav 9.2.4 → 9.3.0

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

@@ -0,0 +1,98 @@
+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

@@ -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":["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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,59 @@
+"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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AppItem/useAppItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemSlots, AppItemState } from './AppItem.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemClassNames: SlotClassNames<AppItemSlots> = {\n  root: 'fui-AppItem',\n  icon: 'fui-AppItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nexport const useAppItemStyles = makeStyles({\n  root: {\n    marginInline: '4px',\n    width: 'revert',\n    alignItems: 'center',\n    gap: '10px',\n    marginInlineStart: '-6px',\n    marginInlineEnd: '0px',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n    ...typographyStyles.subtitle2,\n  },\n  small: {\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n    gap: '14px',\n  },\n  absentIconRootAdjustment: {\n    paddingInlineStart: '16px',\n  },\n});\n\n/**\n * Apply styling to the AppItem slots based on the state\n */\nexport const useAppItemStyles_unstable = (state: AppItemState): AppItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n\n  const { density, icon } = state;\n\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemClassNames.root,\n    appItemSpecificStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["appItemClassNames","useAppItemStyles","useAppItemStyles_unstable","root","icon","makeStyles","marginInline","width","alignItems","gap","marginInlineStart","marginInlineEnd","padding","tokens","spacingVerticalS","spacingHorizontalS","spacingHorizontalMNudge","typographyStyles","subtitle2","small","absentIconRootAdjustment","paddingInlineStart","state","rootDefaultClassName","useRootDefaultClassName","iconStyles","useIconStyles","appItemSpecificStyles","density","className","mergeClasses","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,iBAAAA;eAAAA;;IAQAC,gBAAAA;eAAAA;;IAuBAC,yBAAAA;eAAAA;;;uBArC4B;4BAGA;uCACc;AAEhD,MAAMF,oBAAkD;IAC7DG,MAAM;IACNC,MAAM;AACR;AAKO,MAAMH,mBAAmBI,IAAAA,iBAAAA,EAAW;IACzCF,MAAM;QACJG,cAAc;QACdC,OAAO;QACPC,YAAY;QACZC,KAAK;QACLC,mBAAmB;QACnBC,iBAAiB;QACjBC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,kBAAkB,CAAC,CAAC,EAAEF,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC,EAAED,kBAAAA,CAAOG,uBAAuB,CAAC,CAAC;QAC/H,GAAGC,4BAAAA,CAAiBC,SAAS;IAC/B;IACAC,OAAO;QACLP,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,kBAAkB,CAAC,CAAC,EAAEF,kBAAAA,CAAOC,gBAAgB,CAAC,KAAK,CAAC;QAClGL,KAAK;IACP;IACAW,0BAA0B;QACxBC,oBAAoB;IACtB;AACF;AAKO,MAAMnB,4BAA4B,CAACoB;IACxC;IAEA,MAAMC,uBAAuBC,IAAAA,8CAAAA;IAC7B,MAAMC,aAAaC,IAAAA,oCAAAA;IACnB,MAAMC,wBAAwB1B;IAE9B,MAAM,EAAE2B,OAAO,EAAExB,IAAI,EAAE,GAAGkB;IAE1BA,MAAMnB,IAAI,CAAC0B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBP,sBACAvB,kBAAkBG,IAAI,EACtBwB,sBAAsBxB,IAAI,EAC1ByB,YAAY,WAAWD,sBAAsBR,KAAK,EAClD,CAACf,QAAQuB,sBAAsBP,wBAAwB,EACvDE,MAAMnB,IAAI,CAAC0B,SAAS;IAGtB,IAAIP,MAAMlB,IAAI,EAAE;QACdkB,MAAMlB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa9B,kBAAkBI,IAAI,EAAEqB,WAAWM,IAAI,EAAET,MAAMlB,IAAI,CAACyB,SAAS;IACnG;IAEA,OAAOP;AACT"}

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

@@ -0,0 +1,49 @@
+"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, {
+    appItemStaticClassNames: function() {
+        return appItemStaticClassNames;
+    },
+    useAppItemStaticStyles_unstable: function() {
+        return useAppItemStaticStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useAppItemStylesstyles = require("../AppItem/useAppItemStyles.styles");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const appItemStaticClassNames = {
+    root: 'fui-AppItemStatic',
+    icon: 'fui-AppItemStatic__icon'
+};
+const useAppItemStaticStyles = (0, _react.makeStyles)({
+    root: {
+        cursor: 'default',
+        ':hover': {
+            backgroundColor: 'unset'
+        },
+        ':active': {
+            backgroundColor: 'unset'
+        }
+    }
+});
+const useAppItemStaticStyles_unstable = (state)=>{
+    'use no memo';
+    const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
+    const appItemSpecificStyles = (0, _useAppItemStylesstyles.useAppItemStyles)();
+    const appItemStaticStyles = useAppItemStaticStyles();
+    const { density, icon } = state;
+    state.root.className = (0, _react.mergeClasses)(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n  root: 'fui-AppItemStatic',\n  icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n  root: {\n    cursor: 'default',\n    ':hover': {\n      backgroundColor: 'unset',\n    },\n    ':active': {\n      backgroundColor: 'unset',\n    },\n  },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n  const appItemStaticStyles = useAppItemStaticStyles();\n\n  const { density, icon } = state;\n\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemStaticClassNames.root,\n    appItemSpecificStyles.root,\n    appItemStaticStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["appItemStaticClassNames","useAppItemStaticStyles_unstable","root","icon","useAppItemStaticStyles","makeStyles","cursor","backgroundColor","state","rootDefaultClassName","useRootDefaultClassName","iconStyles","useIconStyles","appItemSpecificStyles","useAppItemStyles","appItemStaticStyles","density","className","mergeClasses","small","absentIconRootAdjustment","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,uBAAAA;eAAAA;;IAoBAC,+BAAAA;eAAAA;;;uBA1B4B;wCAGR;uCACsB;AAEhD,MAAMD,0BAA8D;IACzEE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,yBAAyBC,IAAAA,iBAAAA,EAAW;IACxCH,MAAM;QACJI,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAKO,MAAMN,kCAAkC,CAACO;IAC9C;IAEA,MAAMC,uBAAuBC,IAAAA,8CAAAA;IAC7B,MAAMC,aAAaC,IAAAA,oCAAAA;IACnB,MAAMC,wBAAwBC,IAAAA,wCAAAA;IAC9B,MAAMC,sBAAsBX;IAE5B,MAAM,EAAEY,OAAO,EAAEb,IAAI,EAAE,GAAGK;IAE1BA,MAAMN,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EACrBT,sBACAT,wBAAwBE,IAAI,EAC5BW,sBAAsBX,IAAI,EAC1Ba,oBAAoBb,IAAI,EACxBc,YAAY,WAAWH,sBAAsBM,KAAK,EAClD,CAAChB,QAAQU,sBAAsBO,wBAAwB,EACvDZ,MAAMN,IAAI,CAACe,SAAS;IAGtB,IAAIT,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,wBAAwBG,IAAI,EAAEQ,WAAWU,IAAI,EAAEb,MAAML,IAAI,CAACc,SAAS;IACzG;IAEA,OAAOT;AACT"}

package/lib-commonjs/components/Hamburger/useHamburgerStyles.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, {
+    hamburgerClassNames: function() {
+        return hamburgerClassNames;
+    },
+    useHamburgerStyles_unstable: function() {
+        return useHamburgerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const hamburgerClassNames = {
+    root: 'fui-Hamburger',
+    icon: 'fui-Hamburger__icon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        textDecorationLine: 'none',
+        backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
+        ..._react.shorthands.border('none'),
+        ':hover': {
+            backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorHover
+        },
+        ':active': {
+            backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorPressed
+        }
+    }
+});
+const useHamburgerStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(hamburgerClassNames.root, styles.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(hamburgerClassNames.icon, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Hamburger',\n  icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textDecorationLine: 'none',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...shorthands.border('none'),\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n    },\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n  'use no memo';\n\n  useButtonStyles_unstable(state);\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["hamburgerClassNames","useHamburgerStyles_unstable","root","icon","useStyles","makeStyles","textDecorationLine","backgroundColor","navItemTokens","shorthands","border","backgroundColorHover","backgroundColorPressed","state","useButtonStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,mBAAAA;eAAAA;;IAyBAC,2BAAAA;eAAAA;;;uBA/BwC;6BACC;uCAGxB;AAEvB,MAAMD,sBAAmD;IAC9DE,MAAM;IACNC,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJI,oBAAoB;QACpBC,iBAAiBC,oCAAAA,CAAcD,eAAe;QAC9C,GAAGE,iBAAAA,CAAWC,MAAM,CAAC,OAAO;QAC5B,UAAU;YACRH,iBAAiBC,oCAAAA,CAAcG,oBAAoB;QACrD;QACA,WAAW;YACTJ,iBAAiBC,oCAAAA,CAAcI,sBAAsB;QACvD;IACF;AACF;AAKO,MAAMX,8BAA8B,CAACY;IAC1C;IAEAC,IAAAA,qCAAAA,EAAyBD;IACzB,MAAME,SAASX;IAEfS,MAAMX,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAajB,oBAAoBE,IAAI,EAAEa,OAAOb,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAE/F,IAAIH,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAajB,oBAAoBG,IAAI,EAAEU,MAAMV,IAAI,CAACa,SAAS;IACpF;IAEA,OAAOH;AACT"}

package/lib-commonjs/components/Nav/useNavStyles.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, {
+    navClassNames: function() {
+        return navClassNames;
+    },
+    useNavStyles_unstable: function() {
+        return useNavStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const navClassNames = {
+    root: 'fui-Nav'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+const useNavStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navClassNames.root, styles.root, state.root.className);
+    // TODO Add class names to slots, for example:
+    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n  root: 'fui-Nav',\n  // TODO: add class names for all slots on NavSlots.\n  // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["navClassNames","useNavStyles_unstable","root","useStyles","makeStyles","display","flexDirection","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,aAAAA;eAAAA;;IAqBAC,qBAAAA;eAAAA;;;uBAzB4B;AAIlC,MAAMD,gBAA0C;IACrDE,MAAM;AAGR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,eAAe;IACjB;AAGF;AAKO,MAAML,wBAAwB,CAACM;IACpC;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,cAAcE,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEzF,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT"}

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

@@ -0,0 +1,62 @@
+"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, {
+    navCategoryItemClassNames: function() {
+        return navCategoryItemClassNames;
+    },
+    useNavCategoryItemStyles_unstable: function() {
+        return useNavCategoryItemStyles_unstable;
+    },
+    useRootStyles: function() {
+        return useRootStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const navCategoryItemClassNames = {
+    root: 'fui-NavCategoryItem',
+    icon: 'fui-NavCategoryItem__icon',
+    expandIcon: 'fui-NavCategoryItem__expandIcon',
+    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
+};
+const useExpandIconStyles = (0, _react.makeStyles)({
+    base: {
+        marginInlineStart: 'auto',
+        height: '20px'
+    },
+    open: {
+        transform: 'rotate(90deg)'
+    },
+    selected: _reacttheme.typographyStyles.body1Strong
+});
+const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        width: '100%'
+    }
+});
+const useNavCategoryItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const smallStyles = (0, _sharedNavStylesstyles.useSmallStyles)();
+    const defaultRootClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    const contentStyles = (0, _sharedNavStylesstyles.useContentStyles)();
+    const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
+    const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
+    const expandIconStyles = useExpandIconStyles();
+    const { selected, open, density } = state;
+    state.root.className = (0, _react.mergeClasses)(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);
+    state.expandIcon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  open: {\n    transform: 'rotate(90deg)',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.open && expandIconStyles.open,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["navCategoryItemClassNames","useNavCategoryItemStyles_unstable","useRootStyles","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","makeStyles","base","marginInlineStart","height","open","transform","selected","typographyStyles","body1Strong","width","state","rootStyles","smallStyles","useSmallStyles","defaultRootClassName","useRootDefaultClassName","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","expandIconStyles","density","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAaaA,yBAAAA;eAAAA;;IA8BAC,iCAAAA;eAAAA;;IATAC,aAAAA;eAAAA;;;uBAlC4B;4BAER;uCAO1B;AAIA,MAAMF,4BAAkE;IAC7EG,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB;AAEA,MAAMC,sBAAsBC,IAAAA,iBAAAA,EAAW;IACrCC,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,MAAM;QACJC,WAAW;IACb;IACAC,UAAUC,4BAAAA,CAAiBC,WAAW;AACxC;AAKO,MAAMd,gBAAgBM,IAAAA,iBAAAA,EAAW;IACtCC,MAAM;QACJQ,OAAO;IACT;AACF;AAKO,MAAMhB,oCAAoC,CAACiB;IAChD;IAEA,MAAMC,aAAajB;IACnB,MAAMkB,cAAcC,IAAAA,qCAAAA;IACpB,MAAMC,uBAAuBC,IAAAA,8CAAAA;IAC7B,MAAMC,gBAAgBC,IAAAA,uCAAAA;IACtB,MAAMC,kBAAkBC,IAAAA,yCAAAA;IACxB,MAAMC,aAAaC,IAAAA,oCAAAA;IACnB,MAAMC,mBAAmBvB;IAEzB,MAAM,EAAEO,QAAQ,EAAEF,IAAI,EAAEmB,OAAO,EAAE,GAAGb;IAEpCA,MAAMf,IAAI,CAAC6B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBjC,0BAA0BG,IAAI,EAC9BmB,sBACAH,WAAWV,IAAI,EACfsB,YAAY,WAAWX,YAAYjB,IAAI,EACvCW,YAAYF,SAAS,SAASc,gBAAgBjB,IAAI,EAClDK,YAAYF,SAAS,SAASY,cAAcV,QAAQ,EACpDI,MAAMf,IAAI,CAAC6B,SAAS;IAGtBd,MAAMb,UAAU,CAAC2B,SAAS,GAAGC,IAAAA,mBAAAA,EAC3BjC,0BAA0BK,UAAU,EACpCyB,iBAAiBrB,IAAI,EACrBS,MAAMN,IAAI,IAAIkB,iBAAiBlB,IAAI,EACnCM,MAAMb,UAAU,CAAC2B,SAAS;IAG5B,IAAId,MAAMd,IAAI,EAAE;QACdc,MAAMd,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBjC,0BAA0BI,IAAI,EAC9BwB,WAAWnB,IAAI,EACfK,YAAYc,WAAWd,QAAQ,EAC/BI,MAAMd,IAAI,CAAC4B,SAAS;IAExB;IAEA,OAAOd;AACT"}

package/lib-commonjs/components/NavDivider/useNavDividerStyles.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, {
+    navDividerClassNames: function() {
+        return navDividerClassNames;
+    },
+    useNavDividerStyles_unstable: function() {
+        return useNavDividerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactdivider = require("@fluentui/react-divider");
+const navDividerClassNames = {
+    root: 'fui-NavDivider',
+    wrapper: 'fui-NavDivider__wrapper'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        flexGrow: 0,
+        marginTop: '4px',
+        marginBottom: '4px'
+    }
+});
+const useNavDividerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navDividerClassNames.root, styles.root, state.root.className);
+    state.wrapper.className = (0, _react.mergeClasses)(navDividerClassNames.wrapper, state.wrapper.className);
+    (0, _reactdivider.useDividerStyles_unstable)(state);
+    return state;
+};