feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-carousel/lib/components/Carousel/Carousel.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { useCarousel_unstable } from './useCarousel';
+import { renderCarousel_unstable } from './renderCarousel';
+import { useCarouselStyles_unstable } from './useCarouselStyles.styles';
+import { useCarouselContextValues_unstable } from './useCarouselContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Carousel is the context wrapper and container for all carousel content/controls,
+ * it has no direct style or slot opinions.
+ *
+ * Carousel also provides API interfaces for callbacks that will occur on navigation events.
+ */ export const Carousel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarousel_unstable(props, ref);
+    useCarouselStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);
+    const contextValues = useCarouselContextValues_unstable(state);
+    return renderCarousel_unstable(state, contextValues);
+});
+Carousel.displayName = 'Carousel';

node_modules/@fluentui/react-carousel/lib/components/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n *\n * Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n  const state = useCarousel_unstable(props, ref);\n\n  useCarouselStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n\n  const contextValues = useCarouselContextValues_unstable(state);\n\n  return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["React","useCarousel_unstable","renderCarousel_unstable","useCarouselStyles_unstable","useCarouselContextValues_unstable","useCustomStyleHook_unstable","Carousel","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAE1CN,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,MAAMC,gBAAgBP,kCAAkCM;IAExD,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/Carousel/Carousel.types.js

@@ -0,0 +1,3 @@
+/**
+ * @internal
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/Carousel/Carousel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselAppearance, CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultActiveIndex?: number;\n\n  /**\n   * The alignment of the carousel.\n   */\n  align?: 'center' | 'start' | 'end';\n\n  /**\n   * The value of the currently active page.\n   */\n  activeIndex?: number;\n\n  /**\n   * Sets visual treatment for the Carousel container.\n   *\n   * `flat`\n   * Retains the minimal styling used by default prior to introducing appearance-based styles.\n   *\n   * `elevated`\n   * Applies rounded corners, background, and shadow tokens so the Carousel is presented as a surfaced container.\n   *\n   * @default 'flat'\n   */\n  appearance?: CarouselAppearance;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n  /**\n   * Circular enables the carousel to loop back around on navigation past trailing index.\n   */\n  circular?: boolean;\n\n  /**\n   * Controls the number of carousel cards per navigation element, will default to 'auto'\n   * Recommended to set to '1' when using full page carousel cards.\n   */\n  groupSize?: number | 'auto';\n\n  /**\n   * Enables drag to scroll on carousel items.\n   * Defaults to: False\n   */\n  draggable?: boolean;\n\n  /**\n   * Adds whitespace to start/end so that 'align' prop is always respected for current index\n   * Defaults to: False\n   */\n  whitespace?: boolean;\n\n  /**\n   * Sets motion type as either 'slide' or 'fade'\n   * Defaults: 'slide'\n   *\n   * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * Note: Duration is not in milliseconds because Carousel uses an\n   * attraction physics simulation when scrolling instead of easings.\n   * Only values between 20-60 are recommended, 25 is the default.\n   */\n  motion?: CarouselMotion;\n\n  /**\n   * Localizes the string used to announce carousel page changes\n   * Defaults to: undefined\n   */\n  announcement?: CarouselAnnouncerFunction;\n\n  /**\n   * Choose a delay between autoplay transitions in milliseconds.\n   * Only active if Autoplay is enabled via CarouselAutoplayButton\n   *\n   * Defaults: 4000\n   */\n  autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n  isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n  /**\n   * The current carousel index, a change in index will not trigger the callback (use context index instead).\n   */\n  activeIndex: number;\n  /**\n   * The total number of slides to be navigated, accounts for grouping.\n   */\n  navItemsCount: number;\n  /**\n   * A breakdown of the card indexes contained within each slide index.\n   */\n  groupIndexList: number[][];\n  /**\n   * An array of the card DOM elements after render\n   */\n  slideNodes: HTMLElement[];\n  /**\n   * Whether the carousel has enough cards present to enable looping without issues.\n   */\n  canLoop?: boolean;\n}\n"],"names":[],"mappings":"AAoHA;;CAEC,GACD,WAqBC"}

node_modules/@fluentui/react-carousel/lib/components/Carousel/index.js

@@ -0,0 +1,4 @@
+export { Carousel } from './Carousel';
+export { renderCarousel_unstable } from './renderCarousel';
+export { useCarousel_unstable } from './useCarousel';
+export { carouselClassNames, useCarouselStyles_unstable } from './useCarouselStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export { Carousel } from './Carousel';\nexport type {\n  CarouselAnnouncerFunction,\n  CarouselMotion,\n  CarouselProps,\n  CarouselSlots,\n  CarouselState,\n  CarouselUpdateData,\n  CarouselVisibilityChangeEvent,\n  CarouselVisibilityEventDetail,\n} from './Carousel.types';\nexport { renderCarousel_unstable } from './renderCarousel';\nexport { useCarousel_unstable } from './useCarousel';\nexport { carouselClassNames, useCarouselStyles_unstable } from './useCarouselStyles.styles';\n"],"names":["Carousel","renderCarousel_unstable","useCarousel_unstable","carouselClassNames","useCarouselStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAWtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

node_modules/@fluentui/react-carousel/lib/components/Carousel/renderCarousel.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselProvider } from '../CarouselContext';
+/**
+ * Render the final JSX of Carousel
+ */ export const renderCarousel_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(CarouselProvider, {
+        value: contextValues.carousel,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-carousel/lib/components/Carousel/renderCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues): JSXElement => {\n  assertSlots<CarouselSlots>(state);\n\n  return (\n    <CarouselProvider value={contextValues.carousel}>\n      <state.root />\n    </CarouselProvider>\n  );\n};\n"],"names":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,gBAAgB,QAAQ,qBAAqB;AAGtD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarousel.js

@@ -0,0 +1,124 @@
+'use client';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { getIntrinsicElementProps, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useEmblaCarousel } from '../useEmblaCarousel';
+import { useAnnounce } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render Carousel.
+ *
+ * The returned state can be modified with hooks such as useCarouselStyles_unstable,
+ * before being passed to renderCarousel_unstable.
+ *
+ * @param props - props from this instance of Carousel
+ * @param ref - reference to root HTMLDivElement of Carousel
+ */ export function useCarousel_unstable(props, ref) {
+    'use no memo';
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide', autoplayInterval = 4000, appearance = 'flat' } = props;
+    const { dir } = useFluent();
+    const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = useEmblaCarousel({
+        align,
+        direction: dir,
+        loop: circular,
+        slidesToScroll: groupSize,
+        defaultActiveIndex: props.defaultActiveIndex,
+        activeIndex: props.activeIndex,
+        watchDrag: draggable,
+        containScroll: whitespace ? false : 'keepSnaps',
+        motion,
+        onDragIndexChange: onActiveIndexChange,
+        onAutoplayIndexChange: onActiveIndexChange,
+        autoplayInterval
+    });
+    const selectPageByElement = useEventCallback((event, element, jump)=>{
+        const foundIndex = carouselApi.scrollToElement(element, jump);
+        onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
+            event,
+            type: 'focus',
+            index: foundIndex
+        });
+        return foundIndex;
+    });
+    const selectPageByIndex = useEventCallback((event, index, jump)=>{
+        carouselApi.scrollToIndex(index, jump);
+        onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
+            event,
+            type: 'click',
+            index
+        });
+    });
+    const selectPageByDirection = useEventCallback((event, direction)=>{
+        const nextPageIndex = carouselApi.scrollInDirection(direction);
+        onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
+            event,
+            type: 'click',
+            index: nextPageIndex
+        });
+        return nextPageIndex;
+    });
+    const mergedContainerRef = useMergedRefs(ref, containerRef);
+    // Announce carousel updates
+    const announcementTextRef = React.useRef('');
+    const totalNavLength = React.useRef(0);
+    const navGroupRef = React.useRef([]);
+    const { announce } = useAnnounce();
+    const updateAnnouncement = useEventCallback(()=>{
+        if (totalNavLength.current <= 0 || !announcement) {
+            // Ignore announcements until slides discovered
+            return;
+        }
+        const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);
+        if (announcementText !== announcementTextRef.current) {
+            announcementTextRef.current = announcementText;
+            announce(announcementText, {
+                polite: true
+            });
+        }
+    });
+    useIsomorphicLayoutEffect(()=>{
+        // Subscribe to any non-index carousel state changes
+        return subscribeForValues((data)=>{
+            if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {
+                const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);
+                // Initialize our string to prevent updateAnnouncement from reading an initial load
+                announcementTextRef.current = announcementText;
+            }
+            totalNavLength.current = data.navItemsCount;
+            navGroupRef.current = data.groupIndexList;
+            updateAnnouncement();
+        });
+    }, [
+        subscribeForValues,
+        updateAnnouncement,
+        announcement
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        updateAnnouncement();
+    }, [
+        activeIndex,
+        updateAnnouncement
+    ]);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: mergedContainerRef,
+            role: 'region',
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        activeIndex,
+        appearance,
+        circular,
+        containerRef: mergedContainerRef,
+        viewportRef,
+        selectPageByElement,
+        selectPageByDirection,
+        selectPageByIndex,
+        subscribeForValues,
+        enableAutoplay,
+        resetAutoplay
+    };
+}

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselContextValues.js

@@ -0,0 +1,33 @@
+'use client';
+import * as React from 'react';
+export function useCarouselContextValues_unstable(state) {
+    const { activeIndex, appearance, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef, viewportRef } = state;
+    const carousel = React.useMemo(()=>({
+            activeIndex,
+            appearance,
+            selectPageByElement,
+            selectPageByDirection,
+            selectPageByIndex,
+            subscribeForValues,
+            enableAutoplay,
+            resetAutoplay,
+            circular,
+            containerRef,
+            viewportRef
+        }), [
+        activeIndex,
+        appearance,
+        selectPageByElement,
+        selectPageByDirection,
+        selectPageByIndex,
+        subscribeForValues,
+        enableAutoplay,
+        resetAutoplay,
+        circular,
+        containerRef,
+        viewportRef
+    ]);
+    return {
+        carousel
+    };
+}

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n  const {\n    activeIndex,\n    appearance,\n    selectPageByElement,\n    selectPageByDirection,\n    selectPageByIndex,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n    circular,\n    containerRef,\n    viewportRef,\n  } = state;\n\n  const carousel = React.useMemo(\n    () => ({\n      activeIndex,\n      appearance,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n      viewportRef,\n    }),\n    [\n      activeIndex,\n      appearance,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n      viewportRef,\n    ],\n  );\n\n  return { carousel };\n}\n"],"names":["React","useCarouselContextValues_unstable","state","activeIndex","appearance","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAK/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,UAAU,EACVC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACZ,GAAGX;IAEJ,MAAMY,WAAWd,MAAMe,OAAO,CAC5B,IAAO,CAAA;YACLZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselStyles.styles.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselClassNames = {
+  root: 'fui-Carousel'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B68tc82: "f1p9o1ba",
+    Eiaeu8: "f1115ve7",
+    qhf8xq: "f10pi13n"
+  },
+  elevated: {
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "flfurxc",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f16dxoy8"
+  }
+}, {
+  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1115ve7{overflow-anchor:none;}", ".f10pi13n{position:relative;}", [".flfurxc{margin:var(--spacingVerticalL);}", {
+    p: -1
+  }], [".f16dxoy8{padding:var(--spacingVerticalL);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const useCarouselStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    appearance
+  } = state;
+  state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","carouselClassNames","root","useStyles","B68tc82","Eiaeu8","qhf8xq","elevated","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useCarouselStyles_unstable","state","styles","appearance","className"],"sources":["useCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselClassNames = {\n    root: 'fui-Carousel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n        overflowX: 'hidden',\n        overflowAnchor: 'none',\n        position: 'relative'\n    },\n    elevated: {\n        // Reserve vertical space so the drop shadow has room to render\n        // without being clipped by surrounding layout or overflow rules.\n        margin: tokens.spacingVerticalL,\n        padding: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEoB;EAAW,CAAC,GAAGF,KAAK;EAC5BA,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAGzB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,UAAU,KAAK,UAAU,IAAID,MAAM,CAACf,QAAQ,EAAEc,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC7I,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselStyles.styles.raw.js

@@ -0,0 +1,31 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselClassNames = {
+    root: 'fui-Carousel'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        // Only hide horizontal overflow to enable focus border to bleed bounds vertically
+        overflowX: 'hidden',
+        overflowAnchor: 'none',
+        position: 'relative'
+    },
+    elevated: {
+        // Reserve vertical space so the drop shadow has room to render
+        // without being clipped by surrounding layout or overflow rules.
+        margin: tokens.spacingVerticalL,
+        padding: tokens.spacingVerticalL
+    }
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */ export const useCarouselStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/Carousel/useCarouselStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/useCarouselStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { CarouselSlots, CarouselState } from './Carousel.types';\n\nexport const carouselClassNames: SlotClassNames<CarouselSlots> = {\n  root: 'fui-Carousel',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n    overflowX: 'hidden',\n    overflowAnchor: 'none',\n    position: 'relative',\n  },\n  elevated: {\n    // Reserve vertical space so the drop shadow has room to render\n    // without being clipped by surrounding layout or overflow rules.\n    margin: tokens.spacingVerticalL,\n    padding: tokens.spacingVerticalL,\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCarouselStyles_unstable = (state: CarouselState): CarouselState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance } = state;\n\n  state.root.className = mergeClasses(\n    carouselClassNames.root,\n    styles.root,\n    appearance === 'elevated' && styles.elevated,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselClassNames","root","useStyles","overflowX","overflowAnchor","position","elevated","margin","spacingVerticalL","padding","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJ,kFAAkF;QAClFE,WAAW;QACXC,gBAAgB;QAChBC,UAAU;IACZ;IACAC,UAAU;QACR,+DAA+D;QAC/D,iEAAiE;QACjEC,QAAQR,OAAOS,gBAAgB;QAC/BC,SAASV,OAAOS,gBAAgB;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,UAAU,EAAE,GAAGF;IAEvBA,MAAMV,IAAI,CAACa,SAAS,GAAGhB,aACrBE,mBAAmBC,IAAI,EACvBW,OAAOX,IAAI,EACXY,eAAe,cAAcD,OAAON,QAAQ,EAC5CK,MAAMV,IAAI,CAACa,SAAS;IAEtB,OAAOH;AACT,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';
+import { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';
+import { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the
+ * CarouselAutoplayButton which must be present for auto-play to be enabled.
+ *
+ * If CarouselAutoplayButton is present, auto-play will default to true on mount.
+ */ export const CarouselAutoplayButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselAutoplayButton_unstable(props, ref);
+    useCarouselAutoplayButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);
+    return renderCarouselAutoplayButton_unstable(state);
+});
+CarouselAutoplayButton.displayName = 'CarouselAutoplayButton';

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselAutoplayButton_unstable(props, ref);\n\n    useCarouselAutoplayButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n\n    return renderCarouselAutoplayButton_unstable(state);\n  },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["React","useCarouselAutoplayButton_unstable","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","CarouselAutoplayButton","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;;;;;CAKC,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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The updated autoplay value.\n   */\n  checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/**\n * CarouselAutoplayButton Props\n */\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n  ComponentProps<CarouselAutoplayButtonSlots> & {\n    /**\n     * Callback that informs the user when internal autoplay value has changed\n     */\n    onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n  };\n\n/**\n * State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/index.js

@@ -0,0 +1,4 @@
+export { CarouselAutoplayButton } from './CarouselAutoplayButton';
+export { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';
+export { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';
+export { carouselAutoplayButtonClassNames, useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export { CarouselAutoplayButton } from './CarouselAutoplayButton';\nexport type {\n  CarouselAutoplayAriaLabelFunction,\n  CarouselAutoplayButtonProps,\n  CarouselAutoplayButtonSlots,\n  CarouselAutoplayButtonState,\n  CarouselAutoplayChangeData,\n} from './CarouselAutoplayButton.types';\nexport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nexport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nexport {\n  carouselAutoplayButtonClassNames,\n  useCarouselAutoplayButtonStyles_unstable,\n} from './useCarouselAutoplayButtonStyles.styles';\n"],"names":["CarouselAutoplayButton","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButton_unstable","carouselAutoplayButtonClassNames","useCarouselAutoplayButtonStyles_unstable"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAQlE,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SACEC,gCAAgC,EAChCC,wCAAwC,QACnC,2CAA2C"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js

@@ -0,0 +1,9 @@
+import { assertSlots } from '@fluentui/react-utilities';
+import { renderToggleButton_unstable } from '@fluentui/react-button';
+/**
+ * Render the final JSX of CarouselAutoplayButton
+ */ export const renderCarouselAutoplayButton_unstable = (state)=>{
+    assertSlots(state);
+    // We render the underlying react-button with injected carousel functionality
+    return renderToggleButton_unstable(state);
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState): JSXElement => {\n  assertSlots<CarouselAutoplayButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderToggleButton_unstable(state);\n};\n"],"names":["assertSlots","renderToggleButton_unstable","renderCarouselAutoplayButton_unstable","state"],"mappings":"AAAA,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,2BAA2B,QAAQ,yBAAyB;AAErE;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDH,YAAyCG;IAEzC,6EAA6E;IAC7E,OAAOF,4BAA4BE;AACrC,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js

@@ -0,0 +1,61 @@
+'use client';
+import { useToggleButton_unstable } from '@fluentui/react-button';
+import { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';
+import { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselAutoplayButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,
+ * before being passed to renderCarouselAutoplayButton_unstable.
+ *
+ * @param props - props from this instance of CarouselAutoplayButton
+ * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton
+ */ export const useCarouselAutoplayButton_unstable = (props, ref)=>{
+    const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;
+    const [autoplay, setAutoplay] = useControllableState({
+        state: checked,
+        defaultState: defaultChecked,
+        initialState: false
+    });
+    const enableAutoplay = useCarouselContext((ctx)=>ctx.enableAutoplay);
+    React.useEffect(()=>{
+        // Initialize carousel autoplay based on button state
+        enableAutoplay(autoplay);
+        return ()=>{
+            // We uninitialize autoplay if the button gets unmounted.
+            enableAutoplay(false);
+        };
+    }, [
+        autoplay,
+        enableAutoplay
+    ]);
+    const handleClick = (event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const newValue = !autoplay;
+        setAutoplay(newValue);
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event, {
+            event,
+            type: 'click',
+            checked: newValue
+        });
+    };
+    return {
+        // We lean on react-button class to handle styling and icon enhancements
+        ...useToggleButton_unstable({
+            icon: slot.optional(props.icon, {
+                defaultProps: {
+                    children: autoplay ? /*#__PURE__*/ React.createElement(PauseCircleRegular, null) : /*#__PURE__*/ React.createElement(PlayCircleRegular, null)
+                },
+                renderByDefault: true,
+                elementType: 'span'
+            }),
+            ...buttonProps,
+            checked: autoplay,
+            onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
+        }, ref)
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n  props: CarouselAutoplayButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n  const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n  const [autoplay, setAutoplay] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n  const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n  React.useEffect(() => {\n    // Initialize carousel autoplay based on button state\n    enableAutoplay(autoplay);\n\n    return () => {\n      // We uninitialize autoplay if the button gets unmounted.\n      enableAutoplay(false);\n    };\n  }, [autoplay, enableAutoplay]);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    const newValue = !autoplay;\n\n    setAutoplay(newValue);\n    onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n  };\n\n  return {\n    // We lean on react-button class to handle styling and icon enhancements\n    ...useToggleButton_unstable(\n      {\n        icon: slot.optional(props.icon, {\n          defaultProps: {\n            children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n          },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        ...buttonProps,\n        checked: autoplay,\n        onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n      },\n      ref as React.Ref<HTMLButtonElement>,\n    ),\n  };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAC9E,SAASC,cAAc,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACzG,YAAYC,WAAW,QAAQ;AAG/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGC,aAAa,GAAGL;IAErE,MAAM,CAACM,UAAUC,YAAY,GAAGb,qBAAqB;QACnDc,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBb,mBAAmBc,CAAAA,MAAOA,IAAID,cAAc;IAEnEf,MAAMiB,SAAS,CAAC;QACd,qDAAqD;QACrDF,eAAeL;QAEf,OAAO;YACL,yDAAyD;YACzDK,eAAe;QACjB;IACF,GAAG;QAACL;QAAUK;KAAe;IAE7B,MAAMG,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACX;QAElBC,YAAYU;QACZf,4BAAAA,sCAAAA,gBAAkBa,OAAO;YAAEA;YAAOG,MAAM;YAASf,SAASc;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAG5B,yBACD;YACE8B,MAAM1B,KAAK2B,QAAQ,CAACpB,MAAMmB,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUhB,yBAAW,oBAACf,0CAAwB,oBAACD;gBACjD;gBACAiC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGnB,WAAW;YACdF,SAASG;YACTmB,SAAS9B,iBAAiBH,eAAesB,aAAad,MAAMyB,OAAO;QACrE,GACAxB,IACD;IACH;AACF,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
+import { tokens } from '@fluentui/react-theme';
+export const carouselAutoplayButtonClassNames = {
+  root: 'fui-CarouselAutoplayButton',
+  icon: 'fui-CarouselAutoplayButton__icon'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bkecrkj: "fc5wo7j",
+    B6of3ja: "fgr6219",
+    jrapky: "f10jk5vf",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    sj55zd: "fkfq4zb",
+    De3pzq: "fkfdr9r",
+    eoavqd: "f8491dx"
+  }
+}, {
+  d: [".fc5wo7j{pointer-events:all;}", ".fgr6219{margin-top:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"],
+  h: [".f8491dx:hover{cursor:pointer;}"]
+});
+/**
+ * Apply styling to the CarouselAutoplayButton slots based on the state
+ */
+export const useCarouselAutoplayButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  useToggleButtonStyles_unstable(state);
+  state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","Bkecrkj","B6of3ja","jrapky","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","De3pzq","eoavqd","d","h","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"sources":["useCarouselAutoplayButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselAutoplayButtonClassNames = {\n    root: 'fui-CarouselAutoplayButton',\n    icon: 'fui-CarouselAutoplayButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        pointerEvents: 'all',\n        marginTop: 'auto',\n        marginBottom: 'auto',\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        color: tokens.colorNeutralForeground2,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha,\n        ':hover': {\n            cursor: 'pointer'\n        }\n    }\n});\n/**\n * Apply styling to the CarouselAutoplayButton slots based on the state\n */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    useToggleButtonStyles_unstable(state);\n    state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BL,8BAA8B,CAACmB,KAAK,CAAC;EACrCA,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC7G,IAAIF,KAAK,CAACf,IAAI,EAAE;IACZe,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACE,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACpG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js

@@ -0,0 +1,35 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
+import { tokens } from '@fluentui/react-theme';
+export const carouselAutoplayButtonClassNames = {
+    root: 'fui-CarouselAutoplayButton',
+    icon: 'fui-CarouselAutoplayButton__icon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        pointerEvents: 'all',
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        ...shorthands.borderColor(tokens.colorTransparentStroke),
+        color: tokens.colorNeutralForeground2,
+        backgroundColor: tokens.colorNeutralBackgroundAlpha,
+        ':hover': {
+            cursor: 'pointer'
+        }
+    }
+});
+/**
+ * Apply styling to the CarouselAutoplayButton slots based on the state
+ */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    useToggleButtonStyles_unstable(state);
+    state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonSlots, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselAutoplayButtonClassNames: SlotClassNames<CarouselAutoplayButtonSlots> = {\n  root: 'fui-CarouselAutoplayButton',\n  icon: 'fui-CarouselAutoplayButton__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    pointerEvents: 'all',\n    marginTop: 'auto',\n    marginBottom: 'auto',\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackgroundAlpha,\n    ':hover': {\n      cursor: 'pointer',\n    },\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the CarouselAutoplayButton slots based on the state\n */\nexport const useCarouselAutoplayButtonStyles_unstable = (\n  state: CarouselAutoplayButtonState,\n): CarouselAutoplayButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  useToggleButtonStyles_unstable(state);\n\n  state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","pointerEvents","marginTop","marginBottom","borderColor","colorTransparentStroke","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","cursor","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BM,MAAM;QACJG,eAAe;QACfC,WAAW;QACXC,cAAc;QACd,GAAGT,WAAWU,WAAW,CAACR,OAAOS,sBAAsB,CAAC;QACxDC,OAAOV,OAAOW,uBAAuB;QACrCC,iBAAiBZ,OAAOa,2BAA2B;QACnD,UAAU;YACRC,QAAQ;QACV;IACF;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASb;IAEfL,+BAA+BiB;IAE/BA,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,iCAAiCC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAE5G,IAAIF,MAAMb,IAAI,EAAE;QACda,MAAMb,IAAI,CAACe,SAAS,GAAGrB,aAAaI,iCAAiCE,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG;IAEA,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/CarouselButton.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useCarouselButton_unstable } from './useCarouselButton';
+import { renderCarouselButton_unstable } from './renderCarouselButton';
+import { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A default navigation button that will set value to the next/previous page,
+ * driven by it's type 'next' or 'previous'.
+ */ export const CarouselButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselButton_unstable(props, ref);
+    useCarouselButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);
+    return renderCarouselButton_unstable(state);
+});
+CarouselButton.displayName = 'CarouselButton';

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/CarouselButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselButton_unstable(props, ref);\n\n  useCarouselButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n  return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["React","useCarouselButton_unstable","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","CarouselButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/CarouselButton.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselButton
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/CarouselButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselButton Props\n */\nexport type CarouselButtonProps = Partial<ButtonProps> &\n  ComponentProps<CarouselButtonSlots> & {\n    /**\n     * Dictates whether button will be of type go next or go previous\n     * Default: 'next'\n     */\n    navType?: 'prev' | 'next';\n  };\n\n/**\n * State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n  ComponentState<CarouselButtonSlots> &\n  Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WAEiD"}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/index.js

@@ -0,0 +1,4 @@
+export { CarouselButton } from './CarouselButton';
+export { renderCarouselButton_unstable } from './renderCarouselButton';
+export { useCarouselButton_unstable } from './useCarouselButton';
+export { carouselButtonClassNames, useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export { CarouselButton } from './CarouselButton';\nexport type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nexport { renderCarouselButton_unstable } from './renderCarouselButton';\nexport { useCarouselButton_unstable } from './useCarouselButton';\nexport { carouselButtonClassNames, useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\n"],"names":["CarouselButton","renderCarouselButton_unstable","useCarouselButton_unstable","carouselButtonClassNames","useCarouselButtonStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/renderCarouselButton.js

@@ -0,0 +1,9 @@
+import { assertSlots } from '@fluentui/react-utilities';
+import { renderButton_unstable } from '@fluentui/react-button';
+/**
+ * Render the final JSX of CarouselButton
+ */ export const renderCarouselButton_unstable = (state)=>{
+    assertSlots(state);
+    // We render the underlying react-button with injected carousel functionality
+    return renderButton_unstable(state);
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/renderCarouselButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselButton/renderCarouselButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselButtonState, CarouselButtonSlots } from './CarouselButton.types';\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselButton\n */\nexport const renderCarouselButton_unstable = (state: CarouselButtonState): JSXElement => {\n  assertSlots<CarouselButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderButton_unstable(state);\n};\n"],"names":["assertSlots","renderButton_unstable","renderCarouselButton_unstable","state"],"mappings":"AAAA,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,6EAA6E;IAC7E,OAAOF,sBAAsBE;AAC/B,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/useCarouselButton.js

@@ -0,0 +1,92 @@
+'use client';
+import { useButton_unstable } from '@fluentui/react-button';
+import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
+import { mergeCallbacks, useEventCallback, slot, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { carouselButtonClassNames } from './useCarouselButtonStyles.styles';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render CarouselButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,
+ * before being passed to renderCarouselButton_unstable.
+ *
+ * @param props - props from this instance of CarouselButton
+ * @param ref - reference to root HTMLDivElement of CarouselButton
+ */ export const useCarouselButton_unstable = (props, ref)=>{
+    const { navType = 'next', ...buttonProps } = props;
+    // Locally tracks the total number of slides, will only update if this changes.
+    const [totalSlides, setTotalSlides] = React.useState(0);
+    const { dir } = useFluent();
+    const buttonRef = React.useRef(undefined);
+    const circular = useCarouselContext((ctx)=>ctx.circular);
+    const [canLoop, setCanLoop] = React.useState(circular);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
+    const selectPageByDirection = useCarouselContext((ctx)=>ctx.selectPageByDirection);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = useCarouselContext((ctx)=>ctx.resetAutoplay);
+    const isTrailing = useCarouselContext((ctx)=>{
+        if (circular && canLoop) {
+            return false;
+        }
+        if (navType === 'prev') {
+            return ctx.activeIndex === 0;
+        }
+        return ctx.activeIndex === totalSlides - 1;
+    });
+    const handleClick = (event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const nextIndex = selectPageByDirection(event, navType);
+        let _trailing = false;
+        if (navType === 'prev') {
+            _trailing = nextIndex === 0;
+        } else {
+            _trailing = nextIndex === totalSlides - 1;
+        }
+        if (!circular && _trailing && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
+            // Focus non-disabled element
+            const buttonRefs = containerRef.current.querySelectorAll(`.${carouselButtonClassNames.root}`);
+            buttonRefs.forEach((_buttonRef)=>{
+                if (_buttonRef !== buttonRef.current) {
+                    _buttonRef.focus();
+                }
+            });
+        }
+        resetAutoplay();
+    };
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            if (data.canLoop !== undefined) {
+                // Only update canLoop if it has been defined by the carousel engine
+                setCanLoop(data.canLoop);
+            }
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues
+    ]);
+    const nextArrowIcon = dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronRightRegular, null) : /*#__PURE__*/ React.createElement(ChevronLeftRegular, null);
+    const prevArrowIcon = dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronLeftRegular, null) : /*#__PURE__*/ React.createElement(ChevronRightRegular, null);
+    return {
+        navType,
+        // We lean on react-button class to handle styling and icon enhancements
+        ...useButton_unstable({
+            icon: slot.optional(props.icon, {
+                defaultProps: {
+                    children: navType === 'next' ? nextArrowIcon : prevArrowIcon
+                },
+                renderByDefault: true,
+                elementType: 'span'
+            }),
+            disabled: isTrailing,
+            tabIndex: isTrailing ? -1 : 0,
+            'aria-disabled': isTrailing,
+            appearance: 'subtle',
+            ...buttonProps,
+            onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
+        }, useMergedRefs(ref, buttonRef))
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/useCarouselButtonStyles.styles.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+import { tokens } from '@fluentui/react-theme';
+export const carouselButtonClassNames = {
+  root: 'fui-CarouselButton',
+  icon: 'fui-CarouselButton__icon'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B6of3ja: "fgr6219",
+    jrapky: "f10jk5vf",
+    sj55zd: "fkfq4zb",
+    De3pzq: "fkfdr9r",
+    Bkecrkj: "fc5wo7j",
+    eoavqd: "f8491dx"
+  }
+}, {
+  d: [".fgr6219{margin-top:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}", ".fc5wo7j{pointer-events:all;}"],
+  h: [".f8491dx:hover{cursor:pointer;}"]
+});
+/**
+ * Apply styling to the CarouselButton slots based on the state
+ */
+export const useCarouselButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state = {
+    ...state,
+    ...useButtonStyles_unstable(state)
+  };
+  state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/useCarouselButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","B6of3ja","jrapky","sj55zd","De3pzq","Bkecrkj","eoavqd","d","h","useCarouselButtonStyles_unstable","state","styles","className"],"sources":["useCarouselButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselButtonClassNames = {\n    root: 'fui-CarouselButton',\n    icon: 'fui-CarouselButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginTop: 'auto',\n        marginBottom: 'auto',\n        color: tokens.colorNeutralForeground2,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha,\n        pointerEvents: 'all',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    }\n});\n/**\n * Apply styling to the CarouselButton slots based on the state\n */ export const useCarouselButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state = {\n        ...state,\n        ...useButtonStyles_unstable(state)\n    };\n    state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,GAAG;IACJ,GAAGA,KAAK;IACR,GAAGf,wBAAwB,CAACe,KAAK;EACrC,CAAC;EACDA,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACrG,IAAIF,KAAK,CAACX,IAAI,EAAE;IACZW,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGlB,YAAY,CAACG,wBAAwB,CAACE,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EAC5F;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js

@@ -0,0 +1,37 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+import { tokens } from '@fluentui/react-theme';
+export const carouselButtonClassNames = {
+    root: 'fui-CarouselButton',
+    icon: 'fui-CarouselButton__icon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        color: tokens.colorNeutralForeground2,
+        backgroundColor: tokens.colorNeutralBackgroundAlpha,
+        pointerEvents: 'all',
+        ':hover': {
+            cursor: 'pointer'
+        }
+    }
+});
+/**
+ * Apply styling to the CarouselButton slots based on the state
+ */ export const useCarouselButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state = {
+        ...state,
+        ...useButtonStyles_unstable(state)
+    };
+    state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselButton/useCarouselButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselButtonClassNames: SlotClassNames<CarouselButtonSlots> = {\n  root: 'fui-CarouselButton',\n  icon: 'fui-CarouselButton__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginTop: 'auto',\n    marginBottom: 'auto',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackgroundAlpha,\n    pointerEvents: 'all',\n    ':hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\n/**\n * Apply styling to the CarouselButton slots based on the state\n */\nexport const useCarouselButtonStyles_unstable = (state: CarouselButtonState): CarouselButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state = {\n    ...state,\n    ...useButtonStyles_unstable(state),\n  };\n\n  state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","marginTop","marginBottom","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","pointerEvents","cursor","useCarouselButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,MAAM;QACJG,WAAW;QACXC,cAAc;QACdC,OAAOP,OAAOQ,uBAAuB;QACrCC,iBAAiBT,OAAOU,2BAA2B;QACnDC,eAAe;QACf,UAAU;YACRC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASX;IAEfU,QAAQ;QACN,GAAGA,KAAK;QACR,GAAGf,yBAAyBe,MAAM;IACpC;IAEAA,MAAMZ,IAAI,CAACc,SAAS,GAAGlB,aAAaG,yBAAyBC,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IAEpG,IAAIF,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACa,SAAS,GAAGlB,aAAaG,yBAAyBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACzF;IAEA,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { useCarouselCard_unstable } from './useCarouselCard';
+import { renderCarouselCard_unstable } from './renderCarouselCard';
+import { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The defining wrapper of a carousel's indexed content, they will take up the full
+ * viewport of CarouselSlider or div wrapper,
+ * users may place multiple items within this Card if desired, with consideration of viewport width.
+ *
+ * Clickable actions within the content area are available via mouse and tab as expected,
+ * non-active card content will be set to inert until moved to active card.
+ */ export const CarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselCard_unstable(props, ref);
+    useCarouselCardStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);
+    return renderCarouselCard_unstable(state);
+});
+CarouselCard.displayName = 'CarouselCard';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselCard_unstable(props, ref);\n\n  useCarouselCardStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n  return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselCard
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselCardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselCard Props\n */\nexport type CarouselCardProps = ComponentProps<CarouselCardSlots> & {\n  /**\n   * Sets the card styling to be responsive based on content.\n   */\n  autoSize?: boolean;\n};\n\n/**\n * State used in rendering CarouselCard\n */\nexport type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAAwG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js

@@ -0,0 +1,4 @@
+export { CarouselCard } from './CarouselCard';
+export { renderCarouselCard_unstable } from './renderCarouselCard';
+export { useCarouselCard_unstable } from './useCarouselCard';
+export { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselCard
+ */ export const renderCarouselCard_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/renderCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselCardState, CarouselCardSlots } from './CarouselCard.types';\n\n/**\n * Render the final JSX of CarouselCard\n */\nexport const renderCarouselCard_unstable = (state: CarouselCardState): JSXElement => {\n  assertSlots<CarouselCardSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselCard_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCard.js

@@ -0,0 +1,99 @@
+'use client';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useMergedRefs, useId } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';
+import { carouselCardClassNames } from './useCarouselCardStyles.styles';
+import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Create the state required to render CarouselCard.
+ *
+ * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,
+ * before being passed to renderCarouselCard_unstable.
+ *
+ * @param props - props from this instance of CarouselCard
+ * @param ref - reference to root HTMLDivElement of CarouselCard
+ */ export const useCarouselCard_unstable = (props, ref)=>{
+    const { autoSize } = props;
+    const elementRef = React.useRef(null);
+    const isMouseEvent = React.useRef(false);
+    const selectPageByElement = useCarouselContext((ctx)=>ctx.selectPageByElement);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
+    const { cardFocus } = useCarouselSliderContext();
+    const focusAttr = useFocusableGroup({
+        tabBehavior: 'limited'
+    });
+    const focusAttrProps = cardFocus ? {
+        ...focusAttr,
+        tabIndex: 0
+    } : {};
+    // We attach a unique card id if user does not provide
+    const id = useId(carouselCardClassNames.root, props.id);
+    React.useEffect(()=>{
+        const element = elementRef.current;
+        if (element) {
+            const listener = (_e)=>{
+                const event = _e;
+                // When there is no tab index present, only current cards should be visible to accessibility
+                if (!cardFocus) {
+                    const hidden = !event.detail.isVisible;
+                    element.ariaHidden = hidden.toString();
+                    element.inert = hidden;
+                }
+            };
+            element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            return ()=>{
+                element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            };
+        }
+    }, [
+        cardFocus
+    ]);
+    const handleFocus = React.useCallback((e)=>{
+        if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
+            var // We want to prevent any browser scroll intervention for 'offscreen' focus
+            _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
+        }
+        // Mouse focus event has been consumed
+        isMouseEvent.current = false;
+    }, [
+        selectPageByElement,
+        containerRef
+    ]);
+    const handlePointerDown = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = true;
+        }
+    };
+    const handlePointerUp = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = false;
+        }
+    };
+    const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);
+    const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);
+    const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);
+    const state = {
+        autoSize,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(elementRef, ref),
+            role: 'tabpanel',
+            tabIndex: cardFocus ? 0 : undefined,
+            ...props,
+            id,
+            onFocusCapture,
+            onPointerUp,
+            onPointerDown,
+            ...focusAttrProps
+        }), {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js

@@ -0,0 +1,64 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselCardClassNames = {
+  root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fg68ejw",
+    B2u0y6b: "f6dzj5z"
+  },
+  autoSize: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fd9q35j",
+    Bf4jedk: "fy77jfu",
+    a9b677: "f14z66ap",
+    B2u0y6b: "f6dzj5z"
+  },
+  elevated: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    E5pizo: "f1hg901r",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  }
+}, {
+  d: [[".fg68ejw{flex:0 0 100%;}", {
+    p: -1
+  }], ".f6dzj5z{max-width:100%;}", [".fd9q35j{flex:0 0 auto;}", {
+    p: -1
+  }], ".fy77jfu{min-width:0;}", ".f14z66ap{width:auto;}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".f1hg901r{box-shadow:var(--shadow16);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */
+export const useCarouselCardStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    autoSize
+  } = state;
+  const appearance = useCarouselContext(context => context.appearance);
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselCardClassNames = {\n    root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flex: '0 0 100%',\n        maxWidth: '100%'\n    },\n    autoSize: {\n        flex: '0 0 auto' /* Adapt slide size to its content */ ,\n        minWidth: 0,\n        width: 'auto',\n        maxWidth: '100%'\n    },\n    elevated: {\n        borderRadius: tokens.borderRadiusXLarge,\n        boxShadow: tokens.shadow16,\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n    'use no memo';\n    const { autoSize } = state;\n    const appearance = useCarouselContext((context)=>context.appearance);\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,IAAIC,kBAAkB,QAAQ,oBAAoB;AACtF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;EAAAI,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;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,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEhB;EAAS,CAAC,GAAGgB,KAAK;EAC1B,MAAMC,UAAU,GAAG1B,kBAAkB,CAAE2B,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;EACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1BsB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,GAAGhC,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;EAC9K,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js

@@ -0,0 +1,36 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselCardClassNames = {
+    root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        flex: '0 0 100%',
+        maxWidth: '100%'
+    },
+    autoSize: {
+        flex: '0 0 auto' /* Adapt slide size to its content */ ,
+        minWidth: 0,
+        width: 'auto',
+        maxWidth: '100%'
+    },
+    elevated: {
+        borderRadius: tokens.borderRadiusXLarge,
+        boxShadow: tokens.shadow16,
+        overflow: 'hidden'
+    }
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */ export const useCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const { autoSize } = state;
+    const appearance = useCarouselContext((context)=>context.appearance);
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n  root: 'fui-CarouselCard',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flex: '0 0 100%',\n    maxWidth: '100%',\n  },\n  autoSize: {\n    flex: '0 0 auto' /* Adapt slide size to its content */,\n    minWidth: 0,\n    width: 'auto',\n    maxWidth: '100%',\n  },\n  elevated: {\n    borderRadius: tokens.borderRadiusXLarge,\n    boxShadow: tokens.shadow16,\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n  'use no memo';\n\n  const { autoSize } = state;\n  const appearance = useCarouselContext(context => context.appearance);\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    carouselCardClassNames.root,\n    styles.root,\n    appearance === 'elevated' && styles.elevated,\n    autoSize && styles.autoSize,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,OAAOa,kBAAkB;QACvCC,WAAWd,OAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,aAAajB,mBAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;IACfa,MAAMd,IAAI,CAACkB,SAAS,GAAGvB,aACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselContext.js

@@ -0,0 +1,26 @@
+'use client';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const carouselContextDefaultValue = {
+    activeIndex: 0,
+    appearance: 'flat',
+    selectPageByElement: ()=>{
+        return 0;
+    },
+    selectPageByDirection: ()=>{
+        return 0;
+    },
+    selectPageByIndex: ()=>{
+    /** noop */ },
+    subscribeForValues: ()=>()=>{
+        /** noop */ },
+    enableAutoplay: ()=>{
+    /** noop */ },
+    resetAutoplay: ()=>{
+    /** noop */ },
+    circular: false,
+    containerRef: undefined,
+    viewportRef: undefined
+};
+const CarouselContext = createContext(undefined);
+export const CarouselProvider = CarouselContext.Provider;
+export const useCarouselContext_unstable = (selector)=>useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue)=>selector(ctx));

node_modules/@fluentui/react-carousel/lib/components/CarouselContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselContext.ts"],"sourcesContent":["'use client';\n\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { CarouselContextValue } from './CarouselContext.types';\n\nexport const carouselContextDefaultValue: CarouselContextValue = {\n  activeIndex: 0,\n  appearance: 'flat',\n  selectPageByElement: () => {\n    return 0;\n  },\n  selectPageByDirection: () => {\n    return 0;\n  },\n  selectPageByIndex: () => {\n    /** noop */\n  },\n  subscribeForValues: () => () => {\n    /** noop */\n  },\n  enableAutoplay: () => {\n    /** noop */\n  },\n  resetAutoplay: () => {\n    /** noop */\n  },\n  circular: false,\n  containerRef: undefined,\n  viewportRef: undefined,\n};\n\nconst CarouselContext = createContext<CarouselContextValue | undefined>(undefined);\n\nexport const CarouselProvider = CarouselContext.Provider;\n\nexport const useCarouselContext_unstable = <T>(selector: ContextSelector<CarouselContextValue, T>): T =>\n  useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","carouselContextDefaultValue","activeIndex","appearance","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","undefined","viewportRef","CarouselContext","CarouselProvider","Provider","useCarouselContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGtG,OAAO,MAAMC,8BAAoD;IAC/DC,aAAa;IACbC,YAAY;IACZC,qBAAqB;QACnB,OAAO;IACT;IACAC,uBAAuB;QACrB,OAAO;IACT;IACAC,mBAAmB;IACjB,SAAS,GACX;IACAC,oBAAoB,IAAM;QACxB,SAAS,GACX;IACAC,gBAAgB;IACd,SAAS,GACX;IACAC,eAAe;IACb,SAAS,GACX;IACAC,UAAU;IACVC,cAAcC;IACdC,aAAaD;AACf,EAAE;AAEF,MAAME,kBAAkBf,cAAgDa;AAExE,OAAO,MAAMG,mBAAmBD,gBAAgBE,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAIC,WAC7ClB,mBAAmBc,iBAAiB,CAACK,MAAMlB,2BAA2B,GAAKiB,SAASC,MAAM"}

node_modules/@fluentui/react-carousel/lib/components/CarouselContext.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-carousel/lib/components/CarouselContext.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselContext.types.ts"],"sourcesContent":["import type { EventData } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselUpdateData } from '../Carousel';\n\nexport type CarouselAppearance = 'flat' | 'elevated';\n\nexport type CarouselIndexChangeData = (\n  | EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>>\n  | EventData<'focus', React.FocusEvent>\n  | EventData<'drag', PointerEvent | MouseEvent>\n  | EventData<'autoplay', Event>\n) & {\n  /**\n   * The index to be set after event has occurred.\n   */\n  index: number;\n};\n\nexport type CarouselContextValue = {\n  activeIndex: number;\n  appearance?: CarouselAppearance;\n  circular: boolean;\n  selectPageByElement: (event: React.FocusEvent, element: HTMLElement, jump?: boolean) => number;\n  selectPageByDirection: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n    direction: 'next' | 'prev',\n  ) => number;\n  selectPageByIndex: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n    value: number,\n    jump?: boolean,\n  ) => void;\n  subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;\n  enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;\n  resetAutoplay: () => void;\n  // Container with controls passed to carousel engine\n  containerRef?: React.RefObject<HTMLDivElement | null>;\n  // Viewport without controls used for interactive functionality (draggable, pause autoplay etc.)\n  viewportRef?: React.RefObject<HTMLDivElement | null>;\n};\n\n/**\n * Context shared between Carousel and its children components\n */\nexport type CarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNav.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { useCarouselNavContextValues_unstable } from './CarouselNavContext';
+import { renderCarouselNav_unstable } from './renderCarouselNav';
+import { useCarouselNav_unstable } from './useCarouselNav';
+import { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Used to jump to a card based on index, using arrow navigation via Tabster.
+ *
+ * The children of this component will be wrapped in a context to
+ * provide the appropriate value based on their index position.
+ */ export const CarouselNav = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNav_unstable(props, ref);
+    const contextValues = useCarouselNavContextValues_unstable(state);
+    useCarouselNavStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);
+    return renderCarouselNav_unstable(state, contextValues);
+});
+CarouselNav.displayName = 'CarouselNav';

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './CarouselNavContext';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNav_unstable(props, ref);\n  const contextValues = useCarouselNavContextValues_unstable(state);\n\n  useCarouselNavStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n  return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oCAAoC,QAAQ,uBAAuB;AAC5E,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAC7C,MAAME,gBAAgBV,qCAAqCS;IAE3DN,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNav.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNav.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n  /**\n   * The element wrapping the carousel pagination. By default, this is a div.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n  /**\n   * Enables an alternate brand style when set to 'brand'\n   */\n  appearance?: 'brand';\n\n  /**\n   * The function that will render nav items based on total slides and their index.\n   */\n  renderNavButton: NavButtonRenderFunction;\n\n  /**\n   * The total number of slides available.\n   * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n   */\n  totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n  children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNavContext.js

@@ -0,0 +1,22 @@
+'use client';
+import * as React from 'react';
+const carouselNavContext = React.createContext(undefined);
+export const carouselNavContextDefaultValue = {
+    appearance: undefined
+};
+export const useCarouselNavContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
+};
+export const CarouselNavContextProvider = carouselNavContext.Provider;
+export function useCarouselNavContextValues_unstable(state) {
+    const { appearance } = state;
+    const carouselNav = React.useMemo(()=>({
+            appearance
+        }), [
+        appearance
+    ]);
+    return {
+        carouselNav
+    };
+}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNavContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n  appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n  React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n  carouselNav: CarouselNavContextValue;\n};\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n  const { appearance } = state;\n  const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n  return { carouselNav };\n}\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider","useCarouselNavContextValues_unstable","state","carouselNav","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,qBAAqBD,MAAME,aAAa,CAAsCC;AAEpF,OAAO,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEF,OAAO,MAAMG,wBAAwB;QACnCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,iCAAjBD,+BAAAA,oBAAwCI;EAA+B;AAEzE,OAAO,MAAMI,6BAA6BP,mBAAmBQ,QAAQ,CAAC;AAStE,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEN,UAAU,EAAE,GAAGM;IACvB,MAAMC,cAAcZ,MAAMa,OAAO,CAAC,IAAO,CAAA;YAAER;QAAW,CAAA,GAAI;QAACA;KAAW;IAEtE,OAAO;QAAEO;IAAY;AACvB"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNavIndexContext.js

@@ -0,0 +1,9 @@
+'use client';
+import * as React from 'react';
+const carouselNavIndexContext = React.createContext(undefined);
+export const carouselNavIndexContextDefaultValue = 0;
+export const useCarouselNavIndexContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselNavIndexContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavIndexContextDefaultValue;
+};
+export const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/CarouselNavIndexContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/CarouselNavIndexContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst carouselNavIndexContext = React.createContext<number | undefined>(undefined);\n\nexport const carouselNavIndexContextDefaultValue: number = 0;\n\nexport const useCarouselNavIndexContext = (): number =>\n  React.useContext(carouselNavIndexContext) ?? carouselNavIndexContextDefaultValue;\n\nexport const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;\n"],"names":["React","carouselNavIndexContext","createContext","undefined","carouselNavIndexContextDefaultValue","useCarouselNavIndexContext","useContext","CarouselNavIndexContextProvider","Provider"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0BAA0BD,MAAME,aAAa,CAAqBC;AAExE,OAAO,MAAMC,sCAA8C,EAAE;AAE7D,OAAO,MAAMC,6BAA6B;QACxCL;WAAAA,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,sCAAjBD,+BAAAA,oBAA6CI;EAAoC;AAEnF,OAAO,MAAMG,kCAAkCN,wBAAwBO,QAAQ,CAAC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/index.js

@@ -0,0 +1,4 @@
+export { CarouselNav } from './CarouselNav';
+export { renderCarouselNav_unstable } from './renderCarouselNav';
+export { useCarouselNav_unstable } from './useCarouselNav';
+export { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/index.ts"],"sourcesContent":["export { CarouselNav } from './CarouselNav';\nexport type {\n  CarouselNavContextValue,\n  CarouselNavProps,\n  CarouselNavSlots,\n  CarouselNavState,\n  NavButtonRenderFunction,\n} from './CarouselNav.types';\nexport { renderCarouselNav_unstable } from './renderCarouselNav';\nexport { useCarouselNav_unstable } from './useCarouselNav';\nexport { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n"],"names":["CarouselNav","renderCarouselNav_unstable","useCarouselNav_unstable","carouselNavClassNames","useCarouselNavStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/renderCarouselNav.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselNavContextProvider } from './CarouselNavContext';
+import { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';
+/**
+ * Render the final JSX of CarouselNav
+ */ export const renderCarouselNav_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    const { totalSlides, renderNavButton } = state;
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(CarouselNavContextProvider, {
+            value: contextValues.carouselNav,
+            children: new Array(totalSlides).fill(null).map((_, index)=>/*#__PURE__*/ _jsx(CarouselNavIndexContextProvider, {
+                    value: index,
+                    children: renderNavButton(index)
+                }, index))
+        })
+    });
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/renderCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNav/renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (\n  state: CarouselNavState,\n  contextValues: CarouselNavContextValues,\n): JSXElement => {\n  assertSlots<CarouselNavSlots>(state);\n\n  const { totalSlides, renderNavButton } = state;\n\n  return (\n    <state.root>\n      <CarouselNavContextProvider value={contextValues.carouselNav}>\n        {new Array(totalSlides).fill(null).map((_, index) => (\n          <CarouselNavIndexContextProvider key={index} value={index}>\n            {renderNavButton(index)}\n          </CarouselNavIndexContextProvider>\n        ))}\n      </CarouselNavContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,SAASC,0BAA0B,QAAuC,uBAAuB;AACjG,SAASC,+BAA+B,QAAQ,4BAA4B;AAE5E;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEAL,YAA8BI;IAE9B,MAAM,EAAEE,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEzC,qBACE,KAACA,MAAMI,IAAI;kBACT,cAAA,KAACP;YAA2BQ,OAAOJ,cAAcK,WAAW;sBACzD,IAAIC,MAAML,aAAaM,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,sBACzC,KAACb;oBAA4CO,OAAOM;8BACjDR,gBAAgBQ;mBADmBA;;;AAOhD,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNav.js

@@ -0,0 +1,55 @@
+'use client';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { useControllableState } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render CarouselNav.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,
+ * before being passed to renderCarouselNav_unstable.
+ *
+ * @param props - props from this instance of CarouselNav
+ * @param ref - reference to root HTMLDivElement of CarouselNav
+ */ export const useCarouselNav_unstable = (props, ref)=>{
+    const { appearance } = props;
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular: false,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
+    const [totalSlides, setTotalSlides] = useControllableState({
+        state: props.totalSlides,
+        initialState: 0
+    });
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues,
+        setTotalSlides
+    ]);
+    return {
+        totalSlides,
+        appearance,
+        renderNavButton: props.children,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'tablist',
+            ...props,
+            ...focusableGroupAttr,
+            children: null
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNav.js.map

@@ -0,0 +1 @@
+{"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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNavStyles.styles.js

@@ -0,0 +1,64 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavClassNames = {
+  root: 'fui-CarouselNav'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bkecrkj: "fc5wo7j",
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f89hs3r",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "fkb7v5e",
+    De3pzq: "fkfdr9r"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fc5wo7j{pointer-events:all;}", [".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], [".fkb7v5e{margin:auto var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"]
+});
+/**
+ * Apply styling to the CarouselNav slots based on the state
+ */
+export const useCarouselNavStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map

@@ -0,0 +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":["'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":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js

@@ -0,0 +1,34 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavClassNames = {
+    root: 'fui-CarouselNav'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'all',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        }),
+        borderRadius: tokens.borderRadiusXLarge,
+        margin: `auto ${tokens.spacingHorizontalS}`,
+        backgroundColor: tokens.colorNeutralBackgroundAlpha
+    }
+});
+/**
+ * Apply styling to the CarouselNav slots based on the state
+ */ export const useCarouselNavStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/CarouselNavButton.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCarouselNavButton_unstable } from './useCarouselNavButton';
+import { renderCarouselNavButton_unstable } from './renderCarouselNavButton';
+import { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The child element of CarouselNav, a singular button that will set the carousels active value on click.
+ */ export const CarouselNavButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavButton_unstable(props, ref);
+    useCarouselNavButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselNavButtonStyles_unstable')(state);
+    return renderCarouselNavButton_unstable(state);
+});
+CarouselNavButton.displayName = 'CarouselNavButton';

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/CarouselNavButton.js.map

@@ -0,0 +1 @@
+{"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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/CarouselNavButton.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselNavButton
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/CarouselNavButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/index.js

@@ -0,0 +1,4 @@
+export { CarouselNavButton } from './CarouselNavButton';
+export { renderCarouselNavButton_unstable } from './renderCarouselNavButton';
+export { useCarouselNavButton_unstable } from './useCarouselNavButton';
+export { carouselNavButtonClassNames, useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/index.ts"],"sourcesContent":["export { CarouselNavButton } from './CarouselNavButton';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nexport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nexport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nexport { carouselNavButtonClassNames, useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\n"],"names":["CarouselNavButton","renderCarouselNavButton_unstable","useCarouselNavButton_unstable","carouselNavButtonClassNames","useCarouselNavButtonStyles_unstable"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/renderCarouselNavButton.js

@@ -0,0 +1,9 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavButton
+ */ export const renderCarouselNavButton_unstable = (state)=>{
+    assertSlots(state);
+    // TODO Add additional slots in the appropriate place
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/renderCarouselNavButton.js.map

@@ -0,0 +1 @@
+{"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 { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavButtonState, CarouselNavButtonSlots } from './CarouselNavButton.types';\n\n/**\n * Render the final JSX of CarouselNavButton\n */\nexport const renderCarouselNavButton_unstable = (state: CarouselNavButtonState): JSXElement => {\n  assertSlots<CarouselNavButtonSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselNavButton_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qDAAqD;IACrD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/useCarouselNavButton.js

@@ -0,0 +1,76 @@
+'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';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { useCarouselNavContext } from '../CarouselNav/CarouselNavContext';
+import { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';
+/**
+ * Create the state required to render CarouselNavButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable,
+ * before being passed to renderCarouselNavButton_unstable.
+ *
+ * @param props - props from this instance of CarouselNavButton
+ * @param ref - reference to root HTMLDivElement of CarouselNavButton
+ */ export const useCarouselNavButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const { appearance } = useCarouselNavContext();
+    const index = useCarouselNavIndexContext();
+    const selectPageByIndex = useCarouselContext((ctx)=>ctx.selectPageByIndex);
+    const selected = useCarouselContext((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = useCarouselContext((ctx)=>ctx.resetAutoplay);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            selectPageByIndex(event, index);
+        }
+        // Ensure any autoplay timers are extended/reset
+        resetAutoplay();
+    });
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = React.useRef(undefined);
+    const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: useMergedRefs(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            var _data_groupIndexList;
+            var _data_groupIndexList_index;
+            const controlList = (_data_groupIndexList_index = (_data_groupIndexList = data.groupIndexList) === null || _data_groupIndexList === void 0 ? void 0 : _data_groupIndexList[index]) !== null && _data_groupIndexList_index !== void 0 ? _data_groupIndexList_index : [];
+            const _controlledSlideIds = controlList.map((slideIndex)=>{
+                return data.slideNodes[slideIndex].id;
+            }).join(' ');
+            if (buttonRef.current) {
+                buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);
+            }
+        });
+    }, [
+        index,
+        subscribeForValues
+    ]);
+    // Override onClick
+    _carouselButton.onClick = handleClick;
+    const state = {
+        selected,
+        appearance,
+        components: {
+            root: 'button'
+        },
+        root: _carouselButton
+    };
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js

@@ -0,0 +1,210 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavButtonClassNames = {
+  root: 'fui-CarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bceei9c: "f1k6fduh",
+    Bkecrkj: "fc5wo7j",
+    a9b677: "f1van5z7",
+    Bqenvij: "f1fkmctz",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1f5q0n8",
+    B7ck84d: "f1e4lqlz",
+    De3pzq: "f1c21dwh",
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bsft5z2: "f13zj6fq",
+    ap17g6: "f2gz7yw",
+    li1rpt: "f1gw3sf2",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "f1x820d0",
+    Bjuhk93: 0,
+    B1q35kw: 0,
+    Bw17bha: 0,
+    Bcgy8vk: 0,
+    Du69r6: 0,
+    Gp14am: 0,
+    vfts7: 0,
+    Bhxzhr1: 0,
+    G63luc: 0,
+    s924m2: 0,
+    Barhvk9: 0,
+    Ihftqj: 0,
+    wywymt: 0,
+    B0n5ga8: 0,
+    Bm2nyyq: 0,
+    xrcqlc: 0,
+    e1d83w: "fnwf5yv",
+    Dlnsje: "foue38v",
+    a2br6o: "fi4ui2s",
+    Bjyk6c5: "f1w4p7kh",
+    go7t6h: "fo5b2b9",
+    xdqbwx: "f16vizm6",
+    Hwb57: "fqolsir",
+    umgawz: "fim7wbh"
+  },
+  rootUnselected: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    Byu6kyc: 0,
+    n8qw10: 0,
+    Bbjhlyh: 0,
+    i2cumq: 0,
+    Bunx835: 0,
+    Bdrgwmp: 0,
+    mqozju: 0,
+    lbo84a: 0,
+    Bksnhdo: 0,
+    Bci5o5g: 0,
+    u5e7qz: 0,
+    Bn40d3w: 0,
+    B7b6zxw: 0,
+    B8q5s1w: 0,
+    B5gfjzb: 0,
+    Bbcte9g: 0,
+    Bqz3imu: "f1j9b7x8",
+    Bj9ihqo: 0,
+    Bl51kww: 0,
+    B3bvztg: 0,
+    Btyt4dx: 0,
+    Brhw1f9: "f1tdm9ui",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    Bp15pi3: "f7x02et",
+    Bay5ve9: "f1ry2q4s",
+    Bni0232: "f1e9f9ku"
+  },
+  rootSelected: {
+    a9b677: "f1eh74fx",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fwku66v",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    Byu6kyc: 0,
+    n8qw10: 0,
+    Bbjhlyh: 0,
+    i2cumq: 0,
+    Bunx835: 0,
+    Bdrgwmp: 0,
+    mqozju: 0,
+    lbo84a: 0,
+    Bksnhdo: 0,
+    Bci5o5g: 0,
+    u5e7qz: 0,
+    Bn40d3w: 0,
+    B7b6zxw: 0,
+    B8q5s1w: 0,
+    B5gfjzb: 0,
+    Bbcte9g: 0,
+    Bqz3imu: "f1j9b7x8",
+    Bj9ihqo: 0,
+    Bl51kww: 0,
+    B3bvztg: 0,
+    Btyt4dx: 0,
+    Brhw1f9: "f1tdm9ui",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    a2br6o: "f1v6lwa2",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "fgm6wgx",
+    Bay5ve9: "f1ry2q4s",
+    Bni0232: "f1gxfet"
+  },
+  brand: {
+    Bjyk6c5: "fnrv5e1",
+    Bp15pi3: "fjsqi2x",
+    Glksuk: "frrwqtn",
+    Bay5ve9: "f9atwx8",
+    Blzl0y7: "fmmpig5",
+    Bni0232: "f1e9f9ku"
+  },
+  unselectedBrand: {
+    Bp15pi3: "f7x02et",
+    Bjyk6c5: "f1w4p7kh",
+    Bay5ve9: "f1ry2q4s",
+    Bni0232: "f1e9f9ku"
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".fc5wo7j{pointer-events:all;}", ".f1van5z7{width:var(--spacingHorizontalS);}", ".f1fkmctz{height:var(--spacingVerticalS);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1e4lqlz{box-sizing:content-box;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1gw3sf2::after{box-sizing:border-box;}", [".f1x820d0::after{border-radius:50%;}", {
+    p: -1
+  }], [".fnwf5yv::after{border:none;}", {
+    p: -2
+  }], ".foue38v::after{height:var(--spacingVerticalS);}", ".fi4ui2s::after{width:var(--spacingHorizontalS);}", ".f1w4p7kh::after{background-color:var(--colorNeutralForeground1);}", ".fo5b2b9::after{color:var(--colorNeutralForeground1);}", [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f7x02et::after{opacity:0.6;}", ".f1eh74fx{width:var(--spacingHorizontalL);}", [".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}", {
+    p: -1
+  }], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f1v6lwa2::after{width:var(--spacingHorizontalL);}", [".fgm6wgx::after{border-radius:4px;}", {
+    p: -1
+  }], ".fnrv5e1::after{background-color:var(--colorCompoundBrandBackground);}", ".fjsqi2x::after{opacity:1;}"],
+  m: [["@media (forced-colors: active){.f16vizm6::after{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqolsir::after{background-color:white;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fim7wbh::after{mix-blend-mode:difference;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".f1ry2q4s:hover::after{opacity:0.75;}", ".frrwqtn:hover::after{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f9atwx8:hover::after{opacity:1;}"],
+  a: [".f1e9f9ku:active::after{opacity:1;}", ".f1gxfet:active::after{opacity:0.65;}", ".fmmpig5:active::after{background-color:var(--colorCompoundBrandBackgroundPressed);}"]
+});
+/**
+ * Apply styling to the CarouselNavButton slots based on the state
+ */
+export const useCarouselNavButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    selected,
+    appearance
+  } = state;
+  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);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js

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

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/CarouselNavContainer.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
+import { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';
+import { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls
+ */ export const CarouselNavContainer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavContainer_unstable(props, ref);
+    useCarouselNavContainerStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);
+    return renderCarouselNavContainer_unstable(state);
+});
+CarouselNavContainer.displayName = 'CarouselNavContainer';

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/CarouselNavContainer.js.map

@@ -0,0 +1 @@
+{"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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/CarouselNavContainer.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselNavContainer
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map

@@ -0,0 +1 @@
+{"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';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  nextTooltip?: Slot<TooltipProps>;\n  prev?: Slot<CarouselButtonProps>;\n  prevTooltip?: Slot<TooltipProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n  autoplayTooltip?: Slot<TooltipProps>;\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":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/index.js

@@ -0,0 +1,4 @@
+export { CarouselNavContainer } from './CarouselNavContainer';
+export { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';
+export { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
+export { carouselNavContainerClassNames, useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselNavContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/index.ts"],"sourcesContent":["export { CarouselNavContainer } from './CarouselNavContainer';\nexport type {\n  CarouselNavContainerProps,\n  CarouselNavContainerSlots,\n  CarouselNavContainerState,\n} from './CarouselNavContainer.types';\nexport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nexport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nexport {\n  carouselNavContainerClassNames,\n  useCarouselNavContainerStyles_unstable,\n} from './useCarouselNavContainerStyles.styles';\n"],"names":["CarouselNavContainer","renderCarouselNavContainer_unstable","useCarouselNavContainer_unstable","carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB;AAM9D,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SACEC,8BAA8B,EAC9BC,sCAAsC,QACjC,yCAAyC"}