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"}