@fluentui/react-nav 0.0.0-nightly-20250930-0405.1 → 0.0.0-nightly-20251002-0406.1

package/CHANGELOG.md

@@ -1,31 +1,31 @@
 # Change Log - @fluentui/react-nav
 
-This log was last generated on Tue, 30 Sep 2025 04:20:36 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 04:21:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250930-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250930-0405.1)
+## [0.0.0-nightly-20251002-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20251002-0406.1)
 
-Tue, 30 Sep 2025 04:20:36 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.6..@fluentui/react-nav_v0.0.0-nightly-20250930-0405.1)
+Thu, 02 Oct 2025 04:21:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.6..@fluentui/react-nav_v0.0.0-nightly-20251002-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-divider to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-drawer to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-divider to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-drawer to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20251002-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/214347abacdd3655d97e5b0659cdac8929e938c0) by beachball)
 
 ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.6)
 

package/lib/components/AppItem/AppItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useAppItem_unstable } from './useAppItem';

package/lib/components/AppItem/AppItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItem/AppItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItem_unstable } from './useAppItem';\nimport { renderAppItem_unstable } from './renderAppItem';\nimport { useAppItemStyles_unstable } from './useAppItemStyles.styles';\nimport type { AppItemProps } from './AppItem.types';\n\n/**\n * AppItem component - Application item in the navigation menu.\n */\nexport const AppItem: ForwardRefComponent<AppItemProps> = React.forwardRef((props, ref) => {\n  const state = useAppItem_unstable(props, ref);\n\n  useAppItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);\n\n  return renderAppItem_unstable(state);\n});\n\nAppItem.displayName = 'AppItem';\n"],"names":["React","useCustomStyleHook_unstable","useAppItem_unstable","renderAppItem_unstable","useAppItemStyles_unstable","AppItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCJ,0BAA0BK;IAC1BR,4BAA4B,6BAA6BQ;IAEzD,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AppItem/AppItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItem_unstable } from './useAppItem';\nimport { renderAppItem_unstable } from './renderAppItem';\nimport { useAppItemStyles_unstable } from './useAppItemStyles.styles';\nimport type { AppItemProps } from './AppItem.types';\n\n/**\n * AppItem component - Application item in the navigation menu.\n */\nexport const AppItem: ForwardRefComponent<AppItemProps> = React.forwardRef((props, ref) => {\n  const state = useAppItem_unstable(props, ref);\n\n  useAppItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);\n\n  return renderAppItem_unstable(state);\n});\n\nAppItem.displayName = 'AppItem';\n"],"names":["React","useCustomStyleHook_unstable","useAppItem_unstable","renderAppItem_unstable","useAppItemStyles_unstable","AppItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCJ,0BAA0BK;IAC1BR,4BAA4B,6BAA6BQ;IAEzD,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

package/lib/components/AppItem/useAppItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useARIAButtonProps } from '@fluentui/react-aria';

package/lib/components/AppItem/useAppItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItem/useAppItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AppItemProps, AppItemState } from './AppItem.types';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\n\n/**\n * Create the state required to render AppItem.\n *\n * The returned state can be modified with hooks such as useAppItemStyles_unstable,\n * before being passed to renderAppItem_unstable.\n *\n * @param props - props from this instance of AppItem\n * @param ref - reference to root HTMLDivElement of AppItem\n */\nexport const useAppItem_unstable = (\n  props: AppItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): AppItemState => {\n  const { icon, as, href } = props;\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        ...props,\n      }),\n    ),\n    {\n      elementType: rootElementType,\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: rootElementType,\n      },\n    },\n  );\n\n  return {\n    components: {\n      root: rootElementType,\n      icon: 'span',\n    },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useARIAButtonProps","useNavContext_unstable","useAppItem_unstable","props","ref","icon","as","href","rootElementType","density","root","always","elementType","defaultProps","type","components","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGJ;IAC3B,MAAMK,kBAAkBF,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAM,EAAEE,UAAU,QAAQ,EAAE,GAAGR;IAE/B,MAAMS,OAAOX,KAAKY,MAAM,CACtBb,yBACEU,iBACAR,mBAAmBQ,iBAAiB;QAClC,GAAGL,KAAK;IACV,KAEF;QACES,aAAaJ;QACbK,cAAc;YACZT,KAAKA;YACLU,MAAMN;QACR;IACF;IAGF,OAAO;QACLO,YAAY;YACVL,MAAMF;YACNH,MAAM;QACR;QACAK;QACAL,MAAMN,KAAKiB,QAAQ,CAACX,MAAM;YACxBO,aAAa;QACf;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AppItem/useAppItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AppItemProps, AppItemState } from './AppItem.types';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\n\n/**\n * Create the state required to render AppItem.\n *\n * The returned state can be modified with hooks such as useAppItemStyles_unstable,\n * before being passed to renderAppItem_unstable.\n *\n * @param props - props from this instance of AppItem\n * @param ref - reference to root HTMLDivElement of AppItem\n */\nexport const useAppItem_unstable = (\n  props: AppItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): AppItemState => {\n  const { icon, as, href } = props;\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        ...props,\n      }),\n    ),\n    {\n      elementType: rootElementType,\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: rootElementType,\n      },\n    },\n  );\n\n  return {\n    components: {\n      root: rootElementType,\n      icon: 'span',\n    },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useARIAButtonProps","useNavContext_unstable","useAppItem_unstable","props","ref","icon","as","href","rootElementType","density","root","always","elementType","defaultProps","type","components","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGJ;IAC3B,MAAMK,kBAAkBF,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAM,EAAEE,UAAU,QAAQ,EAAE,GAAGR;IAE/B,MAAMS,OAAOX,KAAKY,MAAM,CACtBb,yBACEU,iBACAR,mBAAmBQ,iBAAiB;QAClC,GAAGL,KAAK;IACV,KAEF;QACES,aAAaJ;QACbK,cAAc;YACZT,KAAKA;YACLU,MAAMN;QACR;IACF;IAGF,OAAO;QACLO,YAAY;YACVL,MAAMF;YACNH,MAAM;QACR;QACAK;QACAL,MAAMN,KAAKiB,QAAQ,CAACX,MAAM;YACxBO,aAAa;QACf;QACAH;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","Bokbzmb","Jyy4pa","B1u1w3b","a9b677","Bt984gj","i8kkvl","Belr9w4","rmohyg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","absentIconRootAdjustment","B1hrpyx","d","p","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"sources":["useAppItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemClassNames = {\n    root: 'fui-AppItem',\n    icon: 'fui-AppItem__icon'\n};\n/**\n * Styles for the root slot\n */ export 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 * Apply styling to the AppItem slots based on the state\n */ export const useAppItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const { density, icon } = state;\n    state.root.className = mergeClasses(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE,aAAa;EACnBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,wBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,oBAAoB,GAAG7B,uBAAuB,CAAC,CAAC;EACtD,MAAM8B,UAAU,GAAG/B,aAAa,CAAC,CAAC;EAClC,MAAMgC,qBAAqB,GAAG3B,gBAAgB,CAAC,CAAC;EAChD,MAAM;IAAE4B,OAAO;IAAE7B;EAAK,CAAC,GAAGyB,KAAK;EAC/BA,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,GAAGrC,YAAY,CAACiC,oBAAoB,EAAE5B,iBAAiB,CAACC,IAAI,EAAE6B,qBAAqB,CAAC7B,IAAI,EAAE8B,OAAO,KAAK,OAAO,IAAID,qBAAqB,CAACT,KAAK,EAAE,CAACnB,IAAI,IAAI4B,qBAAqB,CAACR,wBAAwB,EAAEK,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,CAAC;EAChP,IAAIL,KAAK,CAACzB,IAAI,EAAE;IACZyB,KAAK,CAACzB,IAAI,CAAC8B,SAAS,GAAGrC,YAAY,CAACK,iBAAiB,CAACE,IAAI,EAAE2B,UAAU,CAACI,IAAI,EAAEN,KAAK,CAACzB,IAAI,CAAC8B,SAAS,CAAC;EACtG;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","Bokbzmb","Jyy4pa","B1u1w3b","a9b677","Bt984gj","i8kkvl","Belr9w4","rmohyg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","absentIconRootAdjustment","B1hrpyx","d","p","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"sources":["useAppItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemClassNames = {\n    root: 'fui-AppItem',\n    icon: 'fui-AppItem__icon'\n};\n/**\n * Styles for the root slot\n */ export 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 * Apply styling to the AppItem slots based on the state\n */ export const useAppItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const { density, icon } = state;\n    state.root.className = mergeClasses(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE,aAAa;EACnBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,wBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,oBAAoB,GAAG7B,uBAAuB,CAAC,CAAC;EACtD,MAAM8B,UAAU,GAAG/B,aAAa,CAAC,CAAC;EAClC,MAAMgC,qBAAqB,GAAG3B,gBAAgB,CAAC,CAAC;EAChD,MAAM;IAAE4B,OAAO;IAAE7B;EAAK,CAAC,GAAGyB,KAAK;EAC/BA,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,GAAGrC,YAAY,CAACiC,oBAAoB,EAAE5B,iBAAiB,CAACC,IAAI,EAAE6B,qBAAqB,CAAC7B,IAAI,EAAE8B,OAAO,KAAK,OAAO,IAAID,qBAAqB,CAACT,KAAK,EAAE,CAACnB,IAAI,IAAI4B,qBAAqB,CAACR,wBAAwB,EAAEK,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,CAAC;EAChP,IAAIL,KAAK,CAACzB,IAAI,EAAE;IACZyB,KAAK,CAACzB,IAAI,CAAC8B,SAAS,GAAGrC,YAAY,CAACK,iBAAiB,CAACE,IAAI,EAAE2B,UAAU,CAACI,IAAI,EAAEN,KAAK,CAACzB,IAAI,CAAC8B,SAAS,CAAC;EACtG;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';

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

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

package/lib/components/AppItemStatic/AppItemStatic.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useAppItemStatic_unstable } from './useAppItemStatic';

package/lib/components/AppItemStatic/AppItemStatic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItemStatic_unstable } from './useAppItemStatic';\nimport { renderAppItemStatic_unstable } from './renderAppItemStatic';\nimport { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';\nimport type { AppItemStaticProps } from './AppItemStatic.types';\n\n/**\n * AppItemStatic component - Static application item in the navigation menu.\n */\nexport const AppItemStatic: ForwardRefComponent<AppItemStaticProps> = React.forwardRef((props, ref) => {\n  const state = useAppItemStatic_unstable(props, ref);\n\n  useAppItemStaticStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);\n\n  return renderAppItemStatic_unstable(state);\n});\n\nAppItemStatic.displayName = 'AppItemStatic';\n"],"names":["React","useCustomStyleHook_unstable","useAppItemStatic_unstable","renderAppItemStatic_unstable","useAppItemStaticStyles_unstable","AppItemStatic","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItemStatic_unstable } from './useAppItemStatic';\nimport { renderAppItemStatic_unstable } from './renderAppItemStatic';\nimport { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';\nimport type { AppItemStaticProps } from './AppItemStatic.types';\n\n/**\n * AppItemStatic component - Static application item in the navigation menu.\n */\nexport const AppItemStatic: ForwardRefComponent<AppItemStaticProps> = React.forwardRef((props, ref) => {\n  const state = useAppItemStatic_unstable(props, ref);\n\n  useAppItemStaticStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);\n\n  return renderAppItemStatic_unstable(state);\n});\n\nAppItemStatic.displayName = 'AppItemStatic';\n"],"names":["React","useCustomStyleHook_unstable","useAppItemStatic_unstable","renderAppItemStatic_unstable","useAppItemStaticStyles_unstable","AppItemStatic","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/AppItemStatic/useAppItemStatic.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useNavContext_unstable } from '../NavContext';

package/lib/components/AppItemStatic/useAppItemStatic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStatic.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AppItemStaticProps, AppItemStaticState } from './AppItemStatic.types';\nimport { useNavContext_unstable } from '../NavContext';\n\n/**\n * Create the state required to render AppItemStatic.\n *\n * The returned state can be modified with hooks such as useAppItemStaticStyles_unstable,\n * before being passed to renderAppItemStatic_unstable.\n *\n * @param props - props from this instance of AppItemStatic\n * @param ref - reference to root HTMLDivElement of AppItemStatic\n */\nexport const useAppItemStatic_unstable = (\n  props: AppItemStaticProps,\n  ref: React.Ref<HTMLDivElement>,\n): AppItemStaticState => {\n  const { icon } = props;\n\n  const { density = 'medium' } = useNavContext_unstable();\n  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavContext_unstable","useAppItemStatic_unstable","props","ref","icon","density","components","root","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EAAEG,UAAU,QAAQ,EAAE,GAAGL;IAC/B,OAAO;QACLM,YAAY;YACVC,MAAM;YACNH,MAAM;QACR;QACAG,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL,MAAML,KAAKW,QAAQ,CAACN,MAAM;YACxBK,aAAa;QACf;QACAJ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStatic.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AppItemStaticProps, AppItemStaticState } from './AppItemStatic.types';\nimport { useNavContext_unstable } from '../NavContext';\n\n/**\n * Create the state required to render AppItemStatic.\n *\n * The returned state can be modified with hooks such as useAppItemStaticStyles_unstable,\n * before being passed to renderAppItemStatic_unstable.\n *\n * @param props - props from this instance of AppItemStatic\n * @param ref - reference to root HTMLDivElement of AppItemStatic\n */\nexport const useAppItemStatic_unstable = (\n  props: AppItemStaticProps,\n  ref: React.Ref<HTMLDivElement>,\n): AppItemStaticState => {\n  const { icon } = props;\n\n  const { density = 'medium' } = useNavContext_unstable();\n  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavContext_unstable","useAppItemStatic_unstable","props","ref","icon","density","components","root","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EAAEG,UAAU,QAAQ,EAAE,GAAGL;IAC/B,OAAO;QACLM,YAAY;YACVC,MAAM;YACNH,MAAM;QACR;QACAG,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL,MAAML,KAAKW,QAAQ,CAACN,MAAM;YACxBK,aAAa;QACf;QACAJ;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';
 import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n    root: 'fui-AppItemStatic',\n    icon: 'fui-AppItemStatic__icon'\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 * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const appItemStaticStyles = useAppItemStaticStyles();\n    const { density, icon } = state;\n    state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,sBAAsB,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAU9B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,UAAU,GAAGf,aAAa,CAAC,CAAC;EAClC,MAAMgB,qBAAqB,GAAGjB,gBAAgB,CAAC,CAAC;EAChD,MAAMkB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEa,OAAO;IAAEd;EAAK,CAAC,GAAGS,KAAK;EAC/BA,KAAK,CAACV,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACgB,oBAAoB,EAAEZ,uBAAuB,CAACC,IAAI,EAAEa,qBAAqB,CAACb,IAAI,EAAEc,mBAAmB,CAACd,IAAI,EAAEe,OAAO,KAAK,OAAO,IAAIF,qBAAqB,CAACI,KAAK,EAAE,CAAChB,IAAI,IAAIY,qBAAqB,CAACK,wBAAwB,EAAER,KAAK,CAACV,IAAI,CAACgB,SAAS,CAAC;EAChR,IAAIN,KAAK,CAACT,IAAI,EAAE;IACZS,KAAK,CAACT,IAAI,CAACe,SAAS,GAAGrB,YAAY,CAACI,uBAAuB,CAACE,IAAI,EAAEW,UAAU,CAACO,IAAI,EAAET,KAAK,CAACT,IAAI,CAACe,SAAS,CAAC;EAC5G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n    root: 'fui-AppItemStatic',\n    icon: 'fui-AppItemStatic__icon'\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 * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const appItemStaticStyles = useAppItemStaticStyles();\n    const { density, icon } = state;\n    state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,sBAAsB,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAU9B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,UAAU,GAAGf,aAAa,CAAC,CAAC;EAClC,MAAMgB,qBAAqB,GAAGjB,gBAAgB,CAAC,CAAC;EAChD,MAAMkB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEa,OAAO;IAAEd;EAAK,CAAC,GAAGS,KAAK;EAC/BA,KAAK,CAACV,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACgB,oBAAoB,EAAEZ,uBAAuB,CAACC,IAAI,EAAEa,qBAAqB,CAACb,IAAI,EAAEc,mBAAmB,CAACd,IAAI,EAAEe,OAAO,KAAK,OAAO,IAAIF,qBAAqB,CAACI,KAAK,EAAE,CAAChB,IAAI,IAAIY,qBAAqB,CAACK,wBAAwB,EAAER,KAAK,CAACV,IAAI,CAACgB,SAAS,CAAC;EAChR,IAAIN,KAAK,CAACT,IAAI,EAAE;IACZS,KAAK,CAACT,IAAI,CAACe,SAAS,GAAGrB,YAAY,CAACI,uBAAuB,CAACE,IAAI,EAAEW,UAAU,CAACO,IAAI,EAAET,KAAK,CAACT,IAAI,CAACe,SAAS,CAAC;EAC5G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';
 import { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';

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

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

package/lib/components/Hamburger/Hamburger.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderButton_unstable } from '@fluentui/react-button';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

package/lib/components/Hamburger/Hamburger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Hamburger/Hamburger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useHamburger_unstable } from './useHamburger';\nimport { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\nimport type { HamburgerProps } from './Hamburger.types';\n\n/**\n * Hamburger component - a button that toggles a menu or navigation drawer.\n */\nexport const Hamburger: ForwardRefComponent<HamburgerProps> = React.forwardRef((props, ref) => {\n  const state = useHamburger_unstable(props, ref);\n\n  useHamburgerStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n}) as ForwardRefComponent<HamburgerProps>;\n\nHamburger.displayName = 'Hamburger';\n"],"names":["React","renderButton_unstable","useCustomStyleHook_unstable","useHamburger_unstable","useHamburgerStyles_unstable","Hamburger","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BP,4BAA4B,+BAA+BO;IAE3D,OAAOR,sBAAsBQ;AAC/B,GAA0C;AAE1CJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Hamburger/Hamburger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useHamburger_unstable } from './useHamburger';\nimport { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\nimport type { HamburgerProps } from './Hamburger.types';\n\n/**\n * Hamburger component - a button that toggles a menu or navigation drawer.\n */\nexport const Hamburger: ForwardRefComponent<HamburgerProps> = React.forwardRef((props, ref) => {\n  const state = useHamburger_unstable(props, ref);\n\n  useHamburgerStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n}) as ForwardRefComponent<HamburgerProps>;\n\nHamburger.displayName = 'Hamburger';\n"],"names":["React","renderButton_unstable","useCustomStyleHook_unstable","useHamburger_unstable","useHamburgerStyles_unstable","Hamburger","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BP,4BAA4B,+BAA+BO;IAE3D,OAAOR,sBAAsBQ;AAC/B,GAA0C;AAE1CJ,UAAUK,WAAW,GAAG"}

package/lib/components/Hamburger/useHamburger.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
 import { Navigation20Filled } from '@fluentui/react-icons';

package/lib/components/Hamburger/useHamburger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Hamburger/useHamburger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { Navigation20Filled } from '@fluentui/react-icons';\nimport type { HamburgerProps, HamburgerState } from './Hamburger.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useHamburger_unstable = (\n  props: HamburgerProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): HamburgerState => {\n  return useButton_unstable({ icon: <Navigation20Filled />, appearance: 'transparent', ...props }, ref);\n};\n"],"names":["React","useButton_unstable","Navigation20Filled","useHamburger_unstable","props","ref","icon","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,QAAQ,wBAAwB;AAG3D;;;;;CAKC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,OAAOJ,mBAAmB;QAAEK,oBAAM,oBAACJ;QAAuBK,YAAY;QAAe,GAAGH,KAAK;IAAC,GAAGC;AACnG,EAAE"}
+{"version":3,"sources":["../src/components/Hamburger/useHamburger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { Navigation20Filled } from '@fluentui/react-icons';\nimport type { HamburgerProps, HamburgerState } from './Hamburger.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useHamburger_unstable = (\n  props: HamburgerProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): HamburgerState => {\n  return useButton_unstable({ icon: <Navigation20Filled />, appearance: 'transparent', ...props }, ref);\n};\n"],"names":["React","useButton_unstable","Navigation20Filled","useHamburger_unstable","props","ref","icon","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,QAAQ,wBAAwB;AAG3D;;;;;CAKC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,OAAOJ,mBAAmB;QAAEK,oBAAM,oBAACJ;QAAuBK,YAAY;QAAe,GAAGH,KAAK;IAAC,GAAGC;AACnG,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { navItemTokens } from '../sharedNavStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Jwef8y","ecr2s2","d","h","a","useHamburgerStyles_unstable","state","styles","className"],"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n    root: 'fui-Hamburger',\n    icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const 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 * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n    'use no memo';\n    useButtonStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACblB,wBAAwB,CAACkB,KAAK,CAAC;EAC/B,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGtB,YAAY,CAACI,mBAAmB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EAChG,IAAIF,KAAK,CAACd,IAAI,EAAE;IACZc,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGtB,YAAY,CAACI,mBAAmB,CAACE,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACvF;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Jwef8y","ecr2s2","d","h","a","useHamburgerStyles_unstable","state","styles","className"],"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n    root: 'fui-Hamburger',\n    icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const 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 * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n    'use no memo';\n    useButtonStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACblB,wBAAwB,CAACkB,KAAK,CAAC;EAC/B,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGtB,YAAY,CAACI,mBAAmB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EAChG,IAAIF,KAAK,CAACd,IAAI,EAAE;IACZc,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGtB,YAAY,CAACI,mBAAmB,CAACE,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACvF;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { navItemTokens } from '../sharedNavStyles.styles';

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

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

package/lib/components/Nav/Nav.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNav_unstable } from './useNav';

package/lib/components/Nav/Nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/Nav.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNav_unstable } from './useNav';\nimport { renderNav_unstable } from './renderNav';\nimport { useNavStyles_unstable } from './useNavStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport type { NavProps } from './Nav.types';\n\n/**\n * Nav - A component that provides up to two levels of nesting for navigation.\n */\nexport const Nav: ForwardRefComponent<NavProps> = React.forwardRef((props, ref) => {\n  const state = useNav_unstable(props, ref);\n\n  const contextValues = useNavContextValues_unstable(state);\n\n  useNavStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderNav_unstable(state, contextValues);\n});\n\nNav.displayName = 'Nav';\n"],"names":["React","useCustomStyleHook_unstable","useNav_unstable","renderNav_unstable","useNavStyles_unstable","useNavContextValues_unstable","Nav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,4BAA4B,QAAQ,yBAAyB;AAGtE;;CAEC,GACD,OAAO,MAAMC,oBAAqCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErC,MAAME,gBAAgBN,6BAA6BK;IAEnDN,sBAAsBM;IACtBT,4BAA4B,+BAA+BS;IAE3D,OAAOP,mBAAmBO,OAAOC;AACnC,GAAG;AAEHL,IAAIM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Nav/Nav.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNav_unstable } from './useNav';\nimport { renderNav_unstable } from './renderNav';\nimport { useNavStyles_unstable } from './useNavStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport type { NavProps } from './Nav.types';\n\n/**\n * Nav - A component that provides up to two levels of nesting for navigation.\n */\nexport const Nav: ForwardRefComponent<NavProps> = React.forwardRef((props, ref) => {\n  const state = useNav_unstable(props, ref);\n\n  const contextValues = useNavContextValues_unstable(state);\n\n  useNavStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderNav_unstable(state, contextValues);\n});\n\nNav.displayName = 'Nav';\n"],"names":["React","useCustomStyleHook_unstable","useNav_unstable","renderNav_unstable","useNavStyles_unstable","useNavContextValues_unstable","Nav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,4BAA4B,QAAQ,yBAAyB;AAGtE;;CAEC,GACD,OAAO,MAAMC,oBAAqCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErC,MAAME,gBAAgBN,6BAA6BK;IAEnDN,sBAAsBM;IACtBT,4BAA4B,+BAA+BS;IAE3D,OAAOP,mBAAmBO,OAAOC;AACnC,GAAG;AAEHL,IAAIM,WAAW,GAAG"}

package/lib/components/Nav/useNav.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useControllableState, useEventCallback, useMergedRefs, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';
 /**

package/lib/components/Nav/useNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  getIntrinsicElementProps,\n  EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n  defaultOpenCategories,\n  multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n  if (defaultOpenCategories !== undefined) {\n    if (Array.isArray(defaultOpenCategories)) {\n      return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n    }\n    return [defaultOpenCategories];\n  }\n  return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      return previousOpenItems.filter(i => i !== value);\n    } else {\n      return [...previousOpenItems, value];\n    }\n  }\n\n  return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n  const {\n    onNavItemSelect,\n    onNavCategoryItemToggle,\n    multiple = true,\n    density = 'medium',\n    openCategories: controlledOpenCategoryItems,\n    selectedCategoryValue: controlledSelectedCategoryValue,\n    selectedValue: controlledSelectedValue,\n    defaultOpenCategories,\n    defaultSelectedValue,\n    defaultSelectedCategoryValue,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [openCategories, setOpenCategories] = useControllableState({\n    state: controlledOpenCategoryItems,\n    defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n    initialState: [],\n  });\n\n  const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n    state: controlledSelectedCategoryValue,\n    defaultState: defaultSelectedCategoryValue,\n    initialState: undefined,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the navItem list re-renders.\n  // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n  // renders for navItems that have not changed.\n  const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  if (currentSelectedValue.current !== selectedValue) {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }\n\n  if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n    previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n    currentSelectedCategoryValue.current = selectedCategoryValue;\n  }\n\n  // used for NavItems and NavSubItems\n  const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    setSelectedValue(data.value);\n    setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n    onNavItemSelect?.(event, data);\n  });\n\n  // used for NavCategoryItems\n  const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    if (data.categoryValue !== undefined) {\n      const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n      onNavCategoryItemToggle?.(event, data);\n      setOpenCategories(nextOpenCategories);\n    }\n  });\n\n  const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n  const onRegister = React.useCallback((data: NavItemRegisterData) => {\n    registeredNavItems.current[JSON.stringify(data.value)] = data;\n  }, []);\n\n  const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n    delete registeredNavItems.current[JSON.stringify(data.value)];\n  }, []);\n\n  const getRegisteredNavItems = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      selectedCategoryValue: currentSelectedCategoryValue.current,\n      previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n      registeredNavItems: registeredNavItems.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openCategories,\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    multiple,\n    density,\n    tabbable: false,\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  getIntrinsicElementProps,\n  EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n  defaultOpenCategories,\n  multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n  if (defaultOpenCategories !== undefined) {\n    if (Array.isArray(defaultOpenCategories)) {\n      return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n    }\n    return [defaultOpenCategories];\n  }\n  return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      return previousOpenItems.filter(i => i !== value);\n    } else {\n      return [...previousOpenItems, value];\n    }\n  }\n\n  return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n  const {\n    onNavItemSelect,\n    onNavCategoryItemToggle,\n    multiple = true,\n    density = 'medium',\n    openCategories: controlledOpenCategoryItems,\n    selectedCategoryValue: controlledSelectedCategoryValue,\n    selectedValue: controlledSelectedValue,\n    defaultOpenCategories,\n    defaultSelectedValue,\n    defaultSelectedCategoryValue,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [openCategories, setOpenCategories] = useControllableState({\n    state: controlledOpenCategoryItems,\n    defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n    initialState: [],\n  });\n\n  const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n    state: controlledSelectedCategoryValue,\n    defaultState: defaultSelectedCategoryValue,\n    initialState: undefined,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the navItem list re-renders.\n  // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n  // renders for navItems that have not changed.\n  const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  if (currentSelectedValue.current !== selectedValue) {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }\n\n  if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n    previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n    currentSelectedCategoryValue.current = selectedCategoryValue;\n  }\n\n  // used for NavItems and NavSubItems\n  const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    setSelectedValue(data.value);\n    setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n    onNavItemSelect?.(event, data);\n  });\n\n  // used for NavCategoryItems\n  const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    if (data.categoryValue !== undefined) {\n      const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n      onNavCategoryItemToggle?.(event, data);\n      setOpenCategories(nextOpenCategories);\n    }\n  });\n\n  const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n  const onRegister = React.useCallback((data: NavItemRegisterData) => {\n    registeredNavItems.current[JSON.stringify(data.value)] = data;\n  }, []);\n\n  const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n    delete registeredNavItems.current[JSON.stringify(data.value)];\n  }, []);\n\n  const getRegisteredNavItems = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      selectedCategoryValue: currentSelectedCategoryValue.current,\n      previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n      registeredNavItems: registeredNavItems.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openCategories,\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    multiple,\n    density,\n    tabbable: false,\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":"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"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 export const navClassNames = {
   root: 'fui-Nav'

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"sources":["useNavStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n    root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,aAAa,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EAC1F;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"sources":["useNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n    root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,aAAa,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EAC1F;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 export const navClassNames = {
     root: 'fui-Nav'

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

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

package/lib/components/NavCategory/NavCategory.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useNavCategory_unstable } from './useNavCategory';
 import { renderNavCategory_unstable } from './renderNavCategory';

package/lib/components/NavCategory/NavCategory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategory/NavCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavCategoryProps } from './NavCategory.types';\n\nimport { useNavCategory_unstable } from './useNavCategory';\nimport { renderNavCategory_unstable } from './renderNavCategory';\nimport { useNavCategoryContextValues_unstable } from '../useNavCategoryContextValues_unstable';\n\n/**\n * NavCategory component - a category in the navigation menu that can contain multiple items.\n */\nexport const NavCategory: ForwardRefComponent<NavCategoryProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategory_unstable(props, ref);\n  const contextValues = useNavCategoryContextValues_unstable(state);\n\n  return renderNavCategory_unstable(state, contextValues);\n});\n\nNavCategory.displayName = 'NavCategory';\n"],"names":["React","useNavCategory_unstable","renderNavCategory_unstable","useNavCategoryContextValues_unstable","NavCategory","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAK/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAC7C,MAAME,gBAAgBN,qCAAqCK;IAE3D,OAAON,2BAA2BM,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavCategory/NavCategory.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavCategoryProps } from './NavCategory.types';\n\nimport { useNavCategory_unstable } from './useNavCategory';\nimport { renderNavCategory_unstable } from './renderNavCategory';\nimport { useNavCategoryContextValues_unstable } from '../useNavCategoryContextValues_unstable';\n\n/**\n * NavCategory component - a category in the navigation menu that can contain multiple items.\n */\nexport const NavCategory: ForwardRefComponent<NavCategoryProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategory_unstable(props, ref);\n  const contextValues = useNavCategoryContextValues_unstable(state);\n\n  return renderNavCategory_unstable(state, contextValues);\n});\n\nNavCategory.displayName = 'NavCategory';\n"],"names":["React","useNavCategory_unstable","renderNavCategory_unstable","useNavCategoryContextValues_unstable","NavCategory","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAK/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAC7C,MAAME,gBAAgBN,qCAAqCK;IAE3D,OAAON,2BAA2BM,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/NavCategory/useNavCategory.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useNavContext_unstable } from '../NavContext';
 /**

package/lib/components/NavCategory/useNavCategory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategory/useNavCategory.ts"],"sourcesContent":["import * as React from 'react';\nimport { useNavContext_unstable } from '../NavContext';\n\nimport type { NavCategoryProps, NavCategoryState } from './NavCategory.types';\n\n/**\n * Create the state required to render NavCategory.\n *\n * The returned state can be modified with hooks such as useNavCategoryStyles_unstable,\n * before being passed to renderNavCategory_unstable.\n *\n * @param props - props from this instance of NavCategory\n * @param ref - reference to root HTMLDivElement of NavCategory\n */\nexport const useNavCategory_unstable = (props: NavCategoryProps, ref: React.Ref<HTMLDivElement>): NavCategoryState => {\n  const { value, children } = props;\n\n  const { openCategories } = useNavContext_unstable();\n\n  const open: boolean = openCategories?.includes(value);\n\n  return {\n    open,\n    value,\n    children: children ?? null,\n  };\n};\n"],"names":["React","useNavContext_unstable","useNavCategory_unstable","props","ref","value","children","openCategories","open","includes"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,gBAAgB;AAIvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAE5B,MAAM,EAAEI,cAAc,EAAE,GAAGN;IAE3B,MAAMO,OAAgBD,2BAAAA,qCAAAA,eAAgBE,QAAQ,CAACJ;IAE/C,OAAO;QACLG;QACAH;QACAC,UAAUA,qBAAAA,sBAAAA,WAAY;IACxB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategory/useNavCategory.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useNavContext_unstable } from '../NavContext';\n\nimport type { NavCategoryProps, NavCategoryState } from './NavCategory.types';\n\n/**\n * Create the state required to render NavCategory.\n *\n * The returned state can be modified with hooks such as useNavCategoryStyles_unstable,\n * before being passed to renderNavCategory_unstable.\n *\n * @param props - props from this instance of NavCategory\n * @param ref - reference to root HTMLDivElement of NavCategory\n */\nexport const useNavCategory_unstable = (props: NavCategoryProps, ref: React.Ref<HTMLDivElement>): NavCategoryState => {\n  const { value, children } = props;\n\n  const { openCategories } = useNavContext_unstable();\n\n  const open: boolean = openCategories?.includes(value);\n\n  return {\n    open,\n    value,\n    children: children ?? null,\n  };\n};\n"],"names":["React","useNavContext_unstable","useNavCategory_unstable","props","ref","value","children","openCategories","open","includes"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,gBAAgB;AAIvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAE5B,MAAM,EAAEI,cAAc,EAAE,GAAGN;IAE3B,MAAMO,OAAgBD,2BAAAA,qCAAAA,eAAgBE,QAAQ,CAACJ;IAE/C,OAAO;QACLG;QACAH;QACAC,UAAUA,qBAAAA,sBAAAA,WAAY;IACxB;AACF,EAAE"}

package/lib/components/NavCategoryContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const NavCategoryContext = React.createContext(undefined);
 const navCategoryContextDefaultValue = {

package/lib/components/NavCategoryContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavCategoryContextValues = {\n  categoryValue: NavCategoryContextValue;\n};\n\nexport type NavCategoryContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavCategoryContext = React.createContext<NavCategoryContextValue | undefined>(\n  undefined,\n) as React.Context<NavCategoryContextValue>;\n\nconst navCategoryContextDefaultValue: NavCategoryContextValue = {\n  open: false,\n  value: '',\n};\n\nexport const { Provider: NavCategoryProvider } = NavCategoryContext;\n\nexport const useNavCategoryContext_unstable = (): NavCategoryContextValue => {\n  return React.useContext(NavCategoryContext) ?? navCategoryContextDefaultValue;\n};\n"],"names":["React","NavCategoryContext","createContext","undefined","navCategoryContextDefaultValue","open","value","Provider","NavCategoryProvider","useNavCategoryContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,qBAAqBD,MAAME,aAAa,CAC5CC;AAGF,MAAMC,iCAA0D;IAC9DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,mBAAmB,EAAE,GAAGP,mBAAmB;AAEpE,OAAO,MAAMQ,iCAAiC;QACrCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,iCAAjBD,+BAAAA,oBAAwCI;AACjD,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavCategoryContextValues = {\n  categoryValue: NavCategoryContextValue;\n};\n\nexport type NavCategoryContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavCategoryContext = React.createContext<NavCategoryContextValue | undefined>(\n  undefined,\n) as React.Context<NavCategoryContextValue>;\n\nconst navCategoryContextDefaultValue: NavCategoryContextValue = {\n  open: false,\n  value: '',\n};\n\nexport const { Provider: NavCategoryProvider } = NavCategoryContext;\n\nexport const useNavCategoryContext_unstable = (): NavCategoryContextValue => {\n  return React.useContext(NavCategoryContext) ?? navCategoryContextDefaultValue;\n};\n"],"names":["React","NavCategoryContext","createContext","undefined","navCategoryContextDefaultValue","open","value","Provider","NavCategoryProvider","useNavCategoryContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,qBAAqBD,MAAME,aAAa,CAC5CC;AAGF,MAAMC,iCAA0D;IAC9DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,mBAAmB,EAAE,GAAGP,mBAAmB;AAEpE,OAAO,MAAMQ,iCAAiC;QACrCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,iCAAjBD,+BAAAA,oBAAwCI;AACjD,EAAE"}

package/lib/components/NavCategoryItem/NavCategoryItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavCategoryItem_unstable } from './useNavCategoryItem';

package/lib/components/NavCategoryItem/NavCategoryItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavCategoryItem_unstable } from './useNavCategoryItem';\nimport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nimport type { NavCategoryItemProps } from './NavCategoryItem.types';\nimport { useNavCategoryItemStyles_unstable } from './useNavCategoryItem.styles';\nimport { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemContextValues_unstable';\n\n/**\n * A Nav Category Item provides provides a clickable accordion like header that exposes\n * a list of NavSubItems to take users to a new destination.\n */\nexport const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategoryItem_unstable(props, ref);\n  const contextValues = useNavCategoryItemContextValues_unstable(state);\n\n  useNavCategoryItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);\n\n  return renderNavCategoryItem_unstable(state, contextValues);\n});\n\nNavCategoryItem.displayName = 'NavCategoryItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavCategoryItem_unstable","renderNavCategoryItem_unstable","useNavCategoryItemStyles_unstable","useNavCategoryItemContextValues_unstable","NavCategoryItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAEzE,SAASC,iCAAiC,QAAQ,8BAA8B;AAChF,SAASC,wCAAwC,QAAQ,8CAA8C;AAEvG;;;CAGC,GACD,OAAO,MAAMC,gCAA6DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IACjD,MAAME,gBAAgBN,yCAAyCK;IAE/DN,kCAAkCM;IAClCT,4BAA4B,4BAA4BS;IAExD,OAAOP,+BAA+BO,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavCategoryItem_unstable } from './useNavCategoryItem';\nimport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nimport type { NavCategoryItemProps } from './NavCategoryItem.types';\nimport { useNavCategoryItemStyles_unstable } from './useNavCategoryItem.styles';\nimport { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemContextValues_unstable';\n\n/**\n * A Nav Category Item provides provides a clickable accordion like header that exposes\n * a list of NavSubItems to take users to a new destination.\n */\nexport const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategoryItem_unstable(props, ref);\n  const contextValues = useNavCategoryItemContextValues_unstable(state);\n\n  useNavCategoryItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);\n\n  return renderNavCategoryItem_unstable(state, contextValues);\n});\n\nNavCategoryItem.displayName = 'NavCategoryItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavCategoryItem_unstable","renderNavCategoryItem_unstable","useNavCategoryItemStyles_unstable","useNavCategoryItemContextValues_unstable","NavCategoryItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAEzE,SAASC,iCAAiC,QAAQ,8BAA8B;AAChF,SAASC,wCAAwC,QAAQ,8CAA8C;AAEvG;;;CAGC,GACD,OAAO,MAAMC,gCAA6DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IACjD,MAAME,gBAAgBN,yCAAyCK;IAE/DN,kCAAkCM;IAClCT,4BAA4B,4BAA4BS;IAExD,OAAOP,+BAA+BO,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}

package/lib/components/NavCategoryItem/useNavCategoryItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
 import { ChevronDown20Regular } from '@fluentui/react-icons';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst ExpandIconMotion = createPresenceComponent(() => {\n  const keyframes: Keyframe[] = [\n    {\n      transform: 'rotate(0deg) translate3D(0, 0, 0)',\n    },\n    {\n      transform: 'rotate(180deg) translate3D(0, 0, 0)',\n    },\n  ];\n  const duration = motionTokens.durationFast;\n  const easing = motionTokens.curveEasyEase;\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing,\n    },\n  };\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","ExpandIconMotion","keyframes","transform","duration","durationFast","easing","curveEasyEase","enter","exit","reverse","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAGnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,mBAAmBL,wBAAwB;IAC/C,MAAMM,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWP,aAAaQ,YAAY;IAC1C,MAAMC,SAAST,aAAaU,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLN;YACAE;YACAE;QACF;QACAG,MAAM;YACJP,WAAW;mBAAIA;aAAU,CAACQ,OAAO;YACjCN;YACAE;QACF;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMK,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGnB;IAExB,MAAM,EAAEoB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGrB;IAEtF,MAAMsB,yBAAyB5B,iBAC7BF,eAAesB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB7B;QACpB;QACA4B,MAAMpC,KAAKsC,MAAM,CACfxC,yBAAyB,UAAU;YACjCsB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYtB,KAAKsC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACvC;gBACX,eAAe;YACjB;YACAqC,aAAa;QACf;QACAF,kBAAkBhC,mBAAmBc,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa/B;YACbgC,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMvB,KAAK2C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst ExpandIconMotion = createPresenceComponent(() => {\n  const keyframes: Keyframe[] = [\n    {\n      transform: 'rotate(0deg) translate3D(0, 0, 0)',\n    },\n    {\n      transform: 'rotate(180deg) translate3D(0, 0, 0)',\n    },\n  ];\n  const duration = motionTokens.durationFast;\n  const easing = motionTokens.curveEasyEase;\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing,\n    },\n  };\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","ExpandIconMotion","keyframes","transform","duration","durationFast","easing","curveEasyEase","enter","exit","reverse","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAGnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,mBAAmBL,wBAAwB;IAC/C,MAAMM,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWP,aAAaQ,YAAY;IAC1C,MAAMC,SAAST,aAAaU,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLN;YACAE;YACAE;QACF;QACAG,MAAM;YACJP,WAAW;mBAAIA;aAAU,CAACQ,OAAO;YACjCN;YACAE;QACF;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMK,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGnB;IAExB,MAAM,EAAEoB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGrB;IAEtF,MAAMsB,yBAAyB5B,iBAC7BF,eAAesB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB7B;QACpB;QACA4B,MAAMpC,KAAKsC,MAAM,CACfxC,yBAAyB,UAAU;YACjCsB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYtB,KAAKsC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACvC;gBACX,eAAe;YACjB;YACAqC,aAAa;QACf;QACAF,kBAAkBhC,mBAAmBc,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa/B;YACbgC,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMvB,KAAK2C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';