@fluentui/react-nav 9.3.6 → 9.3.8

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    open: {\n        transform: 'rotate(90deg)'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGzB,QAAA;EAAAc,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpC,MAAMwB,oBAAoB,GAAGzB,uBAAuB,CAAC,CAAC;EACtD,MAAM0B,aAAa,GAAG7B,gBAAgB,CAAC,CAAC;EACxC,MAAM8B,eAAe,GAAG5B,kBAAkB,CAAC,CAAC;EAC5C,MAAM6B,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAACnB,IAAI,CAAC4B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEsB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACrB,IAAI,EAAEU,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACnB,IAAI,CAAC4B,SAAS,CAAC;EACnRT,KAAK,CAACjB,UAAU,CAAC0B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEwB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAACjB,UAAU,CAAC0B,SAAS,CAAC;EACvK,IAAIT,KAAK,CAAClB,IAAI,EAAE;IACZkB,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEwB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    open: {\n        transform: 'rotate(90deg)'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGzB,QAAA;EAAAc,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpC,MAAMwB,oBAAoB,GAAGzB,uBAAuB,CAAC,CAAC;EACtD,MAAM0B,aAAa,GAAG7B,gBAAgB,CAAC,CAAC;EACxC,MAAM8B,eAAe,GAAG5B,kBAAkB,CAAC,CAAC;EAC5C,MAAM6B,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAACnB,IAAI,CAAC4B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEsB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACrB,IAAI,EAAEU,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACnB,IAAI,CAAC4B,SAAS,CAAC;EACnRT,KAAK,CAACjB,UAAU,CAAC0B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEwB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAACjB,UAAU,CAAC0B,SAAS,CAAC;EACvK,IAAIT,KAAK,CAAClB,IAAI,EAAE;IACZkB,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEwB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  open: {\n    transform: 'rotate(90deg)',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.open && expandIconStyles.open,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","open","transform","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,sBAAsBb,WAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,MAAM;QACJC,WAAW;IACb;IACAC,UAAUjB,iBAAiBkB,WAAW;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,gBAAgBrB,WAAW;IACtCc,MAAM;QACJQ,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,cAAcnB;IACpB,MAAMoB,uBAAuBrB;IAC7B,MAAMsB,gBAAgBzB;IACtB,MAAM0B,kBAAkBxB;IACxB,MAAMyB,aAAa1B;IACnB,MAAM2B,mBAAmBlB;IAEzB,MAAM,EAAEM,QAAQ,EAAEF,IAAI,EAAEe,OAAO,EAAE,GAAGR;IAEpCA,MAAMf,IAAI,CAACwB,SAAS,GAAGhC,aACrBO,0BAA0BC,IAAI,EAC9BkB,sBACAF,WAAWX,IAAI,EACfkB,YAAY,WAAWN,YAAYjB,IAAI,EACvCU,YAAYF,SAAS,SAASY,gBAAgBf,IAAI,EAClDK,YAAYF,SAAS,SAASW,cAAcT,QAAQ,EACpDK,MAAMf,IAAI,CAACwB,SAAS;IAGtBT,MAAMb,UAAU,CAACsB,SAAS,GAAGhC,aAC3BO,0BAA0BG,UAAU,EACpCoB,iBAAiBjB,IAAI,EACrBU,MAAMP,IAAI,IAAIc,iBAAiBd,IAAI,EACnCO,MAAMb,UAAU,CAACsB,SAAS;IAG5B,IAAIT,MAAMd,IAAI,EAAE;QACdc,MAAMd,IAAI,CAACuB,SAAS,GAAGhC,aACrBO,0BAA0BE,IAAI,EAC9BoB,WAAWhB,IAAI,EACfK,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMd,IAAI,CAACuB,SAAS;IAExB;IAEA,OAAOT;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  open: {\n    transform: 'rotate(90deg)',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.open && expandIconStyles.open,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","open","transform","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,sBAAsBb,WAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,MAAM;QACJC,WAAW;IACb;IACAC,UAAUjB,iBAAiBkB,WAAW;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,gBAAgBrB,WAAW;IACtCc,MAAM;QACJQ,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,cAAcnB;IACpB,MAAMoB,uBAAuBrB;IAC7B,MAAMsB,gBAAgBzB;IACtB,MAAM0B,kBAAkBxB;IACxB,MAAMyB,aAAa1B;IACnB,MAAM2B,mBAAmBlB;IAEzB,MAAM,EAAEM,QAAQ,EAAEF,IAAI,EAAEe,OAAO,EAAE,GAAGR;IAEpCA,MAAMf,IAAI,CAACwB,SAAS,GAAGhC,aACrBO,0BAA0BC,IAAI,EAC9BkB,sBACAF,WAAWX,IAAI,EACfkB,YAAY,WAAWN,YAAYjB,IAAI,EACvCU,YAAYF,SAAS,SAASY,gBAAgBf,IAAI,EAClDK,YAAYF,SAAS,SAASW,cAAcT,QAAQ,EACpDK,MAAMf,IAAI,CAACwB,SAAS;IAGtBT,MAAMb,UAAU,CAACsB,SAAS,GAAGhC,aAC3BO,0BAA0BG,UAAU,EACpCoB,iBAAiBjB,IAAI,EACrBU,MAAMP,IAAI,IAAIc,iBAAiBd,IAAI,EACnCO,MAAMb,UAAU,CAACsB,SAAS;IAG5B,IAAIT,MAAMd,IAAI,EAAE;QACdc,MAAMd,IAAI,CAACuB,SAAS,GAAGhC,aACrBO,0BAA0BE,IAAI,EAC9BoB,WAAWhB,IAAI,EACfK,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMd,IAAI,CAACuB,SAAS;IAExB;IAEA,OAAOT;AACT,EAAE"}

package/lib/components/NavCategoryItemContext.js

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

package/lib/components/NavCategoryItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionHeaderContext\n\nexport type NavCategoryItemContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavCategoryItemContext = React.createContext<NavCategoryItemContextValue | undefined>(\n  undefined,\n) as React.Context<NavCategoryItemContextValue>;\n\nconst NavCategoryItemContextDefaultValues = {\n  open: false,\n};\n\nexport const { Provider: NavCategoryItemProvider } = NavCategoryItemContext;\n\nexport const useNavCategoryItemContext_unstable = (): NavCategoryItemContextValue =>\n  React.useContext(NavCategoryItemContext) ?? NavCategoryItemContextDefaultValues;\n"],"names":["React","NavCategoryItemContext","createContext","undefined","NavCategoryItemContextDefaultValues","open","Provider","NavCategoryItemProvider","useNavCategoryItemContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,yBAAyBD,MAAME,aAAa,CAChDC;AAGF,MAAMC,sCAAsC;IAC1CC,MAAM;AACR;AAEA,OAAO,MAAM,EAAEC,UAAUC,uBAAuB,EAAE,GAAGN,uBAAuB;AAE5E,OAAO,MAAMO,qCAAqC;QAChDR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,qCAAjBD,+BAAAA,oBAA4CI;EAAoC"}
+{"version":3,"sources":["../src/components/NavCategoryItemContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionHeaderContext\n\nexport type NavCategoryItemContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavCategoryItemContext = React.createContext<NavCategoryItemContextValue | undefined>(\n  undefined,\n) as React.Context<NavCategoryItemContextValue>;\n\nconst NavCategoryItemContextDefaultValues = {\n  open: false,\n};\n\nexport const { Provider: NavCategoryItemProvider } = NavCategoryItemContext;\n\nexport const useNavCategoryItemContext_unstable = (): NavCategoryItemContextValue =>\n  React.useContext(NavCategoryItemContext) ?? NavCategoryItemContextDefaultValues;\n"],"names":["React","NavCategoryItemContext","createContext","undefined","NavCategoryItemContextDefaultValues","open","Provider","NavCategoryItemProvider","useNavCategoryItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,yBAAyBD,MAAME,aAAa,CAChDC;AAGF,MAAMC,sCAAsC;IAC1CC,MAAM;AACR;AAEA,OAAO,MAAM,EAAEC,UAAUC,uBAAuB,EAAE,GAAGN,uBAAuB;AAE5E,OAAO,MAAMO,qCAAqC;QAChDR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,qCAAjBD,+BAAAA,oBAA4CI;EAAoC"}

package/lib/components/NavContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const navContextDefaultValue = {
     selectedValue: undefined,
@@ -23,7 +24,10 @@ const navContextDefaultValue = {
    */ multiple: true,
     /**
    * Indicates the vertical density and density of the Nav.
-   */ density: 'medium'
+   */ density: 'medium',
+    /**
+   * By default, the Nav is a single tab stop with only arrow key navigation
+   */ tabbable: false
 };
 const NavContext = React.createContext(undefined);
 export const NavProvider = NavContext.Provider;

package/lib/components/NavContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n  selectedValue: undefined,\n  selectedCategoryValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredNavItems: () => {\n    return {\n      registeredNavItems: {},\n    };\n  },\n  onRequestNavCategoryItemToggle() {\n    /* noop */\n  },\n  /**\n   * The list of opened panels by index\n   */\n  openCategories: [],\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   */\n  multiple: true,\n\n  /**\n   * Indicates the vertical density and density of the Nav.\n   */\n  density: 'medium',\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;AACX;AAEA,MAAMC,aAAad,MAAMe,aAAa,CAA8BZ;AAEpE,OAAO,MAAMa,cAAcF,WAAWG,QAAQ,CAAC;AAE/C,OAAO,MAAMC,yBAAyB,IAAuBlB,MAAMmB,UAAU,CAACL,eAAeb,uBAAuB"}
+{"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n  selectedValue: undefined,\n  selectedCategoryValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredNavItems: () => {\n    return {\n      registeredNavItems: {},\n    };\n  },\n  onRequestNavCategoryItemToggle() {\n    /* noop */\n  },\n  /**\n   * The list of opened panels by index\n   */\n  openCategories: [],\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   */\n  multiple: true,\n\n  /**\n   * Indicates the vertical density and density of the Nav.\n   */\n  density: 'medium',\n\n  /**\n   * By default, the Nav is a single tab stop with only arrow key navigation\n   */\n  tabbable: false,\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","tabbable","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;IAET;;GAEC,GACDC,UAAU;AACZ;AAEA,MAAMC,aAAaf,MAAMgB,aAAa,CAA8Bb;AAEpE,OAAO,MAAMc,cAAcF,WAAWG,QAAQ,CAAC;AAE/C,OAAO,MAAMC,yBAAyB,IAAuBnB,MAAMoB,UAAU,CAACL,eAAed,uBAAuB"}

package/lib/components/NavContext.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n  NavProps,\n  'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n  /** A callback to allow a navItem to register itself with the navItem list. */\n  onRegister: RegisterNavItemEventHandler;\n\n  /** A callback to allow a navItem to unregister itself with the navItem list. */\n  onUnregister: RegisterNavItemEventHandler;\n  /**\n   * A callback to allow a navItem to select itself when pressed.\n   */\n  onSelect: EventHandler<OnNavItemSelectData>;\n  /**\n   * Gets the registered navItem data along with current and previous selected values.\n   */\n  getRegisteredNavItems: () => {\n    selectedValue?: NavItemValue;\n    selectedCategoryValue?: NavItemValue;\n    previousSelectedValue?: NavItemValue;\n    registeredNavItems: Record<string, NavItemRegisterData>;\n  };\n  /**\n   * Callback used by NavCategoryItem to request a change on it's own opened state\n   * Should be used to toggle NavCategoryItem's open state\n   */\n  onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The list of opened panels by index\n   */\n  openCategories: NavItemValue[];\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   * @default true, indicating that multiple categories can be open at the same time.\n   */\n  multiple: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n  /**\n   * The context of the navItem list available to each navItem.\n   */\n  nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n  /**\n   * The value of the navItem.\n   */\n  value: NavItemValue;\n\n  /**\n   * The reference to the navItem HTML element.\n   */\n  ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n  NavProps,\n  'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n  /** A callback to allow a navItem to register itself with the navItem list. */\n  onRegister: RegisterNavItemEventHandler;\n\n  /** A callback to allow a navItem to unregister itself with the navItem list. */\n  onUnregister: RegisterNavItemEventHandler;\n  /**\n   * A callback to allow a navItem to select itself when pressed.\n   */\n  onSelect: EventHandler<OnNavItemSelectData>;\n  /**\n   * Gets the registered navItem data along with current and previous selected values.\n   */\n  getRegisteredNavItems: () => {\n    selectedValue?: NavItemValue;\n    selectedCategoryValue?: NavItemValue;\n    previousSelectedValue?: NavItemValue;\n    registeredNavItems: Record<string, NavItemRegisterData>;\n  };\n  /**\n   * Callback used by NavCategoryItem to request a change on it's own opened state\n   * Should be used to toggle NavCategoryItem's open state\n   */\n  onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The list of opened panels by index\n   */\n  openCategories: NavItemValue[];\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   * @default true, indicating that multiple categories can be open at the same time.\n   */\n  multiple: boolean;\n\n  /**\n   * Setting this to true enables tab AND arrow navigation.\n   * @default false\n   */\n  tabbable: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n  /**\n   * The context of the navItem list available to each navItem.\n   */\n  nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n  /**\n   * The value of the navItem.\n   */\n  value: NavItemValue;\n\n  /**\n   * The reference to the navItem HTML element.\n   */\n  ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/NavDivider/NavDivider.js

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

package/lib/components/NavDivider/NavDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDivider/NavDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDivider_unstable } from './useNavDivider';\nimport { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\nimport type { NavDividerProps } from './NavDivider.types';\n\n/**\n * NavDivider component - a divider used within navigation components to separate items.\n */\nexport const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDivider_unstable(props, ref);\n\n  useNavDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nNavDivider.displayName = 'NavDivider';\n"],"names":["React","renderDivider_unstable","useCustomStyleHook_unstable","useNavDivider_unstable","useNavDividerStyles_unstable","NavDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AAEjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BP,4BAA4B,gCAAgCO;IAE5D,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDivider/NavDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDivider_unstable } from './useNavDivider';\nimport { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\nimport type { NavDividerProps } from './NavDivider.types';\n\n/**\n * NavDivider component - a divider used within navigation components to separate items.\n */\nexport const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDivider_unstable(props, ref);\n\n  useNavDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nNavDivider.displayName = 'NavDivider';\n"],"names":["React","renderDivider_unstable","useCustomStyleHook_unstable","useNavDivider_unstable","useNavDividerStyles_unstable","NavDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AAEjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BP,4BAA4B,gCAAgCO;IAE5D,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/NavDivider/useNavDivider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDivider_unstable } from '@fluentui/react-divider';
 /**

package/lib/components/NavDivider/useNavDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDivider/useNavDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport type { NavDividerProps, NavDividerState } from './NavDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\n\n/**\n * Create the state required to render NavDivider.\n *\n * The returned state can be modified with hooks such as useNavDividerStyles_unstable,\n * before being passed to renderNavDivider_unstable.\n *\n * @param props - props from this instance of NavDivider\n * @param ref - reference to root HTMLDivElement of NavDivider\n */\nexport const useNavDivider_unstable = (props: NavDividerProps, ref: React.Ref<HTMLElement>): NavDividerState => {\n  return useDivider_unstable({ appearance: 'strong', ...props }, ref);\n};\n"],"names":["React","useDivider_unstable","useNavDivider_unstable","props","ref","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAOH,oBAAoB;QAAEI,YAAY;QAAU,GAAGF,KAAK;IAAC,GAAGC;AACjE,EAAE"}
+{"version":3,"sources":["../src/components/NavDivider/useNavDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavDividerProps, NavDividerState } from './NavDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\n\n/**\n * Create the state required to render NavDivider.\n *\n * The returned state can be modified with hooks such as useNavDividerStyles_unstable,\n * before being passed to renderNavDivider_unstable.\n *\n * @param props - props from this instance of NavDivider\n * @param ref - reference to root HTMLDivElement of NavDivider\n */\nexport const useNavDivider_unstable = (props: NavDividerProps, ref: React.Ref<HTMLElement>): NavDividerState => {\n  return useDivider_unstable({ appearance: 'strong', ...props }, ref);\n};\n"],"names":["React","useDivider_unstable","useNavDivider_unstable","props","ref","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAOH,oBAAoB;QAAEI,YAAY;QAAU,GAAGF,KAAK;IAAC,GAAGC;AACjE,EAAE"}

package/lib/components/NavDivider/useNavDividerStyles.styles.js

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

package/lib/components/NavDivider/useNavDividerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","Bh6795r","B6of3ja","jrapky","d","useNavDividerStyles_unstable","state","styles","className"],"sources":["useNavDividerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nexport const navDividerClassNames = {\n    root: 'fui-NavDivider',\n    wrapper: 'fui-NavDivider__wrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        flexGrow: 0,\n        marginTop: '4px',\n        marginBottom: '4px'\n    }\n});\n/**\n * Apply styling to the NavDivider slots based on the state\n */ export const useNavDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n    useDividerStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACjGF,KAAK,CAACP,OAAO,CAACS,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACE,OAAO,EAAEO,KAAK,CAACP,OAAO,CAACS,SAAS,CAAC;EAC7FZ,yBAAyB,CAACU,KAAK,CAAC;EAChC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","Bh6795r","B6of3ja","jrapky","d","useNavDividerStyles_unstable","state","styles","className"],"sources":["useNavDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nexport const navDividerClassNames = {\n    root: 'fui-NavDivider',\n    wrapper: 'fui-NavDivider__wrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        flexGrow: 0,\n        marginTop: '4px',\n        marginBottom: '4px'\n    }\n});\n/**\n * Apply styling to the NavDivider slots based on the state\n */ export const useNavDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n    useDividerStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACjGF,KAAK,CAACP,OAAO,CAACS,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACE,OAAO,EAAEO,KAAK,CAACP,OAAO,CAACS,SAAS,CAAC;EAC7FZ,yBAAyB,CAACU,KAAK,CAAC;EAChC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavDivider/useNavDividerStyles.styles.raw.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDividerState } from './NavDivider.types';\n\nexport const navDividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-NavDivider',\n  wrapper: 'fui-NavDivider__wrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 0,\n    marginTop: '4px',\n    marginBottom: '4px',\n  },\n});\n\n/**\n * Apply styling to the NavDivider slots based on the state\n */\nexport const useNavDividerStyles_unstable = (state: NavDividerState): NavDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n\n  useDividerStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","flexGrow","marginTop","marginBottom","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAA2B,0BAA0B;AAIvF,OAAO,MAAMC,uBAAqD;IAChEC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,GAAGZ,aAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;IAE5FX,0BAA0BS;IAC1B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDividerState } from './NavDivider.types';\n\nexport const navDividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-NavDivider',\n  wrapper: 'fui-NavDivider__wrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 0,\n    marginTop: '4px',\n    marginBottom: '4px',\n  },\n});\n\n/**\n * Apply styling to the NavDivider slots based on the state\n */\nexport const useNavDividerStyles_unstable = (state: NavDividerState): NavDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n\n  useDividerStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","flexGrow","marginTop","marginBottom","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAA2B,0BAA0B;AAIvF,OAAO,MAAMC,uBAAqD;IAChEC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,GAAGZ,aAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;IAE5FX,0BAA0BS;IAC1B,OAAOA;AACT,EAAE"}

package/lib/components/NavDrawer/NavDrawer.js

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

package/lib/components/NavDrawer/NavDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\nimport type { NavDrawerProps } from './NavDrawer.types';\n\n/**\n * NavDrawer component - a component that provides a drawer for navigation items.\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawer_unstable(props, ref);\n  const contextValues = useNavContextValues_unstable(state as NavState);\n\n  useNavDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n\n  return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBN,6BAA6BK;IAEnDN,4BAA4BM;IAC5BT,4BAA4B,+BAA+BS;IAE3D,OAAOP,yBAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\nimport type { NavDrawerProps } from './NavDrawer.types';\n\n/**\n * NavDrawer component - a component that provides a drawer for navigation items.\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawer_unstable(props, ref);\n  const contextValues = useNavContextValues_unstable(state as NavState);\n\n  useNavDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n\n  return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBN,6BAA6BK;IAEnDN,4BAA4BM;IAC5BT,4BAA4B,+BAA+BS;IAE3D,OAAOP,yBAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

package/lib/components/NavDrawer/useNavDrawer.js

@@ -1,6 +1,6 @@
+'use client';
 import * as React from 'react';
 import { Drawer } from '@fluentui/react-drawer';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { slot } from '@fluentui/react-utilities';
 import { useNav_unstable } from '../Nav/useNav';
 /**
@@ -12,18 +12,12 @@ import { useNav_unstable } from '../Nav/useNav';
  * @param props - props from this instance of NavDrawer
  * @param ref - reference to root HTMLDivElement of NavDrawer
  */ export const useNavDrawer_unstable = (props, ref)=>{
-    const { tabbable = false, size = undefined } = props;
-    const focusAttributes = useArrowNavigationGroup({
-        axis: 'vertical',
-        circular: true,
-        tabbable
-    });
-    const navState = useNav_unstable({
-        ...props
-    }, ref);
+    const { size = undefined, tabbable = false } = props;
+    const navState = useNav_unstable(props, ref);
     return {
         ...navState,
         size,
+        tabbable,
         components: {
             // TODO: remove once React v18 slot API is modified
             // this is a problem with the lack of support for union types on React v18
@@ -34,8 +28,7 @@ import { useNav_unstable } from '../Nav/useNav';
         root: slot.always({
             ref,
             role: 'navigation',
-            ...props,
-            ...focusAttributes
+            ...props
         }, {
             // TODO: remove once React v18 slot API is modified
             // this is a problem with the lack of support for union types on React v18

package/lib/components/NavDrawer/useNavDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n  const { tabbable = false, size = undefined } = props;\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    circular: true,\n    tabbable,\n  });\n\n  const navState = useNav_unstable(\n    {\n      ...props,\n    },\n    ref,\n  );\n\n  return {\n    ...navState,\n    size,\n    components: {\n      // TODO: remove once React v18 slot API is modified\n      // this is a problem with the lack of support for union types on React v18\n      // ComponentState is using React.ComponentType which will try to infer propType\n      // propTypes WeakValidator signature will break distributive unions making this type invalid\n      root: Drawer as React.FC<DrawerProps>,\n    },\n\n    root: slot.always(\n      { ref, role: 'navigation', ...props, ...focusAttributes },\n      {\n        // TODO: remove once React v18 slot API is modified\n        // this is a problem with the lack of support for union types on React v18\n        // ComponentState is using React.ComponentType which will try to infer propType\n        // propTypes WeakValidator signature will break distributive unions making this type invalid\n        elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n      },\n    ),\n  };\n};\n"],"names":["React","Drawer","useArrowNavigationGroup","slot","useNav_unstable","useNavDrawer_unstable","props","ref","tabbable","size","undefined","focusAttributes","axis","circular","navState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAqB,yBAAyB;AAC7D,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAAwBC,IAAI,QAAQ,4BAA4B;AAEhE,SAASC,eAAe,QAAQ,gBAAgB;AAGhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,WAAW,KAAK,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAE/C,MAAMK,kBAAkBT,wBAAwB;QAC9CU,MAAM;QACNC,UAAU;QACVL;IACF;IAEA,MAAMM,WAAWV,gBACf;QACE,GAAGE,KAAK;IACV,GACAC;IAGF,OAAO;QACL,GAAGO,QAAQ;QACXL;QACAM,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMf;QACR;QAEAe,MAAMb,KAAKc,MAAM,CACf;YAAEV;YAAKW,MAAM;YAAc,GAAGZ,KAAK;YAAE,GAAGK,eAAe;QAAC,GACxD;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FQ,aAAalB;QACf;IAEJ;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n  const { size = undefined, tabbable = false } = props;\n\n  const navState = useNav_unstable(props, ref);\n\n  return {\n    ...navState,\n    size,\n    tabbable,\n    components: {\n      // TODO: remove once React v18 slot API is modified\n      // this is a problem with the lack of support for union types on React v18\n      // ComponentState is using React.ComponentType which will try to infer propType\n      // propTypes WeakValidator signature will break distributive unions making this type invalid\n      root: Drawer as React.FC<DrawerProps>,\n    },\n\n    root: slot.always(\n      { ref, role: 'navigation', ...props },\n      {\n        // TODO: remove once React v18 slot API is modified\n        // this is a problem with the lack of support for union types on React v18\n        // ComponentState is using React.ComponentType which will try to infer propType\n        // propTypes WeakValidator signature will break distributive unions making this type invalid\n        elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n      },\n    ),\n  };\n};\n"],"names":["React","Drawer","slot","useNav_unstable","useNavDrawer_unstable","props","ref","size","undefined","tabbable","navState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAqB,yBAAyB;AAC7D,SAAwBC,IAAI,QAAQ,4BAA4B;AAEhE,SAASC,eAAe,QAAQ,gBAAgB;AAGhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAOC,SAAS,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,WAAWP,gBAAgBE,OAAOC;IAExC,OAAO;QACL,GAAGI,QAAQ;QACXH;QACAE;QACAE,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMX;QACR;QAEAW,MAAMV,KAAKW,MAAM,CACf;YAAEP;YAAKQ,MAAM;YAAc,GAAGT,KAAK;QAAC,GACpC;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FU,aAAad;QACf;IAEJ;AACF,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n    root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: navItemTokens.backgroundColor,\n        alignItems: 'unset'\n    },\n    // seperate style so it can be applied conditionally\n    // if size is not set, use default width from the token.\n    defaultWidth: {\n        width: `${navItemTokens.defaultDrawerWidth}px`\n    }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAC9H,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n    root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: navItemTokens.backgroundColor,\n        alignItems: 'unset'\n    },\n    // seperate style so it can be applied conditionally\n    // if size is not set, use default width from the token.\n    defaultWidth: {\n        width: `${navItemTokens.defaultDrawerWidth}px`\n    }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAC9H,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: navItemTokens.backgroundColor,\n    alignItems: 'unset',\n  },\n  // seperate style so it can be applied conditionally\n  // if size is not set, use default width from the token.\n  defaultWidth: {\n    width: `${navItemTokens.defaultDrawerWidth}px`,\n  },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n  'use no memo';\n\n  const { size } = state;\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    navDrawerClassNames.root,\n    styles.root,\n    !size && styles.defaultWidth,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,cAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,cAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,GAAGd,aACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: navItemTokens.backgroundColor,\n    alignItems: 'unset',\n  },\n  // seperate style so it can be applied conditionally\n  // if size is not set, use default width from the token.\n  defaultWidth: {\n    width: `${navItemTokens.defaultDrawerWidth}px`,\n  },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n  'use no memo';\n\n  const { size } = state;\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    navDrawerClassNames.root,\n    styles.root,\n    !size && styles.defaultWidth,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,cAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,cAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,GAAGd,aACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/NavDrawerBody/NavDrawerBody.js

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

package/lib/components/NavDrawerBody/NavDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerBody_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nimport { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\nimport type { NavDrawerBodyProps } from './NavDrawerBody.types';\n\n/**\n * NavDrawerBody component\n */\nexport const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerBody_unstable(props, ref);\n\n  useNavDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nNavDrawerBody.displayName = 'NavDrawerBody';\n"],"names":["React","renderDrawerBody_unstable","useCustomStyleHook_unstable","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","NavDrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,0BAA0BI,OAAOC;IAE/CJ,gCAAgCK;IAChCP,4BAA4B,mCAAmCO;IAE/D,OAAOR,0BAA0BQ;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerBody_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nimport { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\nimport type { NavDrawerBodyProps } from './NavDrawerBody.types';\n\n/**\n * NavDrawerBody component\n */\nexport const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerBody_unstable(props, ref);\n\n  useNavDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nNavDrawerBody.displayName = 'NavDrawerBody';\n"],"names":["React","renderDrawerBody_unstable","useCustomStyleHook_unstable","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","NavDrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,0BAA0BI,OAAOC;IAE/CJ,gCAAgCK;IAChCP,4BAA4B,mCAAmCO;IAE/D,OAAOR,0BAA0BQ;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/NavDrawerBody/useNavDrawerBody.js

@@ -1,5 +1,8 @@
+'use client';
 import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { useDrawerBody_unstable } from '@fluentui/react-drawer';
+import { useNavContext_unstable } from '../NavContext';
 /**
  * Create the state required to render NavDrawerBody.
  *
@@ -9,5 +12,14 @@ import { useDrawerBody_unstable } from '@fluentui/react-drawer';
  * @param props - props from this instance of NavDrawerBody
  * @param ref - reference to root HTMLDivElement of NavDrawerBody
  */ export const useNavDrawerBody_unstable = (props, ref)=>{
-    return useDrawerBody_unstable(props, ref);
+    const { tabbable } = useNavContext_unstable();
+    const focusAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        circular: true,
+        tabbable
+    });
+    return useDrawerBody_unstable({
+        ...props,
+        ...focusAttributes
+    }, ref);
 };

package/lib/components/NavDrawerBody/useNavDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n  props: NavDrawerBodyProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n  return useDrawerBody_unstable(props, ref);\n};\n"],"names":["React","useDrawerBody_unstable","useNavDrawerBody_unstable","props","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAOH,uBAAuBE,OAAOC;AACvC,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport { useNavContext_unstable } from '../NavContext';\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n  props: NavDrawerBodyProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n  const { tabbable } = useNavContext_unstable();\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    circular: true,\n    tabbable,\n  });\n\n  return useDrawerBody_unstable({ ...props, ...focusAttributes }, ref);\n};\n"],"names":["React","useArrowNavigationGroup","useDrawerBody_unstable","useNavContext_unstable","useNavDrawerBody_unstable","props","ref","tabbable","focusAttributes","axis","circular"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAMK,kBAAkBP,wBAAwB;QAC9CQ,MAAM;QACNC,UAAU;QACVH;IACF;IAEA,OAAOL,uBAAuB;QAAE,GAAGG,KAAK;QAAE,GAAGG,eAAe;IAAC,GAAGF;AAClE,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bt984gj","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerBodyStyles_unstable","state","styles","className"],"sources":["useNavDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerBodyClassNames = {\n    root: 'fui-NavDrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n        alignItems: 'unset',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */ export const useNavDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerBodyStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACbhB,4BAA4B,CAACgB,KAAK,CAAC;EACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACpG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bt984gj","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerBodyStyles_unstable","state","styles","className"],"sources":["useNavDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerBodyClassNames = {\n    root: 'fui-NavDrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n        alignItems: 'unset',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */ export const useNavDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerBodyStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACbhB,4BAA4B,CAACgB,KAAK,CAAC;EACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACpG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\n\nexport const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {\n  root: 'fui-NavDrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n    alignItems: 'unset',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */\nexport const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {\n  'use no memo';\n\n  useDrawerBodyStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,OAAOM,mBAAmB,CAAC,GAAG,EAAEN,OAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,OAAOY,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAb,6BAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\n\nexport const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {\n  root: 'fui-NavDrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n    alignItems: 'unset',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */\nexport const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {\n  'use no memo';\n\n  useDrawerBodyStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,OAAOM,mBAAmB,CAAC,GAAG,EAAEN,OAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,OAAOY,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAb,6BAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}

package/lib/components/NavDrawerFooter/NavDrawerFooter.js

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

package/lib/components/NavDrawerFooter/NavDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerFooter_unstable(props, ref);\n\n  useNavDrawerFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n\n  return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["React","renderDrawerFooter_unstable","useCustomStyleHook_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AAErE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQN,4BAA4BI,OAAOC;IAEjDJ,kCAAkCK;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerFooter_unstable(props, ref);\n\n  useNavDrawerFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n\n  return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["React","renderDrawerFooter_unstable","useCustomStyleHook_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AAErE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQN,4BAA4BI,OAAOC;IAEjDJ,kCAAkCK;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavDrawerFooter/useNavDrawerFooter.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
 /**

package/lib/components/NavDrawerFooter/useNavDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';\n\n/**\n * Create the state required to render NavDrawerFooter.\n *\n * The returned state can be modified with hooks such as useNavDrawerFooterStyles_unstable,\n * before being passed to renderNavDrawerFooter_unstable.\n *\n * @param props - props from this instance of NavDrawerFooter\n * @param ref - reference to root HTMLDivElement of NavDrawerFooter\n */\nexport const useNavDrawerFooter_unstable = (\n  props: NavDrawerFooterProps,\n  ref: React.Ref<HTMLElement>,\n): NavDrawerFooterState => {\n  return useDrawerFooter_unstable(props, ref);\n};\n"],"names":["React","useDrawerFooter_unstable","useNavDrawerFooter_unstable","props","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,OAAOH,yBAAyBE,OAAOC;AACzC,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';\n\n/**\n * Create the state required to render NavDrawerFooter.\n *\n * The returned state can be modified with hooks such as useNavDrawerFooterStyles_unstable,\n * before being passed to renderNavDrawerFooter_unstable.\n *\n * @param props - props from this instance of NavDrawerFooter\n * @param ref - reference to root HTMLDivElement of NavDrawerFooter\n */\nexport const useNavDrawerFooter_unstable = (\n  props: NavDrawerFooterProps,\n  ref: React.Ref<HTMLElement>,\n): NavDrawerFooterState => {\n  return useDrawerFooter_unstable(props, ref);\n};\n"],"names":["React","useDrawerFooter_unstable","useNavDrawerFooter_unstable","props","ref"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,OAAOH,yBAAyBE,OAAOC;AACzC,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n    root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerFooterStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbf,8BAA8B,CAACe,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n    root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerFooterStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbf,8BAA8B,CAACe,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n  root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n  'use no memo';\n\n  useDrawerFooterStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOO,mBAAmB,CAAC,CAAC,EAAEP,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOQ,iBAAiB,CAAC,EAAE,EAAER,OAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,OAAOM,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+BAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n  root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n  'use no memo';\n\n  useDrawerFooterStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOO,mBAAmB,CAAC,CAAC,EAAEP,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOQ,iBAAiB,CAAC,EAAE,EAAER,OAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,OAAOM,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+BAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib/components/NavDrawerHeader/NavDrawerHeader.js

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

package/lib/components/NavDrawerHeader/NavDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerHeader/NavDrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerHeader_unstable } from '@fluentui/react-drawer';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';\nimport { useNavDrawerHeader_unstable } from './useNavDrawerHeader';\nimport type { NavDrawerHeaderProps } from './NavDrawerHeader.types';\n\n/**\n * NavDrawerHeader component\n */\nexport const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerHeader_unstable(props, ref);\n\n  useNavDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n"],"names":["React","renderDrawerHeader_unstable","useCustomStyleHook_unstable","useNavDrawerHeaderStyles_unstable","useNavDrawerHeader_unstable","NavDrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQL,4BAA4BG,OAAOC;IAEjDL,kCAAkCM;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerHeader/NavDrawerHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerHeader_unstable } from '@fluentui/react-drawer';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';\nimport { useNavDrawerHeader_unstable } from './useNavDrawerHeader';\nimport type { NavDrawerHeaderProps } from './NavDrawerHeader.types';\n\n/**\n * NavDrawerHeader component\n */\nexport const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerHeader_unstable(props, ref);\n\n  useNavDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n"],"names":["React","renderDrawerHeader_unstable","useCustomStyleHook_unstable","useNavDrawerHeaderStyles_unstable","useNavDrawerHeader_unstable","NavDrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQL,4BAA4BG,OAAOC;IAEjDL,kCAAkCM;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavDrawerHeader/useNavDrawerHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDrawerHeader_unstable } from '@fluentui/react-drawer';
 /**

package/lib/components/NavDrawerHeader/useNavDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerHeader_unstable } from '@fluentui/react-drawer';\n\nimport type { NavDrawerHeaderProps, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\n/**\n * Create the state required to render NavDrawerHeader.\n *\n * The returned state can be modified with hooks such as useNavDrawerHeaderStyles_unstable,\n * before being passed to renderNavDrawerHeader_unstable.\n *\n * @param props - props from this instance of NavDrawerHeader\n * @param ref - reference to root HTMLDivElement of NavDrawerHeader\n */\nexport const useNavDrawerHeader_unstable = (\n  props: NavDrawerHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): NavDrawerHeaderState => {\n  return useDrawerHeader_unstable(props, ref);\n};\n"],"names":["React","useDrawerHeader_unstable","useNavDrawerHeader_unstable","props","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAIlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,OAAOH,yBAAyBE,OAAOC;AACzC,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDrawerHeader_unstable } from '@fluentui/react-drawer';\n\nimport type { NavDrawerHeaderProps, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\n/**\n * Create the state required to render NavDrawerHeader.\n *\n * The returned state can be modified with hooks such as useNavDrawerHeaderStyles_unstable,\n * before being passed to renderNavDrawerHeader_unstable.\n *\n * @param props - props from this instance of NavDrawerHeader\n * @param ref - reference to root HTMLDivElement of NavDrawerHeader\n */\nexport const useNavDrawerHeader_unstable = (\n  props: NavDrawerHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): NavDrawerHeaderState => {\n  return useDrawerHeader_unstable(props, ref);\n};\n"],"names":["React","useDrawerHeader_unstable","useNavDrawerHeader_unstable","props","ref"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAIlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,OAAOH,yBAAyBE,OAAOC;AACzC,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B1hrpyx","Dbcxam","rjzwhg","Bblux5w","d","p","useNavDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useNavDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerHeaderClassNames = {\n    root: 'fui-NavDrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        margin: 'unset',\n        paddingInlineStart: '14px',\n        paddingBlock: '5px'\n    }\n});\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */ export const useNavDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerHeaderStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbhB,8BAA8B,CAACgB,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGnB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B1hrpyx","Dbcxam","rjzwhg","Bblux5w","d","p","useNavDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useNavDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerHeaderClassNames = {\n    root: 'fui-NavDrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        margin: 'unset',\n        paddingInlineStart: '14px',\n        paddingBlock: '5px'\n    }\n});\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */ export const useNavDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerHeaderStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbhB,8BAA8B,CAACgB,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGnB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerHeaderSlots, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\nexport const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {\n  root: 'fui-NavDrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    margin: 'unset',\n    paddingInlineStart: '14px',\n    paddingBlock: '5px',\n  },\n});\n\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */\nexport const useNavDrawerHeaderStyles_unstable = (state: NavDrawerHeaderState): NavDrawerHeaderState => {\n  'use no memo';\n\n  useDrawerHeaderStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","margin","paddingInlineStart","paddingBlock","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAKxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEAR,+BAA+BQ;IAC/B,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerHeaderSlots, NavDrawerHeaderState } from './NavDrawerHeader.types';\n\nexport const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {\n  root: 'fui-NavDrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    margin: 'unset',\n    paddingInlineStart: '14px',\n    paddingBlock: '5px',\n  },\n});\n\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */\nexport const useNavDrawerHeaderStyles_unstable = (state: NavDrawerHeaderState): NavDrawerHeaderState => {\n  'use no memo';\n\n  useDrawerHeaderStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","margin","paddingInlineStart","paddingBlock","useNavDrawerHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAKxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,QAAQ;QACRC,oBAAoB;QACpBC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEAR,+BAA+BQ;IAC/B,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib/components/NavItem/NavItem.js

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