@fluentui/react-carousel 9.8.6 → 9.8.8

package/lib/components/CarouselNav/useCarouselNav.js

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

package/lib/components/CarouselNav/useCarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n  const { appearance } = props;\n\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n  const [totalSlides, setTotalSlides] = useControllableState({\n    state: props.totalSlides,\n    initialState: 0,\n  });\n\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      setTotalSlides(data.navItemsCount);\n    });\n  }, [subscribeForValues, setTotalSlides]);\n\n  return {\n    totalSlides,\n    appearance,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        ...props,\n        ...focusableGroupAttr,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,yBAAyB,QAAQ,4BAA4B;AACtG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBZ,wBAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,GAAGX,qBAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,qBAAqBf,mBAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,0BAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,KAAK2B,MAAM,CACf5B,yBAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n  const { appearance } = props;\n\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n  const [totalSlides, setTotalSlides] = useControllableState({\n    state: props.totalSlides,\n    initialState: 0,\n  });\n\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      setTotalSlides(data.navItemsCount);\n    });\n  }, [subscribeForValues, setTotalSlides]);\n\n  return {\n    totalSlides,\n    appearance,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        ...props,\n        ...focusableGroupAttr,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,yBAAyB,QAAQ,4BAA4B;AACtG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBZ,wBAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,GAAGX,qBAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,qBAAqBf,mBAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,0BAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,KAAK2B,MAAM,CACf5B,yBAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/CarouselNav/useCarouselNavStyles.styles.js

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

package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n    root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'all',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        borderRadius: tokens.borderRadiusXLarge,\n        margin: `auto ${tokens.spacingHorizontalS}`,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha\n    }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n    root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'all',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        borderRadius: tokens.borderRadiusXLarge,\n        margin: `auto ${tokens.spacingHorizontalS}`,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha\n    }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js

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

package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n  root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    pointerEvents: 'all',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    borderRadius: tokens.borderRadiusXLarge,\n    margin: `auto ${tokens.spacingHorizontalS}`,\n    backgroundColor: tokens.colorNeutralBackgroundAlpha,\n  },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,GAAGT,gCAAgC;YACjCU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,OAAOa,kBAAkB;YACvC,GAAGf,WAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,OAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,OAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,OAAOmB,2BAA2B;IACrD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACfkB,MAAMnB,IAAI,CAACqB,SAAS,GAAG1B,aAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n  root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    pointerEvents: 'all',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    borderRadius: tokens.borderRadiusXLarge,\n    margin: `auto ${tokens.spacingHorizontalS}`,\n    backgroundColor: tokens.colorNeutralBackgroundAlpha,\n  },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,GAAGT,gCAAgC;YACjCU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,OAAOa,kBAAkB;YACvC,GAAGf,WAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,OAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,OAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,OAAOmB,2BAA2B;IACrD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACfkB,MAAMnB,IAAI,CAACqB,SAAS,GAAG1B,aAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/CarouselNavButton/CarouselNavButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCarouselNavButton_unstable } from './useCarouselNavButton';
 import { renderCarouselNavButton_unstable } from './renderCarouselNavButton';

package/lib/components/CarouselNavButton/CarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nimport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nimport { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\nimport type { CarouselNavButtonProps } from './CarouselNavButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The child element of CarouselNav, a singular button that will set the carousels active value on click.\n */\nexport const CarouselNavButton: ForwardRefComponent<CarouselNavButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavButton_unstable(props, ref);\n\n  useCarouselNavButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavButtonStyles_unstable')(state);\n\n  return renderCarouselNavButton_unstable(state);\n});\n\nCarouselNavButton.displayName = 'CarouselNavButton';\n"],"names":["React","useCarouselNavButton_unstable","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAE1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nimport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nimport { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\nimport type { CarouselNavButtonProps } from './CarouselNavButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The child element of CarouselNav, a singular button that will set the carousels active value on click.\n */\nexport const CarouselNavButton: ForwardRefComponent<CarouselNavButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavButton_unstable(props, ref);\n\n  useCarouselNavButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavButtonStyles_unstable')(state);\n\n  return renderCarouselNavButton_unstable(state);\n});\n\nCarouselNavButton.displayName = 'CarouselNavButton';\n"],"names":["React","useCarouselNavButton_unstable","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAE1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/CarouselNavButton/useCarouselNavButton.js

@@ -1,3 +1,4 @@
+'use client';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
 import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';

package/lib/components/CarouselNavButton/useCarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButton.ts"],"sourcesContent":["import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport { useCarouselNavContext } from '../CarouselNav/CarouselNavContext';\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport type { CarouselNavButtonProps, CarouselNavButtonState } from './CarouselNavButton.types';\n\n/**\n * Create the state required to render CarouselNavButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable,\n * before being passed to renderCarouselNavButton_unstable.\n *\n * @param props - props from this instance of CarouselNavButton\n * @param ref - reference to root HTMLDivElement of CarouselNavButton\n */\nexport const useCarouselNavButton_unstable = (\n  props: CarouselNavButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const { appearance } = useCarouselNavContext();\n  const index = useCarouselNavIndexContext();\n\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n\n    // Ensure any autoplay timers are extended/reset\n    resetAutoplay();\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>(undefined);\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList?.[index] ?? [];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [index, subscribeForValues]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const state: CarouselNavButtonState = {\n    selected,\n    appearance,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n\n  return state;\n};\n"],"names":["useARIAButtonProps","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","useCarouselNavContext","useCarouselNavIndexContext","useCarouselNavButton_unstable","props","ref","onClick","as","appearance","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","undefined","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"mappings":"AAAA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AACvF,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,0BAA0B,QAAQ,yCAAyC;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGP;IACvB,MAAMQ,QAAQP;IAEd,MAAMQ,oBAAoBV,mBAAmBW,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWZ,mBAAmBW,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBd,mBAAmBW,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBf,mBAAmBW,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CrB,iBAAiBsB,CAAAA;QACnEX,oBAAAA,8BAAAA,QAAUW;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIzB,cAAcwB,MAAME,MAAM,GAAG;YAC1DT,kBAAkBO,OAAOR;QAC3B;QAEA,gDAAgD;QAChDM;IACF;IAEA,MAAMK,kBAAkB7B,qBAAqB;QAC3C8B,WAAW;YAAEC,WAAWV;QAAS;IACnC;IAEA,MAAMW,YAAYzB,MAAM0B,MAAM,CAAcC;IAC5C,MAAMC,kBAAkBhC,KAAKiC,MAAM,CACjCnC,yBAAyBe,IAAIjB,mBAAmBc,MAAMG,EAAE,EAAEH,SAC1D;QACEwB,aAAa;QACbC,cAAc;YACZxB,KAAKR,cAAcQ,KAAKkB;YACxBO,MAAM;YACNC,MAAM;YACN,iBAAiBnB;YACjB,GAAGQ,eAAe;QACpB;IACF;IAGFxB,0BAA0B;QACxB,OAAOkB,mBAAmBkB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,8BAAAA,uBAAAA,KAAKE,cAAc,cAAnBF,2CAAAA,oBAAqB,CAACvB,MAAM,cAA5BuB,wCAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIjB,UAAUkB,OAAO,EAAE;gBACrBlB,UAAUkB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC1B;QAAOK;KAAmB;IAE9B,mBAAmB;IACnBY,gBAAgBpB,OAAO,GAAGU;IAE1B,MAAM2B,QAAgC;QACpC/B;QACAJ;QACAoC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB;IACR;IAEA,OAAOiB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButton.ts"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport { useCarouselNavContext } from '../CarouselNav/CarouselNavContext';\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport type { CarouselNavButtonProps, CarouselNavButtonState } from './CarouselNavButton.types';\n\n/**\n * Create the state required to render CarouselNavButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable,\n * before being passed to renderCarouselNavButton_unstable.\n *\n * @param props - props from this instance of CarouselNavButton\n * @param ref - reference to root HTMLDivElement of CarouselNavButton\n */\nexport const useCarouselNavButton_unstable = (\n  props: CarouselNavButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const { appearance } = useCarouselNavContext();\n  const index = useCarouselNavIndexContext();\n\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n\n    // Ensure any autoplay timers are extended/reset\n    resetAutoplay();\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>(undefined);\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList?.[index] ?? [];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [index, subscribeForValues]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const state: CarouselNavButtonState = {\n    selected,\n    appearance,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n\n  return state;\n};\n"],"names":["useARIAButtonProps","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","useCarouselNavContext","useCarouselNavIndexContext","useCarouselNavButton_unstable","props","ref","onClick","as","appearance","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","undefined","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"mappings":"AAAA;AAEA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AACvF,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,0BAA0B,QAAQ,yCAAyC;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGP;IACvB,MAAMQ,QAAQP;IAEd,MAAMQ,oBAAoBV,mBAAmBW,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWZ,mBAAmBW,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBd,mBAAmBW,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBf,mBAAmBW,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CrB,iBAAiBsB,CAAAA;QACnEX,oBAAAA,8BAAAA,QAAUW;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIzB,cAAcwB,MAAME,MAAM,GAAG;YAC1DT,kBAAkBO,OAAOR;QAC3B;QAEA,gDAAgD;QAChDM;IACF;IAEA,MAAMK,kBAAkB7B,qBAAqB;QAC3C8B,WAAW;YAAEC,WAAWV;QAAS;IACnC;IAEA,MAAMW,YAAYzB,MAAM0B,MAAM,CAAcC;IAC5C,MAAMC,kBAAkBhC,KAAKiC,MAAM,CACjCnC,yBAAyBe,IAAIjB,mBAAmBc,MAAMG,EAAE,EAAEH,SAC1D;QACEwB,aAAa;QACbC,cAAc;YACZxB,KAAKR,cAAcQ,KAAKkB;YACxBO,MAAM;YACNC,MAAM;YACN,iBAAiBnB;YACjB,GAAGQ,eAAe;QACpB;IACF;IAGFxB,0BAA0B;QACxB,OAAOkB,mBAAmBkB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,8BAAAA,uBAAAA,KAAKE,cAAc,cAAnBF,2CAAAA,oBAAqB,CAACvB,MAAM,cAA5BuB,wCAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIjB,UAAUkB,OAAO,EAAE;gBACrBlB,UAAUkB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC1B;QAAOK;KAAmB;IAE9B,mBAAmB;IACnBY,gBAAgBpB,OAAO,GAAGU;IAE1B,MAAM2B,QAAgC;QACpC/B;QACAJ;QACAoC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB;IACR;IAEA,OAAOiB;AACT,EAAE"}

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js

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

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n    root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        cursor: 'pointer',\n        pointerEvents: 'all',\n        width: tokens.spacingHorizontalS,\n        height: tokens.spacingVerticalS,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n        boxSizing: 'content-box',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderWidth(0),\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            boxSizing: 'border-box',\n            borderRadius: '50%',\n            border: 'none',\n            height: tokens.spacingVerticalS,\n            width: tokens.spacingHorizontalS,\n            backgroundColor: tokens.colorNeutralForeground1,\n            color: tokens.colorNeutralForeground1,\n            '@media (forced-colors: active)': {\n                // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n                forcedColorAdjust: 'none',\n                backgroundColor: 'white',\n                mixBlendMode: 'difference'\n            }\n        }\n    },\n    rootUnselected: {\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            opacity: 0.6\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 1\n            }\n        }\n    },\n    rootSelected: {\n        width: tokens.spacingHorizontalL,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            width: tokens.spacingHorizontalL,\n            borderRadius: '4px'\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 0.65\n            }\n        }\n    },\n    brand: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            opacity: 1\n        },\n        ':hover': {\n            '::after': {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                opacity: 1\n            }\n        },\n        ':active': {\n            '::after': {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                opacity: 1\n            }\n        }\n    },\n    unselectedBrand: {\n        '::after': {\n            opacity: 0.6,\n            backgroundColor: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { selected, appearance } = state;\n    state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n    root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        cursor: 'pointer',\n        pointerEvents: 'all',\n        width: tokens.spacingHorizontalS,\n        height: tokens.spacingVerticalS,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n        boxSizing: 'content-box',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderWidth(0),\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            boxSizing: 'border-box',\n            borderRadius: '50%',\n            border: 'none',\n            height: tokens.spacingVerticalS,\n            width: tokens.spacingHorizontalS,\n            backgroundColor: tokens.colorNeutralForeground1,\n            color: tokens.colorNeutralForeground1,\n            '@media (forced-colors: active)': {\n                // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n                forcedColorAdjust: 'none',\n                backgroundColor: 'white',\n                mixBlendMode: 'difference'\n            }\n        }\n    },\n    rootUnselected: {\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            opacity: 0.6\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 1\n            }\n        }\n    },\n    rootSelected: {\n        width: tokens.spacingHorizontalL,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            width: tokens.spacingHorizontalL,\n            borderRadius: '4px'\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 0.65\n            }\n        }\n    },\n    brand: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            opacity: 1\n        },\n        ':hover': {\n            '::after': {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                opacity: 1\n            }\n        },\n        ':active': {\n            '::after': {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                opacity: 1\n            }\n        }\n    },\n    unselectedBrand: {\n        '::after': {\n            opacity: 0.6,\n            backgroundColor: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { selected, appearance } = state;\n    state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js

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

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n  root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    cursor: 'pointer',\n    pointerEvents: 'all',\n    width: tokens.spacingHorizontalS,\n    height: tokens.spacingVerticalS,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n    boxSizing: 'content-box',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderWidth(0),\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      boxSizing: 'border-box',\n      borderRadius: '50%',\n      border: 'none',\n      height: tokens.spacingVerticalS,\n      width: tokens.spacingHorizontalS,\n      backgroundColor: tokens.colorNeutralForeground1,\n      color: tokens.colorNeutralForeground1,\n      '@media (forced-colors: active)': {\n        // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n        forcedColorAdjust: 'none',\n        backgroundColor: 'white',\n        mixBlendMode: 'difference',\n      },\n    },\n  },\n  rootUnselected: {\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n      borderRadius: tokens.borderRadiusMedium,\n    }),\n    '::after': {\n      opacity: 0.6,\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 1,\n      },\n    },\n  },\n  rootSelected: {\n    width: tokens.spacingHorizontalL,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n      borderRadius: tokens.borderRadiusMedium,\n    }),\n    '::after': {\n      width: tokens.spacingHorizontalL,\n      borderRadius: '4px',\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 0.65,\n      },\n    },\n  },\n  brand: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      opacity: 1,\n    },\n    ':hover': {\n      '::after': {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        opacity: 1,\n      },\n    },\n    ':active': {\n      '::after': {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        opacity: 1,\n      },\n    },\n  },\n  unselectedBrand: {\n    '::after': {\n      opacity: 0.6,\n      backgroundColor: tokens.colorNeutralForeground1,\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  const { selected, appearance } = state;\n\n  state.root.className = mergeClasses(\n    carouselNavButtonClassNames.root,\n    styles.root,\n    selected ? styles.rootSelected : styles.rootUnselected,\n    appearance === 'brand' && styles.brand,\n    !selected && appearance === 'brand' && styles.unselectedBrand,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n  root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    cursor: 'pointer',\n    pointerEvents: 'all',\n    width: tokens.spacingHorizontalS,\n    height: tokens.spacingVerticalS,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n    boxSizing: 'content-box',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderWidth(0),\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      boxSizing: 'border-box',\n      borderRadius: '50%',\n      border: 'none',\n      height: tokens.spacingVerticalS,\n      width: tokens.spacingHorizontalS,\n      backgroundColor: tokens.colorNeutralForeground1,\n      color: tokens.colorNeutralForeground1,\n      '@media (forced-colors: active)': {\n        // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n        forcedColorAdjust: 'none',\n        backgroundColor: 'white',\n        mixBlendMode: 'difference',\n      },\n    },\n  },\n  rootUnselected: {\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n      borderRadius: tokens.borderRadiusMedium,\n    }),\n    '::after': {\n      opacity: 0.6,\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 1,\n      },\n    },\n  },\n  rootSelected: {\n    width: tokens.spacingHorizontalL,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n      borderRadius: tokens.borderRadiusMedium,\n    }),\n    '::after': {\n      width: tokens.spacingHorizontalL,\n      borderRadius: '4px',\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 0.65,\n      },\n    },\n  },\n  brand: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      opacity: 1,\n    },\n    ':hover': {\n      '::after': {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        opacity: 1,\n      },\n    },\n    ':active': {\n      '::after': {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        opacity: 1,\n      },\n    },\n  },\n  unselectedBrand: {\n    '::after': {\n      opacity: 0.6,\n      backgroundColor: tokens.colorNeutralForeground1,\n    },\n    ':hover': {\n      '::after': {\n        opacity: 0.75,\n      },\n    },\n    ':active': {\n      '::after': {\n        opacity: 1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  const { selected, appearance } = state;\n\n  state.root.className = mergeClasses(\n    carouselNavButtonClassNames.root,\n    styles.root,\n    selected ? styles.rootSelected : styles.rootUnselected,\n    appearance === 'brand' && styles.brand,\n    !selected && appearance === 'brand' && styles.unselectedBrand,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}

package/lib/components/CarouselNavContainer/CarouselNavContainer.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
 import { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';

package/lib/components/CarouselNavContainer/CarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavContainer_unstable(props, ref);\n\n  useCarouselNavContainerStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n  return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["React","useCarouselNavContainer_unstable","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCustomStyleHook_unstable","CarouselNavContainer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAEhG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,iCAAiCM,OAAOC;IAEtDL,uCAAuCM;IACvCL,4BAA4B,0CAA0CK;IAEtE,OAAOP,oCAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavContainer_unstable(props, ref);\n\n  useCarouselNavContainerStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n  return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["React","useCarouselNavContainer_unstable","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCustomStyleHook_unstable","CarouselNavContainer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAEhG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,iCAAiCM,OAAOC;IAEtDL,uCAAuCM;IACvCL,4BAA4B,0CAA0CK;IAEtE,OAAOP,oCAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

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

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay',\n    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay',\n    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js

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

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n  root: 'fui-CarouselNavContainer',\n  next: 'fui-CarouselNavContainer__next',\n  prev: 'fui-CarouselNavContainer__prev',\n  autoplay: 'fui-CarouselNavContainer__autoplay',\n  /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */\n  nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n  prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n  autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    width: '100%',\n    pointerEvents: 'none',\n  },\n  next: {},\n  prev: {},\n  autoplay: {},\n  inline: {\n    marginTop: tokens.spacingVerticalM,\n  },\n  overlay: {\n    position: 'absolute',\n    bottom: tokens.spacingVerticalM,\n    boxSizing: 'border-box',\n  },\n  overlayWide: {\n    bottom: tokens.spacingVerticalM,\n  },\n  nextWide: {\n    marginLeft: 'auto',\n  },\n  prevWide: {\n    marginRight: 'auto',\n  },\n  nextOverlayWide: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  prevOverlayWide: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n  autoplayOverlayWide: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n  expanded: {\n    width: '100%',\n    height: '100%',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n    bottom: 0,\n    '> div': {\n      position: 'relative',\n      bottom: tokens.spacingVerticalL,\n      marginBottom: 0,\n    },\n  },\n  nextOverlayExpanded: {\n    position: 'absolute',\n    right: tokens.spacingHorizontalM,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  },\n  prevOverlayExpanded: {\n    position: 'absolute',\n    left: tokens.spacingHorizontalM,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  },\n  autoplayExpanded: {\n    position: 'absolute',\n    bottom: `-${tokens.spacingHorizontalXS}`,\n    left: tokens.spacingHorizontalM,\n    marginBottom: tokens.spacingVerticalM,\n  },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n  'use no memo';\n\n  const { layout } = state;\n  const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n  const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    carouselNavContainerClassNames.root,\n    styles.root,\n    isOverlay ? styles.overlay : styles.inline,\n    isOverlay && isWide && styles.overlayWide,\n    layout === 'overlay-expanded' && styles.expanded,\n    state.root.className,\n  );\n\n  if (state.next) {\n    state.next.className = mergeClasses(\n      carouselNavContainerClassNames.next,\n      styles.next,\n      isWide && styles.nextWide,\n      isWide && isOverlay && styles.nextOverlayWide,\n      layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n      state.next.className,\n    );\n  }\n  if (state.prev) {\n    state.prev.className = mergeClasses(\n      carouselNavContainerClassNames.prev,\n      styles.prev,\n      isWide && styles.prevWide,\n      !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n      layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n      state.prev.className,\n    );\n  }\n\n  if (state.autoplay) {\n    state.autoplay.className = mergeClasses(\n      carouselNavContainerClassNames.autoplay,\n      styles.autoplay,\n      layout === 'overlay-expanded' && styles.autoplayExpanded,\n      isWide && isOverlay && styles.autoplayOverlayWide,\n      state.autoplay.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n  root: 'fui-CarouselNavContainer',\n  next: 'fui-CarouselNavContainer__next',\n  prev: 'fui-CarouselNavContainer__prev',\n  autoplay: 'fui-CarouselNavContainer__autoplay',\n  /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */\n  nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n  prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n  autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    width: '100%',\n    pointerEvents: 'none',\n  },\n  next: {},\n  prev: {},\n  autoplay: {},\n  inline: {\n    marginTop: tokens.spacingVerticalM,\n  },\n  overlay: {\n    position: 'absolute',\n    bottom: tokens.spacingVerticalM,\n    boxSizing: 'border-box',\n  },\n  overlayWide: {\n    bottom: tokens.spacingVerticalM,\n  },\n  nextWide: {\n    marginLeft: 'auto',\n  },\n  prevWide: {\n    marginRight: 'auto',\n  },\n  nextOverlayWide: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  prevOverlayWide: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n  autoplayOverlayWide: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n  expanded: {\n    width: '100%',\n    height: '100%',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n    bottom: 0,\n    '> div': {\n      position: 'relative',\n      bottom: tokens.spacingVerticalL,\n      marginBottom: 0,\n    },\n  },\n  nextOverlayExpanded: {\n    position: 'absolute',\n    right: tokens.spacingHorizontalM,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  },\n  prevOverlayExpanded: {\n    position: 'absolute',\n    left: tokens.spacingHorizontalM,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  },\n  autoplayExpanded: {\n    position: 'absolute',\n    bottom: `-${tokens.spacingHorizontalXS}`,\n    left: tokens.spacingHorizontalM,\n    marginBottom: tokens.spacingVerticalM,\n  },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n  'use no memo';\n\n  const { layout } = state;\n  const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n  const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    carouselNavContainerClassNames.root,\n    styles.root,\n    isOverlay ? styles.overlay : styles.inline,\n    isOverlay && isWide && styles.overlayWide,\n    layout === 'overlay-expanded' && styles.expanded,\n    state.root.className,\n  );\n\n  if (state.next) {\n    state.next.className = mergeClasses(\n      carouselNavContainerClassNames.next,\n      styles.next,\n      isWide && styles.nextWide,\n      isWide && isOverlay && styles.nextOverlayWide,\n      layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n      state.next.className,\n    );\n  }\n  if (state.prev) {\n    state.prev.className = mergeClasses(\n      carouselNavContainerClassNames.prev,\n      styles.prev,\n      isWide && styles.prevWide,\n      !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n      layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n      state.prev.className,\n    );\n  }\n\n  if (state.autoplay) {\n    state.autoplay.className = mergeClasses(\n      carouselNavContainerClassNames.autoplay,\n      styles.autoplay,\n      layout === 'overlay-expanded' && styles.autoplayExpanded,\n      isWide && isOverlay && styles.autoplayOverlayWide,\n      state.autoplay.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}

package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';
 import { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';

package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselNavImageButton_unstable(props, ref);\n\n    useCarouselNavImageButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAEpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselNavImageButton_unstable(props, ref);\n\n    useCarouselNavImageButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAEpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js

@@ -1,3 +1,4 @@
+'use client';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';

package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavImageButtonProps, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\n\n/**\n * Create the state required to render CarouselNavImageButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,\n * before being passed to renderCarouselNavImageButton_unstable.\n *\n * @param props - props from this instance of CarouselNavImageButton\n * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton\n */\nexport const useCarouselNavImageButton_unstable = (\n  props: CarouselNavImageButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavImageButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const index = useCarouselNavIndexContext();\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>(undefined);\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList?.[index] ?? [];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [subscribeForValues, index]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const image = slot.always(\n    getIntrinsicElementProps('img', {\n      'aria-hidden': true, // Hidden as button is responsible for navigation description\n      alt: '',\n      role: 'presentation',\n      ...props.image,\n    }),\n    { elementType: 'img' },\n  );\n\n  return {\n    components: {\n      root: 'button',\n      image: 'img',\n    },\n    root: _carouselButton,\n    image,\n    selected,\n  };\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","useTabsterAttributes","React","useCarouselNavIndexContext","useCarouselContext_unstable","useCarouselContext","useCarouselNavImageButton_unstable","props","ref","onClick","as","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","undefined","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"mappings":"AAAA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQR;IACd,MAAMS,oBAAoBP,mBAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWT,mBAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBX,mBAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CnB,iBAAiBoB,CAAAA;QACnET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIvB,cAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBpB,qBAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,MAAMuB,MAAM,CAAcC;IAC5C,MAAMC,kBAAkB9B,KAAK+B,MAAM,CACjCjC,yBAAyBe,IAAIhB,mBAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEsB,aAAa;QACbC,cAAc;YACZtB,KAAKR,cAAcQ,KAAKgB;YACxBO,MAAM;YACNC,MAAM;YACN,iBAAiBlB;YACjB,GAAGO,eAAe;QACpB;IACF;IAGFtB,0BAA0B;QACxB,OAAOiB,mBAAmBiB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,8BAAAA,uBAAAA,KAAKE,cAAc,cAAnBF,2CAAAA,oBAAqB,CAACtB,MAAM,cAA5BsB,wCAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIjB,UAAUkB,OAAO,EAAE;gBACrBlB,UAAUkB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBgB,gBAAgBlB,OAAO,GAAGQ;IAE1B,MAAM2B,QAAQ/C,KAAK+B,MAAM,CACvBjC,yBAAyB,OAAO;QAC9B,eAAe;QACfkD,KAAK;QACLd,MAAM;QACN,GAAGxB,MAAMqC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA9B;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavImageButtonProps, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\n\n/**\n * Create the state required to render CarouselNavImageButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,\n * before being passed to renderCarouselNavImageButton_unstable.\n *\n * @param props - props from this instance of CarouselNavImageButton\n * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton\n */\nexport const useCarouselNavImageButton_unstable = (\n  props: CarouselNavImageButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavImageButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const index = useCarouselNavIndexContext();\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>(undefined);\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList?.[index] ?? [];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [subscribeForValues, index]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const image = slot.always(\n    getIntrinsicElementProps('img', {\n      'aria-hidden': true, // Hidden as button is responsible for navigation description\n      alt: '',\n      role: 'presentation',\n      ...props.image,\n    }),\n    { elementType: 'img' },\n  );\n\n  return {\n    components: {\n      root: 'button',\n      image: 'img',\n    },\n    root: _carouselButton,\n    image,\n    selected,\n  };\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","useTabsterAttributes","React","useCarouselNavIndexContext","useCarouselContext_unstable","useCarouselContext","useCarouselNavImageButton_unstable","props","ref","onClick","as","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","undefined","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"mappings":"AAAA;AAEA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQR;IACd,MAAMS,oBAAoBP,mBAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWT,mBAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBX,mBAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CnB,iBAAiBoB,CAAAA;QACnET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIvB,cAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBpB,qBAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,MAAMuB,MAAM,CAAcC;IAC5C,MAAMC,kBAAkB9B,KAAK+B,MAAM,CACjCjC,yBAAyBe,IAAIhB,mBAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEsB,aAAa;QACbC,cAAc;YACZtB,KAAKR,cAAcQ,KAAKgB;YACxBO,MAAM;YACNC,MAAM;YACN,iBAAiBlB;YACjB,GAAGO,eAAe;QACpB;IACF;IAGFtB,0BAA0B;QACxB,OAAOiB,mBAAmBiB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,8BAAAA,uBAAAA,KAAKE,cAAc,cAAnBF,2CAAAA,oBAAqB,CAACtB,MAAM,cAA5BsB,wCAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIjB,UAAUkB,OAAO,EAAE;gBACrBlB,UAAUkB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBgB,gBAAgBlB,OAAO,GAAGQ;IAE1B,MAAM2B,QAAQ/C,KAAK+B,MAAM,CACvBjC,yBAAyB,OAAO;QAC9B,eAAe;QACfkD,KAAK;QACLd,MAAM;QACN,GAAGxB,MAAMqC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA9B;IACF;AACF,EAAE"}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js

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

package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n    root: 'fui-CarouselNavImageButton',\n    image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxSizing: 'content-box',\n        padding: '0px',\n        margin: `0 ${tokens.spacingHorizontalXS}`,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        borderRadius: tokens.borderRadiusSmall,\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        overflow: 'hidden',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    },\n    image: {\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        borderRadius: tokens.borderRadiusSmall\n    },\n    selected: {\n        width: selectedImageButtonSize + 'px',\n        height: selectedImageButtonSize + 'px'\n    }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n    if (state.image) {\n        var _state_image;\n        state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;IAAAN,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;EAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;IACb,IAAIsC,YAAY;IAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;EAC/N;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n    root: 'fui-CarouselNavImageButton',\n    image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxSizing: 'content-box',\n        padding: '0px',\n        margin: `0 ${tokens.spacingHorizontalXS}`,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        borderRadius: tokens.borderRadiusSmall,\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        overflow: 'hidden',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    },\n    image: {\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        borderRadius: tokens.borderRadiusSmall\n    },\n    selected: {\n        width: selectedImageButtonSize + 'px',\n        height: selectedImageButtonSize + 'px'\n    }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n    if (state.image) {\n        var _state_image;\n        state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;IAAAN,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;EAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;IACb,IAAIsC,YAAY;IAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;EAC/N;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js

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

package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n  root: 'fui-CarouselNavImageButton',\n  image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxSizing: 'content-box',\n    padding: '0px',\n    margin: `0 ${tokens.spacingHorizontalXS}`,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    borderRadius: tokens.borderRadiusSmall,\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    overflow: 'hidden',\n    ':hover': {\n      cursor: 'pointer',\n    },\n  },\n  image: {\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    borderRadius: tokens.borderRadiusSmall,\n  },\n  selected: {\n    width: selectedImageButtonSize + 'px',\n    height: selectedImageButtonSize + 'px',\n  },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n  state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n  'use no memo';\n\n  const { selected } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    carouselNavImageButtonClassNames.root,\n    styles.root,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.image) {\n    state.image.className = mergeClasses(\n      carouselNavImageButtonClassNames.image,\n      styles.image,\n      selected && styles.selected,\n      state.image?.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,OAAOU,mBAAmB,EAAE;QACzC,GAAGX,WAAWY,WAAW,CAACX,OAAOY,sBAAsB,CAAC;QACxDC,cAAcb,OAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,OAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,2CAA2C,CACtDC;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAKbkB;QAJFA,MAAMlB,KAAK,CAACoB,SAAS,GAAGzB,aACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,GAC3BE,eAAAA,MAAMlB,KAAK,cAAXkB,mCAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n  root: 'fui-CarouselNavImageButton',\n  image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxSizing: 'content-box',\n    padding: '0px',\n    margin: `0 ${tokens.spacingHorizontalXS}`,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    borderRadius: tokens.borderRadiusSmall,\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    overflow: 'hidden',\n    ':hover': {\n      cursor: 'pointer',\n    },\n  },\n  image: {\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    borderRadius: tokens.borderRadiusSmall,\n  },\n  selected: {\n    width: selectedImageButtonSize + 'px',\n    height: selectedImageButtonSize + 'px',\n  },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n  state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n  'use no memo';\n\n  const { selected } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    carouselNavImageButtonClassNames.root,\n    styles.root,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.image) {\n    state.image.className = mergeClasses(\n      carouselNavImageButtonClassNames.image,\n      styles.image,\n      selected && styles.selected,\n      state.image?.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,OAAOU,mBAAmB,EAAE;QACzC,GAAGX,WAAWY,WAAW,CAACX,OAAOY,sBAAsB,CAAC;QACxDC,cAAcb,OAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,OAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,2CAA2C,CACtDC;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAKbkB;QAJFA,MAAMlB,KAAK,CAACoB,SAAS,GAAGzB,aACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,GAC3BE,eAAAA,MAAMlB,KAAK,cAAXkB,mCAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/CarouselSlider/CarouselSlider.js

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

package/lib/components/CarouselSlider/CarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselSlider_unstable(props, ref);\n\n  useCarouselSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,MAAMC,UAAUP,wCAAwCM;IACxD,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselSlider_unstable(props, ref);\n\n  useCarouselSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,MAAMC,UAAUP,wCAAwCM;IACxD,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

package/lib/components/CarouselSlider/CarouselSliderContext.js

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

package/lib/components/CarouselSlider/CarouselSliderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n  cardFocus: false,\n};\n\nexport const useCarouselSliderContext = (): CarouselSliderContextValue =>\n  React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n  carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n  const { cardFocus } = state;\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;EAAkC;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n  cardFocus: false,\n};\n\nexport const useCarouselSliderContext = (): CarouselSliderContextValue =>\n  React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n  carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n  const { cardFocus } = state;\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;EAAkC;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

package/lib/components/CarouselSlider/useCarouselSlider.js

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

package/lib/components/CarouselSlider/useCarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n  props: CarouselSliderProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n  const { cardFocus = false } = props;\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const focusProps = cardFocus ? focusableGroupAttr : {};\n\n  return {\n    cardFocus,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...props,\n        ...focusProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n  props: CarouselSliderProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n  const { cardFocus = false } = props;\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const focusProps = cardFocus ? focusableGroupAttr : {};\n\n  return {\n    cardFocus,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...props,\n        ...focusProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js

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

package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselSliderClassNames = {\n    root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        overflowAnchor: 'none'\n    }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,wBAAwB,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselSliderClassNames = {\n    root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        overflowAnchor: 'none'\n    }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,wBAAwB,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js

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