@fluentui/react-carousel 9.1.0 → 9.3.0

package/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselNavButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonState, CarouselNavButtonSlots } from './CarouselNavButton.types';\n\n/**\n * Render the final JSX of CarouselNavButton\n */\nexport const renderCarouselNavButton_unstable = (state: CarouselNavButtonState) => {\n  assertSlots<CarouselNavButtonSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["renderCarouselNavButton_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,mCAAmC,CAACC;IAC/CC,IAAAA,2BAAAA,EAAoCD;IAEpC,qDAAqD;IACrD,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
+{"version":3,"sources":["../src/components/CarouselNavButton/renderCarouselNavButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonState, CarouselNavButtonSlots } from './CarouselNavButton.types';\n\n/**\n * Render the final JSX of CarouselNavButton\n */\nexport const renderCarouselNavButton_unstable = (state: CarouselNavButtonState) => {\n  assertSlots<CarouselNavButtonSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["renderCarouselNavButton_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,mCAAmC,CAACC;IAC/CC,IAAAA,2BAAAA,EAAoCD;IAEpC,qDAAqD;IACrD,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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>();\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":["useCarouselNavButton_unstable","props","ref","onClick","as","appearance","useCarouselNavContext","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;2BA1BwE;8BAChD;gCAQ9B;iEACgB;iCAE2C;oCAC5B;yCACK;AAYpC,MAAMA,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGC,IAAAA,yCAAAA;IACvB,MAAMC,QAAQC,IAAAA,mDAAAA;IAEd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBL,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEf,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DZ,kBAAkBS,OAAOX;QAC3B;QAEA,gDAAgD;QAChDQ;IACF;IAEA,MAAMO,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWb;QAAS;IACnC;IAEA,MAAMc,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyB5B,IAAI6B,IAAAA,6BAAAA,EAAmBhC,MAAMG,EAAE,EAAEH,SAC1D;QACEiC,aAAa;QACbC,cAAc;YACZjC,KAAKkC,IAAAA,6BAAAA,EAAclC,KAAKwB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiB1B;YACjB,GAAGU,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOzB,mBAAmB0B,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACnC,MAAM;YAC9C,MAAMoC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpC;QAAOO;KAAmB;IAE9B,mBAAmB;IACnBe,gBAAgB1B,OAAO,GAAGa;IAE1B,MAAMmC,QAAgC;QACpCvC;QACAP;QACA+C,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB;IACR;IAEA,OAAOsB;AACT"}
+{"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>();\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":["useCarouselNavButton_unstable","props","ref","onClick","as","appearance","useCarouselNavContext","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;2BA1BwE;8BAChD;gCAQ9B;iEACgB;iCAE2C;oCAC5B;yCACK;AAYpC,MAAMA,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGC,IAAAA,yCAAAA;IACvB,MAAMC,QAAQC,IAAAA,mDAAAA;IAEd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBL,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEf,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DZ,kBAAkBS,OAAOX;QAC3B;QAEA,gDAAgD;QAChDQ;IACF;IAEA,MAAMO,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWb;QAAS;IACnC;IAEA,MAAMc,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyB5B,IAAI6B,IAAAA,6BAAAA,EAAmBhC,MAAMG,EAAE,EAAEH,SAC1D;QACEiC,aAAa;QACbC,cAAc;YACZjC,KAAKkC,IAAAA,6BAAAA,EAAclC,KAAKwB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiB1B;YACjB,GAAGU,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOzB,mBAAmB0B,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACnC,MAAM;YAC9C,MAAMoC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpC;QAAOO;KAAmB;IAE9B,mBAAmB;IACnBe,gBAAgB1B,OAAO,GAAGa;IAE1B,MAAMmC,QAAgC;QACpCvC;QACAP;QACA+C,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB;IACR;IAEA,OAAOsB;AACT"}

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

@@ -290,4 +290,4 @@ const useCarouselNavButtonStyles_unstable = (state)=>{
     const { selected, appearance } = state;
     state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
     return state;
-}; //# sourceMappingURL=useCarouselNavButtonStyles.styles.js.map
+};

package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.js

@@ -13,17 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselNavContainer = require("./useCarouselNavContainer");
 const _renderCarouselNavContainer = require("./renderCarouselNavContainer");
 const _useCarouselNavContainerStylesstyles = require("./useCarouselNavContainerStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselNavContainer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselNavContainer.useCarouselNavContainer_unstable)(props, ref);
     (0, _useCarouselNavContainerStylesstyles.useCarouselNavContainerStyles_unstable)(state);
-    /**
-   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
-   *
-   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
-   *      - uncomment this line
-   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
-   *      - verify that custom global style override works for your component
-   */ // useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavContainerStyles_unstable')(state);
     return (0, _renderCarouselNavContainer.renderCarouselNavContainer_unstable)(state);
 });
 CarouselNavContainer.displayName = 'CarouselNavContainer';

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\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\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n  return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["CarouselNavContainer","React","forwardRef","props","ref","state","useCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","renderCarouselNavContainer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;yCAE0B;4CACG;qDACG;AAMhD,MAAMA,uBAAAA,WAAAA,GAAuEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQC,IAAAA,yDAAAA,EAAiCH,OAAOC;IAEtDG,IAAAA,2EAAAA,EAAuCF;IAEvC;;;;;;;GAOC,GACD,gFAAgF;IAEhF,OAAOG,IAAAA,+DAAAA,EAAoCH;AAC7C;AAEAL,qBAAqBS,WAAW,GAAG"}
+{"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":["CarouselNavContainer","React","forwardRef","props","ref","state","useCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCustomStyleHook_unstable","renderCarouselNavContainer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;yCAE0B;4CACG;qDACG;qCAEX;AAKrC,MAAMA,uBAAAA,WAAAA,GAAuEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQC,IAAAA,yDAAAA,EAAiCH,OAAOC;IAEtDG,IAAAA,2EAAAA,EAAuCF;IACvCG,IAAAA,gDAAAA,EAA4B,0CAA0CH;IAEtE,OAAOI,IAAAA,+DAAAA,EAAoCJ;AAC7C;AAEAL,qBAAqBU,WAAW,GAAG"}

package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  prev?: Slot<CarouselButtonProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgCA;;CAEC"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  prev?: Slot<CarouselButtonProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgCA;;CAEC"}

package/lib-commonjs/components/CarouselNavContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNavContainer';\nexport * from './CarouselNavContainer.types';\nexport * from './renderCarouselNavContainer';\nexport * from './useCarouselNavContainer';\nexport * from './useCarouselNavContainerStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/index.ts"],"sourcesContent":["export * from './CarouselNavContainer';\nexport * from './CarouselNavContainer.types';\nexport * from './renderCarouselNavContainer';\nexport * from './useCarouselNavContainer';\nexport * from './useCarouselNavContainerStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {state.autoplay && <state.autoplay />}\n      {state.prev && <state.prev />}\n      {state.root.children}\n      {state.next && <state.next />}\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplay","_jsx","prev","children","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,QAAQ,EAAA,CAAA;YACjCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMG,IAAI,CAACI,QAAQ;YACnBP,MAAMQ,IAAI,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,IAAI,EAAA,CAAA;;;AAGhC"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {state.autoplay && <state.autoplay />}\n      {state.prev && <state.prev />}\n      {state.root.children}\n      {state.next && <state.next />}\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplay","_jsx","prev","children","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,QAAQ,EAAA,CAAA;YACjCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMG,IAAI,CAACI,QAAQ;YACnBP,MAAMQ,IAAI,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,IAAI,EAAA,CAAA;;;AAGhC"}

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    renderByDefault: false,\n    elementType: CarouselAutoplayButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n  };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACwB;wCAER;gCACR;AAWxB,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;QACpFF,iBAAiB;QACjBF,aAAaK,8CAAAA;IACf;IAEA,OAAO;QACLX;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;QACZ;QACAE,MAAMX,oBAAAA,CAAKY,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BhB;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    renderByDefault: false,\n    elementType: CarouselAutoplayButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n  };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACwB;wCAER;gCACR;AAWxB,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;QACpFF,iBAAiB;QACjBF,aAAaK,8CAAAA;IACf;IAEA,OAAO;QACLX;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;QACZ;QACAE,MAAMX,oBAAAA,CAAKY,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BhB;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;IACF;AACF"}

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

@@ -160,4 +160,4 @@ const useCarouselNavContainerStyles_unstable = (state)=>{
         state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
     }
     return state;
-}; //# sourceMappingURL=useCarouselNavContainerStyles.styles.js.map
+};

package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.js

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselNavImageButton = require("./useCarouselNavImageButton");
 const _renderCarouselNavImageButton = require("./renderCarouselNavImageButton");
 const _useCarouselNavImageButtonStylesstyles = require("./useCarouselNavImageButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselNavImageButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselNavImageButton.useCarouselNavImageButton_unstable)(props, ref);
     (0, _useCarouselNavImageButtonStylesstyles.useCarouselNavImageButtonStyles_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavImageButtonStyles_unstable')(state);
     return (0, _renderCarouselNavImageButton.renderCarouselNavImageButton_unstable)(state);
 });
 CarouselNavImageButton.displayName = 'CarouselNavImageButton';

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\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    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n    // useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["CarouselNavImageButton","React","forwardRef","props","ref","state","useCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","renderCarouselNavImageButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2CAE4B;8CACG;uDACG;AAOlD,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzC,8HAA8H;IAC9H,wGAAwG;IACxG,kFAAkF;IAClF,OAAOG,IAAAA,mEAAAA,EAAsCH;AAC/C;AAGFL,uBAAuBS,WAAW,GAAG"}
+{"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":["CarouselNavImageButton","React","forwardRef","props","ref","state","useCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselNavImageButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;2CAE4B;8CACG;uDACG;qCAEb;AAMrC,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzCG,IAAAA,gDAAAA,EAA4B,4CAA4CH;IAExE,OAAOI,IAAAA,mEAAAA,EAAsCJ;AAC/C;AAGFL,uBAAuBU,WAAW,GAAG"}

package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * Required: The image within the button\n   */\n  image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * Required: The image within the button\n   */\n  image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}

package/lib-commonjs/components/CarouselNavImageButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNavImageButton';\nexport * from './CarouselNavImageButton.types';\nexport * from './renderCarouselNavImageButton';\nexport * from './useCarouselNavImageButton';\nexport * from './useCarouselNavImageButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/index.ts"],"sourcesContent":["export * from './CarouselNavImageButton';\nexport * from './CarouselNavImageButton.types';\nexport * from './renderCarouselNavImageButton';\nexport * from './useCarouselNavImageButton';\nexport * from './useCarouselNavImageButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState) => {\n  assertSlots<CarouselNavImageButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.image />\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavImageButton_unstable","state","assertSlots","_jsx","root","image"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACF,MAAMI,KAAK,EAAA,CAAA;;AAGlB"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState) => {\n  assertSlots<CarouselNavImageButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.image />\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavImageButton_unstable","state","assertSlots","_jsx","root","image"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACF,MAAMI,KAAK,EAAA,CAAA;;AAGlB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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>();\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":["useCarouselNavImageButton_unstable","props","ref","onClick","as","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;2BAzBwE;gCAQ9E;8BAC8B;iEACd;yCAEoB;iCACuB;AAY3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQC,IAAAA,mDAAAA;IACd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEZ,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUY;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DX,kBAAkBQ,OAAOV;QAC3B;IACF;IAEA,MAAMc,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWZ;QAAS;IACnC;IAEA,MAAMa,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyBzB,IAAI0B,IAAAA,6BAAAA,EAAmB7B,MAAMG,EAAE,EAAEH,SAC1D;QACE8B,aAAa;QACbC,cAAc;YACZ9B,KAAK+B,IAAAA,6BAAAA,EAAc/B,KAAKqB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiBzB;YACjB,GAAGS,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOxB,mBAAmByB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAAClC,MAAM;YAC9C,MAAMmC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC5B;QAAoBP;KAAM;IAE9B,mBAAmB;IACnBqB,gBAAgBvB,OAAO,GAAGU;IAE1B,MAAMmC,QAAQrB,oBAAAA,CAAKC,MAAM,CACvBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,eAAe;QACfoB,KAAK;QACLf,MAAM;QACN,GAAGjC,MAAM+C,KAAK;IAChB,IACA;QAAEjB,aAAa;IAAM;IAGvB,OAAO;QACLmB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMzB;QACNsB;QACAtC;IACF;AACF"}
+{"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>();\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":["useCarouselNavImageButton_unstable","props","ref","onClick","as","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;2BAzBwE;gCAQ9E;8BAC8B;iEACd;yCAEoB;iCACuB;AAY3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQC,IAAAA,mDAAAA;IACd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEZ,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUY;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DX,kBAAkBQ,OAAOV;QAC3B;IACF;IAEA,MAAMc,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWZ;QAAS;IACnC;IAEA,MAAMa,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyBzB,IAAI0B,IAAAA,6BAAAA,EAAmB7B,MAAMG,EAAE,EAAEH,SAC1D;QACE8B,aAAa;QACbC,cAAc;YACZ9B,KAAK+B,IAAAA,6BAAAA,EAAc/B,KAAKqB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiBzB;YACjB,GAAGS,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOxB,mBAAmByB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAAClC,MAAM;YAC9C,MAAMmC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC5B;QAAoBP;KAAM;IAE9B,mBAAmB;IACnBqB,gBAAgBvB,OAAO,GAAGU;IAE1B,MAAMmC,QAAQrB,oBAAAA,CAAKC,MAAM,CACvBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,eAAe;QACfoB,KAAK;QACLf,MAAM;QACN,GAAGjC,MAAM+C,KAAK;IAChB,IACA;QAAEjB,aAAa;IAAM;IAGvB,OAAO;QACLmB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMzB;QACNsB;QACAtC;IACF;AACF"}

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

@@ -129,4 +129,4 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
         state.image.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
     }
     return state;
-}; //# sourceMappingURL=useCarouselNavImageButtonStyles.styles.js.map
+};

package/lib-commonjs/components/CarouselSlider/CarouselSlider.js

@@ -14,13 +14,12 @@ const _useCarouselSlider = require("./useCarouselSlider");
 const _renderCarouselSlider = require("./renderCarouselSlider");
 const _useCarouselSliderStylesstyles = require("./useCarouselSliderStyles.styles");
 const _CarouselSliderContext = require("./CarouselSliderContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselSlider.useCarouselSlider_unstable)(props, ref);
     (0, _useCarouselSliderStylesstyles.useCarouselSliderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselSliderStyles_unstable')(state);
     const context = (0, _CarouselSliderContext.useCarouselSliderContextValues_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);
     return (0, _renderCarouselSlider.renderCarouselSlider_unstable)(state, context);
 });
 CarouselSlider.displayName = 'CarouselSlider';

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\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\n  const context = useCarouselSliderContextValues_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["CarouselSlider","React","forwardRef","props","ref","state","useCarouselSlider_unstable","useCarouselSliderStyles_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCAGoB;sCACG;+CACG;uCAEO;AAKjD,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IAEjC,MAAMG,UAAUC,IAAAA,8DAAAA,EAAwCJ;IACxD,8HAA8H;IAC9H,wGAAwG;IACxG,0EAA0E;IAC1E,OAAOK,IAAAA,mDAAAA,EAA8BL,OAAOG;AAC9C;AAEAR,eAAeW,WAAW,GAAG"}
+{"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":["CarouselSlider","React","forwardRef","props","ref","state","useCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCustomStyleHook_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;mCAGoB;sCACG;+CACG;uCAEO;qCACZ;AAKrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,MAAMI,UAAUC,IAAAA,8DAAAA,EAAwCL;IACxD,OAAOM,IAAAA,mDAAAA,EAA8BN,OAAOI;AAC9C;AAEAT,eAAeY,WAAW,GAAG"}

package/lib-commonjs/components/CarouselSlider/CarouselSlider.types.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * State used in rendering CarouselSlider
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/CarouselSlider/CarouselSlider.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n  /**\n   * The root viewport/window of the carousel\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n  /**\n   * cardFocus sets the carousel slider as a focus group,\n   * enabling left/right navigation of elements.\n   *\n   * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n   *\n   * Defaults: false\n   */\n  cardFocus?: boolean;\n};\n\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & Pick<CarouselSliderProps, 'cardFocus'>;\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n  /**\n   * The root viewport/window of the carousel\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n  /**\n   * cardFocus sets the carousel slider as a focus group,\n   * enabling left/right navigation of elements.\n   *\n   * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n   *\n   * Defaults: false\n   */\n  cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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 = () =>\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\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;IAEtB,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;IAAe;AAC1B"}
+{"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 = () =>\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":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;IAAe;AAC1B"}

package/lib-commonjs/components/CarouselSlider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselSlider';\nexport * from './CarouselSlider.types';\nexport * from './renderCarouselSlider';\nexport * from './useCarouselSlider';\nexport * from './useCarouselSliderStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export * from './CarouselSlider';\nexport * from './CarouselSlider.types';\nexport * from './renderCarouselSlider';\nexport * from './useCarouselSlider';\nexport * from './useCarouselSliderStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselSlider/renderCarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n  state: CarouselSliderState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselSliderSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["renderCarouselSlider_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,gCAAgC,CAC3CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAiCF;IAEjC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
+{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n  state: CarouselSliderState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselSliderSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["renderCarouselSlider_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,gCAAgC,CAC3CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAiCF;IAEjC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js

@@ -12,10 +12,12 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
+const _CarouselContext = require("../CarouselContext");
 const useCarouselSlider_unstable = (props, ref)=>{
     const { cardFocus = false } = props;
+    const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
     const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
-        circular: false,
+        circular,
         axis: 'horizontal',
         memorizeCurrent: false,
         // eslint-disable-next-line @typescript-eslint/naming-convention

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\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 focusableGroupAttr = useArrowNavigationGroup({\n    circular: false, // We don't want circular focus here, it's confusing in carousel.\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":["useCarouselSlider_unstable","props","ref","cardFocus","focusableGroupAttr","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;gCAfkC;iEACxB;8BAGiB;AAWjC,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYC,qBAAqB,CAAC;IAErD,OAAO;QACLD;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9Bb;YACAc,MAAM;YACN,GAAGf,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"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":["useCarouselSlider_unstable","props","ref","cardFocus","circular","useCarouselContext","ctx","focusableGroupAttr","useArrowNavigationGroup","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;gCAhBkC;iEACxB;8BAGiB;iCAC0B;AAW3D,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,QAAQ;IACvD,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDJ;QACAK,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaT,YAAYI,qBAAqB,CAAC;IAErD,OAAO;QACLJ;QACAU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9Bf;YACAgB,MAAM;YACN,GAAGjB,KAAK;YACR,GAAGW,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

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

@@ -38,4 +38,4 @@ const useCarouselSliderStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(carouselSliderClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useCarouselSliderStyles.styles.js.map
+};

package/lib-commonjs/components/CarouselViewport/CarouselViewport.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselViewport", {
+    enumerable: true,
+    get: function() {
+        return CarouselViewport;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselViewport = require("./useCarouselViewport");
+const _renderCarouselViewport = require("./renderCarouselViewport");
+const _useCarouselViewportStylesstyles = require("./useCarouselViewportStyles.styles");
+const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CarouselViewport = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselViewport.useCarouselViewport_unstable)(props, ref);
+    (0, _useCarouselViewportStylesstyles.useCarouselViewportStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselViewportStyles_unstable')(state);
+    const context = (0, _CarouselSliderContext.useCarouselSliderContextValues_unstable)(state);
+    return (0, _renderCarouselViewport.renderCarouselViewport_unstable)(state, context);
+});
+CarouselViewport.displayName = 'CarouselViewport';

package/lib-commonjs/components/CarouselViewport/CarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselViewport_unstable } from './useCarouselViewport';\nimport { renderCarouselViewport_unstable } from './renderCarouselViewport';\nimport { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';\nimport type { CarouselViewportProps } from './CarouselViewport.types';\nimport { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselViewport component - TODO: add more docs\n */\nexport const CarouselViewport: ForwardRefComponent<CarouselViewportProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselViewport_unstable(props, ref);\n\n  useCarouselViewportStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n\n  return renderCarouselViewport_unstable(state, context);\n});\n\nCarouselViewport.displayName = 'CarouselViewport';\n"],"names":["CarouselViewport","React","forwardRef","props","ref","state","useCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCustomStyleHook_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselViewport_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEsB;wCACG;iDACG;uCAEK;qCACZ;AAKrC,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IACnCG,IAAAA,gDAAAA,EAA4B,sCAAsCH;IAElE,MAAMI,UAAUC,IAAAA,8DAAAA,EAAwCL;IAExD,OAAOM,IAAAA,uDAAAA,EAAgCN,OAAOI;AAChD;AAEAT,iBAAiBY,WAAW,GAAG"}

package/lib-commonjs/components/CarouselViewport/CarouselViewport.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering CarouselViewport
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/CarouselViewport/CarouselViewport.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselSliderContextValue } from '../CarouselSlider/CarouselSlider.types';\n\nexport type CarouselViewportSlots = {\n  /**\n   * The viewport outer container, defining the size of the carousels visible and interactable area\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselViewport Props\n */\nexport type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;\n\n/**\n * State used in rendering CarouselViewport\n */\nexport type CarouselViewportState = ComponentState<Required<CarouselViewportSlots>> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAeA;;CAEC"}

package/lib-commonjs/components/CarouselViewport/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CarouselViewport"), exports);
+_export_star._(require("./CarouselViewport.types"), exports);
+_export_star._(require("./renderCarouselViewport"), exports);
+_export_star._(require("./useCarouselViewport"), exports);
+_export_star._(require("./useCarouselViewportStyles.styles"), exports);

package/lib-commonjs/components/CarouselViewport/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/index.ts"],"sourcesContent":["export * from './CarouselViewport';\nexport * from './CarouselViewport.types';\nexport * from './renderCarouselViewport';\nexport * from './useCarouselViewport';\nexport * from './useCarouselViewportStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselViewport_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselViewport_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
+const renderCarouselViewport_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselSliderContext.CarouselSliderContextProvider, {
+        value: contextValues.carouselSlider,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
+};

package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/renderCarouselViewport.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';\nimport { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselViewport\n */\nexport const renderCarouselViewport_unstable = (\n  state: CarouselViewportState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselViewportSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["renderCarouselViewport_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,kCAAkC,CAC7CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAmCF;IAEnC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselViewport_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselViewport_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _CarouselContext = require("../CarouselContext");
+const useCarouselViewport_unstable = (props, ref)=>{
+    const viewportRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.viewportRef);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref: (0, _reactutilities.useMergedRefs)(ref, viewportRef),
+            role: 'presentation',
+            // Draggable ensures dragging is supported (even if not enabled)
+            draggable: true,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewport.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselViewport.\n *\n * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,\n * before being passed to renderCarouselViewport_unstable.\n *\n * @param props - props from this instance of CarouselViewport\n * @param ref - reference to root HTMLDivElement of CarouselViewport\n */\nexport const useCarouselViewport_unstable = (\n  props: CarouselViewportProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselViewportState => {\n  const viewportRef = useCarouselContext(ctx => ctx.viewportRef);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, viewportRef),\n        role: 'presentation',\n        // Draggable ensures dragging is supported (even if not enabled)\n        draggable: true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useCarouselViewport_unstable","props","ref","viewportRef","useCarouselContext","ctx","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","draggable","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACuC;iCAEI;AAW3D,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,WAAW;IAE7D,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BR,KAAKS,IAAAA,6BAAAA,EAAcT,KAAKC;YACxBS,MAAM;YACN,gEAAgE;YAChEC,WAAW;YACX,GAAGZ,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    carouselViewportClassNames: function() {
+        return carouselViewportClassNames;
+    },
+    useCarouselViewportStyles_unstable: function() {
+        return useCarouselViewportStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselViewportClassNames = {
+    root: 'fui-CarouselViewport'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        B2u0y6b: "f6dzj5z",
+        a9b677: "f14z66ap"
+    }
+}, {
+    d: [
+        ".f6dzj5z{max-width:100%;}",
+        ".f14z66ap{width:auto;}"
+    ]
+});
+const useCarouselViewportStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselViewportClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselViewportStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselViewportClassNames = {\n    root: 'fui-CarouselViewport'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        maxWidth: '100%',\n        width: 'auto'\n    }\n});\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */ export const useCarouselViewportStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["carouselViewportClassNames","useCarouselViewportStyles_unstable","root","useStyles","__styles","B2u0y6b","a9b677","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,0BAA0B;eAA1BA;;IAaIC,kCAAkC;eAAlCA;;;uBAdwB;AAClC,MAAMD,6BAA6B;IACtCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAQX,MAAMN,qCAAsCO,CAAAA;IACnD;IACA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACX,2BAA2BE,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IACtG,OAAOF;AACX"}