@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/carousel.tsx

@@ -0,0 +1,1300 @@
+'use client';
+import * as React from 'react';
+import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
+import IconChevronRightRegular from './generated/mistica-icons/icon-chevron-right-regular';
+import {useIsInViewport, useIsomorphicLayoutEffect, useScreenSize, useTheme} from './hooks';
+import Inline from './inline';
+import classNames from 'classnames';
+import {ThemeVariant, useThemeVariant} from './theme-variant-context';
+import {getPrefixedDataAttributes, listenResize} from './utils/dom';
+import {isAndroid, isIos, isRunningAcceptanceTest} from './utils/platform';
+import {useDocumentVisibility} from './utils/document-visibility';
+import * as styles from './carousel.css';
+import * as mediaStyles from './image.css';
+import {useDesktopContainerType} from './desktop-container-type-context';
+import {VIVO_NEW_SKIN} from './skins/constants';
+import {applyCssVars} from './utils/css';
+import {ResetResponsiveLayout} from './responsive-layout';
+import {InternalIconButton, ToggleIconButton} from './icon-button';
+import IconPauseFilled from './generated/mistica-icons/icon-pause-filled';
+import IconPlayFilled from './generated/mistica-icons/icon-play-filled';
+import IconReloadRegular from './generated/mistica-icons/icon-reload-regular';
+import * as tokens from './text-tokens';
+import {isClientSide} from './utils/environment';
+
+import type {DesktopContainerType} from './desktop-container-type-context';
+import type {ByBreakpoint, DataAttributes} from './utils/types';
+
+const useShouldAutoplay = (
+    autoplay: boolean,
+    ref: React.RefObject<HTMLElement | null>
+): {isAutoplayEnabled: boolean; shouldAutoplay: boolean; setShouldAutoPlay: (enabled: boolean) => void} => {
+    const reducedMotion = isClientSide()
+        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : false;
+    const [isAutoplayEnabled, setIsAutoplayEnabled] = React.useState(!!autoplay && !reducedMotion);
+
+    const isDocumentVisible = useDocumentVisibility();
+    const isInViewport = useIsInViewport(ref, false);
+    return {
+        isAutoplayEnabled: isAutoplayEnabled && !!autoplay,
+        shouldAutoplay: isInViewport && isDocumentVisible && !!autoplay && isAutoplayEnabled,
+        setShouldAutoPlay: setIsAutoplayEnabled,
+    };
+};
+
+const throwMissingProviderError = () => {
+    throw new Error('You must wrap your component with a CarouselContextProvider to use CarouselContext');
+};
+const defaultBulletProps = {currentIndex: 0, numPages: 0};
+const defaultAutoplayProps = {
+    isAutoplayEnabled: false,
+    isAtLastPage: false,
+    onAutoplayChanged: throwMissingProviderError,
+};
+const defaultPageControlsProps = {
+    setShouldAutoplay: throwMissingProviderError,
+    prevArrowEnabled: false,
+    nextArrowEnabled: false,
+};
+
+type GoToPage = (pageIndex: number, animate?: boolean) => void;
+type SetIsAutoplayEnabled = (isAutoplayEnabled: boolean) => void;
+
+type PageBulletsProps = {
+    currentIndex: number;
+    numPages: number | ByBreakpoint<number>;
+};
+
+type AutoplayControlProps = {
+    isAutoplayEnabled: boolean;
+    isAtLastPage: boolean;
+    onAutoplayChanged: (autoplay: boolean) => void;
+};
+
+type PageControlsProps = {
+    setShouldAutoplay: (autoplay: boolean) => void;
+    prevArrowEnabled: boolean;
+    nextArrowEnabled: boolean;
+};
+
+type CarouselControls = {
+    goPrev: () => void;
+    goNext: () => void;
+    goToPage: GoToPage;
+    autoplayControlProps: AutoplayControlProps;
+    pageControlsProps: PageControlsProps;
+    bulletsProps: PageBulletsProps;
+};
+
+const CarouselContext = React.createContext<CarouselControls>({
+    goPrev: throwMissingProviderError,
+    goNext: throwMissingProviderError,
+    goToPage: throwMissingProviderError,
+    bulletsProps: defaultBulletProps,
+    autoplayControlProps: defaultAutoplayProps,
+    pageControlsProps: defaultPageControlsProps,
+});
+
+const CarouselControlsSetterContext = React.createContext<{
+    setGoPrev: (goPrev: () => void) => void;
+    setGoNext: (goNext: () => void) => void;
+    setGoToPage: (goToPage: GoToPage) => void;
+    setBulletsProps: (bulletsProps: PageBulletsProps) => void;
+    setAutoplayControlProps: (autoplayControlProps: AutoplayControlProps) => void;
+    setPageControlsProps: (pageControlsProps: PageControlsProps) => void;
+    setIsAutoplayEnabledSetter: (isAutoplayEnabledSetter: SetIsAutoplayEnabled) => void;
+} | null>(null);
+
+export const CarouselContextProvider = ({children}: {children: React.ReactNode}): JSX.Element => {
+    const [bulletsProps, setBulletsProps] = React.useState<PageBulletsProps>(defaultBulletProps);
+    const [autoplayControlProps, setAutoplayControlProps] =
+        React.useState<AutoplayControlProps>(defaultAutoplayProps);
+    const [pageControlsProps, setPageControlsProps] =
+        React.useState<PageControlsProps>(defaultPageControlsProps);
+    const goPrevRef = React.useRef<() => void>(throwMissingProviderError);
+    const goNextRef = React.useRef<() => void>(throwMissingProviderError);
+    const goToPageRef = React.useRef<GoToPage>(throwMissingProviderError);
+    const setIsAutoplayEnabledRef =
+        React.useRef<(isAutoplayEnabled: boolean) => void>(throwMissingProviderError);
+
+    const controls = React.useMemo<CarouselControls>(
+        () => ({
+            goPrev: () => {
+                goPrevRef.current();
+            },
+            goNext: () => {
+                goNextRef.current();
+            },
+            goToPage: (pageIndex, animate = true) => {
+                goToPageRef.current(pageIndex, animate);
+            },
+            bulletsProps,
+            autoplayControlProps,
+            pageControlsProps,
+        }),
+        [bulletsProps, autoplayControlProps, pageControlsProps]
+    );
+
+    return (
+        <CarouselContext.Provider value={controls}>
+            <CarouselControlsSetterContext.Provider
+                value={{
+                    setGoPrev: (goPrev) => {
+                        goPrevRef.current = goPrev;
+                    },
+                    setGoNext: (goNext) => {
+                        goNextRef.current = goNext;
+                    },
+                    setGoToPage: (goToPage) => {
+                        goToPageRef.current = goToPage;
+                    },
+                    setBulletsProps,
+                    setAutoplayControlProps,
+                    setPageControlsProps,
+                    setIsAutoplayEnabledSetter: (isAutoplayEnabledSetter) => {
+                        setIsAutoplayEnabledRef.current = isAutoplayEnabledSetter;
+                    },
+                }}
+            >
+                {children}
+            </CarouselControlsSetterContext.Provider>
+        </CarouselContext.Provider>
+    );
+};
+
+export const useCarouselContext = (): CarouselControls => React.useContext(CarouselContext);
+export const CarouselContextConsumer = CarouselContext.Consumer;
+
+export const PageBullets = ({currentIndex, numPages}: PageBulletsProps): JSX.Element => {
+    const themeVariant = useThemeVariant();
+    const {isTablet, isDesktopOrBigger} = useScreenSize();
+    const pagesCount =
+        typeof numPages === 'number'
+            ? numPages
+            : isDesktopOrBigger
+              ? numPages.desktop
+              : isTablet
+                ? numPages.tablet ?? numPages.mobile
+                : numPages.mobile;
+
+    const getClassNames = (bulletIndex: number) => {
+        const classNames: {[key: string]: boolean} = {};
+
+        if (themeVariant === 'brand' || themeVariant === 'media') {
+            classNames[currentIndex === bulletIndex ? styles.bulletActiveBrand : styles.bulletBrand] = true;
+        } else if (themeVariant === 'negative') {
+            classNames[currentIndex === bulletIndex ? styles.bulletActiveNegative : styles.bulletNegative] =
+                true;
+        } else {
+            classNames[currentIndex === bulletIndex ? styles.bulletActive : styles.bullet] = true;
+        }
+
+        if (currentIndex === bulletIndex) {
+            classNames[styles.bulletActiveSizing] = true;
+            return classNames;
+        }
+
+        const distanceToCurrent = Math.abs(bulletIndex - currentIndex);
+
+        if (pagesCount <= styles.VISIBLE_BULLETS || distanceToCurrent === 1) {
+            classNames[styles.bulletInactiveSizing] = true;
+            return classNames;
+        }
+
+        const isFirstOrLastItemActive = currentIndex === 0 || currentIndex === pagesCount - 1;
+
+        if (isFirstOrLastItemActive) {
+            classNames[styles.bulletInactiveSizing] = distanceToCurrent === 2;
+            classNames[styles.bulletInactiveMediumSizing] = distanceToCurrent === 3;
+            classNames[styles.bulletInactiveSmallSizing] = distanceToCurrent > 3;
+
+            return classNames;
+        }
+
+        classNames[styles.bulletInactiveMediumSizing] = distanceToCurrent === 2;
+        classNames[styles.bulletInactiveSmallSizing] = distanceToCurrent > 2;
+
+        return classNames;
+    };
+
+    const getLeftOffsetPosition = (bulletIndex: number) => {
+        if (currentIndex + 2 < styles.VISIBLE_BULLETS) {
+            return bulletIndex;
+        }
+
+        if (pagesCount - currentIndex + 1 < styles.VISIBLE_BULLETS) {
+            return bulletIndex - (pagesCount - styles.VISIBLE_BULLETS);
+        }
+
+        return bulletIndex - (currentIndex - 2);
+    };
+
+    return (
+        <div
+            {...getPrefixedDataAttributes({'component-name': 'PageBullets', testid: 'PageBullets'})}
+            className={classNames(styles.bulletsScrollableContainerBase, {
+                [styles.bulletsScrollableContainer]: pagesCount > styles.VISIBLE_BULLETS,
+            })}
+        >
+            {Array.from({length: pagesCount}, (_, i: number) => {
+                const bulletLeftOffsetPosition = getLeftOffsetPosition(i);
+
+                return (
+                    <div
+                        className={classNames(
+                            {
+                                [styles.scrollableBullet]: pagesCount > styles.VISIBLE_BULLETS,
+                            },
+                            typeof numPages === 'number'
+                                ? {[styles.bulletButton]: true, [styles.bulletVisibility]: i < numPages}
+                                : {
+                                      [styles.bulletButton]: true,
+                                      [styles.bulletVisibilityMobile]: i < numPages.mobile,
+                                      [styles.bulletVisibilityTablet]:
+                                          i < (numPages.tablet ?? numPages.mobile),
+                                      [styles.bulletVisibilityDesktop]: i < numPages.desktop,
+                                  }
+                        )}
+                        key={i}
+                        data-testid={currentIndex === i ? 'active-bullet' : 'bullet'}
+                        style={{
+                            ...applyCssVars({
+                                [styles.vars.desktopBulletLeftPosition]:
+                                    `${bulletLeftOffsetPosition * styles.LARGE_BULLET_FULL_SIZE}px`,
+                                [styles.vars.mobileBulletLeftPosition]:
+                                    `${bulletLeftOffsetPosition * styles.SMALL_BULLET_FULL_SIZE}px`,
+                            }),
+                        }}
+                    >
+                        <div className={classNames(getClassNames(i))} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+const useControlLabel = (type: 'prev' | 'next', pageIndex?: number, pageCount?: number) => {
+    const {texts, t} = useTheme();
+
+    const hasPageInfo = pageIndex !== undefined && pageCount !== undefined;
+    const isFirstPage = hasPageInfo && pageIndex === 0;
+    const isLastPage = hasPageInfo && pageIndex === pageCount - 1;
+
+    const getPageNumber = (pageIndex: number) => {
+        if (type === 'prev') {
+            return isFirstPage ? pageIndex + 1 : pageIndex;
+        }
+        return isLastPage ? pageIndex + 1 : pageIndex + 2;
+    };
+
+    const pageNumberText = hasPageInfo
+        ? `, ${t(texts.carouselPageNumber || tokens.carouselPageNumber, getPageNumber(pageIndex), pageCount)}`
+        : '';
+
+    if (type === 'prev') {
+        return isFirstPage
+            ? (texts.carouselFirstButton || t(tokens.carouselFirstButton)) + pageNumberText
+            : (texts.carouselPrevButton || t(tokens.carouselPrevButton)) + pageNumberText;
+    }
+
+    return isLastPage
+        ? (texts.carouselLastButton || t(tokens.carouselLastButton)) + pageNumberText
+        : (texts.carouselNextButton || t(tokens.carouselNextButton)) + pageNumberText;
+};
+
+type CarouselPageControlsProps = PageControlsProps & {
+    bleedLeft?: boolean;
+    bleedRight?: boolean;
+    goPrev: () => void;
+    goNext: () => void;
+    pagesCount?: number;
+    currentPageIndex?: number;
+};
+
+export const CarouselPageControls = ({
+    bleedLeft,
+    bleedRight,
+    goPrev,
+    goNext,
+    setShouldAutoplay,
+    prevArrowEnabled,
+    nextArrowEnabled,
+    pagesCount,
+    currentPageIndex,
+}: CarouselPageControlsProps): JSX.Element => {
+    const variant = useThemeVariant();
+    const prevPageLabel = useControlLabel('prev', currentPageIndex, pagesCount);
+    const nextPageLabel = useControlLabel('next', currentPageIndex, pagesCount);
+
+    return (
+        <Inline space={variant === 'media' ? 16 : 8}>
+            <InternalIconButton
+                Icon={IconChevronLeftRegular}
+                aria-label={prevPageLabel}
+                type="neutral"
+                backgroundType={variant === 'media' ? 'transparent' : 'soft'}
+                small
+                bleedLeft={bleedLeft}
+                onPress={() => {
+                    goPrev();
+                    setShouldAutoplay(false);
+                }}
+                aria-disabled={!prevArrowEnabled}
+            />
+            <InternalIconButton
+                Icon={IconChevronRightRegular}
+                aria-label={nextPageLabel}
+                type="neutral"
+                backgroundType={variant === 'media' ? 'transparent' : 'soft'}
+                small
+                bleedRight={bleedRight}
+                onPress={() => {
+                    goNext();
+                    setShouldAutoplay(false);
+                }}
+                aria-disabled={!nextArrowEnabled}
+            />
+        </Inline>
+    );
+};
+
+type CarouselAutoplayControlProps = AutoplayControlProps & {
+    bleedLeft?: boolean;
+    bleedRight?: boolean;
+};
+
+export const CarouselAutoplayControl = ({
+    isAutoplayEnabled,
+    isAtLastPage,
+    onAutoplayChanged,
+    bleedLeft = false,
+    bleedRight = false,
+}: CarouselAutoplayControlProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    return (
+        <ToggleIconButton
+            checkedProps={{
+                Icon: IconPauseFilled,
+                type: 'neutral',
+                'aria-label': texts.carouselPauseAutoplay || t(tokens.carouselPauseAutoplay),
+            }}
+            uncheckedProps={{
+                Icon: isAtLastPage ? IconReloadRegular : IconPlayFilled,
+                type: 'neutral',
+                'aria-label': isAtLastPage
+                    ? texts.carouselReloadAutoplay || t(tokens.carouselReloadAutoplay)
+                    : texts.carouselEnableAutoplay || t(tokens.carouselEnableAutoplay),
+            }}
+            small
+            bleedLeft={bleedLeft}
+            bleedRight={bleedRight}
+            onChange={onAutoplayChanged}
+            checked={isAutoplayEnabled}
+        />
+    );
+};
+
+type DesktopItemsPerPage = {small?: number; medium?: number; large?: number} | number;
+type ItemsPerPageProp = {mobile?: number; tablet?: number; desktop?: DesktopItemsPerPage} | number;
+
+const selectDesktopItemsPerPage = (
+    containerType: DesktopContainerType,
+    defaultItemsPerPage: {small: number; medium: number; large: number},
+    itemsPerPage?: DesktopItemsPerPage
+): number => {
+    if (!itemsPerPage) {
+        return defaultItemsPerPage[containerType];
+    }
+    if (typeof itemsPerPage === 'number') {
+        return itemsPerPage;
+    }
+    return itemsPerPage[containerType] || defaultItemsPerPage[containerType];
+};
+
+const normalizeItemsPerPage = (
+    desktopContainerType: DesktopContainerType,
+    itemsPerPage?: ItemsPerPageProp
+): {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+} => {
+    const defaultItemsPerPage = {mobile: 1, tablet: 2, desktop: {small: 1, medium: 2, large: 3}};
+    if (!itemsPerPage) {
+        return {
+            ...defaultItemsPerPage,
+            desktop: selectDesktopItemsPerPage(desktopContainerType, defaultItemsPerPage.desktop),
+        };
+    }
+
+    if (typeof itemsPerPage === 'number') {
+        return {
+            mobile: itemsPerPage,
+            tablet: itemsPerPage,
+            desktop: itemsPerPage,
+        };
+    }
+
+    const itemsPerPageDesktop = selectDesktopItemsPerPage(
+        desktopContainerType,
+        defaultItemsPerPage.desktop,
+        itemsPerPage.desktop
+    );
+
+    return {
+        ...defaultItemsPerPage,
+        ...itemsPerPage,
+        desktop: itemsPerPageDesktop,
+    };
+};
+
+const calcPagesScrollPositions = (itemsScrollPosition: Array<number>, numPages: number) => {
+    if (itemsScrollPosition.length === 0) {
+        return [];
+    }
+
+    const itemsPerPage = Math.ceil(itemsScrollPosition.length / numPages);
+    const pagesScrollPositions = [];
+    for (let i = 0; i < itemsScrollPosition.length; i += itemsPerPage) {
+        pagesScrollPositions.push(itemsScrollPosition[i]);
+    }
+    pagesScrollPositions[pagesScrollPositions.length - 1] =
+        itemsScrollPosition[itemsScrollPosition.length - itemsPerPage];
+
+    return pagesScrollPositions;
+};
+
+const calcCurrentPageIndex = (scrollPosition: number, pagesScrollPositions: Array<number>) => {
+    const middlePageScrollPositions = [];
+    for (let i = 0; i < pagesScrollPositions.length; i++) {
+        if (i === 0) {
+            middlePageScrollPositions.push(pagesScrollPositions[0]);
+        } else {
+            middlePageScrollPositions.push((pagesScrollPositions[i] + pagesScrollPositions[i - 1]) / 2);
+        }
+    }
+    for (let i = middlePageScrollPositions.length - 1; i >= 0; i--) {
+        if (scrollPosition - middlePageScrollPositions[i] >= -1) {
+            return i;
+        }
+    }
+    return 0;
+};
+
+const DEFAULT_AUTOPLAY_TIME = 5000;
+
+type BaseCarouselProps = {
+    items: ReadonlyArray<React.ReactNode>;
+    itemStyle?: React.CSSProperties;
+    itemClassName?: string;
+    withBullets?: boolean;
+    /**
+     * @deprecated use CarouselContextProvider and CarouselContextConsumer to provide bullets props to custom bullets component.
+     * See an example here: https://mistica-web.vercel.app/?path=/story/components-carousels-carousel--with-carousel-context
+     */
+    renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
+    initialActiveItem?: number;
+    itemsPerPage?: ItemsPerPageProp;
+    /** scrolls one page by default */
+    itemsToScroll?: number;
+    mobilePageOffset?: 'regular' | 'large';
+    /** If true, scroll snap doesn't apply and the user has a free scroll */
+    free?: boolean;
+    gap?: number;
+    /** centered mode only applies to mobile. It includes a horizontal padding of half of the size of an item to show the items centered */
+    centered?: boolean;
+    autoplay?: boolean | {time: number; loop?: boolean};
+    withControls?: boolean;
+    onPageChange?: (newPageInfo: {pageIndex: number; shownItemIndexes: Array<number>}) => void;
+    dataAttributes?: DataAttributes;
+    children?: void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+
+const BaseCarousel = ({
+    items,
+    itemStyle,
+    itemClassName,
+    withBullets,
+    renderBullets,
+    initialActiveItem,
+    itemsPerPage,
+    itemsToScroll,
+    mobilePageOffset,
+    gap,
+    free,
+    centered,
+    autoplay,
+    withControls = true,
+    onPageChange,
+    dataAttributes,
+    'aria-label': ariaLabelProp,
+    'aria-labelledby': ariaLabelledByProp,
+}: BaseCarouselProps): JSX.Element => {
+    const {platformOverrides, skinName, texts, t} = useTheme();
+
+    const desktopContainerType = useDesktopContainerType();
+    const itemsPerPageConfig = normalizeItemsPerPage(desktopContainerType || 'large', itemsPerPage);
+
+    const {isDesktopOrBigger, isTablet} = useScreenSize();
+    const mobileOrTabletItemsPerPage = isTablet ? itemsPerPageConfig.tablet : itemsPerPageConfig.mobile;
+    const itemsPerPageFloor = Math.max(
+        Math.floor(isDesktopOrBigger ? itemsPerPageConfig.desktop : mobileOrTabletItemsPerPage),
+        1
+    );
+
+    const carouselRef = React.useRef<HTMLDivElement>(null);
+
+    const pagesCountMobile = Math.ceil(items.length / Math.max(Math.floor(itemsPerPageConfig.mobile), 1));
+    const pagesCountTablet = Math.ceil(items.length / Math.max(Math.floor(itemsPerPageConfig.tablet), 1));
+    const pagesCountDesktop = Math.ceil(items.length / Math.max(Math.floor(itemsPerPageConfig.desktop), 1));
+    const pagesCount = Math.ceil(items.length / itemsPerPageFloor);
+
+    // ScrollRight is initialized to 1 to avoid the next arrow being disabled when the carousel is first rendered.
+    // This is required to make the SSR test pass, and taking advantage of the fact that this is the base case (having more than one page)
+    const [{scrollLeft, scrollRight}, setScroll] = React.useState({scrollLeft: 0, scrollRight: 1});
+
+    const [itemScrollPositions, setItemScrollPositions] = React.useState<Array<number>>([]);
+
+    const pagesScrollPositions = React.useMemo(
+        () => calcPagesScrollPositions(itemScrollPositions, pagesCount),
+        [itemScrollPositions, pagesCount]
+    );
+    const scrollPositions = itemsToScroll
+        ? calcPagesScrollPositions(itemScrollPositions, Math.ceil(items.length / itemsToScroll))
+        : pagesScrollPositions;
+
+    const nextArrowEnabled = scrollRight !== 0;
+    const prevArrowEnabled = scrollLeft !== 0;
+
+    const {isAutoplayEnabled, shouldAutoplay, setShouldAutoPlay} = useShouldAutoplay(!!autoplay, carouselRef);
+
+    React.useEffect(() => {
+        if (carouselRef.current) {
+            const carouselEl = carouselRef.current;
+
+            const handleCarouselChange = () => {
+                const {scrollWidth, clientWidth} = carouselEl;
+                const scrollLeft = Math.round(carouselEl.scrollLeft);
+
+                const scrollRight = Math.round(scrollWidth - (scrollLeft + clientWidth));
+
+                setScroll({scrollLeft, scrollRight});
+            };
+
+            const calcItemScrollPositions = () => {
+                const maxScroll = carouselEl.scrollWidth - carouselEl.clientWidth;
+
+                setItemScrollPositions(
+                    Array.from(carouselEl.querySelectorAll('[data-item]')).map((itemEl, idx) => {
+                        if (idx === items.length - 1) {
+                            return maxScroll;
+                        }
+                        const offsetLeft = (itemEl as HTMLElement).offsetLeft;
+                        const scrollMargin = parseInt(getComputedStyle(itemEl).scrollMargin);
+                        const scrollPosition =
+                            centered && !isDesktopOrBigger ? offsetLeft - itemEl.clientWidth / 2 : offsetLeft;
+                        return Math.min(scrollPosition - scrollMargin - carouselEl.offsetLeft, maxScroll);
+                    })
+                );
+            };
+
+            handleCarouselChange();
+            calcItemScrollPositions();
+
+            carouselEl.addEventListener('scroll', handleCarouselChange);
+            const unlistenResize = listenResize(carouselEl, () => {
+                handleCarouselChange();
+                calcItemScrollPositions();
+            });
+
+            return () => {
+                carouselEl.removeEventListener('scroll', handleCarouselChange);
+                unlistenResize();
+            };
+        }
+        return () => {};
+    }, [
+        itemsPerPageConfig.desktop,
+        itemsPerPageConfig.tablet,
+        itemsPerPageConfig.mobile,
+        pagesCount,
+        gap,
+        centered,
+        isDesktopOrBigger,
+        items.length,
+    ]);
+
+    const goToPage = React.useCallback(
+        (pageIndex: number, animate = true) => {
+            const carouselEl = carouselRef.current;
+            if (carouselEl) {
+                const scroll = pagesScrollPositions[pageIndex];
+                carouselEl.scrollTo({left: scroll, behavior: animate ? 'smooth' : 'auto'});
+            }
+        },
+        [pagesScrollPositions]
+    );
+
+    const goPrev = React.useCallback(() => {
+        const carouselEl = carouselRef.current;
+        if (carouselEl) {
+            const {scrollLeft} = carouselEl;
+            const prevPageScrollPosition = [...scrollPositions]
+                .reverse()
+                .find((pos) => pos - scrollLeft < -1);
+            carouselEl.scrollTo({left: prevPageScrollPosition, behavior: 'smooth'});
+        }
+    }, [scrollPositions]);
+
+    const goNext = React.useCallback(() => {
+        const carouselEl = carouselRef.current;
+        if (carouselEl) {
+            const {scrollLeft} = carouselEl;
+            const nextPageScrollPosition = scrollPositions.find((pos) => pos - scrollLeft > 1);
+            carouselEl.scrollTo({left: nextPageScrollPosition, behavior: 'smooth'});
+        }
+    }, [scrollPositions]);
+
+    React.useEffect(() => {
+        if (initialActiveItem !== undefined) {
+            goToPage(Math.floor(initialActiveItem / itemsPerPageFloor), false);
+        }
+    }, [initialActiveItem, goToPage, itemsPerPageFloor]);
+
+    const hasAutoplayLoop = (typeof autoplay === 'object' && autoplay.loop) || false;
+
+    const interactionDetectorRef = React.useRef<{interacting: boolean; left: number}>({
+        interacting: false,
+        left: 0,
+    });
+
+    React.useEffect(() => {
+        if (shouldAutoplay && autoplay) {
+            const time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
+            const interval = setInterval(() => {
+                if (!interactionDetectorRef.current.interacting) {
+                    if (scrollRight !== 0) {
+                        goNext();
+                    } else if (hasAutoplayLoop) {
+                        carouselRef.current?.scrollTo({left: 0, behavior: 'smooth'});
+                    }
+                }
+            }, time);
+            return () => clearInterval(interval);
+        }
+    }, [autoplay, goNext, scrollRight, shouldAutoplay, hasAutoplayLoop]);
+
+    const currentPageIndex = calcCurrentPageIndex(scrollLeft, pagesScrollPositions);
+
+    const INTERACTION_DETECTOR_THRESHOLD = 20; // pixels
+
+    React.useEffect(() => {
+        if (currentPageIndex === pagesCount - 1 && !hasAutoplayLoop) {
+            setShouldAutoPlay(false);
+        }
+    }, [currentPageIndex, pagesCount, setShouldAutoPlay, hasAutoplayLoop]);
+
+    const pageInitialized = React.useRef<boolean>(!initialActiveItem);
+    const lastPageIndex = React.useRef<number>(0);
+
+    React.useEffect(() => {
+        if (onPageChange) {
+            const lastShownItemIndex = Math.min(
+                (currentPageIndex + 1) * itemsPerPageFloor - 1,
+                items.length - 1
+            );
+            const shownItemIndexes = [];
+            for (let i = 0; i < itemsPerPageFloor; i++) {
+                const idx = lastShownItemIndex - i;
+                if (idx >= 0) {
+                    shownItemIndexes.unshift(idx);
+                }
+            }
+
+            if (!pageInitialized.current) {
+                pageInitialized.current = shownItemIndexes.includes(initialActiveItem || 0);
+            } else if (lastPageIndex.current !== currentPageIndex) {
+                onPageChange({pageIndex: currentPageIndex, shownItemIndexes});
+            }
+
+            lastPageIndex.current = currentPageIndex;
+        }
+    }, [currentPageIndex, items.length, itemsPerPageFloor, initialActiveItem, onPageChange]);
+
+    const controlsSetter = React.useContext(CarouselControlsSetterContext);
+
+    const bulletsProps = React.useMemo(
+        () => ({
+            currentIndex: currentPageIndex,
+            numPages: {
+                mobile: pagesCountMobile,
+                tablet: pagesCountTablet,
+                desktop: pagesCountDesktop,
+            },
+        }),
+        [currentPageIndex, pagesCountDesktop, pagesCountMobile, pagesCountTablet]
+    );
+    const autoplayControlProps = React.useMemo(
+        () => ({
+            isAutoplayEnabled,
+            isAtLastPage: currentPageIndex === pagesCount - 1,
+            onAutoplayChanged: setShouldAutoPlay,
+        }),
+        [isAutoplayEnabled, currentPageIndex, pagesCount, setShouldAutoPlay]
+    );
+    const pageControlsProps = React.useMemo(
+        () => ({
+            setShouldAutoplay: setShouldAutoPlay,
+            prevArrowEnabled,
+            nextArrowEnabled,
+        }),
+        [setShouldAutoPlay, prevArrowEnabled, nextArrowEnabled]
+    );
+
+    React.useEffect(() => {
+        if (controlsSetter) {
+            controlsSetter.setGoPrev(goPrev);
+            controlsSetter.setGoNext(goNext);
+            controlsSetter.setGoToPage(goToPage);
+            controlsSetter.setBulletsProps(bulletsProps);
+            controlsSetter.setAutoplayControlProps(autoplayControlProps);
+            controlsSetter.setPageControlsProps(pageControlsProps);
+            controlsSetter.setIsAutoplayEnabledSetter(setShouldAutoPlay);
+        }
+    }, [
+        controlsSetter,
+        goNext,
+        goPrev,
+        bulletsProps,
+        autoplayControlProps,
+        pageControlsProps,
+        goToPage,
+        prevArrowEnabled,
+        nextArrowEnabled,
+        autoplay,
+        isAutoplayEnabled,
+        setShouldAutoPlay,
+    ]);
+
+    let bullets: React.ReactNode = null;
+
+    if (renderBullets) {
+        bullets = renderBullets({numPages: pagesCount, currentIndex: currentPageIndex});
+    } else if (withBullets) {
+        bullets = <PageBullets {...bulletsProps} />;
+    }
+
+    const largePageOffset = '64px';
+    const vivoNewMobilePageOffset = '36px';
+
+    const bulletsContainer = (
+        <div
+            className={classNames(
+                styles.carouselBullets,
+                // when renderBullets is provided, we let the consumer decide if the bullets should be hidden
+                !renderBullets && {
+                    [styles.noCarouselBulletsDesktop]: pagesCountDesktop <= 1,
+                    [styles.noCarouselBulletsTablet]: pagesCountTablet <= 1,
+                    [styles.noCarouselBulletsMobile]: pagesCountMobile <= 1,
+                }
+            )}
+        >
+            {bullets}
+        </div>
+    );
+
+    return (
+        <div
+            {...getPrefixedDataAttributes({
+                'component-name': 'Carousel',
+                testid: 'Carousel',
+                ...dataAttributes,
+            })}
+            className={styles.carouselComponentContainer}
+            role="region"
+            aria-label={
+                ariaLabelProp
+                    ? `${ariaLabelProp}, ${texts.carouselRegion || t(tokens.carouselRegion)}`
+                    : undefined
+            }
+            aria-labelledby={ariaLabelProp ? undefined : ariaLabelledByProp}
+        >
+            <div
+                className={classNames(styles.carouselControlsVisibility, {
+                    [styles.carouselControlsVisibilityMobile]: pagesCountMobile > 1,
+                    [styles.carouselControlsVisibilityTablet]: pagesCountTablet > 1,
+                    [styles.carouselControlsVisibilityDesktop]: pagesCountDesktop > 1,
+                })}
+            >
+                {withControls ? (
+                    <Inline space="between" alignItems="center" className={styles.carouselControlsContainer}>
+                        {!!autoplay && (
+                            <div className={styles.carouselAutoplayControlContainer}>
+                                <CarouselAutoplayControl
+                                    isAutoplayEnabled={isAutoplayEnabled}
+                                    isAtLastPage={currentPageIndex === pagesCount - 1}
+                                    onAutoplayChanged={(autoplayEnabled: boolean) => {
+                                        if (!nextArrowEnabled && autoplayEnabled) {
+                                            goToPage(0);
+                                        }
+                                        setShouldAutoPlay(autoplayEnabled);
+                                    }}
+                                />
+                            </div>
+                        )}
+                        {bulletsContainer}
+                        <div className={styles.carouselPagesControlsContainer}>
+                            <CarouselPageControls
+                                goNext={goNext}
+                                goPrev={goPrev}
+                                setShouldAutoplay={setShouldAutoPlay}
+                                prevArrowEnabled={prevArrowEnabled}
+                                nextArrowEnabled={nextArrowEnabled}
+                                pagesCount={pagesCount}
+                                currentPageIndex={currentPageIndex}
+                            />
+                        </div>
+                    </Inline>
+                ) : (
+                    bullets && (
+                        <Inline space="around" className={styles.carouselControlsContainer}>
+                            {bulletsContainer}
+                        </Inline>
+                    )
+                )}
+            </div>
+            <div className={styles.carouselContainer}>
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+                <div
+                    className={classNames(styles.carousel, {
+                        [styles.centeredCarousel]: centered,
+                        [styles.carouselWithScrollMobile]: pagesCountMobile > 1,
+                        [styles.carouselWithScrollTablet]: pagesCountTablet > 1,
+                    })}
+                    role="list"
+                    style={{
+                        ...applyCssVars({
+                            [styles.vars.itemsPerPageDesktop]: String(itemsPerPageConfig.desktop),
+                            [styles.vars.itemsPerPageTablet]: String(itemsPerPageConfig.tablet),
+                            [styles.vars.itemsPerPageMobile]: String(itemsPerPageConfig.mobile),
+                            ...(mobilePageOffset === 'large'
+                                ? {[styles.vars.mobilePageOffset]: largePageOffset}
+                                : skinName === VIVO_NEW_SKIN
+                                  ? {[styles.vars.mobilePageOffset]: vivoNewMobilePageOffset}
+                                  : {}),
+                            ...(gap !== undefined ? {[styles.vars.gap]: String(gap)} : {}),
+                        }),
+                        scrollSnapType: free ? 'initial' : 'x mandatory',
+
+                        // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
+                        // there is a webkit rendering bug that causes a half pixel white line to appear at
+                        // the bottom of the scrollable area in retina displays when it has a height with
+                        // decimals. This extra padding avoids that line to partially cover the carousel
+                        // slides border:
+                        paddingBottom:
+                            isIos(platformOverrides) && !isRunningAcceptanceTest(platformOverrides)
+                                ? 0.5
+                                : undefined,
+                    }}
+                    ref={carouselRef}
+                    onTouchStart={(e) => {
+                        interactionDetectorRef.current.left = e.currentTarget.scrollLeft;
+                        interactionDetectorRef.current.interacting = true;
+                    }}
+                    onTouchEnd={(e) => {
+                        interactionDetectorRef.current.interacting = false;
+                        if (
+                            Math.abs(e.currentTarget.scrollLeft - interactionDetectorRef.current.left) >
+                            INTERACTION_DETECTOR_THRESHOLD
+                        ) {
+                            setShouldAutoPlay(false);
+                        }
+                    }}
+                    onKeyDown={() => {
+                        setShouldAutoPlay(false);
+                    }}
+                >
+                    {items.map((item, index) => (
+                        <div
+                            key={index}
+                            className={classNames(styles.carouselItem, itemClassName)}
+                            style={{
+                                ...itemStyle,
+                                scrollSnapStop: isAndroid(platformOverrides) ? 'always' : 'normal',
+                            }}
+                            role="listitem"
+                            data-item
+                        >
+                            {item}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+type CarouselProps = {
+    items: ReadonlyArray<React.ReactNode>;
+    itemStyle?: React.CSSProperties;
+    itemClassName?: string;
+    withBullets?: boolean;
+    /**
+     * @deprecated use CarouselContextProvider and CarouselContextConsumer to provide bullets props to custom bullets component.
+     * See an example here: https://mistica-web.vercel.app/?path=/story/components-carousels-carousel--with-carousel-context
+     */
+    renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
+    initialActiveItem?: number;
+    itemsPerPage?: ItemsPerPageProp;
+    /** scrolls one page by default */
+    itemsToScroll?: number;
+    mobilePageOffset?: 'regular' | 'large';
+    /** If true, scroll snap doesn't apply and the user has a free scroll */
+    free?: boolean;
+    autoplay?: boolean | {time: number; loop?: boolean};
+    withControls?: boolean;
+    onPageChange?: (newPageInfo: {pageIndex: number; shownItemIndexes: Array<number>}) => void;
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+
+    children?: void;
+};
+
+/**
+ * This is a workaround for a bug that happens when rendering a carousel in a webview inside a hidden tab (eg. Explore).
+ * The webview has a width of 0 when it's hidden, and the carousel doesn't render correctly when it's first shown.
+ * This hook forces the carousel to re-render when the webview is shown, by adding a key to the carousel component.
+ *
+ * This workaround gets executed only once, when the webview with changes from 0 to another value and then it removes the listener.
+ * Related issue: https://jira.tid.es/browse/WEB-1644
+ */
+const useWorkaroundForZeroWidthWebView = () => {
+    const [key, setKey] = React.useState(1);
+    React.useEffect(() => {
+        const handler = () => {
+            if (window.innerWidth !== 0) {
+                setKey((k) => k + 1);
+                window.removeEventListener('resize', handler);
+            }
+        };
+        // Set the listener only when the webview has zero width
+        if (window.innerWidth === 0) {
+            window.addEventListener('resize', handler);
+        }
+        return () => {
+            window.removeEventListener('resize', handler);
+        };
+    }, []);
+    return key;
+};
+
+export const Carousel = (props: CarouselProps): JSX.Element => {
+    const key = useWorkaroundForZeroWidthWebView();
+    return <BaseCarousel {...props} key={key} />;
+};
+
+type CenteredCarouselProps = {
+    items: ReadonlyArray<React.ReactNode>;
+    itemStyle?: React.CSSProperties;
+    itemClassName?: string;
+    withBullets?: boolean;
+    withControls?: boolean;
+    /**
+     * @deprecated use CarouselContextProvider and CarouselContextConsumer to provide bullets props to custom bullets component.
+     * See an example here: https://mistica-web.vercel.app/?path=/story/components-carousels-carousel--with-carousel-context
+     */
+    renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
+    initialActiveItem?: number;
+    onPageChange?: (newPageInfo: {pageIndex: number; shownItemIndexes: Array<number>}) => void;
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+
+    children?: void;
+};
+
+export const CenteredCarousel = ({
+    items,
+    itemStyle,
+    itemClassName,
+    withBullets,
+    renderBullets,
+    withControls = true,
+    initialActiveItem,
+    onPageChange,
+    dataAttributes,
+    'aria-label': ariaLabelProp,
+    'aria-labelledby': ariaLabelledByProp,
+}: CenteredCarouselProps): JSX.Element => {
+    const key = useWorkaroundForZeroWidthWebView();
+    return (
+        <BaseCarousel
+            key={key}
+            items={items}
+            itemStyle={itemStyle}
+            itemClassName={itemClassName}
+            itemsPerPage={{mobile: 1, tablet: 1, desktop: 3}}
+            centered
+            itemsToScroll={1}
+            gap={0}
+            withBullets={withBullets}
+            renderBullets={renderBullets}
+            withControls={withControls}
+            initialActiveItem={initialActiveItem}
+            onPageChange={onPageChange}
+            dataAttributes={dataAttributes}
+            aria-label={ariaLabelProp}
+            aria-labelledby={ariaLabelledByProp}
+        />
+    );
+};
+
+type SlideshowProps = {
+    items: ReadonlyArray<React.ReactNode>;
+    withBullets?: boolean;
+    autoplay?: boolean | {time: number; loop?: boolean};
+    initialPageIndex?: number;
+    withControls?: boolean;
+    onPageChange?: (newPageIndex: number) => void;
+    dataAttributes?: DataAttributes;
+    inverseBullets?: boolean;
+
+    children?: void;
+};
+
+/**
+ * This context is used internally to let other components (Hero) now if they are rendered inside a Slideshow
+ * to make some tweaks in the UI
+ */
+const SlideshowContext = React.createContext<{withBullets: boolean} | undefined>(undefined);
+
+export const useSlideshowContext = (): {withBullets: boolean} | undefined =>
+    React.useContext(SlideshowContext);
+
+export const Slideshow = ({
+    items,
+    withBullets,
+    withControls = true,
+    autoplay,
+    initialPageIndex = 0,
+    onPageChange,
+    dataAttributes,
+    inverseBullets = true,
+}: SlideshowProps): JSX.Element => {
+    const {platformOverrides} = useTheme();
+    const controlsSetter = React.useContext(CarouselControlsSetterContext);
+
+    const carouselRef = React.useRef<HTMLDivElement>(null);
+
+    // ScrollRight is initialized to 1 to avoid the next arrow being disabled when the carousel is first rendered.
+    // This is required to make the SSR test pass, and taking advantage of the fact that this is the base case (having more than one page)
+    const [{scrollLeft, scrollRight}, setScroll] = React.useState({scrollLeft: 0, scrollRight: 1});
+    const nextArrowEnabled = scrollRight !== 0;
+    const prevArrowEnabled = scrollLeft !== 0;
+
+    const goPrev = React.useCallback(() => {
+        const carouselEl = carouselRef.current;
+        if (carouselEl) {
+            carouselEl.scrollBy({left: -carouselEl.clientWidth, behavior: 'smooth'});
+        }
+    }, []);
+
+    const goNext = React.useCallback(() => {
+        const carouselEl = carouselRef.current;
+        if (carouselEl) {
+            carouselEl.scrollBy({left: carouselEl.clientWidth, behavior: 'smooth'});
+        }
+    }, []);
+
+    const goToPage = React.useCallback(
+        (pageIndex: number, animate = true) => {
+            const carouselEl = carouselRef.current;
+            if (carouselEl) {
+                carouselEl.scrollTo({
+                    left: carouselEl.clientWidth * pageIndex,
+                    behavior: animate ? 'smooth' : 'auto',
+                });
+            }
+        },
+        [carouselRef]
+    );
+
+    const currentIndex = carouselRef.current
+        ? Math.floor((scrollLeft + carouselRef.current.clientWidth / 2) / carouselRef.current.clientWidth)
+        : 0;
+
+    useIsomorphicLayoutEffect(() => {
+        const carouselEl = carouselRef.current;
+        if (carouselEl) {
+            const handleCarouselChange = () => {
+                const {scrollWidth, clientWidth} = carouselEl;
+                const scrollLeft = Math.round(carouselEl.scrollLeft);
+                const scrollRight = Math.round(scrollWidth - (scrollLeft + clientWidth));
+                setScroll({scrollLeft, scrollRight});
+            };
+
+            handleCarouselChange();
+
+            carouselEl.addEventListener('scroll', handleCarouselChange);
+            const unlistenResize = listenResize(carouselEl, handleCarouselChange);
+
+            return () => {
+                carouselEl.removeEventListener('scroll', handleCarouselChange);
+                unlistenResize();
+            };
+        }
+    }, [items.length]);
+
+    const {isAutoplayEnabled, shouldAutoplay, setShouldAutoPlay} = useShouldAutoplay(!!autoplay, carouselRef);
+
+    const hasAutoplayLoop = (typeof autoplay === 'object' && autoplay.loop) || false;
+
+    React.useEffect(() => {
+        if (shouldAutoplay && autoplay) {
+            const time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
+            const interval = setInterval(() => {
+                if (scrollRight !== 0) {
+                    goNext();
+                } else if (hasAutoplayLoop) {
+                    carouselRef.current?.scrollTo({left: 0, behavior: 'smooth'});
+                }
+            }, time);
+            return () => clearInterval(interval);
+        }
+    }, [autoplay, goNext, scrollRight, shouldAutoplay, hasAutoplayLoop]);
+
+    React.useEffect(() => {
+        if (currentIndex === items.length - 1 && !hasAutoplayLoop) {
+            setShouldAutoPlay(false);
+        }
+    }, [currentIndex, items.length, setShouldAutoPlay, hasAutoplayLoop]);
+
+    const pageInitialized = React.useRef(false);
+    const lastPageIndex = React.useRef(0);
+
+    React.useEffect(() => {
+        if (onPageChange) {
+            if (!pageInitialized.current) {
+                pageInitialized.current = initialPageIndex === currentIndex;
+            } else if (lastPageIndex.current !== currentIndex) {
+                onPageChange(currentIndex);
+            }
+        }
+
+        lastPageIndex.current = currentIndex;
+    }, [currentIndex, initialPageIndex, onPageChange]);
+
+    React.useEffect(() => {
+        const carouselEl = carouselRef.current;
+        if (initialPageIndex !== undefined && carouselEl && !pageInitialized.current) {
+            carouselEl.scrollTo({left: carouselEl.clientWidth * initialPageIndex});
+        }
+    }, [initialPageIndex]);
+
+    const bulletsProps = React.useMemo<PageBulletsProps>(
+        () => ({
+            currentIndex,
+            numPages: items.length,
+        }),
+        [currentIndex, items.length]
+    );
+
+    React.useEffect(() => {
+        if (controlsSetter) {
+            controlsSetter.setGoPrev(goPrev);
+            controlsSetter.setGoNext(goNext);
+            controlsSetter.setGoToPage(goToPage);
+            controlsSetter.setBulletsProps(bulletsProps);
+        }
+    }, [controlsSetter, goNext, goPrev, bulletsProps, goToPage]);
+
+    const bulletsContainer = withBullets && (
+        <div className={styles.slideshowBulletsContainer}>
+            <ThemeVariant variant={inverseBullets ? 'inverse' : 'default'}>
+                <PageBullets {...bulletsProps} />
+            </ThemeVariant>
+        </div>
+    );
+
+    const onlyControls = !withBullets && !autoplay;
+
+    return (
+        <SlideshowContext.Provider value={{withBullets: !!withBullets}}>
+            <ResetResponsiveLayout skipDesktop>
+                <div
+                    className={classNames(styles.slideshowContainer, {
+                        [styles.slideshowWithBullets]: !!withBullets,
+                    })}
+                    {...getPrefixedDataAttributes(dataAttributes, 'SlideShow')}
+                >
+                    {items.length > 1 &&
+                        (withControls ? (
+                            <ThemeVariant variant="media">
+                                <Inline
+                                    space={onlyControls ? 0 : 'between'}
+                                    alignItems="center"
+                                    className={classNames(styles.slideshowControlsContainer, {
+                                        [styles.slideshowControlsContainerSingleItem]: onlyControls,
+                                    })}
+                                >
+                                    {!!autoplay && (
+                                        <div className={styles.slideshowAutoplayControlContainer}>
+                                            <CarouselAutoplayControl
+                                                isAutoplayEnabled={isAutoplayEnabled}
+                                                isAtLastPage={currentIndex === items.length - 1}
+                                                onAutoplayChanged={(autoplayEnabled: boolean) => {
+                                                    if (
+                                                        currentIndex === items.length - 1 &&
+                                                        autoplayEnabled
+                                                    ) {
+                                                        goToPage(0);
+                                                    }
+                                                    setShouldAutoPlay(autoplayEnabled);
+                                                }}
+                                            />
+                                        </div>
+                                    )}
+                                    {bulletsContainer}
+                                    <CarouselPageControls
+                                        goNext={goNext}
+                                        goPrev={goPrev}
+                                        setShouldAutoplay={setShouldAutoPlay}
+                                        prevArrowEnabled={prevArrowEnabled}
+                                        nextArrowEnabled={nextArrowEnabled}
+                                        pagesCount={items.length}
+                                        currentPageIndex={currentIndex}
+                                    />
+                                </Inline>
+                            </ThemeVariant>
+                        ) : (
+                            withBullets && (
+                                <Inline space="around" className={styles.slideshowControlsContainer}>
+                                    {bulletsContainer}
+                                </Inline>
+                            )
+                        ))}
+                    <div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
+                        <div className={styles.slideshow} ref={carouselRef}>
+                            {items.map((item, index) => (
+                                <div
+                                    key={index}
+                                    className={styles.slideshowItem}
+                                    style={{
+                                        scrollSnapStop: isAndroid(platformOverrides) ? 'always' : 'normal',
+                                    }}
+                                >
+                                    {item}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </ResetResponsiveLayout>
+        </SlideshowContext.Provider>
+    );
+};