@fluentui/react-nav 9.3.6 → 9.3.7

package/lib/components/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavItem_unstable } from './useNavItem';\nimport { renderNavItem_unstable } from './renderNavItem';\nimport { useNavItemStyles_unstable } from './useNavItemStyles.styles';\nimport type { NavItemProps } from './NavItem.types';\n\n/**\n * NavItem component - a single item in the navigation menu.\n */\nexport const NavItem: ForwardRefComponent<NavItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavItem_unstable(props, ref);\n\n  useNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);\n\n  return renderNavItem_unstable(state);\n});\n\nNavItem.displayName = 'NavItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavItem_unstable","renderNavItem_unstable","useNavItemStyles_unstable","NavItem","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/NavItem/NavItem.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 { useNavItem_unstable } from './useNavItem';\nimport { renderNavItem_unstable } from './renderNavItem';\nimport { useNavItemStyles_unstable } from './useNavItemStyles.styles';\nimport type { NavItemProps } from './NavItem.types';\n\n/**\n * NavItem component - a single item in the navigation menu.\n */\nexport const NavItem: ForwardRefComponent<NavItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavItem_unstable(props, ref);\n\n  useNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);\n\n  return renderNavItem_unstable(state);\n});\n\nNavItem.displayName = 'NavItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavItem_unstable","renderNavItem_unstable","useNavItemStyles_unstable","NavItem","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/NavItem/useNavItem.js

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

package/lib/components/NavItem/useNavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/useNavItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavItemProps, NavItemState } from './NavItem.types';\n\n/**\n * Create the state required to render NavItem.\n *\n * The returned state can be modified with hooks such as useNavItemStyles_unstable,\n * before being passed to renderNavItem_unstable.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItem_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemState => {\n  const { onClick, value, icon, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === value;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\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  root.onClick = onNavItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: { root: rootElementType, icon: 'span' },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    selected,\n    value,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavItem_unstable","props","ref","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","density","rootElementType","selected","innerRef","useRef","onNavItemClick","event","defaultPrevented","target","type","root","always","elementType","defaultProps","useEffect","components","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AAKvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAE3C,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGb;IAElF,MAAMc,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMO,WAAWN,kBAAkBJ;IAEnC,MAAMW,WAAWtB,MAAMuB,MAAM,CAAc;IAE3C,MAAMC,iBAAsDrB,iBAAiBsB,CAAAA;QAC3Ef,oBAAAA,8BAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAItB,cAAcqB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd;YAAM;QAChD;IACF;IAEA,MAAMkB,OAAO3B,KAAK4B,MAAM,CACtB7B,yBACEmB,iBACAf,mBAAmBe,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGb,KAAK;IACV,KAEF;QACEuB,aAAaX;QACbY,cAAc;YACZvB,KAAKA;YACLmB,MAAMR;QACR;IACF;IAGFS,KAAKnB,OAAO,GAAGc;IAEfxB,MAAMiC,SAAS,CAAC;QACdjB,WAAW;YACTL;YACAF,KAAKa;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN;gBAAOF,KAAKa;YAAS;QACtC;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUX;KAAM;IAE9C,OAAO;QACLuB,YAAY;YAAEL,MAAMT;YAAiBR,MAAM;QAAO;QAClDiB;QACAjB,MAAMV,KAAKiC,QAAQ,CAACvB,MAAM;YACxBmB,aAAa;QACf;QACAV;QACAV;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavItem/useNavItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavItemProps, NavItemState } from './NavItem.types';\n\n/**\n * Create the state required to render NavItem.\n *\n * The returned state can be modified with hooks such as useNavItemStyles_unstable,\n * before being passed to renderNavItem_unstable.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItem_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemState => {\n  const { onClick, value, icon, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === value;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\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  root.onClick = onNavItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: { root: rootElementType, icon: 'span' },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    selected,\n    value,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavItem_unstable","props","ref","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","density","rootElementType","selected","innerRef","useRef","onNavItemClick","event","defaultPrevented","target","type","root","always","elementType","defaultProps","useEffect","components","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AAKvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAE3C,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGb;IAElF,MAAMc,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMO,WAAWN,kBAAkBJ;IAEnC,MAAMW,WAAWtB,MAAMuB,MAAM,CAAc;IAE3C,MAAMC,iBAAsDrB,iBAAiBsB,CAAAA;QAC3Ef,oBAAAA,8BAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAItB,cAAcqB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd;YAAM;QAChD;IACF;IAEA,MAAMkB,OAAO3B,KAAK4B,MAAM,CACtB7B,yBACEmB,iBACAf,mBAAmBe,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGb,KAAK;IACV,KAEF;QACEuB,aAAaX;QACbY,cAAc;YACZvB,KAAKA;YACLmB,MAAMR;QACR;IACF;IAGFS,KAAKnB,OAAO,GAAGc;IAEfxB,MAAMiC,SAAS,CAAC;QACdjB,WAAW;YACTL;YACAF,KAAKa;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN;gBAAOF,KAAKa;YAAS;QACtC;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUX;KAAM;IAE9C,OAAO;QACLuB,YAAY;YAAEL,MAAMT;YAAiBR,MAAM;QAAO;QAClDiB;QACAjB,MAAMV,KAAKiC,QAAQ,CAACvB,MAAM;YACxBmB,aAAa;QACf;QACAV;QACAV;QACAQ;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses } from '@griffel/react';
 import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
 export const navItemClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"sources":["useNavItemStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navItemClassNames = {\n    root: 'fui-NavItem',\n    icon: 'fui-NavItem__icon'\n};\n/**\n * Apply styling to the NavItem slots based on the state\n */ export const useNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const { selected, density } = state;\n    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE,aAAa;EACnBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,oBAAoB,GAAGP,uBAAuB,CAAC,CAAC;EACtD,MAAMQ,WAAW,GAAGP,cAAc,CAAC,CAAC;EACpC,MAAMQ,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EACxC,MAAMa,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACH,IAAI,CAACW,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACC,IAAI,EAAEI,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACL,IAAI,EAAES,QAAQ,IAAIF,eAAe,CAACK,IAAI,EAAEH,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEN,KAAK,CAACH,IAAI,CAACW,SAAS,CAAC;EACtN,IAAIR,KAAK,CAACF,IAAI,EAAE;IACZE,KAAK,CAACF,IAAI,CAACU,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACE,IAAI,EAAEO,UAAU,CAACI,IAAI,EAAEH,QAAQ,IAAID,UAAU,CAACC,QAAQ,EAAEN,KAAK,CAACF,IAAI,CAACU,SAAS,CAAC;EACvI;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"sources":["useNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navItemClassNames = {\n    root: 'fui-NavItem',\n    icon: 'fui-NavItem__icon'\n};\n/**\n * Apply styling to the NavItem slots based on the state\n */ export const useNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const { selected, density } = state;\n    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE,aAAa;EACnBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,oBAAoB,GAAGP,uBAAuB,CAAC,CAAC;EACtD,MAAMQ,WAAW,GAAGP,cAAc,CAAC,CAAC;EACpC,MAAMQ,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EACxC,MAAMa,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACH,IAAI,CAACW,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACC,IAAI,EAAEI,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACL,IAAI,EAAES,QAAQ,IAAIF,eAAe,CAACK,IAAI,EAAEH,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEN,KAAK,CAACH,IAAI,CAACW,SAAS,CAAC;EACtN,IAAIR,KAAK,CAACF,IAAI,EAAE;IACZE,KAAK,CAACF,IAAI,CAACU,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACE,IAAI,EAAEO,UAAU,CAACI,IAAI,EAAEH,QAAQ,IAAID,UAAU,CAACC,QAAQ,EAAEN,KAAK,CAACF,IAAI,CAACU,SAAS,CAAC;EACvI;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@griffel/react';
 import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
 export const navItemClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n  root: 'fui-NavItem',\n  icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n\n  const { selected, density } = state;\n\n  state.root.className = mergeClasses(\n    navItemClassNames.root,\n    rootDefaultClassName,\n    density === 'small' && smallStyles.root,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBP;IAC7B,MAAMQ,cAAcP;IACpB,MAAMQ,gBAAgBZ;IACtB,MAAMa,kBAAkBX;IACxB,MAAMY,aAAab;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9BA,MAAMH,IAAI,CAACW,SAAS,GAAGlB,aACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,GAAGlB,aACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n  root: 'fui-NavItem',\n  icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n\n  const { selected, density } = state;\n\n  state.root.className = mergeClasses(\n    navItemClassNames.root,\n    rootDefaultClassName,\n    density === 'small' && smallStyles.root,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBP;IAC7B,MAAMQ,cAAcP;IACpB,MAAMQ,gBAAgBZ;IACtB,MAAMa,kBAAkBX;IACxB,MAAMY,aAAab;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9BA,MAAMH,IAAI,CAACW,SAAS,GAAGlB,aACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,GAAGlB,aACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}

package/lib/components/NavSectionHeader/NavSectionHeader.js

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

package/lib/components/NavSectionHeader/NavSectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["React","useCustomStyleHook_unstable","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnCR,4BAA4B,sCAAsCQ;IAElE,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.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 { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["React","useCustomStyleHook_unstable","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnCR,4BAA4B,sCAAsCQ;IAElE,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 export const navSectionHeaderClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n    root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginInlineStart: `10px`,\n        marginBlock: '8px',\n        ...typographyStyles.caption1Strong\n    }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n    root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginInlineStart: `10px`,\n        marginBlock: '8px',\n        ...typographyStyles.caption1Strong\n    }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 export const navSectionHeaderClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}

package/lib/components/NavSubItem/NavSubItem.js

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

package/lib/components/NavSubItem/NavSubItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - a sub-item within a navigation structure.\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.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 { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - a sub-item within a navigation structure.\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/NavSubItem/useNavSubItem.js

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

package/lib/components/NavSubItem/useNavSubItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n  props: NavSubItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n  const { onClick, value: subItemValue, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === subItemValue;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\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  root.onClick = onNavSubItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value: subItemValue,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value: subItemValue, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n  return {\n    components: {\n      root: rootElementType,\n    },\n    root,\n    selected,\n    value: subItemValue,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","density","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,8BAA8B,QAAQ,wBAAwB;AAKvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAEnD,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGd;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,kBAAkBR,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,MAAMyB,MAAM,CAAc;IAE3C,MAAMC,oBAAyDvB,iBAAiBwB,CAAAA;QAC9EhB,oBAAAA,8BAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIxB,cAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,KAAK+B,MAAM,CACtBhC,yBACEqB,iBACAjB,mBAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACEyB,aAAaZ;QACba,cAAc;YACZzB,KAAKA;YACLoB,MAAMR;QACR;IACF;IAGFU,KAAKrB,OAAO,GAAGe;IAEf1B,MAAMoC,SAAS,CAAC;QACdnB,WAAW;YACTL,OAAOC;YACPH,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN,OAAOC;gBAAcH,KAAKc;YAAS;QACpD;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUX;KAAa;IAErD,OAAO;QACLwB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAX,OAAOC;QACPO;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n  props: NavSubItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n  const { onClick, value: subItemValue, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === subItemValue;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\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  root.onClick = onNavSubItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value: subItemValue,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value: subItemValue, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n  return {\n    components: {\n      root: rootElementType,\n    },\n    root,\n    selected,\n    value: subItemValue,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","density","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,8BAA8B,QAAQ,wBAAwB;AAKvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAEnD,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGd;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,kBAAkBR,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,MAAMyB,MAAM,CAAc;IAE3C,MAAMC,oBAAyDvB,iBAAiBwB,CAAAA;QAC9EhB,oBAAAA,8BAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIxB,cAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,KAAK+B,MAAM,CACtBhC,yBACEqB,iBACAjB,mBAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACEyB,aAAaZ;QACba,cAAc;YACZzB,KAAKA;YACLoB,MAAMR;QACR;IACF;IAGFU,KAAKrB,OAAO,GAAGe;IAEf1B,MAAMoC,SAAS,CAAC;QACdnB,WAAW;YACTL,OAAOC;YACPH,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN,OAAOC;gBAAcH,KAAKc;YAAS;QACpD;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUX;KAAa;IAErD,OAAO;QACLwB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAX,OAAOC;QACPO;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
 export const navSubItemClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n    root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n    base: {\n        paddingInlineStart: '46px'\n    },\n    smallBase: {\n        paddingInlineStart: '40px'\n    },\n    selectedIndicator: {\n        '::after': {\n            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n        }\n    }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n    const { selected, density } = state;\n    const isSmallDensity = density === 'small';\n    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n    root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n    base: {\n        paddingInlineStart: '46px'\n    },\n    smallBase: {\n        paddingInlineStart: '40px'\n    },\n    selectedIndicator: {\n        '::after': {\n            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n        }\n    }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n    const { selected, density } = state;\n    const isSmallDensity = density === 'small';\n    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
 export const navSubItemClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n  navItemTokens,\n  useContentStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n  root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n  base: {\n    paddingInlineStart: '46px',\n  },\n  smallBase: {\n    paddingInlineStart: '40px',\n  },\n  selectedIndicator: {\n    '::after': {\n      marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n    },\n  },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n  const { selected, density } = state;\n  const isSmallDensity = density === 'small';\n\n  state.root.className = mergeClasses(\n    navSubItemClassNames.root,\n    rootDefaultClassName,\n    isSmallDensity && smallStyles.root,\n    isSmallDensity && navSubItemSpecificStyles.smallBase,\n    navSubItemSpecificStyles.base,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    selected && navSubItemSpecificStyles.selectedIndicator,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnCP,MAAMT,IAAI,CAACkB,SAAS,GAAGzB,aACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n  navItemTokens,\n  useContentStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n  root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n  base: {\n    paddingInlineStart: '46px',\n  },\n  smallBase: {\n    paddingInlineStart: '40px',\n  },\n  selectedIndicator: {\n    '::after': {\n      marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n    },\n  },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n  const { selected, density } = state;\n  const isSmallDensity = density === 'small';\n\n  state.root.className = mergeClasses(\n    navSubItemClassNames.root,\n    rootDefaultClassName,\n    isSmallDensity && smallStyles.root,\n    isSmallDensity && navSubItemSpecificStyles.smallBase,\n    navSubItemSpecificStyles.base,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    selected && navSubItemSpecificStyles.selectedIndicator,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnCP,MAAMT,IAAI,CAACkB,SAAS,GAAGzB,aACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}

package/lib/components/NavSubItemContext.js

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

package/lib/components/NavSubItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavSubItemContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavSubItemContext = React.createContext<NavSubItemContextValue | undefined>(\n  undefined,\n) as React.Context<NavSubItemContextValue>;\n\nconst NavSubItemContextDefaultValue: NavSubItemContextValue = {\n  open: false,\n  value: '',\n};\n\nexport const { Provider: NavSubItemProvider } = NavSubItemContext;\n\nexport const useNavSubItemContext_unstable = (): NavSubItemContextValue => {\n  return React.useContext(NavSubItemContext) ?? NavSubItemContextDefaultValue;\n};\n"],"names":["React","NavSubItemContext","createContext","undefined","NavSubItemContextDefaultValue","open","value","Provider","NavSubItemProvider","useNavSubItemContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,oBAAoBD,MAAME,aAAa,CAC3CC;AAGF,MAAMC,gCAAwD;IAC5DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAkB,EAAE,GAAGP,kBAAkB;AAElE,OAAO,MAAMQ,gCAAgC;QACpCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,gCAAjBD,+BAAAA,oBAAuCI;AAChD,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemContext.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 NavSubItemContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavSubItemContext = React.createContext<NavSubItemContextValue | undefined>(\n  undefined,\n) as React.Context<NavSubItemContextValue>;\n\nconst NavSubItemContextDefaultValue: NavSubItemContextValue = {\n  open: false,\n  value: '',\n};\n\nexport const { Provider: NavSubItemProvider } = NavSubItemContext;\n\nexport const useNavSubItemContext_unstable = (): NavSubItemContextValue => {\n  return React.useContext(NavSubItemContext) ?? NavSubItemContextDefaultValue;\n};\n"],"names":["React","NavSubItemContext","createContext","undefined","NavSubItemContextDefaultValue","open","value","Provider","NavSubItemProvider","useNavSubItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,oBAAoBD,MAAME,aAAa,CAC3CC;AAGF,MAAMC,gCAAwD;IAC5DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAkB,EAAE,GAAGP,kBAAkB;AAElE,OAAO,MAAMQ,gCAAgC;QACpCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,gCAAjBD,+BAAAA,oBAAuCI;AAChD,EAAE"}

package/lib/components/NavSubItemGroup/NavSubItemGroup.js

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

package/lib/components/NavSubItemGroup/NavSubItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - a group of sub-items within a navigation structure.\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItemGroup_unstable","renderNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","NavSubItemGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClCR,4BAA4B,qCAAqCQ;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.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 { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - a group of sub-items within a navigation structure.\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItemGroup_unstable","renderNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","NavSubItemGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClCR,4BAA4B,qCAAqCQ;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js

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

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n  NavSubItemGroupCollapseMotionParams,\n  NavSubItemGroupProps,\n  NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n  const isSmallDensity = density === 'small';\n  const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n  const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n  const keyframes: Keyframe[] = [\n    {\n      opacity: 0,\n      minHeight: 0,\n      height: 0,\n    },\n    {\n      opacity: 1,\n      minHeight: `${height}px`,\n      height: `${height}px`,\n    },\n  ];\n  const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;\n  const maxDuration = motionTokens.durationUltraSlow;\n  const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const { open } = useNavCategoryContext_unstable();\n  const { density } = useNavContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: NavGroupMotion,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: NavGroupMotion,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n        items: React.Children.count(props.children),\n        density,\n      },\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","smallSize","largeSize","NavGroupMotion","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit","Children","count","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAOnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBP,wBAAwB,CAAC,EAAEQ,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQH,YAAYG,QAAQF,YAAa;IAClF,MAAMM,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,GAAGJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,GAAGA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAef,aAAagB,YAAY,GAAG,AAACT,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMM,cAAcjB,aAAakB,iBAAiB;IAClD,MAAMC,WAAWJ,eAAeE,cAAcA,cAAcF;IAE5D,OAAO;QACLK,OAAO;YACLR;YACAO;YACAE,QAAQrB,aAAasB,kBAAkB;QACzC;QACAC,MAAM;YACJX,WAAW;mBAAIA;aAAU,CAACY,OAAO;YACjCL;YACAE,QAAQrB,aAAayB,kBAAkB;QACzC;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAG3B;IACjB,MAAM,EAAEM,OAAO,EAAE,GAAGL;IAEpB,OAAO;QACL0B;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgB1B;QAClB;QAEAyB,MAAMjC,KAAKmC,MAAM,CACfpC,yBAAyB,OAAO;YAC9B,GAAG8B,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,gBAAgB/B,mBAAmB0B,MAAMK,cAAc,EAAE;YACvDE,aAAa5B;YACb6B,cAAc;gBACZC,SAASP;gBACTQ,eAAe;gBACf9B,OAAOX,MAAM0C,QAAQ,CAACC,KAAK,CAACZ,MAAMa,QAAQ;gBAC1ChC;YACF;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n  NavSubItemGroupCollapseMotionParams,\n  NavSubItemGroupProps,\n  NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n  const isSmallDensity = density === 'small';\n  const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n  const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n  const keyframes: Keyframe[] = [\n    {\n      opacity: 0,\n      minHeight: 0,\n      height: 0,\n    },\n    {\n      opacity: 1,\n      minHeight: `${height}px`,\n      height: `${height}px`,\n    },\n  ];\n  const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;\n  const maxDuration = motionTokens.durationUltraSlow;\n  const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const { open } = useNavCategoryContext_unstable();\n  const { density } = useNavContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: NavGroupMotion,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: NavGroupMotion,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n        items: React.Children.count(props.children),\n        density,\n      },\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","smallSize","largeSize","NavGroupMotion","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit","Children","count","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAOnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBP,wBAAwB,CAAC,EAAEQ,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQH,YAAYG,QAAQF,YAAa;IAClF,MAAMM,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,GAAGJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,GAAGA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAef,aAAagB,YAAY,GAAG,AAACT,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMM,cAAcjB,aAAakB,iBAAiB;IAClD,MAAMC,WAAWJ,eAAeE,cAAcA,cAAcF;IAE5D,OAAO;QACLK,OAAO;YACLR;YACAO;YACAE,QAAQrB,aAAasB,kBAAkB;QACzC;QACAC,MAAM;YACJX,WAAW;mBAAIA;aAAU,CAACY,OAAO;YACjCL;YACAE,QAAQrB,aAAayB,kBAAkB;QACzC;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAG3B;IACjB,MAAM,EAAEM,OAAO,EAAE,GAAGL;IAEpB,OAAO;QACL0B;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgB1B;QAClB;QAEAyB,MAAMjC,KAAKmC,MAAM,CACfpC,yBAAyB,OAAO;YAC9B,GAAG8B,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,gBAAgB/B,mBAAmB0B,MAAMK,cAAc,EAAE;YACvDE,aAAa5B;YACb6B,cAAc;gBACZC,SAASP;gBACTQ,eAAe;gBACf9B,OAAOX,MAAM0C,QAAQ,CAACC,KAAK,CAACZ,MAAMa,QAAQ;gBAC1ChC;YACF;QACF;IACF;AACF,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        transform: 'translateZ(0)',\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        transform: 'translateZ(0)',\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,0BAA0BC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,0BAA0BC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib/components/SplitNavItem/SplitNavItem.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["React","useCustomStyleHook_unstable","useSplitNavItem_unstable","renderSplitNavItem_unstable","useSplitNavItemStyles_unstable","SplitNavItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.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 { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["React","useCustomStyleHook_unstable","useSplitNavItem_unstable","renderSplitNavItem_unstable","useSplitNavItemStyles_unstable","SplitNavItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/SplitNavItem/useSplitNavItem.js

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

package/lib/components/SplitNavItem/useSplitNavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport type { SplitNavItemProps, SplitNavItemState } from './SplitNavItem.types';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Button, MenuButton, ToggleButton } from '@fluentui/react-button';\nimport { MoreHorizontalFilled, Pin20Regular } from '@fluentui/react-icons';\nimport { NavItem } from '../NavItem/index';\nimport { NavSubItem } from '../NavSubItem/NavSubItem';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render SplitNavItem.\n *\n * The returned state can be modified with hooks such as useSplitNavItemStyles_unstable,\n * before being passed to renderSplitNavItem_unstable.\n *\n * @param props - props from this instance of SplitNavItem\n * @param ref - reference to root HTMLDivElement of SplitNavItem\n */\nexport const useSplitNavItem_unstable = (\n  props: SplitNavItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): SplitNavItemState => {\n  const {\n    navItem,\n    actionButton,\n    toggleButton,\n    menuButton,\n    actionButtonTooltip,\n    toggleButtonTooltip,\n    menuButtonTooltip,\n    children,\n  } = props;\n\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const { value: potentialParenValue } = useNavCategoryContext_unstable();\n\n  const isSubNav = potentialParenValue.length > 0 ? true : false;\n\n  const navItemShorthand = slot.always(navItem, {\n    defaultProps: {\n      children,\n    },\n    elementType: isSubNav ? NavSubItem : NavItem,\n  });\n\n  const actionButtonShorthand = slot.optional(actionButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: Button,\n  });\n\n  const toggleButtonShorthand = slot.optional(toggleButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: ToggleButton,\n  });\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      icon: <MoreHorizontalFilled />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: MenuButton,\n  });\n\n  const actionButtonTooltipShorthand = slot.optional(actionButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const toggleButtonTooltipShorthand = slot.optional(toggleButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const menuButtonTooltipShorthand = slot.optional(menuButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  return {\n    components: {\n      root: 'div',\n      navItem: isSubNav ? NavSubItem : NavItem,\n      actionButton: Button,\n      toggleButton: ToggleButton,\n      menuButton: MenuButton,\n      actionButtonTooltip: Tooltip,\n      toggleButtonTooltip: Tooltip,\n      menuButtonTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        // because we're passing in children to the NavItem,\n        // We can be explicit about the children prop here\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n    navItem: navItemShorthand,\n    actionButton: actionButtonShorthand,\n    toggleButton: toggleButtonShorthand,\n    menuButton: menuButtonShorthand,\n    actionButtonTooltip: actionButtonTooltipShorthand,\n    toggleButtonTooltip: toggleButtonTooltipShorthand,\n    menuButtonTooltip: menuButtonTooltipShorthand,\n    density,\n    isSubNav,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","Tooltip","useNavContext_unstable","Button","MenuButton","ToggleButton","MoreHorizontalFilled","Pin20Regular","NavItem","NavSubItem","useNavCategoryContext_unstable","useSplitNavItem_unstable","props","ref","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","children","density","value","potentialParenValue","isSubNav","length","navItemShorthand","always","defaultProps","elementType","actionButtonShorthand","optional","icon","size","appearance","toggleButtonShorthand","menuButtonShorthand","actionButtonTooltipShorthand","relationship","toggleButtonTooltipShorthand","menuButtonTooltipShorthand","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,OAAO,QAAQ,0BAA0B;AAElD,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,EAAEC,UAAU,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,wBAAwB;AAC3E,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,mBAAmB,EACnBC,mBAAmB,EACnBC,iBAAiB,EACjBC,QAAQ,EACT,GAAGT;IAEJ,MAAM,EAAEU,UAAU,QAAQ,EAAE,GAAGpB;IAE/B,MAAM,EAAEqB,OAAOC,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,WAAWD,oBAAoBE,MAAM,GAAG,IAAI,OAAO;IAEzD,MAAMC,mBAAmB3B,KAAK4B,MAAM,CAACd,SAAS;QAC5Ce,cAAc;YACZR;QACF;QACAS,aAAaL,WAAWhB,aAAaD;IACvC;IAEA,MAAMuB,wBAAwB/B,KAAKgC,QAAQ,CAACjB,cAAc;QACxDc,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa3B;IACf;IAEA,MAAMiC,wBAAwBpC,KAAKgC,QAAQ,CAAChB,cAAc;QACxDa,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAazB;IACf;IAEA,MAAMgC,sBAAsBrC,KAAKgC,QAAQ,CAACf,YAAY;QACpDY,cAAc;YACZI,oBAAM,oBAAC3B;YACP4B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa1B;IACf;IAEA,MAAMkC,+BAA+BtC,KAAKgC,QAAQ,CAACd,qBAAqB;QACtEW,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMuC,+BAA+BxC,KAAKgC,QAAQ,CAACb,qBAAqB;QACtEU,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMwC,6BAA6BzC,KAAKgC,QAAQ,CAACZ,mBAAmB;QAClES,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,OAAO;QACLyC,YAAY;YACVC,MAAM;YACN7B,SAASW,WAAWhB,aAAaD;YACjCO,cAAcZ;YACda,cAAcX;YACdY,YAAYb;YACZc,qBAAqBjB;YACrBkB,qBAAqBlB;YACrBmB,mBAAmBnB;QACrB;QACA0C,MAAM3C,KAAK4B,MAAM,CACf7B,yBAAyB,OAAO;YAC9Bc;YACA,GAAGD,KAAK;YACR,oDAAoD;YACpD,kDAAkD;YAClDS,UAAU;QACZ,IACA;YAAES,aAAa;QAAM;QAEvBhB,SAASa;QACTZ,cAAcgB;QACdf,cAAcoB;QACdnB,YAAYoB;QACZnB,qBAAqBoB;QACrBnB,qBAAqBqB;QACrBpB,mBAAmBqB;QACnBnB;QACAG;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport type { SplitNavItemProps, SplitNavItemState } from './SplitNavItem.types';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Button, MenuButton, ToggleButton } from '@fluentui/react-button';\nimport { MoreHorizontalFilled, Pin20Regular } from '@fluentui/react-icons';\nimport { NavItem } from '../NavItem/index';\nimport { NavSubItem } from '../NavSubItem/NavSubItem';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render SplitNavItem.\n *\n * The returned state can be modified with hooks such as useSplitNavItemStyles_unstable,\n * before being passed to renderSplitNavItem_unstable.\n *\n * @param props - props from this instance of SplitNavItem\n * @param ref - reference to root HTMLDivElement of SplitNavItem\n */\nexport const useSplitNavItem_unstable = (\n  props: SplitNavItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): SplitNavItemState => {\n  const {\n    navItem,\n    actionButton,\n    toggleButton,\n    menuButton,\n    actionButtonTooltip,\n    toggleButtonTooltip,\n    menuButtonTooltip,\n    children,\n  } = props;\n\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const { value: potentialParenValue } = useNavCategoryContext_unstable();\n\n  const isSubNav = potentialParenValue.length > 0 ? true : false;\n\n  const navItemShorthand = slot.always(navItem, {\n    defaultProps: {\n      children,\n    },\n    elementType: isSubNav ? NavSubItem : NavItem,\n  });\n\n  const actionButtonShorthand = slot.optional(actionButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: Button,\n  });\n\n  const toggleButtonShorthand = slot.optional(toggleButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: ToggleButton,\n  });\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      icon: <MoreHorizontalFilled />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: MenuButton,\n  });\n\n  const actionButtonTooltipShorthand = slot.optional(actionButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const toggleButtonTooltipShorthand = slot.optional(toggleButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const menuButtonTooltipShorthand = slot.optional(menuButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  return {\n    components: {\n      root: 'div',\n      navItem: isSubNav ? NavSubItem : NavItem,\n      actionButton: Button,\n      toggleButton: ToggleButton,\n      menuButton: MenuButton,\n      actionButtonTooltip: Tooltip,\n      toggleButtonTooltip: Tooltip,\n      menuButtonTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        // because we're passing in children to the NavItem,\n        // We can be explicit about the children prop here\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n    navItem: navItemShorthand,\n    actionButton: actionButtonShorthand,\n    toggleButton: toggleButtonShorthand,\n    menuButton: menuButtonShorthand,\n    actionButtonTooltip: actionButtonTooltipShorthand,\n    toggleButtonTooltip: toggleButtonTooltipShorthand,\n    menuButtonTooltip: menuButtonTooltipShorthand,\n    density,\n    isSubNav,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","Tooltip","useNavContext_unstable","Button","MenuButton","ToggleButton","MoreHorizontalFilled","Pin20Regular","NavItem","NavSubItem","useNavCategoryContext_unstable","useSplitNavItem_unstable","props","ref","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","children","density","value","potentialParenValue","isSubNav","length","navItemShorthand","always","defaultProps","elementType","actionButtonShorthand","optional","icon","size","appearance","toggleButtonShorthand","menuButtonShorthand","actionButtonTooltipShorthand","relationship","toggleButtonTooltipShorthand","menuButtonTooltipShorthand","components","root"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,OAAO,QAAQ,0BAA0B;AAElD,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,EAAEC,UAAU,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,wBAAwB;AAC3E,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,mBAAmB,EACnBC,mBAAmB,EACnBC,iBAAiB,EACjBC,QAAQ,EACT,GAAGT;IAEJ,MAAM,EAAEU,UAAU,QAAQ,EAAE,GAAGpB;IAE/B,MAAM,EAAEqB,OAAOC,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,WAAWD,oBAAoBE,MAAM,GAAG,IAAI,OAAO;IAEzD,MAAMC,mBAAmB3B,KAAK4B,MAAM,CAACd,SAAS;QAC5Ce,cAAc;YACZR;QACF;QACAS,aAAaL,WAAWhB,aAAaD;IACvC;IAEA,MAAMuB,wBAAwB/B,KAAKgC,QAAQ,CAACjB,cAAc;QACxDc,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa3B;IACf;IAEA,MAAMiC,wBAAwBpC,KAAKgC,QAAQ,CAAChB,cAAc;QACxDa,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAazB;IACf;IAEA,MAAMgC,sBAAsBrC,KAAKgC,QAAQ,CAACf,YAAY;QACpDY,cAAc;YACZI,oBAAM,oBAAC3B;YACP4B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa1B;IACf;IAEA,MAAMkC,+BAA+BtC,KAAKgC,QAAQ,CAACd,qBAAqB;QACtEW,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMuC,+BAA+BxC,KAAKgC,QAAQ,CAACb,qBAAqB;QACtEU,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMwC,6BAA6BzC,KAAKgC,QAAQ,CAACZ,mBAAmB;QAClES,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,OAAO;QACLyC,YAAY;YACVC,MAAM;YACN7B,SAASW,WAAWhB,aAAaD;YACjCO,cAAcZ;YACda,cAAcX;YACdY,YAAYb;YACZc,qBAAqBjB;YACrBkB,qBAAqBlB;YACrBmB,mBAAmBnB;QACrB;QACA0C,MAAM3C,KAAK4B,MAAM,CACf7B,yBAAyB,OAAO;YAC9Bc;YACA,GAAGD,KAAK;YACR,oDAAoD;YACpD,kDAAkD;YAClDS,UAAU;QACZ,IACA;YAAES,aAAa;QAAM;QAEvBhB,SAASa;QACTZ,cAAcgB;QACdf,cAAcoB;QACdnB,YAAYoB;QACZnB,qBAAqBoB;QACrBnB,qBAAqBqB;QACrBpB,mBAAmBqB;QACnBnB;QACAG;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { motionTokens } from '@fluentui/react-motion';

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { motionTokens } from '@fluentui/react-motion';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n  root: 'fui-SplitNavItem',\n  navItem: 'fui-SplitNavItem__navItem',\n  actionButton: 'fui-SplitNavItem__actionButton',\n  toggleButton: 'fui-SplitNavItem__toggleButton',\n  menuButton: 'fui-SplitNavItem__menuButton',\n  /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */\n  actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n  toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n  menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n  baseRoot: {\n    display: 'flex',\n    gap: 'unset',\n    alignItems: 'stretch',\n    padding: 'unset',\n    textAlign: 'unset',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...navItemTokens.transitionTokens,\n\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n      ...buttonHoverStyles,\n    },\n\n    ':focus-within': buttonHoverStyles,\n\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n  baseNavItem: {\n    // styles that we want to disagree with the default on\n    display: 'flex',\n    textTransform: 'none',\n    alignSelf: 'stretch',\n    textAlign: 'left',\n    position: 'relative',\n    justifyContent: 'start',\n    gap: tokens.spacingVerticalL,\n    backgroundColor: 'transparent',\n  },\n  baseSecondary: {\n    minWidth: '28px',\n    paddingInlineEnd: '12px',\n    paddingInlineStart: '5px',\n    paddingBlockStart: '5px',\n    alignItems: 'start',\n  },\n  baseMedium: {\n    paddingBlockStart: '9px',\n  },\n\n  baseLarge: {\n    paddingBlockStart: '12px',\n  },\n\n  hoverAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n    willChange: 'opacity',\n  },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n  'use no memo';\n\n  const splitNavItemStyles = useSplitNaveItemStyles();\n  const sharedRootClassNames = useRootDefaultClassName();\n\n  state.root.className = mergeClasses(\n    splitNavItemClassNames.root,\n    sharedRootClassNames,\n    splitNavItemStyles.baseRoot,\n    state.root.className,\n  );\n\n  if (state.navItem) {\n    state.navItem.className = mergeClasses(\n      splitNavItemClassNames.navItem,\n      splitNavItemStyles.baseNavItem,\n      state.navItem.className,\n    );\n  }\n\n  if (state.actionButton) {\n    state.actionButton.className = mergeClasses(\n      splitNavItemClassNames.actionButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.actionButton.className,\n    );\n  }\n\n  if (state.toggleButton) {\n    state.toggleButton.className = mergeClasses(\n      splitNavItemClassNames.toggleButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.toggleButton.className,\n    );\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitNavItemClassNames.menuButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.menuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n  root: 'fui-SplitNavItem',\n  navItem: 'fui-SplitNavItem__navItem',\n  actionButton: 'fui-SplitNavItem__actionButton',\n  toggleButton: 'fui-SplitNavItem__toggleButton',\n  menuButton: 'fui-SplitNavItem__menuButton',\n  /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */\n  actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n  toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n  menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n  baseRoot: {\n    display: 'flex',\n    gap: 'unset',\n    alignItems: 'stretch',\n    padding: 'unset',\n    textAlign: 'unset',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...navItemTokens.transitionTokens,\n\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n      ...buttonHoverStyles,\n    },\n\n    ':focus-within': buttonHoverStyles,\n\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n  baseNavItem: {\n    // styles that we want to disagree with the default on\n    display: 'flex',\n    textTransform: 'none',\n    alignSelf: 'stretch',\n    textAlign: 'left',\n    position: 'relative',\n    justifyContent: 'start',\n    gap: tokens.spacingVerticalL,\n    backgroundColor: 'transparent',\n  },\n  baseSecondary: {\n    minWidth: '28px',\n    paddingInlineEnd: '12px',\n    paddingInlineStart: '5px',\n    paddingBlockStart: '5px',\n    alignItems: 'start',\n  },\n  baseMedium: {\n    paddingBlockStart: '9px',\n  },\n\n  baseLarge: {\n    paddingBlockStart: '12px',\n  },\n\n  hoverAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n    willChange: 'opacity',\n  },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n  'use no memo';\n\n  const splitNavItemStyles = useSplitNaveItemStyles();\n  const sharedRootClassNames = useRootDefaultClassName();\n\n  state.root.className = mergeClasses(\n    splitNavItemClassNames.root,\n    sharedRootClassNames,\n    splitNavItemStyles.baseRoot,\n    state.root.className,\n  );\n\n  if (state.navItem) {\n    state.navItem.className = mergeClasses(\n      splitNavItemClassNames.navItem,\n      splitNavItemStyles.baseNavItem,\n      state.navItem.className,\n    );\n  }\n\n  if (state.actionButton) {\n    state.actionButton.className = mergeClasses(\n      splitNavItemClassNames.actionButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.actionButton.className,\n    );\n  }\n\n  if (state.toggleButton) {\n    state.toggleButton.className = mergeClasses(\n      splitNavItemClassNames.toggleButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.toggleButton.className,\n    );\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitNavItemClassNames.menuButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.menuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}

package/lib/components/useNavCategoryContextValues_unstable.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useNavCategoryContextValues_unstable(state) {
     const { open, value } = state;

package/lib/components/useNavCategoryContextValues_unstable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/useNavCategoryContextValues_unstable.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavCategoryState } from '../NavCategory';\nimport { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';\n\nexport function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {\n  const { open, value } = state;\n  const navCategory = React.useMemo<NavCategoryContextValue>(() => ({ open, value }), [open, value]);\n\n  return { categoryValue: navCategory };\n}\n"],"names":["React","useNavCategoryContextValues_unstable","state","open","value","navCategory","useMemo","categoryValue"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,cAAcL,MAAMM,OAAO,CAA0B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEjG,OAAO;QAAEG,eAAeF;IAAY;AACtC"}
+{"version":3,"sources":["../src/components/useNavCategoryContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavCategoryState } from '../NavCategory';\nimport { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';\n\nexport function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {\n  const { open, value } = state;\n  const navCategory = React.useMemo<NavCategoryContextValue>(() => ({ open, value }), [open, value]);\n\n  return { categoryValue: navCategory };\n}\n"],"names":["React","useNavCategoryContextValues_unstable","state","open","value","navCategory","useMemo","categoryValue"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,cAAcL,MAAMM,OAAO,CAA0B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEjG,OAAO;QAAEG,eAAeF;IAAY;AACtC"}

package/lib/components/useNavCategoryItemContextValues_unstable.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useNavCategoryItemContextValues_unstable(state) {
     const { open, value } = state;

package/lib/components/useNavCategoryItemContextValues_unstable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/useNavCategoryItemContextValues_unstable.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavCategoryItemContextValue } from './NavCategoryItemContext';\nimport { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';\n\nexport function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues {\n  const { open, value } = state;\n  const navCategoryItem = React.useMemo<NavCategoryItemContextValue>(() => ({ open, value }), [open, value]);\n\n  return { navCategoryItem };\n}\n"],"names":["React","useNavCategoryItemContextValues_unstable","state","open","value","navCategoryItem","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,kBAAkBL,MAAMM,OAAO,CAA8B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEzG,OAAO;QAAEC;IAAgB;AAC3B"}
+{"version":3,"sources":["../src/components/useNavCategoryItemContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavCategoryItemContextValue } from './NavCategoryItemContext';\nimport { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';\n\nexport function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues {\n  const { open, value } = state;\n  const navCategoryItem = React.useMemo<NavCategoryItemContextValue>(() => ({ open, value }), [open, value]);\n\n  return { navCategoryItem };\n}\n"],"names":["React","useNavCategoryItemContextValues_unstable","state","open","value","navCategoryItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,kBAAkBL,MAAMM,OAAO,CAA8B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEzG,OAAO;QAAEC;IAAgB;AAC3B"}